/* /veelgestelde-vragen/: zoekvak, onderwerpen en groepen. Alleen tokens uit site.css. */

.faq__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-xl) clamp(24px, 5vw, 80px); align-items: start; }
.faq__top h2 { max-width: 18ch; }
.faq__zoekvak { background: var(--kaart); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.25rem; }
.faq__zoek[hidden] { display: none; }
.faq__zoek .field { margin-bottom: .4rem; }
.faq__status { min-height: 1.4em; margin: 0 0 var(--sp-sm); font: 400 .82rem/1.4 var(--mono); color: var(--muted); }

.faq__groepen { border-top: 1px dashed var(--rule-2); padding-top: var(--sp-sm); }
.faq__groepen ol { list-style: none; padding: 0; margin: 0; counter-reset: groep; }
.faq__groepen li { margin: 0; counter-increment: groep; }
.faq__groepen a { display: flex; gap: .8rem; align-items: baseline; min-height: 44px; padding: .6rem 0; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--rule); }
.faq__groepen li:last-child a { border-bottom: 0; }
.faq__groepen a::before { content: counter(groep, decimal-leading-zero); font: 500 .78rem var(--mono); color: var(--oranje-tekst); }
.faq__groepen a:hover { color: var(--oranje-tekst); }

.faq__groep { max-width: 860px; }
[data-faq-groep][hidden], .faq__item[hidden] { display: none; }
.faq__antwoord .link { font-weight: 600; }

.faq__leeg { padding-block: var(--sp-2xl); }
.faq__leeg[hidden] { display: none; }
.faq__leeg p { color: var(--muted); }

@media (max-width: 820px) {
  .faq__top { grid-template-columns: 1fr; }
}