/*
Theme Name: Nooit meer kalkaanslag — Kadence child
Theme URI: https://nooitmeerkalkaanslag.be
Description: Child-theme van Kadence met de merkidentiteit van nooitmeerkalkaanslag.be (navy/roze, Bricolage Grotesque + Hanken Grotesk). Uitgangspunten: SEO/GEO vóór design, mobile-first. Bron van waarheid: BRANDBOOK.md.
Author: Nooit meer kalkaanslag
Template: kadence
Version: 0.23.1
Requires at least: 6.5
Text Domain: kadence-nmk
Domain Path: /languages
*/

/* ============================================================
   1. BRAND TOKENS  (uit BRANDBOOK.md — bron van waarheid)
   ============================================================ */
:root {
  /* Structuur — navy */
  --navy-900: #0A1A45;
  --navy-700: #17296A;
  --navy-500: #2A46A6;
  --navy-300: #8098DC;
  --navy-100: #DFE6F8;
  --navy-50:  #F2F5FD;

  /* Accent — roze */
  --pink-600: #E23E77;
  --pink-500: #FF5C8A;
  --pink-300: #FFA6C4;
  --pink-100: #FFE0EC;
  --pink-50:  #FFF2F7;

  /* Neutralen */
  --ink:     #0A1A45;
  --slate:   #5A6A8F;
  --line:    #E4E8F2;
  --bg:      #FFFFFF;
  --bg-soft: #F6F8FE;

  /* Waterhardheid-classificatie (zacht / matig / hard) */
  --hard-soft: var(--navy-300);
  --hard-mid:  var(--navy-500);
  --hard-hard: var(--pink-500);

  /* Typografie */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Schaduwen — zacht, navy-getint */
  --shadow-sm: 0 1px 2px rgba(26,42,102,.06), 0 2px 8px rgba(26,42,102,.07);
  --shadow-md: 0 6px 24px rgba(26,42,102,.12);
  --shadow-lg: 0 20px 48px rgba(26,42,102,.16);

  /* Beweging — spring-easing */
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Subtiele SVG-noise (textuur op grote secties) */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* Geen horizontaal scrollen (mobile-first randvoorwaarde).
   `clip` i.p.v. `hidden`: voorkomt horizontaal scrollen ZONDER een scroll-container
   te maken → `position: sticky` (o.a. sticky header) blijft werken. */
html, body { overflow-x: clip; }

/* ============================================================
   2. TYPOGRAFIE  (mobile-first, clamp voor vloeiend schalen)
   ============================================================ */

/* Kadence stuurt lettertypes via eigen CSS-variabelen. We mappen die naar onze
   merkfonts op body-niveau, zodat het Kadence-thema zélf overal (koppen, footer,
   blokken) Bricolage/Hanken gebruikt — ongeacht laadvolgorde van de stylesheets. */
body {
  --global-body-font-family: var(--font-body);
  --global-heading-font-family: var(--font-display);
}

/* Hetzelfde verhaal voor kleur. Kadence's global palette stond nooit ingesteld en
   draaide dus op zijn defaults — palette1 is #2B6CB0, het framework-blauw dat de
   anti-generic guardrails uitsluiten. Zichtbaar op o.a. het landnummer-blokje van
   het aanvraagformulier. Onze eigen .nmk-componenten gebruiken de tokens al; deze
   mapping vangt alles af wat Kadence zelf rendert (blokken, formulieren, footer).

   LET OP — dit moet op :root staan, niet op body. Kadence leidt een tweede laag af
   (--global-palette-btn-bg: var(--global-palette1), highlight, enz.) en declareert
   die óók op :root. Een var() in zo'n declaratie wordt geresolveerd op het element
   waar hij gedeclareerd is, niet daar waar hij gebruikt wordt — met een mapping op
   body bleven die afgeleiden dus gewoon op het oude blauw staan.

   Dubbele :root maakt de specificiteit (0,2,0) hoger dan Kadence's :root (0,1,0),
   zodat we winnen van zijn inline <style>, die ná onze stylesheet in de head komt.
   Volgorde volgt Kadence's semantiek: 1-2 accent, 3-4 tekst, 5-6 gedempt,
   7-8 vlakken, 9 wit. De statuskleuren (palette11-15) laten we met rust: dat zijn
   functionele signaalkleuren (succes/fout/waarschuwing), geen merkkleuren. */
:root:root {
  --global-palette1: var(--navy-500);   /* accent: links, actieve staten   */
  --global-palette2: var(--navy-700);   /* accent donker: hover            */
  --global-palette3: var(--navy-900);   /* koppen                          */
  --global-palette4: var(--ink);        /* bodytekst                       */
  --global-palette5: var(--slate);      /* secundaire tekst                */
  --global-palette6: var(--navy-300);   /* gedempt, iconen                 */
  --global-palette7: var(--line);       /* randen, scheidingslijnen        */
  --global-palette8: var(--bg-soft);    /* zachte sectie-achtergrond       */
  --global-palette9: var(--bg);         /* wit                             */
}

body,
.wp-site-blocks,
.entry-content {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--font-display);
  color: var(--navy-900);
  line-height: 1.15;
  text-wrap: balance;
}

h1, .entry-title, .wp-block-post-title {
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
h2 {
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
}
h3 {
  font-weight: 600;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  letter-spacing: -0.01em;
}

p, li { font-size: 1rem; }          /* min 16px */
a { color: var(--navy-700); }
a:hover { color: var(--pink-600); }

/* Eyebrow / label */
.nmk-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy-700);
}

/* Answer-first intro-blok (bovenaan elke pagina, 40–60 woorden) */
.nmk-answer {
  background: var(--navy-50);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 4vw, 2rem);
  font-size: 1.15rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   3. KNOPPEN  (primair = roze CTA, secundair = navy outline)
   ============================================================ */
.wp-block-button__link,
.nmk-btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 0.85em 1.6em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 48px;            /* touch-target */
  text-decoration: none;
  transition: transform .18s var(--ease),
              box-shadow .18s var(--ease),
              background-color .18s ease;
}

