/* Blok: FAQ */
.faq-title{ max-width:24ch; }

/* Bewust géén eigen max-width op de lijst. Die zorgde ervoor dat de accordeon
   op 860px eindigde terwijl kop en intro de volle 1280px gebruikten; de vragen
   leken daardoor niet uitgelijnd met de rest van de sectie. Wil je het geheel
   smaller, kies dan "Inhoudsbreedte: smal" in de layout-groep — dan
   verschuiven kop, intro én vragen samen. */
.faq-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
	list-style:none; cursor:pointer;
	display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
	padding:clamp(1.1rem,2vw,1.6rem) 0;
	font-family:var(--font-head); font-weight:700;
	font-size:clamp(1.05rem,.9rem + .5vw,1.35rem); letter-spacing:-.01em; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--accent); }
.faq-item summary .faq-ico{ flex:none; width:26px; height:26px; position:relative; transition:transform .25s var(--ease); }
.faq-item summary .faq-ico::before,
.faq-item summary .faq-ico::after{ content:""; position:absolute; background:var(--red); border-radius:2px; }
.faq-item summary .faq-ico::before{ top:12px; left:3px; right:3px; height:2px; }
.faq-item summary .faq-ico::after{ left:12px; top:3px; bottom:3px; width:2px; }
.faq-item summary .faq-ico::before{ transition:opacity .2s var(--ease); }
/* Open: de plus wordt een minteken. Het icoon draait een kwartslag en de
   liggende balk verdwijnt; de staande balk staat na de draai horizontaal.
   (Het omgekeerde — de staande balk verbergen — liet een verticaal streepje
   staan in plaats van een minteken.) */
.faq-item[open] summary .faq-ico{ transform:rotate(90deg); }
.faq-item[open] summary .faq-ico::before{ opacity:0; }
.faq-answer{ padding:0 0 clamp(1.1rem,2vw,1.6rem); max-width:70ch; color:var(--ink-soft); font-size:var(--fs-lead); }
.faq-answer > * + *{ margin-top:.8em; }

/* Op een donkere band */
.band .faq-list, .band .faq-item{ border-color:var(--band-hair); }
.band .faq-item summary{ color:#fff; }
.band .faq-answer{ color:rgba(255,255,255,.78); }
.band .faq-item summary .faq-ico::before,
.band .faq-item summary .faq-ico::after{ background:var(--brand-4); }