/* ============================================================
   IK GA LEVEN — DESIGN TOKENS
   10-weekse training voor vrouwen die geweld in hun relatie
   meemaken of hebben meegemaakt.

   Bron van waarheid: het website-document van Hiltje
   (Google Doc "2026 IK GA LEVEN CURSUS Website", doorgevoerd
   2026-07-09) + ik-ga-leven-design-system.md.

   Rolverdeling kleur (definitief):
     pruim    #6B1953  → primair: koppen-accent, knoppen, kaders
     roos     #D585AE  → secundair: eyebrows, zachte vlakken
     mint     #B8E5D7  → accent (dividers, onderranden)
     boter    #FFF8D1  → lichte band
     magenta  #CE12AE  → pop, SPAARZAAM: alleen de snel-weg-knop
                         en de 112-regel
     wit      #FFFFFF  → paginabasis (besluit 2026-07-09; verving ecru)

   LET OP naamgeving: Hiltje's website-document nummert de
   tinten soms anders dan de schalen hieronder (bv. "roos 200"
   in het doc = #ECBED6 = --rose-300 hier). De HEX-waarde is
   altijd leidend, niet de naam.
   ============================================================ */

/* ============================================================
   ZELF-GEHOSTE FONTS (2026-07-13)
   Privacyreden: geen Google Fonts-CDN meer op de publieke
   pagina's, dus geen verbinding met Google per paginabezoek
   (belangrijk voor dit publiek + AVG). Beide fonts vallen onder
   de SIL Open Font License; zelf hosten en meeleveren mag.
   ============================================================ */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('assets/fonts/SourceSerif4-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/WorkSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/WorkSans-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('assets/fonts/WorkSans-Italic.ttf') format('truetype');
}

