/* ==========================================================================
   Blok — FAQ: kop links (sticky op desktop), accordeon rechts
   Vlakken per band: op wit grijs-licht, op grijs/roze wit, op navy navy-90.
   ========================================================================== */
.b-faq {
  --b-faq-vlak: var(--grijs-licht);
  --b-faq-vlak-hover: var(--grijs);
  --b-faq-vlak-open: var(--wit);
  --b-faq-schaduw-open: var(--shadow-card);
  --b-faq-schaduw-hover: 0 0 0 0 transparent;
  --b-faq-rand: transparent;
  --b-faq-teken-rand: rgba(0, 0, 64, .2);
  --b-faq-teken-open: var(--navy);
  --b-faq-teken-open-fg: var(--wit);
  --b-faq-sterk: var(--tekst);
  --b-faq-marker: var(--blauw);
}
.b-faq.band--grijs,
.b-faq.band--roze {
  --b-faq-vlak: var(--wit);
  --b-faq-vlak-hover: var(--wit);
  --b-faq-schaduw-hover: var(--shadow-sm);
}
.b-faq.band--navy {
  --b-faq-vlak: var(--navy-90);
  --b-faq-vlak-hover: var(--navy-90);
  --b-faq-vlak-open: var(--navy-90);
  --b-faq-schaduw-open: 0 0 0 0 transparent; /* geen "none": staat ook in een komma-lijst */
  --b-faq-rand: var(--navy-80);
  --b-faq-teken-rand: rgba(255, 255, 255, .3);
  --b-faq-teken-open: var(--roze);
  --b-faq-teken-open-fg: var(--navy);
  --b-faq-sterk: var(--wit);
  --b-faq-marker: var(--blauw-licht);
}

.b-faq__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 1024px) {
  .b-faq__grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr);
    gap: var(--gap-lg);
    align-items: start;
  }
  /* De kop blijft in beeld bij een lange lijst */
  .b-faq__kop {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* Laatste blok op een navy band (vlak voor de navy footer): de scheidingslijn
   komt uit layout.css (main > .band--navy.section:last-child). */

/* --- Kop ------------------------------------------------------------- */
.b-faq__titel { max-width: 12em; }
.b-faq__lead { margin-top: 1.1rem; max-width: 40ch; }
.b-faq__actie { margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); }

/* --- Accordeon ------------------------------------------------------- */
.b-faq__lijst {
  display: grid;
  gap: .75rem;
}

.b-faq__item {
  border: 1px solid var(--b-faq-rand);
  border-radius: var(--r-md);
  background: var(--b-faq-vlak);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.b-faq__item:not([open]):hover {
  background: var(--b-faq-vlak-hover);
  box-shadow: var(--b-faq-schaduw-hover);
}
.b-faq.band--navy .b-faq__item:hover { border-color: rgba(255, 255, 255, .28); }
.b-faq__item[open] {
  background: var(--b-faq-vlak-open);
  box-shadow: var(--b-faq-schaduw-open);
}

/* Focusring om de hele vraagkaart, niet alleen om de vraagregel (die zou
   bij een open vraag over de eerste regel van het antwoord vallen) */
@supports selector(:has(*)) {
  .b-faq__vraag:focus-visible { box-shadow: none; }
  .b-faq__item:has(> .b-faq__vraag:focus-visible) { box-shadow: var(--focus), var(--b-faq-schaduw-open); }
}

/* Vraag: de hele regel is de knop. Geen standaarddriehoekje. */
.b-faq__vraag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, .85rem + .6vw, 1.4rem) clamp(1.1rem, .9rem + .8vw, 1.6rem);
  border-radius: inherit;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.b-faq__vraag::-webkit-details-marker { display: none; }
.b-faq__vraag::marker { content: ""; }
.b-faq__vraag:focus-visible { border-radius: var(--r-md); }
.b-faq__vraag-tekst { text-wrap: pretty; }

/* Plus/min: twee balkjes in een cirkel; open = de staande balk draait plat */
.b-faq__teken {
  position: relative;
  display: block;
  width: 2.25rem;
  aspect-ratio: 1;
  border: 1.5px solid var(--b-faq-teken-rand);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.b-faq__teken::before,
.b-faq__teken::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .85rem;
  height: 2px;
  margin: -1px 0 0 -.425rem;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.b-faq__teken::after { transform: rotate(90deg); }
@media (min-width: 640px) {
  .b-faq__vraag { gap: 1.25rem; }
  .b-faq__teken { width: 2.5rem; }
}

.b-faq__vraag:hover .b-faq__teken { border-color: currentColor; }
.b-faq__item[open] .b-faq__teken {
  border-color: var(--b-faq-teken-open);
  background: var(--b-faq-teken-open);
  color: var(--b-faq-teken-open-fg);
}
.b-faq__item[open] .b-faq__teken::after { transform: rotate(0deg); }

/* Antwoord */
.b-faq__antwoord {
  max-width: calc(var(--maxw-tekst) + 3.2rem);
  padding: 0 clamp(1.1rem, .9rem + .8vw, 1.6rem) clamp(1.25rem, 1rem + .8vw, 1.6rem);
  color: var(--tekst-zacht);
}
.b-faq__antwoord > * + * { margin-top: .85em; }
.b-faq__antwoord ul,
.b-faq__antwoord ol { padding-left: 1.25em; }
/* Het antwoord staat in een lijst: zonder dit tonen geneste lijsten open rondjes */
.b-faq__antwoord ul { list-style: disc; }
.b-faq__antwoord ol { list-style: decimal; }
.b-faq__antwoord li + li { margin-top: .3em; }
.b-faq__antwoord li::marker { color: var(--b-faq-marker); }
.b-faq__antwoord strong,
.b-faq__antwoord b { color: var(--b-faq-sterk); }
.b-faq.band--navy .b-faq__antwoord a { color: var(--wit); }

/* Openen met een zachte hoogte-overgang, waar de browser dat kan */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .b-faq__lijst { interpolate-size: allow-keywords; }
    .b-faq__item::details-content {
      height: 0;
      overflow: clip;
      transition: height .32s var(--ease), content-visibility .32s var(--ease) allow-discrete;
    }
    .b-faq__item[open]::details-content { height: auto; }
  }
}

@media (forced-colors: active) {
  .b-faq__item { border-color: CanvasText; }
  .b-faq__teken::before,
  .b-faq__teken::after { background: CanvasText; }
}