/*
 * Keuzehulp op /tarieven (sectie 'planner', app/views/sections/planner.php).
 * Laadt na site.css en overschrijft daar de oude planner-regels (genummerde
 * bolletjes, gele gloed en "Meest gekozen"-pil).
 *
 * Zonder JavaScript: alle vragen onder elkaar in één witte kaart.
 * Met assets/js/planner.js (.planner.is-deck): een stapel kaarten. De huidige
 * vraag ligt vooraan, de volgende vragen steken er onderaan achter uit,
 * beantwoorde vragen schuiven naar links weg.
 */

/* ---------- Vragen (beide weergaven) ---------- */
.planner__deck { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 2rem + 1.5vw, 52px); }
.planner__card { min-width: 0; }
.planner .planner__q > legend { display: block; width: 100%; margin: 0 0 20px; padding: 0; font: inherit; }
.planner .planner__q > legend:focus { outline: none; }
.planner__step { display: block; margin-bottom: 6px; font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-green); }
.planner__label { display: block; font: 600 clamp(1.3125rem, 1.15rem + .6vw, 1.625rem)/1.2 var(--font-heading); letter-spacing: -.01em; color: var(--color-ink); text-wrap: balance; }
.planner__hint { display: block; margin-top: 6px; font-size: var(--text-small); line-height: 1.4; color: var(--color-ink-soft); }
.planner__error { margin: -6px 0 14px; font-size: var(--text-small); font-weight: 600; color: var(--color-error); }

.planner .planner__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.planner .planner__opts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.planner .choice__box { position: relative; min-height: 56px; padding: 13px 14px 13px 16px; gap: 12px; background: var(--color-paper); border-color: var(--color-line-strong); }
.planner .choice__label { white-space: normal; line-height: 1.3; }
.planner .choice__icon { color: var(--color-green); }

/* Vinkje rechts: leeg rondje (één keuze) of hokje (meerdere vakken). */
.choice__tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border: 1.5px solid var(--color-line-strong); border-radius: 50%; background: var(--color-white); color: var(--color-white); transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.choice__tick--box { border-radius: 6px; }
.choice__tick .icon { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-bounce); }

/* "Vaak gekozen": geen gloed, geen pil, geen kleur. Een stille kanttekening
   in schuin inkt met een turfje, zodat het leest als informatie over andere
   ouders en niet als een antwoord dat al aangeduid is. */
.planner .choice--popular .choice__box { border-color: var(--color-line-strong); box-shadow: none; animation: none; }
.choice__social { display: inline-flex; align-items: center; gap: 7px; justify-self: start; margin-top: 4px; font: italic 400 .875rem/1.2 var(--font-heading); color: var(--color-ink-soft); }
.choice__tally { flex: none; width: 26px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* Hover, focus en aangeduid (na de populaire regel, zelfde specificiteit). */
.planner .choice:hover .choice__box { border-color: var(--color-ink-soft); background: var(--color-white); }
.planner .choice:hover .choice__tick { border-color: var(--color-ink-soft); }
.planner .choice__input:focus-visible + .choice__box { outline: none; border-color: var(--color-green); box-shadow: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-green); }
.planner .choice__input:checked + .choice__box,
.planner .choice--popular .choice__input:checked + .choice__box { border-color: var(--color-green); background: var(--color-mint); box-shadow: inset 0 0 0 1px var(--color-green); animation: none; }
.planner .choice__input:checked + .choice__box .choice__tick { border-color: var(--color-green); background: var(--color-green); }
.planner .choice__input:checked + .choice__box .choice__tick .icon { opacity: 1; transform: none; }
.planner .choice__input:checked:focus-visible + .choice__box { box-shadow: inset 0 0 0 1px var(--color-green), 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-green); }
.planner__card.is-invalid .choice__box { border-color: var(--color-error); }

/* Knoppen onderaan een kaart. */
.planner__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-16); }
.planner.is-deck .planner__nav:not(:has(> :not([hidden]))) { display: none; }
.planner__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-right: auto; padding: 0 4px; border: 0; background: none; font: 600 var(--text-small)/1 var(--font-body); color: var(--color-ink-soft); cursor: pointer; }
.planner__back:hover { color: var(--color-ink); }
.planner__back:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; border-radius: 6px; }
.planner__back .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
.planner__back:hover .icon { transform: translateX(-3px); }
.planner .btn:disabled { opacity: .7; }

/* ---------- Zonder JavaScript: alles onder elkaar ---------- */
.planner:not(.is-deck) .planner__card:not(:last-child) .planner__nav { display: none; }
.planner:not(.is-deck) .planner__card:last-child .planner__nav { margin-top: clamp(36px, 2rem + 1.5vw, 52px); padding-top: var(--space-40); border-top: 1px solid var(--color-line); justify-content: flex-start; }