:root {
  /* ---- Merkkleuren (bevestigd) ---- */
  --plum:        #6B1953;  /* Pruim — primair */
  --plum-hover:  #4E1240;  /* Diep pruim — hover */
  --rose:        #D585AE;  /* Roos — secundair (= --rose-500) */
  --rose-tint:   #F5E3EE;  /* Roos-tint — lichte roze band (legacy) */
  --mint:        #B8E5D7;  /* Mint — accent (= --mint-400) */
  --butter:      #FFF8D1;  /* Boter — lichte band (= --butter-300) */
  --magenta:     #CE12AE;  /* Magenta — pop, spaarzaam (= --magenta-500) */
  --ecru:        #F6F1EA;  /* Ecru — niet langer paginabasis (besluit 2026-07-09) */
  --white:       #FFFFFF;

  /* ---- Officiële kleurenschalen (aangeleverd door Hiltje, 2026-07-06) ----
     Bron van waarheid voor tinten. De merkkleuren hierboven vallen op vaste
     stappen: pruim = 700, roos = 500, mint = 400, boter = 300, magenta = 500.
     Waarden zijn 1-op-1 overgenomen (incl. eventuele hiaten in de schaal). */
  --plum-900:    #2D1422;
  --plum-800:    #471035;
  --plum-700:    #6B1953;  /* = --plum */
  --plum-600:    #84265F;
  --plum-500:    #9B2B7A;
  --plum-400:    #B25E8E;
  --plum-300:    #CB8FB1;
  --plum-200:    #E2C2D5;
  --plum-100:    #F8F0F5;
  --plum-50:     #FDF5F9;

  --rose-600:    #B65788;
  --rose-500:    #D585AE;  /* = --rose */
  --rose-400:    #E0A0C2;
  --rose-300:    #ECBED6;
  --rose-200:    #F8DCEA;
  --rose-100:    #FDF0F5;

  --mint-700:    #1A7A5A;
  --mint-600:    #1A3D35;
  --mint-500:    #87CCB6;
  --mint-400:    #B8E5D7;  /* = --mint */
  --mint-300:    #CFEEE5;
  --mint-200:    #E8F8F3;
  --mint-100:    #F1FAF7;

  --butter-700:  #7A5C20;
  --butter-600:  #9A7A00;
  --butter-500:  #F4E89A;
  --butter-400:  #FBF1B8;
  --butter-300:  #FFF8D1;  /* = --butter */
  --butter-200:  #FFFBEA;
  --butter-100:  #FFFDF2;

  --magenta-600: #B70F9B;
  --magenta-500: #CE12AE;  /* = --magenta */
  --magenta-400: #E03DC4;
  --magenta-200: #F5ACE8;
  --magenta-100: #FEF0FA;

  --ink:         #2D1422;
  --neutral-800: #4A3340;
  --neutral-700: #6E5563;
  --neutral-600: #9B7082;
  --neutral-500: #B59AA8;
  --neutral-400: #CDBAC5;
  --neutral-300: #E5D8DF;
  --neutral-200: #EFE6EB;
  --neutral-100: #F7F1F4;
  --neutral-50:  #FFFAF7;

  /* ---- Tekst ----
     Besluit 2026-07-09 (website-document): koppen én body in het
     donkere aubergine-zwart #2D1422. Het oude warm grijs #5C5556
     is vervallen. */
  --text:        var(--ink);
  --text-on-plum: var(--white);
  --text-muted:  var(--neutral-700);

  /* ---- Afgeleide tinten ---- */
  --rose-hover:   #C36F98;
  --mint-hover:   #9FD6C4;
  --border-rose:  rgba(213, 133, 174, 0.5); /* 1px roos @ 50% — scheidslijnen */
  --focus-ring:   0 0 0 3px rgba(107, 25, 83, 0.25);

  /* ---- Surfaces / secties ----
     Paginabasis is wit (besluit 2026-07-09). Elke sectie krijgt haar
     eigen bandkleur via de .section--*-modifiers hieronder. */
  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-band:    var(--rose-200);   /* opt-in band */
  --surface-butter:  var(--butter-300);
  --surface-plum:    var(--plum);
  --surface-menu:    var(--plum-50);    /* menu + hero (homepage) */
  --surface-banner:  var(--rose-300);   /* veiligheidsbanner */

  /* ---- Typografie: families ---- */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'Work Sans', system-ui, -apple-system, sans-serif;
  --font-joy:     'Special Elite', 'Courier New', monospace; /* joy-laag: alleen hoop/herstel-content */

  /* ---- Typografie: exacte specs ----
     Besluit Hiltje 2026-07-09 (website-document + expliciete keuze):
     terug naar de gemeten ChicSpark-maten — hero 42 / testimonial 36 /
     opt-in 32 / kop-onder-beeld 24. clamp() schaalt kleinere schermen
     vanzelf terug. */
  --fs-hero:        clamp(30px, 3.5vw, 42px);
  --lh-hero:        1.2;      /* ≈50.4px op 42px */
  --fs-testimonial: clamp(26px, 3vw, 36px);
  --lh-testimonial: 1.2;
  --fs-optin:       clamp(24px, 2.7vw, 32px);
  --lh-optin:       1.2;
  --fs-under-image: 24px;
  --lh-under-image: 1.2;
  --tracking-display: 0.4px; /* alle Source Serif 4-koppen */

  --fs-eyebrow:  15px;
  --lh-eyebrow:  1.3;      /* ≈19.5px */
  --tracking-eyebrow: 1.5px;

  --fs-body:     17px;
  --lh-body:     34px;     /* ≈2.0 — bewust ruim */

  --fs-button:    15px;    /* hoofdknoppen (doc: 15px) */
  --fs-button-sm: 13px;    /* open/kaart-knoppen (doc: 13px) */
  --lh-button:   1.3;
  --tracking-button: normal; /* doc: letterspacing normaal */

  --fs-menu:     14px;     /* menu: Work Sans medium, all caps */
  --fs-copyright: 11.2px;

  --weight-light:  300;  /* koppen */
  --weight-regular: 400; /* body */
  --weight-medium: 500;  /* eyebrows, knoppen, menu, statistieken-labels */
  --weight-bold:   700;  /* joy-laag */

  /* ---- Vorm & ritme ---- */
  --radius: 2px;          /* bijna recht — knoppen, kaders, inputs */
  --radius-circle: 50%;   /* genummerde stappen */
  --step-size: 52px;      /* diameter "1/2/3"-cirkels */
  --step-border: 2px solid var(--plum);

  --section-padding: 7rem;      /* genereuze witruimte tussen secties */
  --section-padding-mobile: 3rem;
  --container-max: 1120px;
  --gutter: 1.5rem;
  --hero-card-w: 600px;   /* breedte van de witte hero-kaart */
  --hero-overlap: 200px;  /* hoever de kaart over de foto valt = 1/3 van 600px */

  /* ---- Hairlines (doc: 0,25px dividers; 0.5px rendert betrouwbaar) ---- */
  --hairline: 0.5px;

  /* ---- Schaduw — ALLEEN op zwevende objecten (bv. ebook-mockup) ---- */
  --shadow-float: 0 24px 48px rgba(92, 85, 86, 0.18), 0 4px 12px rgba(92, 85, 86, 0.08);

  /* ---- Beweging — rustig, nooit verrassend ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
}

/* ============================================================
   HERBRUIKBARE KLASSEN
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Regelafbreking die ALLEEN op mobiel telt (<br class="br-mobile">): voor tekst
   die op desktop prima op 1 regel past, maar op smalle schermen op een lelijke
   plek afbreekt. Zet 'm op de gewenste knip-plek; op desktop doet-ie niets. */
.br-mobile { display: none; }
@media (max-width: 860px) {
  .br-mobile { display: initial; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  color: var(--text);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  color: var(--ink);       /* doc 2026-07-09: koppen in #2D1422 */
  margin: 0 0 0.5em;
}
/* Uitzondering (doc): statistieken- en testimonialkoppen in pruim */
.h--plum { color: var(--plum); }

/* ---- Eyebrow — kleine getrackte label boven een kop ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-medium);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rose);           /* rose-500 — eyebrows sitewide */
  margin: 0 0 0.75em;
}

/* ---- Koppen op vaste maten ---- */
.h-hero      { font-size: var(--fs-hero); line-height: var(--lh-hero); }
.h-testimonial { font-size: var(--fs-testimonial); line-height: var(--lh-testimonial); }
.h-optin     { font-size: var(--fs-optin); line-height: var(--lh-optin); }
.h-under-image { font-size: var(--fs-under-image); line-height: var(--lh-under-image); }

/* ---- Joy-laag — enkel voor hoop/herstel-content, spaarzaam ---- */
.joy {
  font-family: var(--font-joy);
  color: var(--magenta);
}

/* ---- Knoppen (doc 2026-07-09) ----
   Hoofdknop: plum-300 vlak met plum-700 onderrand, pruim tekst in
   kapitalen; hover vult naar pruim. Pijl schuift op hover. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--weight-medium);
  line-height: var(--lh-button);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  padding: 15px 30px 13px;
  border-radius: var(--radius);
  border: 0;
  border-bottom: 3px solid var(--plum);   /* onderrand-accent */
  background: var(--plum-300);
  color: var(--plum);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--plum); color: var(--plum-50); border-bottom-color: var(--plum-hover); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Open stijl (doc: kaartsecties): 13px, dunne plum-300 rand, vlakvulling
   volgt de sectie; hover vult naar vol plum-300, tekst blijft pruim. */
