/* ==========================================================================
   AstroConnect — formulierpagina's (registreren en contact)
   --------------------------------------------------------------------------
   Vervangt de presentatie van css/rebuild-forms.css. Dat bestand blijft op
   de server staan voor pagina's die nog niet herbouwd zijn, maar wordt door
   registreer.php en contact.php niet langer geladen. Waarom het weg moest:

   1. `$formPage = true` zet de klasse form-page op de BODY, en de sectie had
      dezelfde klasse. `.form-page{padding:145px 22px 90px}` gold daardoor
      ook voor de body — een overblijfsel uit de tijd dat de kop vastgezet
      was. Dat gaf een dode band van 145px bóven het logo.
   2. De sectie kreeg #f8f4f8, terwijl het designsysteem koppen wit maakt.
      "Maak ruimte voor je talent" stond op 1,1:1 contrast.
   3. `.form-page .site-footer` mikte op een klasse die na de herbouw niet
      meer bestaat.

   De keuze hier: de pagina blijft licht, want dit is de enige pagina waar
   iemand tien velden moet invullen en invulvelden op wit lezen het best.
   De accenten komen uit het designsysteem: --ac-pink-solid (5,39:1 met wit)
   in plaats van de lichtroze variant die op wit onleesbaar is.
   ========================================================================== */

.ac-formpage {
  background: var(--ac-paper-2);
  color: var(--ac-text-on-paper);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  padding-inline: var(--ac-section-x);
}
.ac-formpage__shell { max-width: 68rem; margin-inline: auto; }

/* --- kop --- */
.ac-formpage__intro { max-width: 42rem; margin-bottom: clamp(var(--ac-6), 4vw, var(--ac-8)); }
.ac-formpage__eyebrow {
  display: block; margin: 0 0 var(--ac-3);
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: var(--ac-fs-eyebrow); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ac-pink-solid);
}
.ac-formpage h1 {
  color: var(--ac-text-on-paper);
  margin: 0 0 var(--ac-4);
}
.ac-formpage h1 em {
  font-family: var(--ac-display); font-style: normal;
  color: var(--ac-pink-solid);
}
/* :not() erbij omdat de eyebrow ook een <p> in deze wrapper is; zonder de
   uitsluiting won deze regel op specificiteit en werd de eyebrow 20px in de
   kleur van de inleiding. */
.ac-formpage__intro p:not(.ac-formpage__eyebrow) {
  color: var(--ac-text-on-paper-muted);
  font-size: var(--ac-fs-lead); margin: 0; max-width: var(--ac-measure);
}

/* --- indeling: formulier links, toelichting rechts --- */
.ac-formpage__layout { display: grid; gap: clamp(var(--ac-5), 3vw, var(--ac-8)); align-items: start; }
@media (min-width: 62rem) {
  .ac-formpage__layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
  .ac-formpage__aside { position: sticky; top: var(--ac-6); }
}

