/* ════════════════════════════════════════════════════════════════
   SlimBelast — Direction B shared chrome (theme.css)
   Loaded AFTER each page's inline <style>, so it overrides the old
   navy header/nav/footer and applies the new typography site-wide.
   One source of truth for header, nav, dropdown, hamburger, footer
   and the font stack. Page CONTENT keeps its own styles for now.
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --db-green:#06C167; --db-green-deep:#053B26; --db-ink:#0E1726;
  /* Readable deep green for TEXT, LINKS and solid BUTTONS (white text).
     The vivid --db-green (#06C167) is only ~2.4:1 on white / under white text,
     so it is reserved for decorative FILLS (hero, badges, icon chips). Any
     green that carries text must use --db-green-strong (≈4.9:1 on white). */
  --db-green-strong:#0A8248; --db-green-strong-h:#086B3C;
  --db-muted:#5A6473; --db-lime:#D8FF47; --db-soft:#EFF8F2; --db-soft2:#F4F6F8; --db-line:#E9EDF1;
  /* Repoint the existing font tokens to the new stack */
  --ff-sans:'Inter Tight', system-ui, -apple-system, sans-serif;
  --ff-display:'Space Grotesk', system-ui, sans-serif;
  --ff-num:'IBM Plex Mono', monospace;
}
body{ font-family:'Inter Tight', system-ui, -apple-system, sans-serif; }

/* ── Header ── */
.header{
  background:rgba(255,255,255,0.94) !important;
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--db-line) !important;
  box-shadow:none !important;
  /* Centre the header content to the same 1160px column as the homepage */
  padding-left:max(18px, calc((100% - 1160px) / 2 + 32px)) !important;
  padding-right:max(18px, calc((100% - 1160px) / 2 + 32px)) !important;
}
.logo-name, .logo-text{ font-family:'Space Grotesk',sans-serif; color:var(--db-ink) !important; letter-spacing:-0.01em; text-transform:none !important; }
.logo-name .accent, .logo-text .accent{ color:var(--db-green-strong) !important; }
.logo-tag, .logo-sub{ color:var(--db-muted) !important; letter-spacing:0; text-transform:none !important; }