.btn--open {
  font-size: var(--fs-button-sm);
  background: transparent;
  color: var(--plum);
  border: 1px solid var(--plum-300);
  border-bottom-width: 1px;
  padding: 13px 26px 12px;
}
.btn--open:hover { background: var(--plum-300); color: var(--plum); border-color: var(--plum-300); }

/* Legacy-alias: bestaande pagina's gebruiken .btn--outline / .btn--fill */
.btn--outline {
  font-size: var(--fs-button-sm);
  background: transparent;
  color: var(--plum);
  border: 1px solid var(--plum-300);
  border-bottom-width: 1px;
  padding: 13px 26px 12px;
}
.btn--outline:hover { background: var(--plum-300); color: var(--plum); border-color: var(--plum-300); }

/* Massief pruim — opt-in knop (doc: fill plum-700, tekst plum-50) */
.btn--solid {
  background: var(--plum);
  color: var(--plum-50);
  border-bottom-color: var(--plum-hover);
}
.btn--solid:hover { background: var(--plum-hover); color: var(--plum-50); border-bottom-color: var(--plum-hover); }

.btn--fill {
  font-size: var(--fs-button-sm);
  background: var(--white);
  color: var(--plum);
  border: 1px solid var(--plum-300);
  border-bottom-width: 1px;
  padding: 13px 26px 12px;
}
.btn--fill:hover { background: var(--plum-300); color: var(--plum); border-color: var(--plum-300); }

/* Pijl die opschuift op hover — plaats <span class="btn__arrow">→</span> in de knop */
.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---- Snel-weg-knop — GEDEELD COMPONENT op elke pagina ----
   Besluit Hiltje 2026-07-09: massief magenta gevuld met witte tekst
   (verving de open stijl met magenta-100 vulling). Het ene felle
   element van de site. Werkt samen met assets/js/safety.js (klik + Esc). ---- */
