/* ============================================================================
   Sitemap (/overzicht) — gedeeld door alle templates (Views/Site/Shared/Overzicht.cshtml, Tom 01-10-2026).
   Bovenaan de SEO-pagina's per onderwerp in kaders met chips, dan een lijn, dan de site in de volgorde van
   het menu. Kleuren via var(--brand-*); de letters erven van de template.
   ============================================================================ */
.wf-sitemap { background: #fff; padding: clamp(48px, 6vw, 84px) 0; }
.wf-sitemap-inner { max-width: 1300px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 40px); }

.wf-sitemap-kop { margin-bottom: clamp(22px, 2.6vw, 34px); }
.wf-sitemap-titel { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: #1c1c20; margin: 0; }

/* -- 1. SEO-pagina's: een kader per onderwerp, de pagina's als chips ------------------------------------ */
.wf-sitemap-seo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.wf-sitemap-kader {
  border: 1px solid rgba(20, 20, 25, .09); border-radius: var(--wf-radius-card, 14px);
  background: color-mix(in srgb, var(--brand-primary, #1c1c20) 3%, #fff);
  padding: 22px 22px 18px;
}
.wf-sitemap-kadertitel {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #1c1c20;
  text-decoration: none; margin-bottom: 14px;
}
a.wf-sitemap-kadertitel:hover { color: var(--brand-primary, #1c1c20); }
.wf-sitemap-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wf-sitemap-chips a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 100px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--brand-primary, #1c1c20) 22%, transparent);
  color: #3d3d44; font-size: 14px; line-height: 1.3; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.wf-sitemap-chips a:hover {
  background: var(--brand-primary, #1c1c20); border-color: var(--brand-primary, #1c1c20); color: #fff;
}

.wf-sitemap-lijn { border: 0; border-top: 1px solid rgba(20, 20, 25, .1); margin: clamp(40px, 5vw, 64px) 0; opacity: 1; }

/* -- 2. De site zelf, in de volgorde van het menu ---------------------------------------------------- */
.wf-sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 32px 26px; }
.wf-sitemap-hoofd {
  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-sitemap-hoofd:hover { color: var(--brand-primary, #1c1c20); }
.wf-sitemap-hoofd.-stil { border-bottom-color: rgba(20, 20, 25, .15); }
.wf-sitemap-groep ul { list-style: none; margin: 0; padding: 0; }
.wf-sitemap-groep li { margin-bottom: 8px; }
.wf-sitemap-groep li ul { margin: 8px 0 0 14px; }
.wf-sitemap-groep 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;
}
.wf-sitemap-groep 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-sitemap-groep li a:hover { color: var(--brand-primary, #1c1c20); }

@media (max-width: 575px) {
  .wf-sitemap-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .wf-sitemap-kader { padding: 18px 16px 14px; }
  .wf-sitemap-groep li a { min-height: 32px; }
}
@media (max-width: 379px) { .wf-sitemap-grid { grid-template-columns: 1fr; } }

[data-bs-theme="dark"] .wf-sitemap { background: transparent; }
[data-bs-theme="dark"] .wf-sitemap-titel,
[data-bs-theme="dark"] .wf-sitemap-kadertitel,
[data-bs-theme="dark"] .wf-sitemap-hoofd { color: #eceef2; }
[data-bs-theme="dark"] .wf-sitemap-kader { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
[data-bs-theme="dark"] .wf-sitemap-chips a { background: transparent; color: #d6d9e0; border-color: rgba(255, 255, 255, .2); }
[data-bs-theme="dark"] .wf-sitemap-groep li a { color: #c4c7ce; }