/* Recolour the logo mark to the green Direction B mark */
.logo-icon svg rect:first-of-type{ fill:var(--db-green); rx:12px; }
.logo-icon svg rect:not(:first-of-type){ fill:#fff; }
.logo-icon svg path{ stroke:#fff; }
.logo-icon svg line{ stroke:#fff; }
.logo-icon svg text{ fill:var(--db-lime); }
.logo-icon svg g line{ stroke:var(--db-lime); }

/* ── Nav links → pill nav (light) ── */
.nav-link{ color:var(--db-muted) !important; font-weight:500; border-radius:30px; letter-spacing:0; }
.nav-link:hover{ background:var(--db-soft2) !important; color:var(--db-ink) !important; }
.nav-link.active{ background:transparent !important; color:var(--db-ink) !important; font-weight:600; }

/* Dropdown → light */
.nav-dropdown-toggle{ color:var(--db-muted) !important; }
.nav-dropdown-menu{
  background:#fff !important; border:1px solid var(--db-line) !important;
  border-radius:16px !important; box-shadow:0 18px 40px rgba(14,23,38,0.12) !important; min-width:240px;
}
.nav-dropdown-menu .nav-link{ border-radius:10px; }
.nav-dropdown-menu .nav-link:hover{ background:var(--db-soft2) !important; }

/* Lang toggle → light */
.lang-toggle{ background:var(--db-soft2) !important; border:none !important; border-radius:30px; }
.lang-toggle button{ color:var(--db-muted) !important; border-radius:30px; }
.lang-toggle button.active{ background:#fff !important; color:var(--db-ink) !important; }

/* Hamburger bars → ink */
.sf-hamburger{ background:var(--db-soft2); border-radius:12px; }
.sf-hamburger span{ background:var(--db-ink) !important; }

/* Header "2026" pill — header is now white, so white-on-translucent-white text
   was invisible (1:1). Give it a readable green pill on the light header. */
.header-badge{ background:var(--db-soft) !important; color:var(--db-green-strong) !important;
  border:1px solid #CFEBDD !important; }

/* ── Footer → light ── */
.footer{ background:var(--db-soft2) !important; color:var(--db-muted) !important; border-top:1px solid var(--db-line); }
.footer a{ color:var(--db-muted) !important; }
.footer a:hover{ color:var(--db-ink) !important; }

/* ── Mobile slide-in nav → white panel ── */
@media (max-width:900px){
  .main-nav{ background:#fff !important; box-shadow:-8px 0 30px rgba(14,23,38,0.12) !important; border-left:1px solid var(--db-line); width:min(260px,76vw) !important; padding-left:14px !important; padding-right:14px !important; }
  .main-nav .nav-link{ color:var(--db-muted) !important; }
  .main-nav .nav-link.active{ background:var(--db-soft2) !important; color:var(--db-ink) !important; }
  .nav-dropdown-menu{ background:var(--db-soft2) !important; box-shadow:none !important; border:none !important; }
}

/* ════════════════════════════════════════════════════════════════
   BODY-HARMONISATIE (conform de index-huisstijl)
   Remapt de oude design-tokens (groen #2EA86A / navy / geel) naar het
   Direction B-palet, zet grote koppen op ink (zoals op de homepage:
   koppen = ink, accenten = groen) en gelijkt de paginabreedte aan de
   index (1160px), met behoud van lees-/tool-breedtes via :has().
   ════════════════════════════════════════════════════════════════ */
:root{
  /* Was vivid #06C167 — repointed to the readable deep green so every legacy
     use of --ro-blauw / --green (links, section titles, solid buttons with
     white text) clears WCAG AA. Decorative fills use --db-green directly. */
  --ro-blauw:#0A8248;
  --ro-blauw-mid:#086B3C;
  --green:#0A8248;
  --green-bg:#EFF8F2;
  --ro-lichtblauw:#0E1726;
  --ro-lichtblauw-bg:#EFF8F2;
  --ro-lichtblauw-pale:#EFF8F2;
  --text-primary:#0E1726;
  --bg:#FFFFFF;
  --bg-card:#FFFFFF;
  --border:#E9EDF1;
  --ro-geel:#D8FF47;
}

/* Grote koppen → ink (accenten/links/knoppen blijven groen via de tokens) */
.page-title, .post-title, .post-card h2, article h2, article h3, .panel h2, .explainer h2,
.section h2, .faq-q, .pillar h3, .price-card h3, .step h3 { color:#0E1726 !important; }

/* Lime-knoppen/badges krijgen donkere tekst voor contrast */
.badge, .cta-banner .cta-btn, .price-card.featured .price-cta,
.final-cta .btn-primary { color:#053B26 !important; }

/* Paginabreedte gelijk aan index (1160px); behoud lees-/tool-breedte */
.container{ max-width:1160px; }
.container:has(article), .container:has(.post-intro){ max-width:760px; }
.container:has(.result-hero){ max-width:660px; }

/* ════════════════════════════════════════════════════════════════
   COMPONENTEN — Direction B-vormen (afronding + pill-knoppen)
   Geeft de pagina-bodies dezelfde ronde, zachte look als de homepage.
   Alleen vorm/afronding; kleur/typografie komt al via de tokens hierboven.
   ════════════════════════════════════════════════════════════════ */
.pillar, .price-card, .faq-item, .post-card, .panel, .card, .profile-card,
.callout, .callout-warn, .result-hero, .metric, .chart-panel, .sources,
.tip, .stat, .related-posts, .cta-banner, .float, .rcard, .feat, .post,
.steps-band, .final, .box-cat, .insight-card, .result-card, .tip-card,
.email-capture, .sf-blog-cta-block { border-radius:18px !important; }

/* Pill-knoppen (zoals op de homepage) */
.btn-primary, .btn-secondary, .price-cta, .cta-btn, .filter-btn,
.cta-btn-secondary, .start-cta, .btn-lime, .btn-green { border-radius:40px !important; }

/* Pill-badges en chips */
.cat-badge, .badge, .badge-soon, .chip, .header-badge, .tag { border-radius:30px !important; }

/* Calculator-specifieke kaarten (eigen klassen) — zachte afronding */
.sidebar-section, .sb-section, .cat-section, .partner-col-wrap, .ib-savings,
.insight-card, .result-card, .voorbeeld-card, .preview-card, .welcome-card,
.box-cat-pill { border-radius:14px !important; }
.box-cat-pill { border-radius:30px !important; }

/* ════════════════════════════════════════════════════════════════
   FINTECH TIP/ADVIES-KAART — herbruikbare component (site-breed)
   Vervangt de "AI-stijl" boxjes met gekleurde linkerrand door een
   schone kaart met een icoon-chip en een besparings-pill.
   Markup: <div class="tip [amber]"><div class="tip-ic">{svg}</div>
   <div class="tip-body"><h3>..</h3><p>..</p>
   <div class="tip-impact-row"><span class="impact">..</span>
   <span class="tip-note">..</span></div>
   <a class="tip-link" href>..</a></div></div>
   ════════════════════════════════════════════════════════════════ */
.tip{ background:#fff; border:1px solid var(--db-line); border-left:1px solid var(--db-line); border-radius:18px !important; padding:18px; margin-bottom:14px; display:flex; gap:14px; align-items:flex-start; }
.tip-ic{ width:42px; height:42px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#EFF8F2; color:var(--db-green-strong); }
.tip-ic svg{ width:22px; height:22px; display:block; }
.tip.amber .tip-ic{ background:#FEF6E7; color:#8A5200; }
.tip-body{ flex:1; min-width:0; }
.tip-body h3{ font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:600; margin:0 0 5px; color:var(--db-ink); letter-spacing:-0.01em; }
.tip-body p{ font-size:14px; color:var(--db-muted); line-height:1.55; margin:0 0 10px; }
.tip-impact-row{ margin-bottom:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tip .impact{ display:inline-block; background:var(--db-lime); color:var(--db-green-deep); font-weight:600; font-size:13px; padding:6px 13px; border-radius:30px; }
.tip.amber .impact{ background:#FEF6E7; color:#8A5200; }
.tip-note{ font-size:12px; color:#6B7280; }
.tip-link{ color:var(--db-green-strong); font-size:14px; font-weight:600; text-decoration:none; }
.tip-link:hover{ text-decoration:underline; }

/* Blog-callouts → zelfde fintech-taal: geen linkerrand, zachte tint, afgerond */
.callout, .callout-warn{ border-left:0 !important; border:1px solid transparent !important; border-radius:14px !important; padding:16px 18px !important; }
.callout{ background:#EFF8F2 !important; border-color:#CFEBDD !important; }
.callout-warn{ background:#FEF6E7 !important; border-color:#F3E0B8 !important; }

/* ════════════════════════════════════════════════════════════════
   CONTRAST-VEILIGHEID (WCAG AA)  —  RULE: any colour that carries text
   must clear ~4.5:1 (normal) / 3:1 (large). Vivid green #06C167 fails
   under white text and as text on white, so:
     • solid green buttons  → deep-green bg + WHITE text (forced, beats
       inherited link colours like `.footer-info a`)
     • green links/titles   → deep green via the remapped --ro-blauw/--green
     • amber headings/links → darkened so they pass on the soft-amber tint
     • footer fine print     → readable muted, not the old pale blue-grey
   When adding new UI, never put white text on #06C167 or green text on
   white — use --db-green-strong (text/links) or a dark text on green.
   ════════════════════════════════════════════════════════════════ */
.cta-btn:not(.secondary), .contact-submit-btn, .btn-primary, .price-cta:not(.secondary),
.start-cta, .btn-green, .filter-btn.active, .cta-banner .cta-btn{
  background:var(--db-green-strong) !important; color:#fff !important;
}
.cta-btn:not(.secondary):hover, .contact-submit-btn:hover, .btn-primary:hover,
.price-cta:not(.secondary):hover, .start-cta:hover, .btn-green:hover{
  background:var(--db-green-strong-h) !important;
}
/* Amber text (warnings / "belangrijk") → readable on the soft-amber tint */
.amber-title, .contact-section-title.amber-title, .callout-warn a, .disclaimer a{
  color:#8A5200 !important;
}
/* Footer fine print / copyright → readable muted instead of pale blue-grey */
.footer p, .footer small, .footer .copyright, .footer-bottom, .footer-bottom p,
.footer-legal, .footer-info p{ color:var(--db-muted) !important; }
/* NOTE: category-badge contrast (amber/teal) is fixed at the source by darkening
   the colour values themselves (#B7720A→#8A5200, #00838F→#00697A) so BOTH the
   solid form (white text on colour, in post headers) and the tinted form
   (colour text on a light tint, in post cards) pass AA. Don't re-add a
   background-only !important override here — it breaks the tinted card badges. */

/* ════════════════════════════════════════════════════════════════
   MOBIEL (<= 900px) — voorkom horizontale overflow site-breed.
   1) Het off-canvas hamburger-menu staat (gesloten) buiten beeld rechts
      (position:fixed + translateX(100%)). Zonder clip laat die overhang de
      HELE pagina zijwaarts scrollen. Clip moet op html ÉN body staan (elk
      afzonderlijk clipt de fixed-nav niet). overflow-x:clip houdt overflow-y
      zichtbaar zodat position:sticky blijft werken; hidden = fallback voor
      browsers zonder clip-ondersteuning.
   2) Brede datatabellen niet wegklippen maar binnen hun eigen container laten
      scrollen, zodat punt (1) geen tabelkolommen verbergt.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  html, body{ overflow-x:hidden; overflow-x:clip; }
  table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* backdrop-filter op de header maakt 'm een containing block voor het fixed
     off-canvas-menu, waardoor dat menu maar zo hoog werd als de header (~65px) en
     de meeste links wegvielen. Op mobiel de blur weghalen zodat het menu weer
     viewport-hoog is. De header blijft bijna-opaak wit, dus visueel nauwelijks verschil. */
  .header{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* ════════════════════════════════════════════════════════════════
   CTA-BLOKKEN → homepage-taal (geen gradients)
   De homepage gebruikt uitsluitend effen vlakken (ink #0E1726 voor de
   eind-CTA, zachte tinten voor kaarten) — nergens harde gradients. De
   oude blog/tool-CTA's droegen nog gradients uit de vorige huisstijl:
     • .sf-blog-cta-block: blauwe gradient + blauwe rand + navy knop
       (inline styles in 24 blogposts — daarom hier met !important
       centraal overschreven i.p.v. 24 bestanden bewerken)
     • .cta-box / .cta-banner / .summary-panel: groene 135deg-gradient
     • .result-hero (bruto-netto): navy gradient
   Alles → effen ink-vlak met de standaard groene pill-knop.
   ════════════════════════════════════════════════════════════════ */
.cta-box, .cta-banner, .summary-panel, .result-hero{
  background: var(--db-ink) !important;
}
/* Koppen ín deze ink-panelen zijn wit — de blanket koppen-regel bovenin
   (".page-title, … article h3 { color:#0E1726 }") maakte de .cta-box-h3
   in blogartikelen anders ink-op-ink (onzichtbaar). */
.cta-box h2, .cta-box h3, .cta-banner h2, .cta-banner h3,
.summary-panel h2, .summary-panel h3, .result-hero h2, .result-hero h3{ color:#fff !important; }
.sf-blog-cta-block{
  background: var(--db-soft) !important;
  border: 1px solid #CFEBDD !important;
}
/* Binnen-elementen van het blog-CTA-blok dragen inline kleuren (oud navy) */
.sf-blog-cta-block a{
  background: var(--db-green-strong) !important;
  color: #fff !important;
  border-radius: 40px !important;
}
.sf-blog-cta-block a:hover{ background: var(--db-green-strong-h) !important; }

/* ════════════════════════════════════════════════════════════════
   TYPOGRAFIE-HARMONISATIE (font-audit 3 juli 2026)
   De homepage is de referentie: body 16px, nav 14,5px, knoppen 15px.
   Bewust twee lagen:
     • LEESVLAKKEN (blogartikelen, methodiek, privacy, tool-uitleg,
       pagina-intro's) → 16px leestekst, zoals de homepage. Gezet op de
       CONTAINER zodat bewuste kleine teksten (bronnoten, tabellen,
       .callout, .sources, inline fs-sm) hun eigen maat houden.
     • TOOL-UI (velden, panelen, datatabellen van de calculators)
       → blijft op de compacte 14px-schaal; dichte formulieren horen
       kleiner dan proza.
   Gedeelde chrome (nav, primaire knoppen) overal op homepage-maat.
   ════════════════════════════════════════════════════════════════ */
/* Navigatie: binnenpagina's 13px → 14,5px zoals de homepage */
.nav-link{ font-size: 14.5px; }
/* Primaire CTA-knoppen: 13–14px → 15px zoals de homepage */
.cta-btn:not(.secondary), .btn-primary, .price-cta:not(.secondary),
.start-cta, .btn-green, .cta-banner .cta-btn, .contact-submit-btn{
  font-size: 15px !important;
}
/* Leesvlakken → 16px (containerniveau) */
article,                 /* blogartikelen */
.section-content,        /* methodiek-secties */
.privacy-section,        /* privacyverklaring */
.explainer{              /* uitlegblokken onder de tools */
  font-size: 16px;
}
/* Pagina-intro onder de H1: wisselde 14/16px per pagina → overal 16px */
.page-sub{ font-size: 16px; }
/* De methodiek heeft een eigen globale `p { font-size: var(--fs-base) }`
   die de container-overerving verslaat. Alleen KLASSELOZE paragrafen naar
   16px tillen: .source-note, .note e.d. en inline fs-sm blijven klein. */
.section-content p:not([class]),
.section-content li:not([class]){ font-size: 16px; }