/* AUTO-GENERATED — NIET handmatig bewerken (wordt overschreven).
   Bron: ~/dutchmind/shared/dm.css via ~/dutchmind/scripts/sync_shared.py */

/* =============================================================
   Dutchmind merkstylesheet — dm.css
   Bron: DUTCHMIND-STIJLGIDS v4. Gedeeld door RapportageScore en EvaluatieScore.
   Plain CSS, geen build-stap, geen webfonts, geen CDN.
   ============================================================= */

:root{
  /* Kleur — anker */
  --dm-ink:         #1B2A4A;
  --dm-ink-2:       #26375C;

  /* Kleur — ondergrond */
  --dm-parchment:   #EDE8DE;
  --dm-parchment-2: #F5F2EC;
  --dm-paper:       #FBFAF7;

  /* Kleur — accent (spaarzaam). #A94E2C: AA op licht. Op ink: gebruik -soft. */
  --dm-oxide:       #A94E2C;  /* MI-highlight, primaire CTA, aandacht — ALLEEN op licht */
  --dm-oxide-hover: #8F3F1E;
  --dm-oxide-soft:  #E4C7B8;  /* accent op donkere vlakken (8.91:1 op ink) */

  /* Kleur — op donkere vlakken */
  --dm-on-ink:      #C9CFDC;
  --dm-on-ink-mute: #93A0BA;

  /* Kleur — functioneel */
  --dm-line:        #CBC3B4;
  --dm-line-ink:    rgba(255,255,255,.16);
  --dm-muted:       #6B6558;
  --dm-good:        #3C7A5A;
  --dm-alert:       #A94E2C;

  /* Typografie — systeemfonts, geen webfonts */
  --dm-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --dm-sans:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dm-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Ritme */
  --dm-radius:    10px;
  --dm-radius-lg: 16px;
  --dm-gap:       16px;
  --dm-shadow:    0 12px 28px -18px rgba(27,42,74,.5);
}

/* ---------- Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* scroll-padding-top: elke header in de suite is position:sticky (gemeten 79px,
   product-index; startpagina 65-73px). Zonder deze regel stopt ankernavigatie
   (href="#...", verse lading met hash, scrollIntoView) exact op de bovenkant van
   het doel — en dekt de sticky header die bovenkant precies af: de sectiekop van
   "Start analyse"/"Hoe werkt het?" verdwijnt eronder. 96px = hoogste header + marge.
   Expertreview 2026-08-12 punt 1 (de daar vermoede kapotte preventDefault-handler
   bestaat niet; scrollen werkte al — zie OPS-914). */
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  font-family:var(--dm-sans);
  font-size:16px;
  line-height:1.5;
  color:var(--dm-ink);
  background:var(--dm-parchment);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg,canvas{ display:block; max-width:100%; }
strong{ font-weight:700; }

/* State-machine utility — de JS toggelt dit; MOET display forceren */
.hidden,[hidden]{ display:none !important; }

/* ---------- Typografie ---------- */
.dm-h1{ font-family:var(--dm-display); font-weight:400; font-size:clamp(32px,5vw,56px); letter-spacing:-.015em; line-height:1.06; }
.dm-h2{ font-family:var(--dm-display); font-weight:400; font-size:clamp(24px,3.2vw,36px); line-height:1.12; }
.dm-h3{ font-family:var(--dm-display); font-weight:700; font-size:22px; line-height:1.2; }
.dm-kicker{ font-family:var(--dm-sans); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.02em; }
.dm-lead{ font-size:18px; color:var(--dm-ink-2); line-height:1.5; }
.dm-caption{ font-size:13px; color:var(--dm-muted); }
.dm-meta{ font-family:var(--dm-mono); font-size:12px; letter-spacing:.08em; color:var(--dm-muted); }

/* ---------- Wordmark ---------- */
.dm-wordmark{
  font-family:var(--dm-display);
  font-weight:700;
  font-size:21px;
  letter-spacing:-.01em;
  display:inline-flex;
  align-items:baseline;
}
.dm-wm-mi{ color:var(--dm-oxide); }
.dm-wm-rest{ color:var(--dm-ink); }
.dm-wordmark.on-ink .dm-wm-rest{ color:var(--dm-parchment); }
.dm-wordmark.on-ink .dm-wm-mi{   color:var(--dm-oxide-soft); }