/* Primaire CTA */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.nmk-btn--primary {
  background-color: var(--pink-600);
  color: #fff;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.nmk-btn--primary:hover {
  background-color: #C42E66; /* iets donkerder dan pink-600 */
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active,
.nmk-btn--primary:active { transform: translateY(0); }

/* Secundair (outline) */
.wp-block-button.is-style-outline .wp-block-button__link,
.nmk-btn--secondary {
  background: transparent;
  color: var(--navy-700);
  border: 2px solid var(--navy-500);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.nmk-btn--secondary:hover { background: var(--navy-50); }

/*
 * ⚠️ Kadence stylet ELKE bare <button> en zet op :hover/:focus/:active
 * `color: var(--global-palette-btn-hover)` — via de mapping op :root:root is dat
 * palette9 = --bg = WIT. Die selector is (0,1,1) en wint van onze basisregels
 * hierboven (0,1,0), die de kleur alleen in rust declareren.
 *
 * Zonder de regels hieronder wordt het label van een outline-knop wit op een
 * lichte achtergrond zodra je hem aanraakt of aanklikt, en bij een <button> blijft
 * dat staan omdat die na de klik in :focus blijft. Ontdekt op 2026-08-29 op de
 * antwoordknoppen van de ontharder-check; daar staat de uitleg in het lang, in
 * assets/ontharder-check.css bij .nmk-oc__opt.
 *
 * Regel voor nieuwe componenten: geeft een bare <button> zijn eigen kleur, herhaal
 * die dan expliciet voor :hover, :focus én :active. (0,2,0) wint van Kadence.
 * Primary staat er bewust bij: die is vandaag toevallig óók wit, maar dat mag niet
 * van een Kadence-palettewaarde afhangen.
 */
.nmk-btn--secondary:hover,
.nmk-btn--secondary:focus,
.nmk-btn--secondary:active { color: var(--navy-700); }
.nmk-btn--primary:hover,
.nmk-btn--primary:focus,
.nmk-btn--primary:active { color: #fff; }

/* ============================================================
   4. FOCUS / TOEGANKELIJKHEID
   ============================================================ */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pink-500);
  outline-offset: 2px;
}

/* ============================================================
   5. COMPONENTEN
   ============================================================ */
.nmk-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.nmk-badge {
  display: inline-block;
  background: var(--navy-100);
  color: var(--navy-700);
  border-radius: var(--r-pill);
  padding: 0.25em 0.75em;
  font-size: 0.8125rem;
  font-weight: 600;
}
.nmk-badge--pink { background: var(--pink-100); color: var(--pink-600); }

/* Zachte sectie: bg-soft + heel subtiele roze/navy-gloed + noise */
.nmk-section-soft {
  position: relative;
  background:
    radial-gradient(60vw 34vw at 88% 0%, rgba(255,92,138,.06), transparent 60%),
    radial-gradient(52vw 34vw at 2% 4%, rgba(42,70,166,.05), transparent 58%),
    var(--bg-soft);
}
.nmk-section-soft::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--noise); background-size: 140px;
}
.nmk-section-soft > * { position: relative; }

/* ============================================================
   6. HERO  (pillar- & home-koppen — gradient + noise + reveal)
   ============================================================ */
.nmk-hero {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(60vw 40vw at 85% -8%, rgba(255,92,138,.16), transparent 60%),
    radial-gradient(55vw 42vw at 0% 6%, rgba(42,70,166,.12), transparent 58%),
    var(--bg);
}
.nmk-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--noise); background-size: 140px;
}
.nmk-hero > * { position: relative; }
.nmk-hero .nmk-eyebrow { color: var(--pink-600); }
.nmk-hero h1 { margin: .6rem 0 .8rem; }
.nmk-hero .nmk-hero__sub {
  font-size: 1.15rem; font-weight: 500; color: var(--slate); max-width: 54ch;
}

/* ============================================================
   7. BEELDBEWERKING  (.nmk-media — CLS-proof, rounded, tint-optie)
   ============================================================ */
.nmk-media, .entry-content .wp-block-image img {
  border-radius: var(--r-lg);
}
.nmk-media {
  position: relative; overflow: hidden; display: block;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  background: var(--navy-50);          /* placeholder-kleur tijdens laden */
}
.nmk-media img { display: block; width: 100%; height: auto; border-radius: inherit; }
/* Optionele navy-duotone/roze-tint (subtiel, lage opacity) */
.nmk-media--tint::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply; opacity: .14;
  background: linear-gradient(160deg, var(--navy-500), var(--pink-500));
}
/* Leesbare tekst-overlay onderaan (voor hero-beeld met tekst) */
.nmk-media--caption::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(10,26,69,.55));
}
.entry-content .wp-block-image img { box-shadow: var(--shadow-sm); }
.entry-content figure.wp-block-image figcaption {
  color: var(--slate); font-size: .85rem; text-align: left; margin-top: .5rem;
}

/* ============================================================
   8. HEADER  (Kadence-header — wordmerk + nav, light-touch overrides)
   ============================================================ */
.site-header .site-title,
.site-branding .site-title a {
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: -.02em; color: var(--navy-900);
}
/* Druppel-accent achter het woordmerk (pink-500), subtiel — één keer.
   Let op: Kadence rendert de site-title als <p>/<div> ZONDER <a> erin
   (de <a class="brand"> omhult de titel). Daarom ::after op .site-title zelf. */
.site-branding .site-title::after {
  content: ""; display: inline-block; width: .5em; height: .62em; margin-left: .12em;
  background: var(--pink-500);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  vertical-align: baseline;
}
.site-header .header-navigation a,
.site-header .menu-item > a {
  font-family: var(--font-body); font-weight: 600; color: var(--navy-700);
}
.site-header .header-navigation a:hover,
.site-header .menu-item > a:hover { color: var(--pink-600); }
.site-header a, .site-header button { min-height: 44px; }  /* touch-target */

/* ============================================================
   9. FOOTER  (navy, wit, tool-CTA — light-touch overrides)
   ============================================================ */
.site-footer, .site-footer-wrap {
  background: var(--navy-900); color: #fff;
}
.site-footer a { color: var(--navy-100); }
.site-footer a:hover { color: #fff; }
.site-footer .site-footer-row-container-inner,
.site-footer .site-info { color: var(--navy-300); }

/* --- SEO-footer: merk + interne-linkkolommen ---------------------------
   Gerenderd via kadence_footer (functions.php, priority 5). LET OP: Kadence's
   footer_markup rendert het HELE <footer class="site-footer">-element zelf op
   priority 10, dus onze sectie landt ERBOVEN (buiten .site-footer) op de witte
   pagina-achtergrond. Daarom draagt deze sectie zijn EIGEN navy-achtergrond. */
.nmk-seo-footer {
  background: var(--navy-900); color: #fff;
}
/* Kadence's eigen onderbalk ("WordPress Theme by Kadence WP") uitzetten —
   wij leveren onze eigen copyright/servicezone-regel hieronder. */
.site-bottom-footer-wrap { display: none; }
.nmk-seo-footer > .nmk-footer-inner {
  max-width: var(--nmk-inner, 1160px);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--global-content-edge-padding, 1.5rem) clamp(1.5rem, 4vw, 2.5rem);
}
.nmk-footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 1000px) {
  .nmk-footer-inner { grid-template-columns: minmax(240px, 1fr) 2.6fr; }
}

