/* ============================================================
   PAGE-FAQ.CSS — Veelgestelde vragen (Linnen gids)
   Vervangt legacy .section-title / .faq-category-title /
   .info-box. Alle kleuren via tokens.css-variabelen.
   FAQ-accordion zelf komt uit base.css.
   ============================================================ */

.faq-head { padding: var(--space-6) 0 var(--space-4); }
.faq-head .sb-kicker { margin-bottom: 12px; }
.faq-head h1 { margin: 0 0 12px; }
.faq-head .sb-lead { margin: 0; max-width: 52ch; }

.faq-body { padding-bottom: var(--space-8); }

.faq-category { margin-bottom: var(--space-6); }
.faq-category > h2 { margin: 0 0 6px; }
.faq-cat-intro { color: var(--color-text-muted); font-size: var(--text-lg); margin: 0 0 4px; }

/* Antwoord-links in merkgroen i.p.v. legacy grijs */
.faq-answer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}
.faq-answer a:hover { text-decoration-color: var(--color-primary); }

/* CTA-paneel in linnen-stijl (vervangt legacy terracotta .info-box) */
.faq-cta {
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: 34px 36px;
  margin-top: var(--space-6);
}
.faq-cta h2 { color: var(--color-surface); margin: 0 0 10px; font-size: 1.7rem; }
.faq-cta p { color: var(--color-on-dark); margin: 0 0 22px; max-width: 52ch; }

@media (max-width: 560px) {
  .faq-cta { padding: 28px 24px; }
}