/* ==========================================================================
   MIEDEMA ASSISTANCE — ROOT STYLESHEET
   Design tokens, fluid scales, light/dark mode, base reset.

   Laad dit bestand ALS EERSTE in het child-theme (voor style.css,
   vacature-templates.css en ma-vacature-styles.css). Alle andere
   stylesheets bouwen op deze tokens.

   Filosofie
   ---------
   — Mobile-first: waarden beginnen klein en groeien met viewport.
   — Intrinsic design: clamp() en min() i.p.v. breakpoints waar
     mogelijk. Media queries alleen voor dingen die niet intrinsiek
     kunnen (kleurschema, aspect-ratio-switch, reduced-motion, print).
   — Tokens zijn alles: kleur, afstand, typografie, radius, motion —
     custom properties. Componenten consumeren tokens, nooit
     hardcoded waarden.
   — Logical properties: margin-block / padding-inline / inset-*
     voor toekomstbestendige RTL- en i18n-ondersteuning.
   — Progressive enhancement: werkt zonder JS, beter met moderne CSS.
   — Kleurschema's: light is default, dark volgt het OS automatisch
     en is expliciet af te dwingen via [data-theme="dark|light"] op
     <html>.

   Naming conventie
   ----------------
   — CSS-variabelen:  --ma-*
   — Classes:         .ma-*
   — Componenten:     .ma-<scope>-<element>   (ovz, sgl, header, footer)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. COLOR TOKENS — primitieven + semantische laag
   --------------------------------------------------------------------------
   Laag 1: primitieven    → pure hex, nooit direct in componenten gebruiken
   Laag 2: semantisch     → surface / ink / border / accent → wél gebruiken
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* ---- Neutrals — grijsschaal voor subtle surfaces & text ---- */
  --ma-white:             #ffffff;
  --ma-off-white:         #d4d8d8;   /* = GP --off-white           */
  --ma-gray-50:           #f7f7f7;
  --ma-gray-100:          #ededed;
  --ma-gray-200:          #dadada;
  --ma-gray-400:          #9a9a9a;
  --ma-gray-600:          #525252;
  --ma-gray-800:          #1f1f1f;
  --ma-black:             #000000;   /* = GP --contrast            */

  /* ---- Merk-accenten — exact GP admin waarden ---- */
  --ma-blue-300:          #3e84b3;   /* = GP --global-color-7      */
  --ma-blue-400:          #176496;   /* = GP --global-color-5      */
  --ma-blue-500:          #00548C;   /* = GP --accent              */
  --ma-blue-600:          #003152;   /* = GP --prussian-blue       */

  --ma-green-400:         #2da855;   /* lichter, voor dark bg       */
  --ma-green-500:         #138A36;   /* = GP --accent-form          */
  --ma-green-600:         #0e6e2c;   /* hover (afgeleid, 20% donk.) */
  --ma-green-700:         #0a5220;

  /* ---- Status ---- */
  --ma-red-500:           #c62828;
  --ma-red-50:            #ffebee;
  --ma-amber-500:         #c98a0a;
  --ma-green-50:          #e8f5e9;

  /* ---- Semantisch: LIGHT (default) ---- */
  --ma-surface-0:         var(--ma-white);        /* page background         */
  --ma-surface-1:         var(--ma-gray-50);      /* card / raised surface   */
  --ma-surface-2:         var(--ma-gray-100);     /* sunken / strip          */
  --ma-surface-inverse:   var(--ma-black);        /* dark block — = --contrast */

  --ma-ink-0:             var(--ma-black);        /* primary text            */
  --ma-ink-1:             var(--ma-gray-800);     /* secondary text          */
  --ma-ink-2:             var(--ma-gray-600);     /* tertiary / muted        */
  --ma-ink-inverse:       var(--ma-white);        /* text op dark surface    */

  --ma-border-subtle:     color-mix(in srgb, var(--ma-black) 10%, transparent);
  --ma-border-strong:     color-mix(in srgb, var(--ma-black) 22%, transparent);

  --ma-accent:            var(--ma-green-500);    /* = GP --accent-form      */
  --ma-accent-hover:      var(--ma-green-600);
  --ma-accent-ink:        var(--ma-white);        /* text op accent          */
  --ma-accent-muted:      var(--ma-green-50);

  /* AA-veilige afgeleiden (WCAG 4.5:1). Merkgroen #138A36 haalt op wit maar
     ~4.47:1 — net onder AA, Lighthouse flagt dat. Daarom:
     - accent-text  → groen voor TEKST op page-surfaces (kickers, koppen)
     - accent-solid → groen als ACHTERGROND met accent-ink erop (badges, CTA's)
     Iconen en decoratie mogen gewoon --ma-accent blijven (3:1 volstaat). */
  --ma-accent-text:       var(--ma-green-600);
  --ma-accent-solid:      var(--ma-green-600);
  --ma-accent-solid-hover: var(--ma-green-700);

  --ma-focus-ring:        var(--ma-green-500);

  /* ---- Link kleuren ---- */
  --ma-link:              var(--ma-black);
  --ma-link-hover:        var(--ma-green-600);
  --ma-link-visited:      var(--ma-gray-600);
}