.exit-btn {
  position: fixed; top: 14px; right: 14px; z-index: 1200;
  background: var(--magenta);
  color: var(--white);
  border: 1px solid var(--magenta);
  font-family: var(--font-body); font-size: 12px; font-weight: var(--weight-medium);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 14px; border-radius: var(--radius); cursor: pointer;
  box-shadow: var(--shadow-float);
  white-space: nowrap;
}
.exit-btn:hover { background: var(--magenta-600); color: var(--white); border-color: var(--magenta-600); }
.exit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(206, 18, 174, 0.35); }
.exit-btn__short { display: none; }
@media (max-width: 600px) {
  .exit-btn__full { display: none; }
  .exit-btn__short { display: inline; }
}

/* ---- Genummerde stappen (1/2/3) — pruim rand, geen vulling ---- */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--step-size);
  height: var(--step-size);
  border-radius: var(--radius-circle);
  border: var(--step-border);
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 20px;
  color: var(--plum);
  background: transparent;
}

/* ---- Kaart — bijna recht, wit, alleen schaduw als hij "zweeft" ---- */
.card {
  background: var(--surface-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-rose);
  padding: 2rem;
}
.card--float {
  border: none;
  box-shadow: var(--shadow-float);
}

/* ---- Scheidslijnen ----
   Basis: 1px roos op 50%. Hairline-varianten (doc: 0,25px) per sectie. */
.divider {
  border: none;
  border-top: 1px solid var(--border-rose);
  margin: 0;
}
.divider--hair      { border-top-width: var(--hairline); }
.divider--butter    { border-top-color: var(--butter-300); }
.divider--mint      { border-top-color: var(--mint-400); }
.divider--mint-500  { border-top-color: var(--mint-500); }
.divider--mint-700  { border-top-color: var(--mint-700); }
.divider--plum      { border-top-color: var(--plum); }

/* ---- Secties — bandkleuren per blok (doc 2026-07-09) ---- */
.section {
  padding: var(--section-padding) var(--gutter);
}
.section > .section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.section--band   { background: var(--surface-band); }    /* rose-200: opt-in */
.section--butter { background: var(--surface-butter); }
.section--plum   { background: var(--surface-plum); color: var(--text-on-plum); }
.section--plum h1, .section--plum h2, .section--plum h3 { color: var(--text-on-plum); }

.section--plum50    { background: var(--plum-50); }
.section--plum200   { background: var(--plum-200); }
.section--rose100   { background: var(--rose-100); }
.section--rose200   { background: var(--rose-200); }
.section--rose300   { background: var(--rose-300); }
.section--butter100 { background: var(--butter-100); }
.section--butter200 { background: var(--butter-200); }
.section--butter300 { background: var(--butter-300); }

@media (max-width: 768px) {
  .section { padding: var(--section-padding-mobile) var(--gutter); }
  :root {
    --fs-hero: clamp(28px, 8vw, 42px);
    --fs-testimonial: clamp(24px, 7vw, 36px);
    --fs-optin: clamp(22px, 6vw, 32px);
    --fs-under-image: clamp(19px, 5vw, 24px);
  }
}

/* ============================================================
   COMPONENTLAAG — de ChicSpark-signatuur, vertaald naar het merk
   Toegevoegd 2026-07-08 (proef op bijeenkomst.html), bijgewerkt
   2026-07-09 naar het website-document.
   ============================================================ */

/* Container voor pagina's die secties zonder eigen zijpadding bouwen
   (de funnelpagina's; de homepage gebruikt .wrap/.section__inner) */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hairlines aan de randen van de opt-in band (doc: 1px roos 300) */
.section--band {
  border-top: 1px solid var(--rose-300);
  border-bottom: 1px solid var(--rose-300);
}

/* ── Opt-in-blok: mockup links + Flodesk-form rechts ──────────────────────
   Herbruikbaar patroon (video.html, index.html #veiligheidsplan,
   veiligheidsplan.html #download). Opzet:

     <section class="section section--band section--optin">
       <div class="container optin-container">
         <div class="optin-narrow">
           <img class="optin-mock" src="..." alt="...">
           <div id="fd-form-XXXX"></div>        (Flodesk inline-form, rechts)
         </div>
       </div>
     </section>

   - .section--optin  = krappe strook: boven/ondermarge ~1,5 regelhoogte.
   - .optin-narrow    = gecentreerd, gebalanceerd paar (mockup links, form rechts).
   - Zet de Flodesk-breedte per pagina met --optin-form-w (matcht de breedte die
     in Flodesk zelf is ingesteld) en de mockupgrootte met --optin-mock-max.
   - Onder 1080px stapelt het; het formulier krijgt dan de volle breedte.
   Losse kop/tekst nodig (zoals op de homepage)? Zet die dan in de form-kolom,
   of gebruik alleen .section--optin voor de krappe strook op een eigen layout. */
