/* ==========================================================================
   Veel gestelde vragen — gedeeld component
   Gemeten: binnenpadding 3% boven en 5% onder (42,75/71,25px bij 1425px), op
   tablet 2% en op mobiel 10% — met een vaste px-waarde was de sectie op tablet
   85px te hoog. Kop met 30px eronder;
   items van 91px zonder tussenruimte, lijn 1px zwart. De vraagbalk heeft drie
   paddingwaarden: 3% desktop, 6% 4% tablet, 10% 6% mobiel — alle drie gemeten,
   want ze schalen niet mee uit één percentage. Het antwoordvlak is wit met
   2% 20% 0 2% / 0 20% 2% 4% / 0 6% 4% 6%. Actief item kleurt bruin.
   ========================================================================== */
/* Gemeten zijpadding: 0 desktop, 2% tablet, 3% mobiel */
.faq { background: var(--kleur-wit); padding: 3% 0 5%; }
/* Gemeten: om de hele lijst staat een lichtgrijze rand van 1px, alleen boven,
   links en rechts. Die 2px breedte tellen mee: zonder die rand is de vraagbalk
   2px breder en breekt een van de vragen op sommige schermbreedtes een regel
   eerder af dan in het origineel. */
.faq__lijst {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 30px;
  border: 1px solid rgb(240, 240, 240);
  border-bottom: 0;
}
/* De scheidingslijn zit in het origineel op de vraagbalk, niet onder het item */
.faq__vraag { border-bottom: 1px solid var(--kleur-zwart); }
.faq__vraag {
  background: var(--kleur-creme);
  /* Het origineel is een blok met een zwevend icoon rechts, geen flexrij:
     zo houdt de tekst de volle breedte op de regels onder het icoon. */
  display: block;
  padding: 3%;
  font-family: var(--font-kop);
  font-size: var(--tekst-h4);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}
.faq__vraag::-webkit-details-marker { display: none; }
.faq__item[open] > .faq__vraag { color: var(--kleur-bruin); }

.faq__icoon { position: relative; width: 16px; height: 16px; float: right; margin-left: var(--ruimte-md); }
.faq__icoon::before, .faq__icoon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--transitie), opacity var(--transitie);
}
.faq__icoon::before { inset: 7px 0; height: 2px; }
.faq__icoon::after  { inset: 0 7px; width: 2px; }
.faq__item[open] .faq__icoon::after { opacity: 0; transform: scaleY(0); }

.faq__antwoord {
  background: var(--kleur-wit);
  padding: 2% 20% 0 2%;
  font-size: var(--tekst-body);
  line-height: 1.5;
}
.faq__antwoord p + p, .faq__antwoord ul { margin-top: var(--ruimte-sm); }
.faq__antwoord ul { list-style: disc; padding-inline-start: 20px; }
.faq__antwoord li + li { margin-top: 4px; }
.faq__antwoord a { color: var(--kleur-bruin); }

@media (max-width: 1024px) {
  .faq { padding: 2%; }
  .faq__vraag { padding: 6% 4%; }
  .faq__antwoord { padding: 0 20% 2% 4%; }
}
@media (max-width: 767px) {
  .faq { padding: 10% 3%; }
  .faq__vraag { padding: 10% 6%; }
  .faq__antwoord { padding: 0 6% 4% 6%; }
}