/* --- het formulier zelf --- */
.ac-formcard {
  background: var(--ac-paper);
  border: 1px solid var(--ac-line-paper);
  border-radius: var(--ac-radius-lg);
  padding: clamp(var(--ac-5), 3vw, var(--ac-8));
  box-shadow: 0 1.25rem 3rem rgba(20, 10, 40, .07);
}
.ac-formcard h2 {
  color: var(--ac-text-on-paper);
  margin: 0 0 var(--ac-2); font-size: var(--ac-fs-h3);
}
.ac-formcard__hint {
  margin: 0 0 var(--ac-6); color: var(--ac-text-on-paper-muted);
  font-size: var(--ac-fs-meta);
}
.ac-fields { display: grid; gap: var(--ac-5); }
@media (min-width: 40rem) { .ac-fields { grid-template-columns: 1fr 1fr; } }
@media (min-width: 40rem) { .ac-fields--three { grid-template-columns: repeat(3, 1fr); } }
.ac-field { display: grid; gap: var(--ac-2); min-width: 0; }
.ac-field--full { grid-column: 1 / -1; }
.ac-field > label {
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #4a4160;
}
.ac-field input,
.ac-field select,
.ac-field textarea {
  width: 100%; min-height: 3rem;
  padding: .7rem .8rem;
  font: inherit; color: var(--ac-text-on-paper);
  background: var(--ac-paper);
  border: 1px solid #c9c1dc; border-radius: var(--ac-radius-sm, .375rem);
  transition: border-color .15s var(--ac-ease), box-shadow .15s var(--ac-ease);
}
.ac-field textarea { min-height: 10rem; resize: vertical; line-height: var(--ac-lh-body); }
.ac-field input:hover, .ac-field select:hover, .ac-field textarea:hover { border-color: #a99cc4; }
.ac-field input:focus-visible,
.ac-field select:focus-visible,
.ac-field textarea:focus-visible {
  outline: none;
  border-color: var(--ac-pink-solid);
  box-shadow: 0 0 0 3px rgba(208, 17, 85, .22);
}
.ac-field__help { font-size: var(--ac-fs-meta); color: var(--ac-text-on-paper-muted); }
.ac-field__count { font-variant-numeric: tabular-nums; }
.ac-field__count[data-state="short"] { color: #8a2247; font-weight: 600; }

/* Instemmingsregel. Groter aanraakvlak dan de oude 13px-regel. */
.ac-consent {
  display: flex; gap: var(--ac-3); align-items: flex-start;
  padding: var(--ac-4);
  background: var(--ac-paper-2); border: 1px solid var(--ac-line-paper);
  border-radius: var(--ac-radius-sm, .375rem);
  font-size: var(--ac-fs-meta); color: var(--ac-text-on-paper-muted);
  cursor: pointer;
}
.ac-consent input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; accent-color: var(--ac-pink-solid); }
.ac-consent a { color: var(--ac-pink-solid); text-underline-offset: .2em; }

.ac-formcard__actions {
  display: flex; flex-wrap: wrap; gap: var(--ac-4); align-items: center;
  margin-top: var(--ac-6); padding-top: var(--ac-5);
  border-top: 1px solid var(--ac-line-paper);
}
.ac-formcard__actions .ac-btn--primary { min-height: 3rem; }
.ac-formcard__reassure { margin: 0; font-size: var(--ac-fs-meta); color: var(--ac-text-on-paper-muted); }

/* --- toelichting ernaast: donker, zodat de pagina de site aanraakt --- */
.ac-formaside {
  background: var(--ac-ink-2); color: var(--ac-text);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  padding: clamp(var(--ac-5), 2.5vw, var(--ac-6));
  display: grid; gap: var(--ac-4);
}
.ac-formaside h2 { color: var(--ac-text); margin: 0; font-size: var(--ac-fs-h4); }
.ac-formaside p { color: var(--ac-text-muted); font-size: var(--ac-fs-meta); margin: 0; }
.ac-formaside ol, .ac-formaside ul {
  margin: 0; padding-left: 1.15rem; display: grid; gap: var(--ac-2);
  color: var(--ac-text-muted); font-size: var(--ac-fs-meta);
}
.ac-formaside li::marker { color: var(--ac-pink); }
.ac-formaside a { color: var(--ac-pink); }
.ac-formaside__divider { border: 0; border-top: 1px solid var(--ac-line); margin: 0; }

/* --- meldingen van de handler --- */
.ac-formalert {
  margin: 0 0 var(--ac-6); padding: var(--ac-4) var(--ac-5);
  background: #fff1f6; border: 1px solid var(--ac-pink-solid);
  border-left-width: .25rem; border-radius: var(--ac-radius-sm, .375rem);
  color: #7d1741;
}
.ac-formalert p:last-child { margin-bottom: 0; }

/* Stappen binnen een licht kaartje: .ac-steps is voor donkere secties
   gemaakt, dus lijn en tekstkleur worden hier omgezet. */
.ac-formcard .ac-steps > li { border-top-color: var(--ac-line-paper); }
.ac-formcard .ac-steps > li::before { color: var(--ac-pink-solid); }
.ac-formcard .ac-steps h3 { color: var(--ac-text-on-paper); }
.ac-formcard .ac-steps p { color: var(--ac-text-on-paper-muted); }
.ac-formcard .ac-steps--compact > li:first-child { border-top: 0; padding-top: 0; }