.section--optin { padding-block: 1.5rem; }
.optin-container { max-width: 1160px; }
.optin-narrow {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem); text-align: left;
}
.optin-narrow p { color: var(--plum-400); }
.optin-narrow > div {                                  /* Flodesk-form-kolom */
  flex: 0 0 var(--optin-form-w, 753px); max-width: 100%; min-width: 0;
}
.optin-mock {                                          /* mockup vult de rest, links */
  flex: 1 1 auto; width: 100%;
  max-width: var(--optin-mock-max, 380px); height: auto; margin: 0;
}
@media (max-width: 1080px) {
  .optin-narrow { flex-direction: column; text-align: center; }
  .optin-narrow > div { flex: 0 0 auto; width: 100%; max-width: var(--optin-form-w, 753px); margin-inline: auto; }
  .optin-mock { flex: 0 0 auto; width: 100%; max-width: var(--optin-mock-max, 380px); margin: 0 auto 1.75rem; }
}
@media (max-width: 768px) {
  .section--optin { padding-block: 1.25rem; }
}

/* ── Veiligheidsbanner (.announce) — standaard bovenaan elke pagina ─────────
   Besluit 2026-07-08. Achtergrond roos 300, gecentreerd. De rechter-padding maakt
   ruimte voor de snel-weg-knop rechtsboven. Op mobiel blijft die knop rechtsboven
   (korte tekst "Snel weg"), dus daar volstaat 100px. Pagina's waar de knop op mobiel
   naar onderin springt (bijeenkomst, bevestiging) zetten de rechter-padding zelf terug
   naar var(--gutter) in hun eigen mobiele blok.
   HTML-structuur: <strong>Acuut gevaar? <span class="announce__112">Bel altijd 112.</span></strong>
   <span class="announce__second">... <a href="veiliglezen.html">Lees hoe je veilig meeleest</a>.</span> */
.announce {
  background: var(--rose-300); color: var(--plum); text-align: center;
  font-family: var(--font-body); font-size: 15px; font-weight: var(--weight-regular);
  line-height: 1.5;
  padding: 12px 215px 12px var(--gutter);
}
.announce a { color: inherit; text-underline-offset: 2px; }
.announce .announce__112 { color: var(--magenta); font-weight: var(--weight-medium); }
.announce .announce__second { color: var(--ink); }
.announce .announce__second a { color: var(--mint-700); }
@media (max-width: 600px) {
  .announce { padding-right: 125px; font-size: 13px; }
}

/* ── Hoofdmenu (.site-header-band) — gedeeld component ───────────────────────
   Vlak plum-50, Work Sans medium 14px in kapitalen, pruim. Begin en Podcast staan
   vast op roos-500 (.is-accent), de rest wordt roos-500 op hover. Onder 900px klapt
   het menu samen tot een hamburger.

   Submenu "Gratis" (2026-07-26 hersteld): het opent op hover (alleen op apparaten
   met een muis) en op klik (touch én muis). Het script staat in assets/js/nav.js.
   Wat er stuk was: tussen de knop en het uitklapmenu zat 0,9rem lege ruimte die
   BUITEN .nav-item viel, dus zodra de muis van de knop naar het menu bewoog viel
   de hover weg en klapte het menu dicht. De brug hieronder (.nav-sub::before)
   vult die ruimte onzichtbaar op. Daarnaast hield :focus-within het menu open
   zolang de knop focus had, waardoor een tweede klik niets leek te doen; dat
   openhouden doet nu de klasse .open via het script.
   LET OP: Esc is op deze site de snel-weg-toets (safety.js) en sluit dus géén menu.
   LET OP 2: alles hieronder staat bewust binnen .site-header-band. Pagina's zonder
   menu (bijeenkomst, bevestiging) hebben een eigen, andere .site-header met een
   .container erin; die mag hier niet door geraakt worden. */