/* Merk-kolom */
.nmk-footer-brand { max-width: 32rem; }
.nmk-footer-logo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  letter-spacing: -.02em; color: #fff !important; text-decoration: none;
}
.nmk-footer-logo img { display: block; width: 40px; height: 40px; }
.nmk-footer-logo .drop {
  width: .42em; height: .52em; margin-left: .1em; background: var(--pink-500);
  display: inline-block; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.nmk-footer-tagline {
  margin: 1rem 0 1.4rem; color: var(--navy-200, #C7D0E8);
  font-size: .95rem; line-height: 1.65; max-width: 40ch;
}
.nmk-footer-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--pink-600); color: #fff !important; text-decoration: none;
  font-weight: 700; font-size: .95rem; padding: 12px 22px; min-height: 44px;
  border-radius: var(--r-pill); box-shadow: var(--shadow-md);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease;
}
.nmk-footer-cta:hover { background: var(--pink-500); transform: translateY(-2px); color: #fff !important; }
.nmk-footer-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Link-kolommen */
.nmk-footer-cols {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.25rem;
}
@media (min-width: 620px)  { .nmk-footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .nmk-footer-cols { grid-template-columns: repeat(5, 1fr); gap: 1.5rem 1rem; } }
.nmk-footer-col-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .98rem; letter-spacing: -.01em; color: #fff !important;
  text-decoration: none; margin-bottom: .7rem; line-height: 1.25;
}
.nmk-footer-col-title:hover { color: var(--pink-300, #FF9FC0) !important; }
.nmk-footer-col ul { list-style: none; margin: 0; padding: 0; }
.nmk-footer-col li { margin: 0 0 .5rem; }
.nmk-footer-col li a {
  color: var(--navy-200, #C7D0E8); text-decoration: none;
  font-size: .875rem; line-height: 1.45; display: inline-block;
}
.nmk-footer-col li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Onderbalk */
.nmk-footer-legal {
  max-width: var(--nmk-inner, 1160px); margin-inline: auto;
  padding: 1.25rem var(--global-content-edge-padding, 1.5rem);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: var(--navy-300);
}
.nmk-footer-legal .nmk-footer-region { color: var(--navy-200, #C7D0E8); }
/* Privacylink: 44px hoog als tap-target, zonder de balk zichtbaar dikker te
   maken (negatieve marge vangt de extra hoogte op). */
.nmk-footer-privacy a {
  display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px;
  color: var(--navy-200, #C7D0E8); text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px;
}
.nmk-footer-privacy a:hover { color: #fff; text-decoration-color: currentColor; }
.nmk-footer-privacy a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; color: #fff; }
.nmk-footer-privacy a:active { color: var(--pink-300, #FF9FC0); }

/* ============================================================
   10. CTA-STROOK  (paginabodem → postcode-tool)
   ============================================================ */
.nmk-cta {
  position: relative; text-align: center;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 5vw, 3rem);
  background: linear-gradient(180deg, var(--pink-50), #fff);
}
.nmk-cta h2 { margin-bottom: .5rem; }
.nmk-cta p { color: var(--slate); max-width: 52ch; margin: 0 auto 1.25rem; }

/* ============================================================
   11. POSTCODE-TOOL-COMPONENT  (styling nu; JetEngine-logica later)
   ============================================================ */
.nmk-tool {
  background: linear-gradient(180deg, var(--pink-50), #fff);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 4vw, 1.75rem); max-width: 520px;
}
.nmk-tool__field { display: flex; gap: 10px; margin: 1rem 0; }
.nmk-tool input {
  flex: 1; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 13px 18px; font-family: inherit; font-size: 1rem; min-height: 48px;
}
.nmk-tool input:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 1px; border-color: var(--navy-500); }
.nmk-result {
  margin-top: 1.1rem; background: #fff; border-radius: var(--r-md);
  padding: 18px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 16px;
}
.nmk-gauge {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-family: var(--font-display); flex-shrink: 0;
  background: var(--hard-hard);
}
.nmk-gauge--soft { background: var(--hard-soft); }
.nmk-gauge--mid  { background: var(--hard-mid); }
.nmk-result__txt strong { display: block; font-family: var(--font-display); font-weight: 700; color: var(--navy-900); }
.nmk-result__txt span { color: var(--slate); font-size: .9rem; }
.nmk-scale { display: flex; gap: 6px; margin-top: 14px; font-size: .75rem; color: var(--slate); }
.nmk-scale .s { flex: 1; text-align: center; }
.nmk-scale .bar { height: 8px; border-radius: var(--r-pill); margin-bottom: 6px; }
.nmk-scale .bar--soft { background: var(--hard-soft); }
.nmk-scale .bar--mid  { background: var(--hard-mid); }
.nmk-scale .bar--hard { background: var(--hard-hard); }

/* ============================================================
   12. BEWEGING  (staggered page-load reveals; transform/opacity only)
   ============================================================ */
@keyframes nmk-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.nmk-reveal > * { animation: nmk-rise .6s var(--ease) both; }
.nmk-reveal > :nth-child(1) { animation-delay: .04s; }
.nmk-reveal > :nth-child(2) { animation-delay: .12s; }
.nmk-reveal > :nth-child(3) { animation-delay: .20s; }
.nmk-reveal > :nth-child(4) { animation-delay: .28s; }
.nmk-reveal > :nth-child(5) { animation-delay: .36s; }
/* LCP-kandidaten (H1, intro, herobeeld) schuiven wel mee maar zijn meteen
   zichtbaar. Chrome telt een element met opacity 0 niet als weergegeven, dus
   de fade schoof de LCP ± 0,7 s op (gemeten 2026-10-06). transform kost niets. */
@keyframes nmk-slide { from { transform: translateY(16px); } to { transform: none; } }
.nmk-reveal > h1,
.nmk-reveal > .nmk-hero__sub,
.nmk-reveal > figure { animation-name: nmk-slide; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .nmk-reveal > *,
  .nmk-reveal > h1,
  .nmk-reveal > .nmk-hero__sub,
  .nmk-reveal > figure { animation: none; }
}

/* ============================================================
   13. LAYOUT-VERFIJNING  (full-bleed secties, 2-koloms hero,
       header/logo — weg van de "boxed blog"-look)
   ============================================================ */

/* Gedeelde gecentreerde contentkolom (hero + body lijnen hierop uit) */
:root { --nmk-inner: 1160px; }

/* Hero-spacing (globaal, overflow-veilig) */
.nmk-hero .nmk-hero__sub { margin-top: .25rem; }
.nmk-hero .wp-block-buttons { margin-top: 1.4rem; }
.nmk-hero figure.nmk-media { margin-top: clamp(1.5rem, 4vw, 2.25rem); }

/* 13a+b+c. DESKTOP-ONLY: één gecentreerde kolom van --nmk-inner. De hero breekt
   full-bleed uit maar lijnt zijn inhoud op de kolomranden; de bodytekst lijnt links
   op diezelfde kolomrand → GEEN eenzijdige witruimte. Op mobiel bewust NIET. */
@media (min-width: 900px) {
  /* De contentkolom exact op --nmk-inner, gecentreerd, zonder eigen inspring */
  .entry-content {
    max-width: var(--nmk-inner);
    margin-inline: auto;
    padding-inline: 0;
  }

  /* Full-bleed hero/secties: volle viewportbreedte, inhoud terug op de kolomranden */
  .entry-content .nmk-hero,
  .entry-content .nmk-fullbleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    padding-left: max(1.4rem, calc(50vw - (var(--nmk-inner) / 2)));
    padding-right: max(1.4rem, calc(50vw - (var(--nmk-inner) / 2)));
    border-radius: 0;
    box-sizing: border-box;
  }
  .entry-content > .nmk-hero:first-child { margin-top: clamp(-.5rem, -2vw, -1.5rem); }

  /* 2-koloms hero — tekst links, beeld rechts, verticaal gecentreerd */
  .entry-content .nmk-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(2.25rem, 4vw, 4rem);
    align-items: center;
    padding-top: clamp(2.5rem, 4vw, 4rem);
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
  }
  .nmk-hero > .nmk-eyebrow,
  .nmk-hero > h1,
  .nmk-hero > .wp-block-heading,
  .nmk-hero > .nmk-hero__sub,
  .nmk-hero > .wp-block-buttons {
    grid-column: 1; max-width: 38rem;
    /* !important omdat core's .is-layout-constrained > * zelf margin auto
       !important zet. Zonder dit werd alles wat smaller is dan de kolom
       gecentreerd: het eyebrow-label op elke pagina, en een korte H1 zoals
       "Privacyverklaring" (gezien 2026-10-06). */
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .nmk-hero > figure.nmk-media {
    grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; max-width: none;
  }
  .nmk-hero > figure.nmk-media img { aspect-ratio: 4 / 3; object-fit: cover; }

  /* Body-content: leesbare maat, LINKS tegen de kolomrand (= hero-tekst-links) */
  .entry-content > :not(.nmk-hero):not(.nmk-fullbleed) {
    max-width: 44rem;
    margin-left: 0;
    margin-right: auto;
  }
  /* Beeld & CTA-strook mogen iets breder ademen, ook links uitgelijnd */
  .entry-content > figure.wp-block-image,
  .entry-content > .nmk-cta { max-width: 52rem; }
}

/* 13d. Header/logo — duidelijker merk, rustiger nav */
.site-header .site-title,
.site-branding .site-title {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}
.site-branding .site-title::after {
  width: .42em; height: .52em; margin-left: .14em;
  background: var(--pink-500);
}
.site-header .header-navigation .menu > li > a,
.site-header .menu-item > a { font-size: .98rem; letter-spacing: -.01em; }
/* subtiele scheiding onder de header */
.site-header-wrap, .site-header { border-bottom: 1px solid var(--line); }

/* ============================================================
   14. MOBIELE OVERFLOW-GARANTIE  (geen horizontaal scrollen < 900px)
   ============================================================ */
@media (max-width: 899px) {
  html, body { overflow-x: clip; max-width: 100%; }
  /* Layout-containers exact op viewportbreedte, geen zijwaartse shift */
  .site, .site-container, .content-container, .site-main,
  .site-content, .entry-content, .hero-section, .entry-header {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* Lange koppen mogen breken i.p.v. overlopen */
  h1, h2, h3, .wp-block-heading { overflow-wrap: anywhere; }
}

/* ============================================================
   15. STICKY HEADER  (blijft bovenaan tijdens scrollen)
   ============================================================ */
#masthead.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  /* zachte, navy-getinte schaduw voor diepte t.o.v. de content eronder */
  box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(10,26,69,.05);
}
/* De hero mag niet ónder de sticky header vallen bij ankersprongen */
.nmk-hero { scroll-margin-top: 84px; }

/* ============================================================
   16. HOME  (pillar-grid + waterhardheid-strook)
   ============================================================ */
.nmk-home-section { padding-block: clamp(2.25rem, 6vw, 4rem); }
.nmk-home-section > h2 { margin-bottom: .4rem; }
.nmk-home-lead { color: var(--slate); font-size: 1.05rem; max-width: 46ch; margin-top: 0; }

/* Pillar-overzicht */
.nmk-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.9rem, 2.2vw, 1.4rem);
  margin-top: clamp(1.4rem, 3.5vw, 2.25rem);
}
@media (min-width: 560px) { .nmk-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .nmk-pillars { grid-template-columns: repeat(3, 1fr); } }

.nmk-pillar-card {
  position: relative;
  display: flex; flex-direction: column; gap: .5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.2rem, 3vw, 1.65rem);
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;
}
.nmk-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy-100);
}
.nmk-pillar-card:focus-visible { outline: 2px solid var(--pink-500); outline-offset: 3px; }
.nmk-pillar-card__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--navy-500);
}
.nmk-pillar-card__num {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex-shrink: 0;
  border-radius: 50%; background: var(--navy-50); color: var(--navy-700);
  font-weight: 800; font-size: .85rem; letter-spacing: 0;
}
.nmk-pillar-card h3 { margin: .1rem 0 0; color: var(--navy-900); font-size: 1.18rem; line-height: 1.2; }
.nmk-pillar-card p { margin: 0; color: var(--slate); font-size: .95rem; line-height: 1.55; }
.nmk-pillar-card__go {
  margin-top: auto; padding-top: .45rem;
  color: var(--pink-600); font-weight: 700; font-size: .9rem;
}
.nmk-pillar-card:hover .nmk-pillar-card__go { text-decoration: underline; text-underline-offset: 3px; }

/* Uitgelichte tool-kaart (Pillar 4) */
.nmk-pillar-card--star {
  background: linear-gradient(180deg, var(--pink-50), #fff);
  border-color: var(--pink-100);
}
.nmk-pillar-card--star .nmk-pillar-card__num { background: var(--pink-100); color: var(--pink-600); }
.nmk-pillar-card--star .nmk-pillar-card__eyebrow { color: var(--pink-600); }

/* Waterhardheid-strook: hergebruikt .nmk-scale (fH-schaal) */
.nmk-hard-strip { max-width: 640px; margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.nmk-hard-strip .nmk-scale { gap: 10px; margin: 0 0 1.5rem; }
.nmk-hard-strip .nmk-scale .s { font-size: .82rem; color: var(--slate); }
.nmk-hard-strip .nmk-scale .s strong {
  display: block; margin-top: 4px; color: var(--navy-900);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
}
.nmk-hard-strip .nmk-scale .bar { height: 10px; }

/* ============================================================
   17. POSTCODE-TOOL — extra states (label, note, preview)
   ============================================================ */
.nmk-tool { margin-inline: auto; }
.nmk-tool__label {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--navy-900); margin: 0 0 .2rem;
}
.nmk-tool input:disabled { background: var(--navy-50); color: var(--slate); cursor: not-allowed; }
.nmk-tool .nmk-btn--primary { white-space: nowrap; }
.nmk-tool__note { font-size: .82rem; color: var(--slate); margin: .9rem 0 0; line-height: 1.5; }
/* De tool-sectie centreert zijn kop + kaart */
.nmk-tool-section { text-align: center; }
/* De globale h2-clamp staat onder ~640px vast op zijn minimum (1.6rem) en schaalt
   daar dus niet meer mee. "Check je waterhardheid op postcode" viel daardoor net
   buiten zijn box op smalle schermen. Hier wél laten meeschalen. */
.nmk-tool-section > h2 {
  margin-bottom: .4rem;
  font-size: clamp(1.3rem, 5vw, 2.5rem);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.nmk-tool-section > p { color: var(--slate); max-width: 50ch; margin-inline: auto; }

/* ============================================================
   14. WATERHARDHEID PER GEMEENTE  (CPT single — Pillar 4)
   ============================================================ */
.single-waterhardheid .content-container .entry-content.nmk-wh { max-width: 46rem !important; margin-inline: auto !important; }
.nmk-wh__title {
  font-family: var(--font-display); font-weight: 800; color: var(--navy-900);
  letter-spacing: -0.03em; line-height: 1.08;
  font-size: clamp(1.9rem, 6vw, 2.9rem); margin: 0 0 1.1rem;
}
.nmk-wh h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--navy-900);
  letter-spacing: -0.02em; font-size: clamp(1.35rem, 4vw, 1.7rem);
  margin: 2.4rem 0 .7rem;
}
.nmk-wh h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--navy-900);
  font-size: 1.1rem; margin: 1.3rem 0 .35rem;
}
.nmk-wh p { line-height: 1.7; margin: 0 0 1rem; }