/* --------------------------------------------------------------------------
   2. DARK MODE
   --------------------------------------------------------------------------
   Auto via OS tenzij gebruiker expliciet light kiest.
   Forceer via <html data-theme="dark"> of <html data-theme="light">.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Page-surfaces draaien: wit → donker grijs.
       Geen pure #000 om subtiel onderscheid te houden met de
       merk-zwarte accent-blokken (--ma-surface-inverse blijft #000). */
    --ma-surface-0:       #0f0f0f;
    --ma-surface-1:       var(--ma-gray-800);
    --ma-surface-2:       #1a1a1a;

    /* --ma-surface-inverse BLIJFT var(--ma-black) — dark accent
       blokken (hero, steps, primary card) blijven zwart in beide modes.
       Dat voorkomt dat hardcoded witte tekst binnenin die blokken
       onzichtbaar wordt als het blok zelf ineens wit zou worden. */

    --ma-ink-0:           var(--ma-white);
    --ma-ink-1:           var(--ma-off-white);
    --ma-ink-2:           var(--ma-gray-400);

    /* --ma-ink-inverse blijft var(--ma-white) — witte tekst op zwarte
       accent-blokken blijft in beide modes wit. */

    --ma-border-subtle:   color-mix(in srgb, var(--ma-white) 10%, transparent);
    --ma-border-strong:   color-mix(in srgb, var(--ma-white) 18%, transparent);

    --ma-accent:          var(--ma-green-400);
    --ma-accent-hover:    var(--ma-green-500);
    --ma-accent-ink:      var(--ma-black);
    --ma-accent-muted:    color-mix(in srgb, var(--ma-green-500) 20%, transparent);

    --ma-accent-text:       var(--ma-green-400);
    --ma-accent-solid:      var(--ma-green-400);
    --ma-accent-solid-hover: var(--ma-green-500);

    --ma-focus-ring:      var(--ma-green-400);

    --ma-link:            var(--ma-white);
    --ma-link-hover:      var(--ma-green-400);
    --ma-link-visited:    var(--ma-off-white);
  }
}

/* Expliciet geforceerd licht (wint van OS) — zorgt dat native form-controls,
   scrollbars en UA-styling meeschakelen met de toggle, niet met het OS. */
:root[data-theme="light"] {
  color-scheme: light;
}

/* Expliciet geforceerd donker (wint van OS) */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ma-surface-0:       #0f0f0f;
  --ma-surface-1:       var(--ma-gray-800);
  --ma-surface-2:       #1a1a1a;

  --ma-ink-0:           var(--ma-white);
  --ma-ink-1:           var(--ma-off-white);
  --ma-ink-2:           var(--ma-gray-400);

  --ma-border-subtle:   color-mix(in srgb, var(--ma-white) 10%, transparent);
  --ma-border-strong:   color-mix(in srgb, var(--ma-white) 18%, transparent);

  --ma-accent:          var(--ma-green-400);
  --ma-accent-hover:    var(--ma-green-500);
  --ma-accent-ink:      var(--ma-black);
  --ma-accent-muted:    color-mix(in srgb, var(--ma-green-500) 20%, transparent);

  --ma-accent-text:       var(--ma-green-400);
  --ma-accent-solid:      var(--ma-green-400);
  --ma-accent-solid-hover: var(--ma-green-500);

  --ma-focus-ring:      var(--ma-green-400);

  --ma-link:            var(--ma-white);
  --ma-link-hover:      var(--ma-green-400);
  --ma-link-visited:    var(--ma-off-white);
}