.site-header-band { background: var(--surface-menu); position: relative; z-index: 900; }
.site-header-band .site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--gutter);
  max-width: var(--container-max); margin: 0 auto;
}
.site-header-band .logo img { height: 64px; width: auto; }
.site-header-band .site-nav { display: flex; gap: 1.9rem; align-items: center; }
.site-header-band .site-nav a, .nav-sub-toggle {
  font-family: var(--font-body); font-size: var(--fs-menu); font-weight: var(--weight-medium);
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--plum);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-header-band .site-nav a:hover, .nav-sub-toggle:hover { color: var(--rose-500); }
.site-header-band .site-nav a.is-accent { color: var(--rose-500); }
/* Submenu "Gratis" */
.nav-item { position: relative; }
.nav-sub {
  display: none; position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%);
  background: var(--white); border: 1px solid var(--rose-300); border-radius: var(--radius);
  box-shadow: var(--shadow-float); padding: 0.6rem 0; min-width: 240px; z-index: 950;
}
/* Onzichtbare brug over de 0,9rem tussenruimte, zodat de muis van de knop naar
   het menu kan lopen zonder dat de hover afbreekt. */
.nav-sub::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.9rem; }
.nav-item.open .nav-sub { display: block; }
@media (hover: hover) {
  .nav-item:hover .nav-sub { display: block; }
  /* Net dichtgeklikt terwijl de muis er nog boven hangt: hover mag het niet
     meteen weer openen (het script haalt deze klasse weg zodra de muis weggaat). */
  .nav-item.hover-off:hover .nav-sub { display: none; }
}
.nav-sub a { display: block; padding: 0.55rem 1.25rem; white-space: nowrap; }
.nav-sub a:hover { background: var(--rose-100); }
.nav-sub-toggle .caret {
  font-size: 10px; display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-item.open .nav-sub-toggle .caret { transform: rotate(180deg); }
/* Hamburger (mobiel) */
.nav-toggle {
  display: none; background: none; border: 1px solid var(--plum-300); border-radius: var(--radius);
  color: var(--plum); font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-medium);
  letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 14px; cursor: pointer;
}
/* Grens verhoogd van 900px naar 990px, laatst gemeten 2026-07-30.
   Aanleiding: "Steun" werd "Steun IK GA LEVEN" en "Over IK GA LEVEN" werd
   "De cursus". Meet ALTIJD met white-space:nowrap op de menu-items, anders meet je
   een al afgebroken regel en kom je te laag uit. Stand nu: de nav heeft 845px
   nodig, plus logo 64 en 2x gutter 24 = 957px minimale schermbreedte. Op 990 zit
   daar 33px lucht in. Alleen "Steun IK GA LEVEN" zonder "De cursus" vroeg 1012px;
   met het oude korte "Steun" was het 910px, vandaar de oorspronkelijke 900.
   Onder deze grens verschijnt de hamburger, dus ook op een half gedeeld scherm van
   een 1920px-monitor (960px) blijft de balk heel.
   Verander je de menu-items, meet dan opnieuw. */
@media (max-width: 990px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .site-header-band .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface-menu); border-top: 1px solid var(--rose-300);
    border-bottom: 1px solid var(--rose-300); padding: 0.5rem 0 1rem;
  }
  .site-header-band .site-nav.open { display: flex; }
  .site-header-band .site-nav > a,
  .site-header-band .site-nav .nav-item { padding: 0.7rem var(--gutter); }
  /* Mobiel staan de drie gratis-links gewoon open; de knop is daar een kopje,
     dus geen pijltje en geen klik-gedrag. */
  .nav-sub {
    display: block; position: static; transform: none; box-shadow: none; border: 0;
    background: transparent; padding: 0.25rem 0 0 1rem; min-width: 0;
  }
  .nav-sub::before { content: none; }
  .nav-sub a { padding: 0.45rem 0; }
  .nav-sub a:hover { background: transparent; }
  .nav-sub-toggle { cursor: default; }
  .nav-sub-toggle .caret { display: none; }
}

/* ── Enkele menu-link (.site-header-link) — voor pagina's die bewust GEEN
   volledig uitklapmenu krijgen (vandaag: alleen veiligheidsplan.html), maar
   wel een weg terug nodig hebben voor bezoekers die via een zoekmachine
   rechtstreeks op de pagina landen. Zelfde look als een gewone menu-link,
   zonder de hamburger/submenu-machinerie. */
.site-header-band .site-header-link {
  font-family: var(--font-body); font-size: var(--fs-menu); font-weight: var(--weight-medium);
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--plum);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-header-band .site-header-link:hover { color: var(--rose-500); }

