/*
-----------------------------------------
KONTAKTFORMULÄR (contactForm): ett Umbraco Forms-formulär med temat exellent (Views/Partials/Forms/Themes/exellent: Form.cshtml utan ramverksklasser).
Forms egen stilmall är avstängd i formuläret (Disable default stylesheet), så allt utseende kommer härifrån.
Klasserna är Forms egna: umbraco-forms-* (fält, etikett, ruta), field-validation-* och input-validation-* (valideringen) och umbraco-forms-submitmessage (tacket),
temats form-layout__* (raden med fältkolumner och knapparna) och sajtens knappar (btn btn--primary, buttons.css).
-----------------------------------------
*/

/* Raden med Forms kolumner: lika breda kolumner bredvid varandra, under 640 px under varandra */
.contact-form .form-layout__row {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-20);
}

.contact-form .form-layout__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

@media (width < 40rem) {
  .contact-form .form-layout__row {
    grid-auto-flow: row;
  }
}

/* Luft mellan rubriken och fälten och mellan fälten (32 px), så att varje etikett tydligt hör till sin ruta och inte står tätt under rutan ovanför */
.contact-form .section-header {
  margin-block-end: var(--space-32);
}

.contact-form .umbraco-forms-form {
  max-inline-size: var(--size-form);
}

.contact-form .umbraco-forms-page,
.contact-form .umbraco-forms-container {
  display: grid;
  gap: var(--space-32);
}

.contact-form .umbraco-forms-fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-form .umbraco-forms-field,
.contact-form .umbraco-forms-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact-form .umbraco-forms-label {
  font: var(--font-nav-primary);
  color: var(--text-heading);
}

.contact-form .umbraco-forms-indicator {
  font: var(--font-nav-secondary);
  color: var(--text-body);
}

.contact-form .umbraco-forms-field input.text,
.contact-form .umbraco-forms-field textarea {
  inline-size: 100%;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--text-body); /* 7,2:1 mot vitt (WCAG 1.4.11 kräver 3:1; --border-subtle gav 1,39:1), neutral så att rutan inte liknar de blå konturknapparna */
  border-radius: var(--radius-button);
  background: var(--surface-card);
  font: var(--font-body);
  color: var(--text-body);
}

.contact-form .umbraco-forms-field input.text {
  block-size: var(--size-control);
}

.contact-form .umbraco-forms-field textarea {
  min-block-size: var(--size-textarea);
  resize: vertical;
}

.contact-form .umbraco-forms-field input.input-validation-error,
.contact-form .umbraco-forms-field textarea.input-validation-error {
  border-color: var(--border-error);
}

.contact-form .field-validation-valid {
  display: none;
}

.contact-form .field-validation-error {
  font: var(--font-body-tight);
  color: var(--text-error);
}

/* Samtycket (Data Consent): rutan och texten på en rad, felet under */
.contact-form .dataconsent .umbraco-forms-field-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-8) var(--space-12);
}

.contact-form .dataconsent input[type="checkbox"] {
  inline-size: var(--size-checkbox);
  block-size: var(--size-checkbox);
  margin: 0;
  accent-color: var(--surface-accent);
}

.contact-form .dataconsent .umbraco-forms-field-wrapper > label {
  font: var(--font-body-tight);
  color: var(--text-body);
}

.contact-form .dataconsent .umbraco-forms-field-wrapper > label a {
  color: var(--text-accent);
  text-decoration: underline;
}

.contact-form .dataconsent .field-validation-error {
  grid-column: 1 / -1;
}

.contact-form .umbraco-forms-submitmessage,
.contact-form .umbraco-forms-submitmessage-html {
  display: block;
  padding: var(--space-24);
  border: 1px solid var(--border-subtle);
  background: var(--surface-light);
  font: var(--font-body);
  color: var(--text-heading);
}

/* Forms döljer sina hjälpelement (honungsburken, villkorsdata, markören efter inskick, dolda etiketter och fält) med umbraco-forms-hidden; sist här så att den slår display ovan */
.contact-form .umbraco-forms-hidden {
  display: none;
}