/* ---------- Stapel kaarten ---------- */
.planner.is-deck { max-width: 780px; gap: 18px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.planner.is-done { display: none; }

.planner__head { display: grid; gap: 10px; padding-inline: 4px; }
.planner__status { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.planner__count { margin: 0; font: 600 1.0625rem/1.3 var(--font-heading); color: var(--color-ink); }
.planner__time { margin: 0; font-size: var(--text-small); color: var(--color-ink-soft); }
.planner__track { height: 3px; border-radius: var(--radius-pill); background: var(--color-mint-strong); overflow: hidden; }
.planner__track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--color-green); transition: width var(--dur-reveal) var(--ease); }
.planner__trail { min-height: 1.5em; margin: 0; padding-inline: 4px; font-size: var(--text-small); line-height: 1.7; color: var(--color-ink-soft); }
.planner__trail-lead { margin-right: 6px; }
.planner__crumb + .planner__crumb::before { content: "·"; display: inline-block; margin: 0 9px 0 7px; color: var(--color-line-strong); font-weight: 700; }
.planner__crumb { display: inline; padding: 0; border: 0; background: none; font: 600 var(--text-small)/1.5 var(--font-body); color: var(--color-ink); text-align: left; text-decoration: underline dotted var(--color-line-strong); text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
.planner__crumb:hover { color: var(--color-green); text-decoration-color: var(--color-green); text-decoration-style: solid; }
.planner__crumb:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; border-radius: 4px; }

/* De kaart vooraan bepaalt de hoogte (--h, gezet door planner.js); de
   kaarten erachter krijgen dezelfde hoogte, zoals een echte stapel. */
.planner.is-deck .planner__deck { --peek: 16px; position: relative; display: block; height: calc(var(--h, 520px) + var(--peek) * 2 + 4px); }
.planner.is-deck .planner__card {
  --pos: 0;
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--h, 520px);
  display: flex; flex-direction: column;
  padding: clamp(24px, 1rem + 2.4vw, 44px);
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-line), var(--shadow-card);
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--pos) * var(--peek))) scale(calc(1 - var(--pos) * .045));
  z-index: calc(10 - var(--pos));
}
.planner.is-deck .planner__step { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.planner.is-deck .planner__nav { margin-top: auto; padding-top: 28px; }
.planner.is-deck .planner__card.is-current { height: auto; box-shadow: 0 0 0 1px var(--color-line), var(--shadow-float); }
.planner.is-deck .planner__card.is-behind { background: color-mix(in srgb, var(--color-white) 55%, var(--color-paper)); }
.planner.is-deck .planner__card.is-behind > * { opacity: 0; visibility: hidden; }
.planner.is-deck .planner__card.is-far { opacity: 0; }
.planner.is-deck .planner__card.is-gone { z-index: 11; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-18%, -6px) rotate(-6deg); transform-origin: 0 100%; }

@media (prefers-reduced-motion: no-preference) {
  .planner.is-deck.is-ready .planner__deck { transition: height 360ms var(--ease); }
  .planner.is-deck.is-ready .planner__card {
    transition: transform 460ms var(--ease), opacity 320ms var(--ease), height 360ms var(--ease), background-color 320ms var(--ease), box-shadow 320ms var(--ease), visibility 0s linear 0s;
  }
  .planner.is-deck.is-ready .planner__card.is-gone { transition: transform 460ms var(--ease), opacity 360ms var(--ease), visibility 0s linear 460ms; }
  .planner.is-deck.is-ready .planner__card > * { transition: opacity 260ms var(--ease) 140ms, visibility 0s linear 0s; }
  .planner.is-deck.is-ready .planner__card.is-behind > * { transition: opacity 120ms var(--ease), visibility 0s linear 120ms; }
}
@media (prefers-reduced-motion: reduce) {
  .planner.is-deck.is-ready .planner__card { transition: opacity 160ms linear, visibility 0s linear 0s; }
  .planner.is-deck.is-ready .planner__card.is-gone { transition: opacity 160ms linear, visibility 0s linear 160ms; transform: translateY(var(--peek)); }
  .planner__track span, .choice__tick .icon, .planner__back .icon { transition: none; }
}

/* ---------- Advies ---------- */
.advice:focus { outline: none; }
.advice__redo { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: var(--space-24) 0 0; }

/* ---------- Smal scherm ---------- */
@media (max-width: 640px) {
  .planner .planner__opts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .planner .choice__box { min-height: 52px; padding: 11px 12px 11px 14px; }
  .planner.is-deck .planner__deck { --peek: 11px; }
  .planner.is-deck .planner__card { padding: 22px 18px 18px; }
  .planner.is-deck .planner__nav { padding-top: 20px; }
  .planner.is-deck .planner__nav .btn { flex: 1 1 auto; justify-content: center; }
  .planner .planner__q > legend { margin-bottom: 16px; }
}
.advice__home { margin-top: var(--space-16); }