/* ── Hero — plum-50 vlak, witte tekstkaart links, doorlopende foto rechts ────
   Gebruikt op index, informatie, veiligheidsplan en bijeenkomst. De foto zet je
   per pagina op de .hero-photo met inline styles:
     background-image: url('...')   de foto (verplicht; als echte property zodat het
                                    pad relatief aan de PAGINA resolvet, niet aan tokens.css)
     --hero-photo-pos   focuspunt van de foto (default center; bv. 50% 60%)
     --hero-photo-left  waar de foto begint vanaf links (default 34%)
     --hero-photo-flip  bv. scaleX(-1) om de foto horizontaal te spiegelen
   Op mobiel stapelt het: foto bovenaan, kaart eronder. */
.hero {
  position: relative;
  background: var(--plum-50);
  min-height: 800px;      /* vaste herohoogte: op elke pagina dezelfde foto-verhouding,
                             ongeacht hoeveel tekst er in de kaart staat */
  display: flex;
  align-items: center;    /* kaart verticaal gecentreerd in de vaste hoogte */
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem);
}
.hero-photo {
  /* De foto begint waar de kaart ophoudt, min de gewenste overlap. Zo valt de
     kaart op ELKE schermbreedte met precies --hero-overlap (1/3) over de foto,
     terwijl de kaart uitgelijnd blijft met de rest van de pagina. Een pagina kan
     dit overrulen met een eigen --hero-photo-left. */
  position: absolute; top: 0; bottom: 0; right: 0;
  left: var(--hero-photo-left, calc(max((100% - var(--container-max)) / 2, 0px) + var(--gutter) + var(--hero-card-w) - var(--hero-overlap)));
  background-color: var(--rose-tint);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-photo-pos, center);
  transform: var(--hero-photo-flip, none);
}
.hero .container { position: relative; flex: 1 1 auto; width: 100%; }
.hero-card {
  background: var(--white);
  width: min(var(--hero-card-w), 100%);
  padding: clamp(2rem, 4vw, 3.5rem);
}
.hero-card p { margin-bottom: 1.4em; }
.hero-card .btn { margin-top: 0.4rem; }
.hero-meta {
  font-size: var(--fs-eyebrow); font-weight: var(--weight-medium);
  letter-spacing: 1px; text-transform: uppercase; color: var(--plum); margin: 0 0 1.8rem;
}
@media (max-width: 860px) {
  .hero { padding-top: 0; min-height: 0; display: block; }  /* mobiel: gewoon stapelen */
  .hero-photo {
    position: static; transform: none;
    min-height: 320px; margin-bottom: 1.6rem;
  }
  /* kaart blijft wit op mobiel; hij vult de containerbreedte onder de foto */
  .hero-card { width: 100%; }
}

/* ── Over Hiltje (about-split) — rose-100-paneel links, foto rechts ─────────
   Gebruikt op index, informatie en bijeenkomst. Identiek; foto is hiltje.jpg. */
.about-split { display: grid; grid-template-columns: 1fr 1fr; }
.about-text {
  background: var(--rose-100);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 5vw, 5rem) clamp(var(--gutter), 4vw, 4rem);
}
.about-text > div { max-width: 520px; }
.about-divider {
  width: 300px; max-width: 80%; height: 0;
  border: 0; border-top: var(--hairline) solid var(--mint-700);
  margin: 0 0 1.5rem;
}
.about-photo-side { position: relative; min-height: 560px; }
.about-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 25%;
}

/* About-split: mobiel gestapeld (foto boven, paneel eronder) */
@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; }
  .about-photo-side { order: -1; min-height: 380px; }
}

/* ── Footer ────────────────────────────────────────────────────────────────
   Twee vormen delen dezelfde bouwstenen:
   • Homepage: volledige footer met menukolommen + Instagram-strip (footer-grid,
     footer-col, footer-ig-head, ig-strip, footer-hair).
   • Alle andere pagina's: vereenvoudigde footer = alleen de .safety-block.
   Beide gebruiken .site-footer als omhulsel, .footer-inner als breedtebegrenzer
   en .copyright als witte balk eronder. */
.site-footer { background: var(--butter-100); padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) 0; }
.footer-inner { max-width: var(--container-max); margin: 0 auto; }