/* Prominente gauge-kaart bovenaan */
.nmk-wh__gauge-wrap {
  margin: 1.4rem 0 .4rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.1rem, 3vw, 1.5rem);
  box-shadow: var(--shadow-md);
}
.nmk-wh__gauge-row { display: flex; align-items: center; gap: 18px; }
/* Instap naar de ontharder-check, binnen de resultaatkaart zelf: dit is het enige
   conversiemoment dat boven de fold valt. De grote CTA-kaart lager blijft bestaan. */
.nmk-wh__gauge-cta {
  display: flex; align-items: center; gap: clamp(.9rem, 3vw, 1.4rem);
  margin-top: clamp(1rem, 3vw, 1.3rem); padding-top: clamp(1rem, 3vw, 1.3rem);
  border-top: 1px solid var(--line);
}
.nmk-wh .nmk-wh__gauge-cta p {
  margin: 0; flex: 1 1 auto;
  font-size: .95rem; line-height: 1.55; color: var(--slate);
}
.nmk-wh__gauge-cta .nmk-btn { margin: 0; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .nmk-wh__gauge-cta { flex-direction: column; align-items: stretch; }
  .nmk-wh__gauge-cta .nmk-btn { width: 100%; text-align: center; }
}
.nmk-wh__gauge-wrap .nmk-gauge {
  width: 84px; height: 84px; font-size: 1.7rem;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--hard-hard) 55%, transparent);
}
.nmk-wh__gauge-wrap .nmk-gauge--soft { box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--hard-soft) 60%, transparent); }
.nmk-wh__gauge-wrap .nmk-gauge--mid  { box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--hard-mid) 55%, transparent); }
.nmk-wh__gauge-wrap .nmk-result__txt strong { font-size: 1.25rem; }