/* --------------------------------------------------------------------------
   3. FLUID TYPE SCALE
   --------------------------------------------------------------------------
   Basis-step = body (1rem op mobiel, ~1.05rem op desktop).
   Alle stappen schalen vloeiend, geen breakpoint-sprongen.
   -------------------------------------------------------------------------- */

:root {
  /* micro / label / kicker */
  --ma-text-3xs:   clamp(0.62rem, 0.55rem + 0.20vw, 0.72rem);
  --ma-text-2xs:   clamp(0.70rem, 0.63rem + 0.22vw, 0.80rem);
  --ma-text-xs:    clamp(0.78rem, 0.70rem + 0.25vw, 0.88rem);

  /* body */
  --ma-text-sm:    clamp(0.85rem, 0.78rem + 0.22vw, 0.95rem);
  --ma-text-base:  clamp(0.90rem, 0.82rem + 0.30vw, 1.05rem);
  --ma-text-md:    clamp(1.00rem, 0.92rem + 0.30vw, 1.15rem);

  /* koppen */
  --ma-text-lg:    clamp(1.15rem, 1.02rem + 0.40vw, 1.35rem);   /* h4/h5    */
  --ma-text-xl:    clamp(1.20rem, 1.05rem + 0.40vw, 1.35rem);   /* h3       */
  --ma-text-2xl:   clamp(1.40rem, 1.20rem + 0.60vw, 1.60rem);   /* h2       */
  --ma-text-3xl:   clamp(1.60rem, 1.40rem + 0.80vw, 1.80rem);   /* h1       */
  --ma-text-4xl:   clamp(1.80rem, 1.45rem + 1.50vw, 2.40rem);   /* display  */

  /* Line-heights */
  --ma-leading-tight:    1.15;   /* koppen                 */
  --ma-leading-snug:     1.30;   /* sub-koppen, kleine bk. */
  --ma-leading-normal:   1.55;   /* body                   */
  --ma-leading-relaxed:  1.65;   /* lange lap tekst        */

  /* Letter-spacing (consistent met bestaande codebase) */
  --ma-tracking-tight:   -0.01em;
  --ma-tracking-body:    0.3px;
  --ma-tracking-wide:    0.06em;   /* badges                */
  --ma-tracking-wider:   0.10em;   /* kleine labels         */
  --ma-tracking-widest:  0.14em;   /* kickers               */

  /* Gewichten */
  --ma-weight-regular:   400;
  --ma-weight-medium:    500;
  --ma-weight-semibold:  600;
  --ma-weight-bold:      700;

  /* Lees-breedtes */
  --ma-measure-heading:  65ch;
  --ma-measure-prose:    75ch;

  /* Font families — system font stack als default; overschrijf in
     style.css als je een webfont laadt. */
  --ma-font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --ma-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
                  "Liberation Mono", monospace;
}


/* --------------------------------------------------------------------------
   4. FLUID SPACE SCALE
   --------------------------------------------------------------------------
   Gebruik voor padding, margin, gap. Volgt het bestaande patroon
   "min-rem, base-rem + vw, max-rem" zodat spacing meeademt met viewport.
   -------------------------------------------------------------------------- */