/* Volledige footer (homepage): menukolommen + Instagram-strip */
.footer-grid {
  display: grid; grid-template-columns: 1fr 2.4fr 1fr; gap: 0;
  padding-bottom: 3rem; align-items: start;
}
.footer-col { text-align: center; }
.footer-col--menu { padding-top: 2.2rem; }
.footer-col--ig {
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  border-left: var(--hairline) solid var(--plum);
  border-right: var(--hairline) solid var(--plum);
}
.footer-col h4 {
  display: inline-block;
  font-family: var(--font-display); font-weight: var(--weight-light);
  font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
  border-bottom: var(--hairline) solid var(--plum);
  padding-bottom: 0.55rem; margin: 0 0 1.2rem;
}
.footer-col a {
  display: block; font-family: var(--font-body); font-size: 13px;
  font-weight: var(--weight-medium); letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 0.85rem; text-decoration: none;
}
.footer-col a:hover { color: var(--plum); }
.footer-ig-head {
  font-family: var(--font-display); font-weight: var(--weight-light);
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.25; color: var(--mint-700);
  margin: 0 0 1.4rem; white-space: nowrap;
}
.ig-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.ig-strip a { display: block; border-radius: var(--radius); overflow: hidden; }
.ig-strip img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: opacity var(--dur-fast) var(--ease-out); }
.ig-strip a:hover img { opacity: 0.85; }
.footer-hair { border: 0; border-top: var(--hairline) solid var(--plum); margin: 0; }

/* Veiligheidsblok — staat in elke footer, ook de vereenvoudigde */
.safety-block { padding: 2rem 0 2.5rem; font-size: 15px; line-height: 1.8; max-width: 820px; }
.safety-block p { max-width: none; margin: 0 0 0.75rem; }
.safety-block p:last-child { margin: 0; }
.safety-block strong { color: var(--ink); }
.safety-block .call112 { color: var(--magenta); font-weight: var(--weight-medium); }

/* Witte copyright-balk onder de footer */
.copyright {
  background: var(--white); text-align: center;
  font-family: var(--font-body); font-size: var(--fs-copyright); color: var(--ink);
  padding: 1.1rem var(--gutter);
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-col--menu { padding-top: 0; }
  .footer-col--ig {
    border-left: 0; border-right: 0; padding: 2rem 0;
    border-top: var(--hairline) solid var(--plum);
    border-bottom: var(--hairline) solid var(--plum);
  }
}

.section--butter {
  border-top: 1px solid var(--border-rose);
  border-bottom: 1px solid var(--border-rose);
}

/* Korte gecentreerde divider onder een kop (modifier op .divider) */
.divider--short {
  width: 140px;
  margin: 1.6rem auto 0;
}
.divider--short.divider--left { margin-left: 0; }

/* Strip tussen hairlines */
.strip {
  border-top: 1px solid var(--border-rose);
  border-bottom: 1px solid var(--border-rose);
  padding: 1.5rem 0;
}
.strip--roomy { padding: 3rem 0; }
.strip-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 3.5rem;
}
.strip-items span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Cijferrij (doc: witte sectie, waarden en labels in pruim,
   onderrand mint-500 op de sectie) */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2.5rem;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(32px, 4vw, 42px);
  color: var(--plum);
  line-height: 1.1;
}
.stat-label {
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--plum);
}
.section--stats { border-bottom: 1px solid var(--mint-500); }

/* Getint binnenpaneel dat in een gewone sectie zweeft */
.panel {
  background: var(--rose-tint);
  padding: clamp(2.5rem, 5vw, 4.5rem);
}
.panel--butter { background: var(--butter); }

/* Foto met offset-vlak erachter (de gelaagde portretvorm) */
.photo-offset { position: relative; }
.photo-offset::before {
  content: "";
  position: absolute;
  top: 2.2rem; left: 2.2rem; right: -2.2rem; bottom: -2.2rem;
  background: var(--butter);
}
.photo-offset > * { position: relative; }

/* Omcirkeld aanhalingsteken boven een citaat
   (doc testimonials: rond icoon met dikke mint-500 rand) */
.quote-circle {
  width: 4.6rem; height: 4.6rem;
  margin-inline: auto;
  display: grid; place-items: center;
  border: 3px solid var(--mint-500);
  border-radius: 50%;
  background: var(--white);
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--plum);
  line-height: 1;
}

/* Signatuur-knop voor op een donker vlak: boter met roos onderrand */
.btn--tint-invert {
  background: var(--butter);
  color: var(--plum);
  border: 0;
  border-bottom: 3px solid var(--rose);
  border-radius: var(--radius) var(--radius) 0 0;
}
.btn--tint-invert:hover { background: var(--white); color: var(--plum); }