/* fH-schaal: markeer de actieve categorie */
.nmk-wh .nmk-scale { margin: 0 0 1.6rem; gap: 10px; }
.nmk-wh .nmk-scale .s { padding: 8px 4px 6px; border-radius: var(--r-md); transition: background .2s var(--ease); }
.nmk-wh .nmk-scale .s.is-active { background: var(--navy-50); color: var(--navy-900); font-weight: 600; }
.nmk-wh .nmk-scale .bar { height: 10px; }

/* Zachte CTA-kaart */
.nmk-cta-card {
  --cta-pad: clamp(1.3rem, 4vw, 1.9rem);   /* ook gebruikt door __media, zie onder */
  margin: 2.2rem 0 1rem;
  background: linear-gradient(135deg, var(--pink-50) 0%, var(--navy-50) 100%);
  border: 1px solid var(--pink-100); border-radius: var(--r-lg);
  padding: var(--cta-pad); box-shadow: var(--shadow-sm);
}
/* Beeld rand-tot-rand onderin de kaart: loopt met een negatieve marge door de
   padding heen, zodat kaart en foto één blok vormen. De -1px in de radius
   compenseert de rand van de kaart, anders steekt het beeld door de ronding.
   Bewust géén overflow:hidden op de kaart zelf — dat knipt de hover-schaduw
   van de knop af. box-shadow uit: .nmk-media zet er standaard --shadow-md op,
   en een schaduw hoort niet bínnen een kaart.

   LET OP de drie klassen in de selector, die zijn nodig. Kadence zet twee regels op
   figures binnen .single-content: `figure { margin-top: 0; margin-bottom:
   var(--global-md-spacing) }` (0,1,1) en `figure:last-child { margin-bottom: 0 }`
   (0,2,1). Die laatste won van een selector met twee klassen, waardoor de negatieve
   ondermarge wegviel en er een strook kaart onder het beeld bleef staan. */