:root {
  --ma-space-3xs:  clamp(0.25rem, 0.22rem + 0.10vw, 0.35rem);
  --ma-space-2xs:  clamp(0.40rem, 0.32rem + 0.25vw, 0.55rem);
  --ma-space-xs:   clamp(0.50rem, 0.40rem + 0.35vw, 0.75rem);
  --ma-space-sm:   clamp(0.75rem, 0.60rem + 0.50vw, 1.00rem);
  --ma-space-md:   clamp(1.00rem, 0.80rem + 0.75vw, 1.50rem);
  --ma-space-lg:   clamp(1.50rem, 1.00rem + 2.00vw, 2.50rem);
  --ma-space-xl:   clamp(2.00rem, 1.00rem + 3.00vw, 3.50rem);
  --ma-space-2xl:  clamp(3.00rem, 2.00rem + 4.00vw, 5.00rem);
  --ma-space-3xl:  clamp(4.00rem, 2.00rem + 5.00vw, 7.00rem);

  /* Aliassen die je vaak terug ziet komen in componenten */
  --ma-pad-card:       var(--ma-space-md);   /* binnen cards            */
  --ma-pad-section:    var(--ma-space-xl);   /* tussen page-secties     */
  --ma-gap-grid:       var(--ma-space-md);   /* tussen grid-items       */
  --ma-gap-stack:      var(--ma-space-sm);   /* verticaal stapelen      */
}


/* --------------------------------------------------------------------------
   5. LAYOUT, RADIUS, MOTION, ELEVATION
   -------------------------------------------------------------------------- */

:root {
  /* Layout */
  --ma-wrap-max:         1620px;
  --ma-wrap-narrow:      960px;
  --ma-wrap-reading:     720px;
  --ma-wrap-gutter:      clamp(1rem, 0.5rem + 2vw, 1.5rem);

  --ma-header-h:         clamp(4.5rem, 4rem + 2vw, 6rem);

  /* Radius — huisstijl is 0; tokens voor uitzonderingen */
  --ma-radius-none:      0;
  --ma-radius-sm:        2px;
  --ma-radius-md:        4px;
  --ma-radius-pill:      9999px;

  /* Elevation */
  --ma-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06),
                   0 1px 3px rgba(0, 0, 0, 0.08);
  --ma-shadow-md:  0 4px 10px rgba(0, 0, 0, 0.08),
                   0 2px 4px rgba(0, 0, 0, 0.06);
  --ma-shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.12),
                   0 4px 10px rgba(0, 0, 0, 0.08);

  /* Motion */
  --ma-ease:             cubic-bezier(0.2, 0.6, 0.2, 1);
  --ma-duration-fast:    0.15s;
  --ma-duration-base:    0.25s;
  --ma-duration-slow:    0.4s;

  /* Stacking */
  --ma-z-base:           1;
  --ma-z-raised:         10;
  --ma-z-sticky:         100;
  --ma-z-header:         1000;
  --ma-z-overlay:        2000;
}


/* --------------------------------------------------------------------------
   6. GENERATEPRESS GLOBAL COLORS — NIET OVERSCHRIJVEN
   --------------------------------------------------------------------------
   GP admin (Customizer → Colors → Global Colors) is de bron van waarheid
   voor de merkkleuren. De ma-* primitives hierboven zijn bewust uitgelijnd
   op exact dezelfde hex-waarden:

     --contrast       (#000000)  ↔  --ma-black
     --base-3         (#ffffff)  ↔  --ma-white
     --off-white      (#D4D8D8)  ↔  --ma-off-white
     --accent-form    (#138A36)  ↔  --ma-green-500  = --ma-accent
     --accent         (#00548C)  ↔  --ma-blue-500
     --prussian-blue  (#003152)  ↔  --ma-blue-600
     --global-color-5 (#176496)  ↔  --ma-blue-400
     --global-color-7 (#3e84b3)  ↔  --ma-blue-300

   Wijzig je de kleur in GP admin → pas dan óók de primitive in dit
   bestand aan, zodat beide systemen synchroon blijven.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   7. MODERN RESET (mobile-first)
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  min-block-size: 100dvb;
  background-color: var(--ma-surface-0);
  color: var(--ma-ink-0);
  /* Zachte overgang bij theme-switch; reduced-motion nult dit globaal. */
  transition:
    background-color var(--ma-duration-base) var(--ma-ease),
    color            var(--ma-duration-base) var(--ma-ease);
  font-family: var(--ma-font-sans);
  font-size: var(--ma-text-base);
  line-height: var(--ma-leading-normal);
  letter-spacing: var(--ma-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-inline-size: 100%;
}