/* ---------- Meetlat-motief ---------- */
.dm-ruler{ height:14px; display:flex; align-items:flex-end; overflow:hidden; }
.dm-ruler i{ flex:1; border-left:1px solid var(--dm-line); height:5px; }
.dm-ruler i:nth-child(5n+1){ height:11px; }
.dm-ruler.on-ink i{ border-color:var(--dm-line-ink); }

/* ---------- Knoppen ---------- */
.dm-btn{
  font-family:var(--dm-sans);
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
  border-radius:var(--dm-radius);
  border:1px solid var(--dm-ink);
  cursor:pointer;
  display:inline-block;
  text-decoration:none;
  text-align:center;
  transition:background-color .16s, color .16s, border-color .16s;
}
.dm-btn-lg{ font-size:16px; padding:13px 26px; }
.dm-btn-primary{ background:var(--dm-oxide); border-color:var(--dm-oxide); color:#fff; }
.dm-btn-primary:hover{ background:var(--dm-oxide-hover); border-color:var(--dm-oxide-hover); }
.dm-btn-solid{ background:var(--dm-ink); color:var(--dm-parchment); }
.dm-btn-solid:hover{ background:var(--dm-ink-2); }
.dm-btn-ghost{ background:transparent; color:var(--dm-ink); }
.dm-btn-ghost:hover{ background:var(--dm-ink); color:var(--dm-parchment); }
.dm-btn:disabled,.dm-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.dm-btn-block{ display:block; width:100%; }

/* ---------- Kaart / paneel ---------- */
.dm-card{
  background:var(--dm-paper);
  border:1px solid var(--dm-line);
  border-radius:var(--dm-radius-lg);
  padding:22px;
}
.dm-card--hover{ transition:border-color .18s, transform .18s, box-shadow .18s; }
.dm-card--hover:hover{ border-color:var(--dm-ink); transform:translateY(-3px); box-shadow:var(--dm-shadow); }

/* ---------- Score ---------- */
.dm-score{ font-family:var(--dm-display); font-weight:700; font-size:56px; line-height:1; color:var(--dm-ink); }
.dm-score em{ font-style:normal; font-size:26px; color:var(--dm-muted); }

/* ---------- Score-balk ---------- */
.dm-bar{ display:grid; grid-template-columns:140px 1fr 36px; align-items:center; gap:12px; margin-bottom:13px; }
.dm-bar-label{ font-size:13px; color:var(--dm-ink-2); }
.dm-bar-track{ height:7px; background:var(--dm-parchment); border-radius:4px; overflow:hidden; }
.dm-bar-fill{ height:100%; background:var(--dm-ink); border-radius:4px; transition:width .5s ease; }
.dm-bar-fill.is-good{  background:var(--dm-good); }
.dm-bar-fill.is-alert{ background:var(--dm-alert); }
.dm-bar-value{ font-family:var(--dm-mono); font-size:12px; text-align:right; color:var(--dm-muted); }

/* ---------- Stappen ---------- */
.dm-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dm-step{ border-top:2px solid var(--dm-ink); padding-top:var(--dm-gap); }
.dm-step-num{ font-family:var(--dm-mono); font-size:12px; color:var(--dm-oxide); letter-spacing:.1em; }
.dm-step h4{ font-family:var(--dm-display); font-weight:700; font-size:19px; margin:8px 0 6px; }
.dm-step p{ font-size:14px; color:var(--dm-muted); }
@media (max-width:760px){ .dm-steps{ grid-template-columns:1fr; } }

/* ---------- Privacy-chip ---------- */
.dm-chip{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; color:var(--dm-ink-2);
  background:var(--dm-paper); border:1px solid var(--dm-line);
  border-radius:var(--dm-radius); padding:10px 14px;
}
.dm-chip svg{ color:var(--dm-good); flex-shrink:0; }

/* ---------- Donkere sectie ---------- */
.dm-dark{ background:var(--dm-ink); color:var(--dm-parchment); }
.dm-dark .dm-lead{ color:var(--dm-on-ink); }
.dm-dark .dm-eyebrow{ font-family:var(--dm-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dm-on-ink-mute); }
.dm-dark em{ font-style:italic; color:var(--dm-oxide-soft); }
.dm-dark .dm-step-num{ color:var(--dm-oxide-soft); }
.dm-dark .dm-chip{ background:transparent; border-color:var(--dm-line-ink); color:var(--dm-on-ink); }
.dm-dark .dm-chip svg{ color:var(--dm-oxide-soft); }

/* ---------- Layout ---------- */
.dm-container{ max-width:1180px; margin:0 auto; padding:0 24px; }
.dm-container-narrow{ max-width:820px; margin:0 auto; padding:0 24px; }
.dm-section{ padding:80px 0; }
.dm-section--alt{ background:var(--dm-parchment-2); }
@media (max-width:760px){ .dm-section{ padding:56px 0; } }

/* ---------- Toegankelijkheid ---------- */
:focus-visible{ outline:3px solid var(--dm-ink); outline-offset:2px; }
.dm-dark :focus-visible{ outline-color:var(--dm-oxide-soft); }
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ---------- Mobiele navigatie: hamburger-menu (OPS-866, gebruikerstest fix 1) ----------
   Generiek voor alle headerpatronen (rs-nav__inner-kind, rr-nav, blog-nav): de
   linkscontainer wordt gevonden en de knop toegevoegd door initDmMobileNav() in
   dm-lang-shared.js. Bewust GEEN per-product HTML-wijziging nodig — dit CSS-blok +
   die ene JS-functie volstaan voor alle 9 producten (en hun blogs). Container krijgt
   de klasse "dm-nav-open" toegevoegd/verwijderd door de JS; hieronder alleen styling. */
.dm-menu-toggle{
  display:none;
  align-items:center; justify-content:center;
  /* Gebruikerstest ronde 4, bevinding 3: 38px lag onder de 44px-tapzone-richtlijn.
     Tapzone vergroot via width/height (niet het icoon — svg blijft 19px) zodat
     alleen de klikzone groeit, de visuele knop nauwelijks verandert. */
  width:44px; height:44px; flex:0 0 auto;
  background:transparent;
  border:1px solid var(--dm-line-ink);
  border-radius:8px;
  color:var(--dm-on-ink);
  cursor:pointer; padding:0;
}
.dm-menu-toggle svg{ width:19px; height:19px; display:block; pointer-events:none; }
.dm-menu-toggle:hover{ border-color:var(--dm-oxide-soft); color:var(--dm-oxide-soft); }
.dm-menu-toggle:focus-visible{ outline:3px solid var(--dm-oxide-soft); outline-offset:2px; }

@media (max-width:639px){
  .dm-menu-toggle{ display:inline-flex; }

  .dm-nav-open{
    position:absolute !important;
    left:0 !important; right:0 !important; top:100% !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    background:var(--dm-ink);
    border-bottom:1px solid var(--dm-line-ink);
    box-shadow:var(--dm-shadow);
    padding:6px 24px 20px !important;
    z-index:55;
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }
  .dm-nav-open a{
    display:flex !important;
    padding:12px 4px;
    border-bottom:1px solid var(--dm-line-ink);
  }
  .dm-nav-open a:last-of-type{ border-bottom:none; }
  .dm-nav-open #langSwitcher{ padding:8px 0 4px; }
  .dm-nav-open .dm-btn{ justify-content:center; margin-top:8px; border-bottom:none; }
}

/* ---------- Extra links in het mobiele hamburgermenu (gebruikerstest ronde 2, fix 2) ----------
   Organisaties/Privacy/Verantwoording staan niet in de bestaande desktop-nav (die toont alleen
   productlinks) — initDmMobileNav() in dm-lang-shared.js voegt ze als los blokje toe, ván binnen
   dezelfde linkscontainer die op mobiel het uitklappaneel wordt. Op desktop blijft dit blokje
   verborgen: het hoort niet thuis in de knappe navbalk, alleen in het uitgeklapte paneel. Een
   losse div (i.p.v. losse <a>'s) ontloopt bewust de generieke ".rr-nav a"/".rs-nav__inner a"-
   selectors (die matchen alleen op <a>, niet op een omhullende div) — geen specificiteitsstrijd
   nodig, de child-links erven de bestaande ".dm-nav-open a"-stijl (padding/border) gratis mee. */
.dm-nav-extra-links{ display:none; }
@media (max-width:639px){
  .dm-nav-open .dm-nav-extra-links{
    display:flex;
    flex-direction:column;
    margin-top:4px;
    padding-top:4px;
    border-top:1px solid var(--dm-line-ink);
  }
}