/* ---------- Leadformulier in stappen (app/views/sections/form.php + assets/js/form-steps.js) ----------
 * Zonder JavaScript: alle stappen onder elkaar, gescheiden door een stippellijn.
 * Met JavaScript (.is-stepped): één stap tegelijk met een dunne groene voortgangslijn.
 */
.lead-steps [hidden] { display: none !important; }
.lead-steps { scroll-margin-top: calc(var(--header-h) + var(--space-16)); }

/* Voortgang: "Stap 1 van 3" klein erboven, de titel eronder, dan een dunne lijn. */
.steps-progress { display: grid; gap: 10px; }
.steps-progress__label { margin: 0; display: grid; gap: 2px; color: var(--color-ink-soft); outline: none; }
.steps-progress__count { font: 600 var(--text-small)/1.4 var(--font-body); color: var(--color-green); font-variant-numeric: tabular-nums; }
.steps-progress__title { font: 500 1.75rem/1.15 var(--font-heading); letter-spacing: -0.015em; color: var(--color-ink); }
/* Zelfde kop als het groene kaartje ernaast (.contact-card h2): Fraunces 500, 1.75rem. */
.steps-progress__label:focus-visible { outline: 2px solid var(--color-green); outline-offset: 4px; border-radius: 2px; }
.steps-progress__track { height: 3px; border-radius: 2px; background: var(--color-line); overflow: hidden; }
.steps-progress__fill { display: block; height: 100%; width: var(--progress, 33.33%); background: var(--color-green); transition: width var(--dur-open) var(--ease); }
@media (prefers-reduced-motion: reduce) { .steps-progress__fill { transition: none; } }

/* Eén stap */
.lead-step { display: grid; gap: var(--space-24); min-width: 0; }
.lead-step + .lead-step { padding-top: var(--space-24); border-top: 1px dashed var(--color-line-strong); }
.lead-step__head { display: grid; gap: var(--space-4); }
.lead-step__count { margin: 0; }
.lead-step__title { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.015em; }
.lead-step__intro { margin: 0; font-size: var(--text-body); color: var(--color-ink-soft); max-width: 52ch; }
.is-stepped .lead-step + .lead-step { padding-top: 0; border-top: 0; }
/* Met script staan nummer en titel al in de voortgangsbalk (voor schermlezers blijft de titel). */
.is-stepped .lead-step__count { display: none; }
.is-stepped .lead-step__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Knoppen Vorige / Volgende / Versturen */
.lead-step__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--space-8); }
.lead-form .lead-step__nav .btn { margin-top: 0; }
.lead-step__nav .btn--primary { margin-left: auto; }
.lead-steps:not(.is-stepped) .lead-step__nav .btn--primary { margin-left: 0; }

/* Keuzekaartjes type begeleiding: icoon los, zonder rondje. */
.lead-steps .choices--cards .choice__icon,
.lead-steps .choices--cards .choice__input:checked + .choice__box .choice__icon { width: auto; height: auto; background: none; padding-top: 1px; }

/* Vakken en niveau: aanklikbare vakjes die naar de volgende regel lopen. */
.lead-steps .choices:not(.choices--cards) { display: flex; flex-wrap: wrap; gap: 8px; }
.lead-steps .choices:not(.choices--cards) .choice { flex: 0 1 auto; max-width: 100%; }
.lead-steps .choices:not(.choices--cards) .choice__box { gap: 8px; padding: 10px 14px; }
.lead-steps .choices:not(.choices--cards) .choice__label { white-space: normal; font-weight: 600; }
.field--multi > .field__help { margin: calc(-1 * var(--space-4)) 0 0; clear: both; }

/* Meerkeuze: een vierkant vinkje toont dat er meer dan één mag. */
.choice__tick {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--color-line-strong); background: var(--color-white); color: transparent;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.choice__tick .icon { width: 12px; height: 12px; }
.choice__input:checked + .choice__box .choice__tick { border-color: var(--color-green); background: var(--color-green); color: var(--color-white); }

/* Klein tekstvak bij "Een ander vak" */
.field--other { margin-top: var(--space-16); max-width: 380px; gap: 6px; }
.field--other .label { font-size: var(--text-small); font-weight: 600; }
.field--other .field__control { min-height: 46px; padding: 10px 14px; }

@media (max-width: 560px) {
  .lead-step__nav .btn { flex: 1 1 auto; justify-content: center; }
  .lead-step__nav .btn--primary { margin-left: 0; }
  .field--other { max-width: none; }
}