.nmk-wh .nmk-cta-card .nmk-cta-card__media {
  margin: var(--cta-pad) calc(-1 * var(--cta-pad)) calc(-1 * var(--cta-pad));
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  box-shadow: none;
}
.nmk-wh .nmk-cta-card .nmk-cta-card__media img {
  aspect-ratio: 21 / 9; object-fit: cover; height: auto;
  border-radius: inherit;
}
.nmk-cta-card__title {
  font-family: var(--font-display); font-weight: 700; color: var(--navy-900);
  font-size: 1.2rem; margin: 0 0 .5rem !important;
}
.nmk-cta-card p { margin-bottom: 1rem; }
.nmk-cta-card .nmk-btn { margin: 0; }

.nmk-wh__foot { font-size: .95rem; color: var(--slate); margin-top: 1.6rem; }

/* Datatabellen (bv. waterhardheid per provincie) — merkstijl i.p.v. kale randen.
   Scrollt binnen zijn eigen container, zodat de pagina zelf nooit horizontaal scrolt. */
.entry-content .wp-block-table,
.wp-block-post-content .wp-block-table { overflow-x: auto; margin: 1.4rem 0 1.8rem; }
.entry-content .wp-block-table table,
.wp-block-post-content .wp-block-table table {
  border-collapse: collapse; width: 100%; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.entry-content .wp-block-table th,
.wp-block-post-content .wp-block-table th {
  background: var(--navy-50); color: var(--slate);
  font-family: var(--font-body); font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  text-align: left; padding: .7rem .9rem; border: 0; border-bottom: 1px solid var(--line);
}
.entry-content .wp-block-table td,
.wp-block-post-content .wp-block-table td {
  padding: .7rem .9rem; border: 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.entry-content .wp-block-table tbody tr:last-child td,
.wp-block-post-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.entry-content .wp-block-table tbody tr:hover,
.wp-block-post-content .wp-block-table tbody tr:hover { background: var(--navy-50); }
.entry-content .wp-block-table figcaption,
.wp-block-post-content .wp-block-table figcaption {
  font-size: .82rem; color: var(--slate); margin-top: .7rem; text-align: left;
}

/* Mobiel: compacter zodat een tabel van 4 kolommen binnen ~390px past en er
   niets afgekapt lijkt (de container zou anders horizontaal moeten scrollen). */
@media (max-width: 600px) {
  .entry-content .wp-block-table table,
  .wp-block-post-content .wp-block-table table { font-size: .82rem; }
  .entry-content .wp-block-table th,
  .entry-content .wp-block-table td,
  .wp-block-post-content .wp-block-table th,
  .wp-block-post-content .wp-block-table td { padding: .5rem .45rem; }
  .entry-content .wp-block-table th,
  .wp-block-post-content .wp-block-table th { font-size: .68rem; letter-spacing: .04em; }
}

/* Gemeentefusie-kruisverwijzing (Vlaanderen, fusies 1/1/2025).
   Zelfde vorm als de spreidingsnotitie, maar met de roze accentrand: dit is een
   "let op, misschien zoek je de buurgemeente"-signaal, geen datanuance. */
.nmk-wh__fusie {
  margin: 1rem 0 0; padding: .85rem 1rem;
  font-size: .92rem; line-height: 1.6; color: var(--navy-700);
  background: var(--pink-50); border-left: 3px solid var(--pink-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.nmk-wh__fusie a { color: var(--pink-600); font-weight: 600; }
.nmk-wh__fusie a:hover { color: var(--navy-700); }

/* Spreiding tussen distributiezones — nuanceert het hoofdcijfer (Wallonië, Brussel). */
.nmk-wh__spread {
  margin: 1rem 0 0; padding: .85rem 1rem;
  font-size: .92rem; line-height: 1.6; color: var(--navy-700);
  background: var(--navy-50); border-left: 3px solid var(--navy-300);
  border-radius: 0 var(--r-sm, 10px) var(--r-sm, 10px) 0;
}

/* Werkwijze + bronwebsite. Brussel is het enige gewest waar het gemeentecijfer
   een eigen bewerking is, dus die verantwoording staat op elke pagina. Bewust
   rustiger dan .nmk-wh__spread: het nuanceert niet, het verantwoordt. */
.nmk-wh__methode {
  margin: .6rem 0 0; padding: .9rem 1.05rem;
  font-size: .9rem; line-height: 1.7; color: var(--navy-700);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 10px);
  box-shadow: 0 1px 2px rgba(10, 26, 69, .04), 0 6px 16px -10px rgba(10, 26, 69, .18);
}
.nmk-wh__methode strong {
  color: var(--navy-900, var(--navy-700));
  letter-spacing: -.01em;
}
.nmk-wh__methode a {
  color: var(--pink-600); font-weight: 600;
  text-underline-offset: 2px;
}
.nmk-wh__methode a:hover,
.nmk-wh__methode a:focus-visible { color: var(--navy-700); }

/* Gemeente-tegels (provincie- & index-listing) */
.nmk-wh-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 1.2rem 0 2rem;
}
.nmk-wh-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: var(--r-md); text-decoration: none;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
  border-left: 4px solid var(--hard-mid);
}
.nmk-wh-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--navy-300); }
.nmk-wh-tile:focus-visible { outline: 2px solid var(--pink-500); outline-offset: 2px; }
.nmk-wh-tile--soft { border-left-color: var(--hard-soft); }
.nmk-wh-tile--mid  { border-left-color: var(--hard-mid); }
.nmk-wh-tile--hard { border-left-color: var(--hard-hard); }
.nmk-wh-tile .g { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); line-height: 1.2; }
.nmk-wh-tile .v { font-size: .85rem; color: var(--slate); }
.nmk-wh-count { color: var(--slate); font-weight: 400; font-size: .8em; }

/* CPT single: geen sidebar-kolom reserveren → content-blok centreren op desktop */
.single-waterhardheid .content-container.site-container { display: block; }
.single-waterhardheid #primary.content-area { width: 100%; max-width: 100%; margin: 0; float: none; }

