/* =============================================================
   Dutchmind merkstylesheet — dm.css
   Bron: DUTCHMIND-STIJLGIDS v4. Gedeeld door RapportageScore en RisicoRadar.
   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;
  --dm-plum:        #5C3A5E;  /* 5e productaccent (CaseCheck, WP7 11-07) — wit icoon-label erop: ~9.5:1, ruim AA/AAA */
  --dm-teal:        #1F6B6E;  /* 6e productaccent (EvaluatieScan, 11-07) — wit icoon-label erop: ~6.2:1, ruim AA */
  --dm-indigo:      #2E4172;  /* 7e productaccent (VoortgangsRadar, 18-07) — wit icoon-label erop: ~9.9:1, ruim AAA */
  --dm-bronze:      #7A5230;  /* 8e productaccent (HelderSchrijver, 18-07) — wit icoon-label erop: ~6.8:1, ruim AA */
  --dm-burgundy:    #6E2A38;  /* 9e productaccent (BesluitBriefing, 18-07) — wit icoon-label erop: ~10.2:1, ruim AAA */

  /* 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; }
html{ scroll-behavior:smooth; }
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) ----------
   Zelfde blok als ~/dutchmind/shared/dm.css (productsuite) — hier lokaal
   gehouden omdat de startpagina buiten het sync_shared.py-mechanisme valt
   (geen prijs_cents). Bij wijzigingen: beide plekken bijwerken. */
.dm-menu-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:38px; height:38px; 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; }
}