/* ============================================================================
   SEO-pagina-overzicht — net boven de footer, gedeeld door alle templates.
   Toont de SEO-pagina's (IsSeoPage) gegroepeerd per categorie. Kleuren volgen de
   klant-huisstijl via var(--brand-*). Bewust merk-neutraal/clean; per template later
   fijn te stylen. Zie Views/Shared/_SeoOverview.cshtml.
   ============================================================================ */
.wf-seo-overview {
  background: #f6f6f4;
  border-top: 1px solid rgba(20, 20, 25, .07);
  padding: clamp(48px, 6vw, 84px) 0;
  font-family: var(--brand-font, "Inter", system-ui, sans-serif);
}
.wf-seo-inner { max-width: 1300px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 40px); }
.wf-seo-head { margin-bottom: clamp(24px, 3vw, 40px); }
.wf-seo-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; font-weight: 700; color: var(--brand-secondary, #8a7860); margin-bottom: 10px;
}
.wf-seo-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: #1c1c20; margin: 0; }
.wf-seo-intro { margin: 10px 0 0; color: #6b6b72; font-size: 15px; max-width: 60ch; }
.wf-seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 32px 26px; }
.wf-seo-cat {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #1c1c20;
  text-decoration: none; padding-bottom: 11px; margin-bottom: 12px;
  border-bottom: 2px solid var(--brand-secondary, #d18215);
}
a.wf-seo-cat:hover { color: var(--brand-secondary, #d18215); }
.wf-seo-col ul { list-style: none; margin: 0; padding: 0; }
.wf-seo-col li { margin-bottom: 8px; }
.wf-seo-col li a {
  display: inline-flex; align-items: flex-start; gap: 9px; color: #55555c; text-decoration: none;
  font-size: 14px; line-height: 1.45; transition: color .18s ease, padding-left .18s ease;
}
.wf-seo-col li a::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: 7px; border-radius: 1px;
  background: var(--brand-secondary, #d18215); transform: rotate(45deg); opacity: .75;
}
.wf-seo-col li a:hover { color: var(--brand-primary, #1c1c20); padding-left: 3px; }
/*  Eén kolom op de telefoon. Met twee kolommen blijft er op 375px zo'n 150px per kolom over: bijna
    elke paginanaam brak dan over twee regels, en doordat de ene categoriekop één regel is en de
    andere twee, begonnen de twee lijsten ook nog op ongelijke hoogte. Eén kolom leest rustiger en
    kost per saldo nauwelijks meer hoogte, omdat elke naam nu wél op één regel past. */
@media (max-width: 575px) { .wf-seo-grid { grid-template-columns: 1fr; gap: 0; } }

/*  De kop met een klapknop. Op grotere schermen doet de wrapper niets (display: contents), zodat de
    kop er precies zo uitziet als altijd, en bestaat de knop niet. */
.wf-seo-kop { display: contents; }
.wf-seo-klap { display: none; }

/*  Op een telefoon is elke groep een uitklapper die dicht begint (_SeoOverview.cshtml zet de klasse).
    Eén kolom met 78 links was daar ruim 3.500px, met regels van 20px hoog die nauwelijks te raken
    waren (Tom, 13-09-2026). Nu staat er per groep één regel, en een geopende groep heeft regels van
    44px. */
@media (max-width: 575px) {
  .wf-seo-kop {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-secondary, #d18215) 35%, transparent);
  }
  .wf-seo-kop .wf-seo-cat {
    flex: 1; min-width: 0; display: flex; align-items: center; min-height: 52px;
    margin: 0; padding: 0; border-bottom: 0;
  }
  .wf-seo-klap {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent;
    color: var(--brand-secondary, #d18215); cursor: pointer;
  }
  .wf-seo-klap svg { transition: transform .2s ease; }
  .wf-seo-col:not(.is-dicht) .wf-seo-klap svg { transform: rotate(180deg); }
  .wf-seo-col.is-dicht ul { display: none; }
  .wf-seo-col ul { padding: 4px 0 12px; }
  .wf-seo-col li { margin: 0; }
  .wf-seo-col li a { min-height: 44px; align-items: center; }
  .wf-seo-col li a::before { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .wf-seo-klap svg { transition: none; } }