/* Postcode/gemeente-widget (hub) */
.nmk-wtool { max-width: 34rem; margin: 1.2rem auto 0; text-align: left; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.1rem,4vw,1.6rem);
  box-shadow: var(--shadow-md); }
.nmk-wtool__form { display: flex; gap: 10px; margin: .5rem 0 0; }
.nmk-wtool__form input {
  flex: 1; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 13px 18px; font-family: inherit; font-size: 1rem; min-height: 48px; }
.nmk-wtool__form input:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 1px; border-color: var(--navy-500); }
.nmk-wtool__form .nmk-btn { white-space: nowrap; }
.nmk-wtool__err { color: var(--pink-600); font-size: .9rem; margin: .7rem 0 0; }
.nmk-wtool__res { margin-top: 1.1rem; }
.nmk-wtool__resin { display: flex; align-items: center; gap: 16px; background: var(--navy-50);
  border-radius: var(--r-md); padding: 14px; margin-bottom: .9rem; }
.nmk-wtool__res .nmk-btn { width: 100%; justify-content: center; }
@media (max-width: 460px){ .nmk-wtool__form { flex-direction: column; } .nmk-wtool__form .nmk-btn { justify-content: center; } }

/* ============================================================
   18. GRAVITY FORMS  (gratis-wateranalyse — on-brand overrides)
   ============================================================ */
/* Landingspagina-wrapper: intro + formulier als gecentreerde kaart */
.nmk-analyse { max-width: 40rem; margin-inline: auto; }
.nmk-analyse__intro { background: var(--navy-50); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.1rem,4vw,1.5rem); margin-bottom: 1.4rem; }
.nmk-analyse__intro ul { list-style: none; padding: 0; margin: .8rem 0 0; }
.nmk-analyse__intro li { color: var(--navy-700); font-weight: 600; padding: .2rem 0; }

/* Formulierkaart */
.nmk-analyse .gform_wrapper { background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.2rem,5vw,2rem); box-shadow: var(--shadow-md); }
.gform_wrapper form { margin: 0; }

/* Labels */
.gform_wrapper .gfield_label { font-family: var(--font-display); font-weight: 600;
  color: var(--navy-900); font-size: 1rem; margin-bottom: .35rem; letter-spacing: -0.01em; }
.gform_wrapper .gfield_required { color: var(--pink-600); margin-left: 2px; }