img, video {
  block-size: auto;
}

/* Focus: consistent, zichtbaar, niet-agressief */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   7b. GENERATEPRESS CONTENT-WRAPPERS — transparant & randloos
   --------------------------------------------------------------------------
   GP geeft content-wrappers (o.a. .inside-article bij "separate containers")
   standaard een WITTE achtergrond + padding uit de Customizer. Onze body
   flipt in dark mode, die GP-laag niet — resultaat: witte randen rond de
   full-bleed secties. De site is volledig opgebouwd uit eigen .ma-*
   secties die hun eigen surface + padding regelen, dus GP's wrappers
   moeten kleurloos en maatloos zijn. (Alternatief via de Customizer:
   Layout → Container → Content Padding op 0 en content-achtergrond
   verwijderen — deze regels dekken het ook als dat niet gebeurd is.)
   -------------------------------------------------------------------------- */

.site-content,
.content-area,
.site-main,
.inside-article,
.inside-page-hero,
.page-hero,
.separate-containers .inside-article,
.one-container .inside-article {
  background-color: transparent;
}

.separate-containers .site-main,
.separate-containers .inside-article {
  margin: 0;
}

.separate-containers .inside-article,
.one-container .inside-article {
  padding: 0;
}


/* --------------------------------------------------------------------------
   8. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0 var(--ma-space-sm);
  font-weight: var(--ma-weight-bold);
  line-height: var(--ma-leading-tight);
  letter-spacing: var(--ma-tracking-body);
  text-wrap: balance;
  max-inline-size: var(--ma-measure-heading);
  color: var(--ma-ink-0);

  /* Geen auto-hyphenation op koppen. Korte titels krijgen anders lelijke
     breakpunten als "beveiligings-organisaties". Alleen overflow voorkomen
     bij extreem lange woorden. */
  hyphens: manual;
  overflow-wrap: break-word;
}

h1, .ma-fs-h1 { font-size: var(--ma-text-3xl); }
h2, .ma-fs-h2 { font-size: var(--ma-text-2xl); }
h3, .ma-fs-h3 { font-size: var(--ma-text-xl);  }
h4, .ma-fs-h4 { font-size: var(--ma-text-lg);  }
h5, .ma-fs-h5 { font-size: var(--ma-text-md);  }
h6, .ma-fs-h6 { font-size: var(--ma-text-sm); font-weight: var(--ma-weight-semibold); }

p {
  margin-block: 0 var(--ma-space-sm);
  max-inline-size: var(--ma-measure-prose);
  text-wrap: pretty;
  letter-spacing: var(--ma-tracking-body);

  /* Geen auto-hyphenation standaard op paragrafen. Kort UI-tekst en
     korte body-paragrafen breken anders op rare plekken als
     "recruit-ment". Alleen overflow voorkomen bij extreem lange URLs
     of technische termen. Voor lange leessessies (artikel-body,
     policy-tekst) kun je expliciet .ma-prose-long toevoegen. */
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Opt-in hyphenation voor lange lap-tekst (artikelen, beleids-pagina's).
   Alleen gebruiken waar tekst daadwerkelijk meerdere alinea's per blok
   heeft en in smalle kolommen staat. */
.ma-prose-long {
  hyphens: auto;
  text-wrap: pretty;
}

p:last-child { margin-block-end: 0; }

a {
  color: var(--ma-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--ma-duration-fast) var(--ma-ease);
}

a:visited { color: var(--ma-link-visited); }

a:is(:hover, :focus-visible) {
  color: var(--ma-link-hover);
}

small { font-size: var(--ma-text-xs); }

hr {
  border: 0;
  block-size: 1px;
  background-color: var(--ma-border-subtle);
  margin-block: var(--ma-space-lg);
}

::selection {
  background-color: var(--ma-accent);
  color: var(--ma-accent-ink);
}


/* --------------------------------------------------------------------------
   9. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------
   Registreer deze als Global Class in GenerateBlocks en combineer ze met
   je bestaande .ma-ovz-* / .ma-sgl-* componenten.
   -------------------------------------------------------------------------- */

/* Content-wrapper: max-width + responsieve gutter, center */
.ma-wrap {
  inline-size: 100%;
  max-inline-size: var(--ma-wrap-max);
  margin-inline: auto;
  padding-inline: var(--ma-wrap-gutter);
}

.ma-wrap-narrow  { max-inline-size: var(--ma-wrap-narrow); }
.ma-wrap-reading { max-inline-size: var(--ma-wrap-reading); }

/* Verticaal stapelen met consistente ritme (owl-selector) */
.ma-stack > * + *    { margin-block-start: var(--ma-gap-stack); }
.ma-stack-sm > * + * { margin-block-start: var(--ma-space-xs); }
.ma-stack-md > * + * { margin-block-start: var(--ma-space-md); }
.ma-stack-lg > * + * { margin-block-start: var(--ma-space-lg); }
.ma-stack-xl > * + * { margin-block-start: var(--ma-space-xl); }

/* Cluster: horizontaal met wrap */
.ma-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ma-gap-stack);
  align-items: center;
}

