/* ============================================================
   WHOLE-FIT - om en om donker en licht (homepage)
   Laag bovenop main.css. Verandert alleen kleur, nooit layout.
   Goedgekeurd 31 augustus 2026.

   Ritme van de pagina:
     header + hero .... donker
     marquee .......... teal (accentstreep tussen de blokken)
     pijlers .......... licht
     manifest ......... donker
     kernwaarden ...... licht
     trainingen ....... donker
     werkwijze ........ donker  (zit vast aan trainingen)
     mama (to be) ..... licht
     coach ............ donker
     reviews .......... licht
     cta-banner ....... donker
     locatie .......... licht
     footer ........... donker
   ============================================================ */

:root {
  --op-donker: rgba(251, 248, 241, 0.72);   /* lopende tekst op donker */
  --lijn-donker: rgba(251, 248, 241, 0.13); /* randjes en scheidingen */
  --vlak-donker: #27362F;                   /* kaarten op een donkere sectie */
  --vlak-donker-op: #2E3E39;                /* zwevend paneel, iets lichter */
  --clay-licht: #DD9A63;                    /* sterretjes, helderder op donker */
}

/* ---------- de donkere blokken ---------- */
.blok-donker { background: var(--ink); color: var(--op-donker); position: relative; }
.blok-donker h1,
.blok-donker h2,
.blok-donker h3,
.blok-donker h4 { color: var(--cream); }
.blok-donker p,
.blok-donker .lead { color: var(--op-donker); }
.blok-donker { --accent-color: var(--accent-color-dark); }

/* zachte teal gloed, hetzelfde trucje als bij het manifest-blok */
.blok-donker.met-gloed {
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(140, 189, 178, 0.17), transparent 62%),
    var(--ink);
}

/* ---------- knoppen op donker ---------- */
.blok-donker .btn-primary { background: var(--cream); color: var(--ink); }
.blok-donker .btn-primary:hover { background: var(--teal); color: var(--ink); }
.blok-donker .btn-outline { color: var(--cream); border-color: rgba(251, 248, 241, 0.28); }
.blok-donker .btn-outline:hover { border-color: var(--cream); }
.blok-donker .link { color: var(--teal); }

/* ---------- kaarten op donker ---------- */
.blok-donker .pillar,
.blok-donker .waarde,
.blok-donker .review,
.blok-donker .locatie-item,
.blok-donker .google-badge,
.blok-donker .hero-card {
  background: var(--vlak-donker);
  border: 1px solid var(--lijn-donker);
  box-shadow: none;
}
.blok-donker .waarde:hover { border-color: var(--teal-deep); }
.blok-donker .pillar p,
.blok-donker .waarde p,
.blok-donker .locatie-item p { color: var(--op-donker); }

/* ---------- hero ---------- */
.hero.blok-donker .hero-proof-item strong { color: var(--cream); }
.hero.blok-donker .hero-proof-item span { color: var(--op-donker); }
.hero.blok-donker .hero-proof-divider { background: var(--lijn-donker); }
/* na de span-regel hierboven, anders pakken de sterretjes de grijstint mee */
.hero.blok-donker .hero-proof .stars { color: var(--clay-licht); }
.hero.blok-donker .hero-card strong { color: var(--cream); }
.hero.blok-donker .hero-card span { color: var(--op-donker); }

/* ---------- marquee als accentstreep ---------- */
.marquee.streep-teal { background: var(--teal-deep); }
.marquee.streep-teal .marquee-track span { color: var(--cream); }
.marquee.streep-teal .marquee-track .sep { color: rgba(251, 248, 241, 0.5); }

/* ---------- werkwijze (stappen) ---------- */
.blok-donker .step { border-bottom-color: var(--lijn-donker); }
.blok-donker .step p { color: var(--op-donker); }

/* ---------- coach ---------- */
.coach.blok-donker blockquote { color: var(--cream); }
.coach.blok-donker blockquote em { color: var(--teal); }

/* ---------- aanbod-tegels: op mobiel regels, dan donkere kaartjes ---------- */
@media (max-width: 699px) {
  .blok-donker .aanbod-tile { background: var(--vlak-donker); border: 1px solid var(--lijn-donker); box-shadow: none; }
  .blok-donker .aanbod-tile h3 { color: var(--cream); }
  .blok-donker .aanbod-tile p { color: var(--op-donker); }
}

/* ---------- vinkjes in een split op donker ---------- */
.blok-donker .split ul.checks li { color: var(--op-donker); }

/* ============================================================
   NAVIGATIE - staat over alles heen, dus altijd donker uitgevoerd
   ============================================================ */
body.thema-donker nav.scrolled {
  background: rgba(29, 43, 38, 0.9);
  box-shadow: 0 1px 0 var(--lijn-donker);
}
body.thema-donker .nav-name { color: var(--cream); }
body.thema-donker .nav-mark { filter: brightness(0) invert(0.96); }
body.thema-donker .nav-links > li > a { color: var(--cream); }
body.thema-donker .nav-links > li > a:hover { background: rgba(251, 248, 241, 0.1); }
body.thema-donker .nav-links > li > a.active { background: rgba(140, 189, 178, 0.18); color: var(--teal); }
body.thema-donker .nav-links > li.nav-cta > a { background: var(--cream); color: var(--ink); }
body.thema-donker .nav-links > li.nav-cta > a:hover { background: var(--teal); color: var(--ink); }
body.thema-donker .nav-links > li.nav-cta-alt > a { background: transparent; border-color: rgba(251, 248, 241, 0.3); color: var(--cream); }
body.thema-donker .nav-links > li.nav-cta-alt > a:hover { background: rgba(251, 248, 241, 0.1); border-color: var(--cream); color: var(--cream); }
body.thema-donker .nav-toggle span { background: var(--cream); }
body.thema-donker .nav-lang a { color: var(--op-donker); }
body.thema-donker .nav-lang a:hover { background: rgba(251, 248, 241, 0.1); color: var(--cream); }
body.thema-donker .nav-lang a.active { background: rgba(140, 189, 178, 0.18); color: var(--teal); }

/* uitklapmenu onder Sport */
body.thema-donker .sub-panel {
  background: var(--vlak-donker-op);
  border: 1px solid rgba(251, 248, 241, 0.16);
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.6);
}
body.thema-donker .sub-head { color: var(--teal); }
body.thema-donker .sub-panel a { color: var(--op-donker); }
body.thema-donker .sub-panel a:hover { color: var(--teal); }

@media (max-width: 1180px) {
  body.thema-donker .nav-links { background: var(--ink); }
  body.thema-donker .sub-panel { background: none; border: none; box-shadow: none; }
  body.thema-donker.nav-open nav::before { background: var(--ink); box-shadow: 0 1px 0 var(--lijn-donker); }
  body.thema-donker .sub-toggle { color: var(--teal); }
  body.thema-donker .has-sub.sub-open .sub-toggle { background: rgba(140, 189, 178, 0.18); }
}