/* Inputs, textarea, select */
.gform_wrapper .gform_fields input:not([type="submit"]):not([type="button"]):not([type="checkbox"]),
.gform_wrapper .gform_fields textarea,
.gform_wrapper .gform_fields select {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 12px 16px; font-family: var(--font-body, inherit); font-size: 1rem;
  min-height: 48px; color: var(--navy-900); background: #fff; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
.gform_wrapper .gform_fields textarea { min-height: 110px; }
.gform_wrapper .gform_fields input:focus-visible,
.gform_wrapper .gform_fields textarea:focus-visible,
.gform_wrapper .gform_fields select:focus-visible {
  outline: none; border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(42,70,166,.18); }
.gform_wrapper ::placeholder { color: var(--slate); opacity: .8; }

/* Veld-omschrijvingen */
.gform_wrapper .gfield_description { color: var(--slate); font-size: .85rem; margin-top: .3rem; }

/* Consent (GDPR) */
.gform_wrapper .gfield--type-consent { background: var(--navy-50);
  border-radius: var(--r-md); padding: .9rem 1rem; }
.gform_wrapper .gfield--type-consent .gfield_label { display: none; }
.gform_wrapper .gfield_consent_label, .gform_wrapper .gfield--type-consent label {
  font-family: var(--font-body, inherit); font-weight: 500; color: var(--navy-900);
  font-size: .92rem; line-height: 1.5; }
.gform_wrapper input[type="checkbox"] { accent-color: var(--navy-500);
  width: 18px; height: 18px; min-height: 0; }

/* Submit-knop = roze CTA */
.gform_wrapper .gform_footer { margin-top: 1.4rem; padding: 0; }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform-button {
  background: var(--pink-600); color: #fff; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  padding: 15px 30px; border-radius: var(--r-pill); min-height: 52px; width: 100%;
  box-shadow: 0 6px 18px -6px rgba(226,62,119,.55);
  transition: transform .15s cubic-bezier(.22,1,.36,1), background .15s ease, box-shadow .15s ease; }
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button:hover {
  background: var(--pink-700, #c22d61); transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(226,62,119,.6); }
.gform_wrapper .gform_footer input[type="submit"]:active,
.gform_wrapper .gform_footer button:active { transform: translateY(0); }
.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_footer button:focus-visible {
  outline: 3px solid var(--navy-500); outline-offset: 2px; }

/* Validatie */
.gform_wrapper .gfield_error input, .gform_wrapper .gfield_error textarea {
  border-color: var(--pink-600) !important; }
.gform_wrapper .validation_message, .gform_wrapper .gfield_validation_message {
  color: var(--pink-600); font-size: .85rem; margin-top: .3rem; background: none;
  border: none; padding: 0; }
.gform_wrapper .gform_validation_errors { border-radius: var(--r-md);
  border-color: var(--pink-600); }

/* Telefoonveld met landkiezer (GF 3.0 "formatted phone").
   Dit is een modern GF-component, maar het formulier draait op GF's LEGACY CSS
   (form['theme'] is leeg), en die kent dit component niet. Gevolg zonder onderstaande
   regels: de landenlijst kreeg nooit een display:none op --hidden en stond dus
   permanent open — een lijst van ~240 landen midden in het aanvraagformulier — en de
   keuzeknop viel terug op Kadence's generieke button-stijl.
   We zetten GF's eigen thema bewust NIET aan: de rest van dit formulier is hierboven
   met de hand opgemaakt, en dat thema zou daar dwars doorheen lopen. */
.gform_wrapper .gform-phone { position: relative; }

/* Knop + invoerveld op één rij, sublabels eronder. */
.gform_wrapper .gform-phone__input-wrapper {
  display: flex; align-items: flex-start; gap: .5rem; }
/* Beide kolommen: veld boven, sublabel eronder — anders schuift "Land" naast de
   knop terwijl "Nummer" er wél onder staat.
   De selector is bewust lang. GF's legacy CSS zet onder 641px álle spans in een
   .ginput_container op display:block (specificiteit 0,3,1); een kortere regel
   verloor dat op mobiel en dan viel de layout terug. Deze is 0,4,1 en wint dus
   ook binnen die media query — media queries veranderen de specificiteit niet. */
.gform_wrapper .ginput_container_phone .gform-phone__input-wrapper > span.ginput_country-selector_container,
.gform_wrapper .ginput_container_phone .gform-phone__input-wrapper > span.ginput_phone_container {
  display: flex; flex-direction: column; margin-bottom: 0; }
.gform_wrapper .ginput_country-selector_container { flex: 0 0 auto; }
.gform_wrapper .ginput_phone_container { flex: 1 1 auto; min-width: 0; }
.gform_wrapper .gform-phone .gform-field-label--type-sub { margin-top: .3rem; }

/* Keuzeknop: zelfde hoogte en radius als de inputs, navy i.p.v. gevuld blok. */
.gform_wrapper .gform-phone__country-selector {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 48px; padding: 0 .85rem; cursor: pointer;
  background: var(--navy-50); color: var(--navy-900);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease; }
.gform_wrapper .gform-phone__country-selector:hover { background: var(--navy-100); }
.gform_wrapper .gform-phone__country-selector:focus-visible {
  outline: none; border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(42,70,166,.18); }

/* De lijst zelf — hier zat de bug. */
.gform_wrapper .gform-phone__dropdown--hidden { display: none; }
.gform_wrapper .gform-phone__dropdown {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .35rem);
  max-height: 17rem; overflow-y: auto;
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: .5rem; }
.gform_wrapper .gform-phone__search-wrapper { margin-bottom: .4rem; }
.gform_wrapper .gform-phone__country-list { margin: 0; padding: 0; list-style: none; }
.gform_wrapper .gform-phone__country-list li { margin: 0; }
.gform_wrapper .gform-phone__country-list li[role="option"] {
  padding: .5rem .6rem; border-radius: var(--r-sm); cursor: pointer;
  display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.gform_wrapper .gform-phone__country-list li[role="option"]:hover,
.gform_wrapper .gform-phone__country-list li[aria-selected="true"] {
  background: var(--navy-50); }

/* Bevestigingsbericht */
.gform_confirmation_message { background: var(--navy-50); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.2rem,5vw,1.8rem); color: var(--navy-900);
  font-size: 1.05rem; }

/* ============================================================
   19. COOKIEBOT-BANNER  (via GTM, sinds 2026-10-06)
   ============================================================
   Cookiebot injecteert zijn eigen CSS ná de onze, met selectors tot twee
   ID's diep (#CybotCookiebotDialogFooter #…AllowAll). Elke regel hier begint
   daarom met "html body #CybotCookiebotDialog": dat wint zonder !important.

   ⚠️ ALLE DRIE DE KNOPPEN ZIJN BEWUST GELIJK. Het standaardthema vult alleen
   "Alles toestaan" in kleur en zet "Weigeren" in een omlijning. De cookie-
   checklist van de GBA verbiedt precies dat: "nudging door middel van
   kleurgebruik". Maak "Alles toestaan" dus niet roze of opvallender dan
   "Weigeren".

   Kleuren kunnen ook in de Cookiebot Manager (Banner > kleuren). Doe je dat,
   haal dit blok dan weg: twee bronnen voor dezelfde kleur lopen uiteen. */
html body #CybotCookiebotDialog {
  font-family: var(--font-body); color: var(--navy-900);
}
html body #CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton,
html body #CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:hover,
html body #CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:focus,
html body #CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:active {
  /* Kleur herhaald in elke state: Kadence zet de tekst van elke bare
     <button> op wit bij hover/focus (zie .nmk-btn). */
  background-color: var(--navy-900); border-color: var(--navy-900); color: #fff;
  border-radius: var(--r-pill); font-family: var(--font-body); opacity: 1;
  min-height: 44px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s ease;
}
html body #CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:hover {
  background-color: var(--navy-700); border-color: var(--navy-700); transform: translateY(-1px);
}
html body #CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:active {
  transform: translateY(0);
}
html body #CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:focus-visible,
html body #CybotCookiebotDialog :focus-visible {
  outline: 2px solid var(--pink-600); outline-offset: 2px;
}
/* Tabs, schakelaars en links: het Cookiebot-blauw (#1032CF) wordt navy. */
html body #CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  color: var(--navy-500); border-bottom-color: var(--navy-500);
}
html body #CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
  color: var(--navy-500);
}
/* Uit = navy-900 (was Cookiebot-zwart), aan = navy-500: blijft te onderscheiden. */
html body #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--navy-900);
}
html body #CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--navy-500);
}
html body #CybotCookiebotDialog a:not(.CybotCookiebotDialogNavItemLink):not(#CybotCookiebotDialogPoweredbyCybot) {
  color: var(--navy-500);
}

/* --- Cookiebot-widget: het paneel "Cookie-instellingen" linksonder --------
   Zelfde regels als de banner hierboven. De twee knoppen zijn bewust gelijk:
   "Instemming intrekken" mag niet minder opvallen dan "Verander uw
   toestemming" (GBA-checklist, nudging door kleurgebruik). Selectors
   uitgelezen uit het gerenderde widget op 2026-10-06. Cookiebot zelf gebruikt
   drie ID's diep (#CookiebotWidget #CookiebotWidget-buttons #…-btn-change). */
html body #CookiebotWidget {
  font-family: var(--font-body); color: var(--navy-900);
}
/* Cookiebot kleurt de iconen via .CookiebotWidget-body .CookiebotWidget-consents-list;
   die diepte moet hier mee, anders wint hun blauw. */
html body #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list .Cookiebotwidget-consent-icon svg path {
  fill: var(--navy-500);
}
html body #CookiebotWidget .CookiebotWidget-show-consent-details {
  color: var(--navy-500);
}
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw,
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw:hover,
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw:focus,
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw:active,
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change,
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change:hover,
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change:focus,
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change:active {
  /* Kleur in elke state herhaald: Kadence maakt bare <button>-tekst wit. */
  background-color: var(--navy-900); border-color: var(--navy-900); color: #fff;
  border-radius: var(--r-pill); font-family: var(--font-body); min-height: 44px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s ease;
}
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw:hover,
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change:hover {
  background-color: var(--navy-700); border-color: var(--navy-700); transform: translateY(-1px);
}
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw:active,
html body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change:active { transform: translateY(0); }
html body #CookiebotWidget :focus-visible {
  outline: 2px solid var(--pink-600); outline-offset: 2px;
}