/* Intrinsic grid — dezelfde logica als .ma-ovz-grid, maar generiek */
.ma-grid {
  display: grid;
  gap: var(--ma-gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.ma-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}

/* Prose: gebonden leesbreedte */
.ma-prose {
  max-inline-size: var(--ma-measure-prose);
  text-wrap: pretty;
}

/* Sectie-spacing */
.ma-section {
  padding-block: var(--ma-pad-section);
}

/* Content-grid met breakpoint-varianten (gebruikt in page-content).
   LET OP: bewust generieke classname (.grid) uit bestaande markup —
   niet hergebruiken voor nieuwe componenten, gebruik daar .ma-grid. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-auto-flow: row dense;
}

.grid > .full { grid-column: 1 / -1; }

@media (min-width: 768px) and (max-width: 1199px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid > .span-2-tab { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid > .span-2-desk { grid-column: 1 / -1; }
  .grid.alt-2fr { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   10. SURFACE HELPERS — combinatie bg + ink
   --------------------------------------------------------------------------
   Eén class zet bg én ink; ink volgt automatisch het kleurschema.
   -------------------------------------------------------------------------- */

.ma-surface         { background-color: var(--ma-surface-0);       color: var(--ma-ink-0); }
.ma-surface-raised  { background-color: var(--ma-surface-1);       color: var(--ma-ink-0); }
.ma-surface-sunk    { background-color: var(--ma-surface-2);       color: var(--ma-ink-0); }
.ma-surface-inverse { background-color: var(--ma-surface-inverse); color: var(--ma-ink-inverse); }
.ma-surface-accent  { background-color: var(--ma-accent);          color: var(--ma-accent-ink); }


/* --------------------------------------------------------------------------
   11. A11Y UTILITIES
   -------------------------------------------------------------------------- */

.ma-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ma-skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: var(--ma-space-xs) var(--ma-space-sm);
  background: var(--ma-surface-inverse);
  color: var(--ma-ink-inverse);
  transform: translateY(-120%);
  transition: transform var(--ma-duration-base) var(--ma-ease);
  z-index: var(--ma-z-overlay);
}

.ma-skip-link:focus-visible {
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   12. PRINT
   -------------------------------------------------------------------------- */

@media print {
  /* Selector-lijst incl. [data-theme="dark"] zodat print ook wint als de
     gebruiker de site geforceerd in dark mode heeft staan. */
  :root,
  :root[data-theme="dark"] {
    color-scheme: light;
    --ma-surface-0: #fff;
    --ma-surface-1: #fff;
    --ma-surface-2: #fff;
    --ma-ink-0:     #000;
    --ma-ink-1:     #000;
    --ma-ink-2:     #333;
    --ma-border-subtle: rgba(0, 0, 0, 0.15);
    --ma-border-strong: rgba(0, 0, 0, 0.3);
  }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .ma-sgl-sticky,
  .ma-header-root,
  .ma-footer-root { display: none !important; }
}