/* ==========================================================================
   MIEDEMA ASSISTANCE — LEGACY COMPAT LAYER
   /assets/css/ma-legacy.css

   Doel
   ----
   Alles wat vroeger in Customizer → Additional CSS stond aan verouderde
   token-systemen en classes, als één geïsoleerde, verwijderbare eenheid:
   1. Oud "THEME TOKENS"-blok (--surface-page, --text-on-page, …)
   2. Oud --ma-clr-* systeem + .Ma-* Global Classes (dienst-hub)
   3. --header-h compat-token

   Alle oude namen zijn nu ALIASSEN naar de ma-tokens uit ma-root.css.
   Dark mode werkt daardoor automatisch — dit bestand bevat bewust géén
   eigen @media (prefers-color-scheme) blokken en géén body-regel.

   Opgeruimde naam-botsingen t.o.v. de oude Additional CSS:
   - --ma-space-3xs/2xs/xs/xl/2xl/3xl  → bestaan al in ma-root.css,
     hier NIET opnieuw gedefinieerd (kregen eerder andere clamp-waarden)
   - --ma-radius-sm/md/pill            → idem
   - --ma-z-header/-overlay/-modal     → idem (header-stacking brak hierop)

   Migratiepad: zodra de dienst-hub templates op de ma-* classes uit de
   component-bestanden draaien, kan dit bestand in zijn geheel weg.

   Laden: direct NÁ ma-root.css, vóór de component-stylesheets.
   Dependencies: ma-root.css (tokens)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKEN-ALIASSEN
   -------------------------------------------------------------------------- */

:root {
  /* ---- Oud "THEME TOKENS"-blok ---- */
  --brand-green:              var(--ma-accent);
  --brand-green-hover:        var(--ma-accent-hover);

  --surface-page:             var(--ma-surface-0);
  --surface-elevated:         var(--ma-surface-inverse);

  --text-on-page:             var(--ma-ink-0);
  --text-on-page-muted:       var(--ma-ink-2);
  --text-on-elevated:         var(--ma-ink-inverse);
  --text-on-elevated-muted:   var(--ma-off-white);
  --text-on-elevated-faint:   color-mix(in srgb, var(--ma-white) 70%, transparent);

  --border-on-page:           var(--ma-border-strong);
  --border-on-elevated-subtle: color-mix(in srgb, var(--ma-off-white) 15%, transparent);
  --border-on-elevated-medium: color-mix(in srgb, var(--ma-off-white) 30%, transparent);

  --input-bg:                 var(--ma-surface-1);
  --input-border:             var(--ma-border-strong);
  --input-text:               var(--ma-ink-0);

  /* ---- Oud --ma-clr-* systeem (.Ma-* dienst-hub classes) ---- */
  --ma-clr-primary:           var(--ma-blue-500);
  --ma-clr-primary-hover:     var(--ma-blue-600);
  --ma-clr-secondary:         var(--ma-ink-0);
  --ma-clr-accent:            #f5a623; /* TODO: bevestigen — alleen decoratief (trust-callout rand) */
  --ma-clr-text:              var(--ma-ink-0);
  --ma-clr-text-muted:        var(--ma-ink-2);
  --ma-clr-text-on-dark:      var(--ma-white);
  --ma-clr-bg:                var(--ma-surface-0);
  --ma-clr-bg-alt:            var(--ma-surface-1);
  --ma-clr-border:            var(--ma-border-strong);
  --ma-clr-focus:             var(--ma-focus-ring);

  /* ---- Type-scale aliassen (--ma-fs-* → --ma-text-*) ---- */
  --ma-fs-300: var(--ma-text-sm);
  --ma-fs-400: var(--ma-text-base);
  --ma-fs-500: var(--ma-text-md);
  --ma-fs-600: var(--ma-text-xl);
  --ma-fs-700: var(--ma-text-2xl);
  --ma-fs-800: var(--ma-text-4xl);

  /* ---- Spacing-aliassen (alleen niet-botsende suffixen) ---- */
  --ma-space-s: var(--ma-space-sm);
  --ma-space-m: var(--ma-space-md);
  --ma-space-l: var(--ma-space-lg);

  /* ---- Layout / borders / typografie / motion ---- */
  --ma-container:        var(--gb-container-width, 1200px);
  --ma-container-narrow: var(--ma-wrap-narrow);
  --ma-container-wide:   var(--ma-wrap-max);
  --ma-gutter:           var(--ma-wrap-gutter);

  --ma-border-width:     1px;
  --ma-radius-lg:        8px; /* alleen hier; sm/md/pill komen uit ma-root.css */

  --ma-ff-heading:       var(--ma-font-sans);
  --ma-ff-body:          var(--ma-font-sans);

  --ma-transition-fast:  var(--ma-duration-fast) var(--ma-ease);
  --ma-transition-base:  var(--ma-duration-base) var(--ma-ease);

  --ma-z-tooltip:        calc(var(--ma-z-overlay) + 100);

  /* ---- Header-hoogte compat ----
     Oud: vaste 96px/72px met media query. --ma-header-h uit ma-root.css
     is clamp(4.5rem…6rem) = exact diezelfde range, maar vloeiend.
     ma-header.css en ma-hero.css consumeren dit als fallback. */
  --header-h:            var(--ma-header-h);
}


/* --------------------------------------------------------------------------
   2. LEGACY .Ma-* GLOBAL CLASSES (dienst-hub)
   --------------------------------------------------------------------------
   Ongewijzigd in gedrag, maar alle waarden lopen via tokens die in dark
   mode meeflippen.
   -------------------------------------------------------------------------- */

/* === Layout === */

.Ma-container,
.Ma-container-narrow,
.Ma-container-wide {
  margin-inline: auto;
  padding-inline: var(--ma-gutter);
  width: 100%;
}
.Ma-container        { max-width: var(--ma-container); }
.Ma-container-narrow { max-width: var(--ma-container-narrow); }
.Ma-container-wide   { max-width: var(--ma-container-wide); }

.Ma-section {
  padding-block: var(--ma-space-3xl);
}

.Ma-section-alt {
  background-color: var(--ma-clr-bg-alt);
}

.Ma-flow > * + * {
  margin-block-start: var(--ma-flow-space, var(--ma-space-m));
}

.Ma-stack-s,
.Ma-stack-m,
.Ma-stack-l {
  display: flex;
  flex-direction: column;
}
.Ma-stack-s { gap: var(--ma-space-s); }
.Ma-stack-m { gap: var(--ma-space-m); }
.Ma-stack-l { gap: var(--ma-space-l); }

.Ma-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ma-space-s);
  align-items: center;
}

.Ma-grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--ma-space-m);
}

.Ma-grid-2,
.Ma-grid-3,
.Ma-grid-4 {
  display: grid;
  gap: var(--ma-space-m);
}
.Ma-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.Ma-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.Ma-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* === Typografie === */

.Ma-eyebrow {
  display: inline-block;
  font-size: var(--ma-fs-300);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ma-clr-text-muted);
}

.Ma-lead {
  font-size: var(--ma-fs-500);
  line-height: 1.5;
  max-width: 60ch;
}

.Ma-text-muted {
  color: var(--ma-clr-text-muted);
}

/* === Buttons === */

.Ma-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ma-space-2xs);
  padding-block: var(--ma-space-xs);
  padding-inline: var(--ma-space-m);
  border: var(--ma-border-width) solid transparent;
  border-radius: var(--ma-radius-md);
  font-size: var(--ma-fs-400);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ma-transition-fast),
              color var(--ma-transition-fast),
              border-color var(--ma-transition-fast),
              transform var(--ma-transition-fast);
}
.Ma-button:focus-visible {
  outline: 2px solid var(--ma-clr-focus);
  outline-offset: 2px;
}
.Ma-button:active {
  transform: translateY(1px);
}

.Ma-button-primary {
  background-color: var(--ma-clr-primary);
  color: var(--ma-clr-text-on-dark);
}
.Ma-button-primary:is(:hover, :focus-visible) {
  background-color: var(--ma-clr-primary-hover);
  color: var(--ma-clr-text-on-dark);
}

.Ma-button-secondary {
  background-color: transparent;
  color: var(--ma-clr-primary);
  border-color: var(--ma-clr-primary);
}
.Ma-button-secondary:is(:hover, :focus-visible) {
  background-color: var(--ma-clr-primary);
  color: var(--ma-clr-text-on-dark);
}

.Ma-button-ghost {
  background-color: transparent;
  color: var(--ma-clr-text);
}
.Ma-button-ghost:is(:hover, :focus-visible) {
  background-color: var(--ma-clr-bg-alt);
  color: var(--ma-clr-text);
}

/* === Borders / Cards === */

.Ma-border {
  border: var(--ma-border-width) solid var(--ma-clr-border);
}

.Ma-radius-sm   { border-radius: var(--ma-radius-sm); }
.Ma-radius-md   { border-radius: var(--ma-radius-md); }
.Ma-radius-lg   { border-radius: var(--ma-radius-lg); }
.Ma-radius-pill { border-radius: var(--ma-radius-pill); }

.Ma-card {
  padding: var(--ma-space-m);
  background-color: var(--ma-clr-bg);
  border: var(--ma-border-width) solid var(--ma-clr-border);
  border-radius: var(--ma-radius-md);
}

/* === Image utilities === */

.Ma-image-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ma-radius-md);
}

/* === Template-specifiek: dienst-hub === */

.Ma-hero {
  padding-block: var(--ma-space-2xl) var(--ma-space-3xl);
}

.Ma-callout {
  padding: var(--ma-space-m);
  background-color: var(--ma-clr-bg-alt);
  border-radius: var(--ma-radius-md);
  border-inline-start: 4px solid var(--ma-clr-border);
}

.Ma-callout-kandidaat {
  border-inline-start-color: var(--ma-clr-primary);
}

.Ma-callout-trust {
  border-inline-start-color: var(--ma-clr-accent);
}

.Ma-accordion {
  border: var(--ma-border-width) solid var(--ma-clr-border);
  border-radius: var(--ma-radius-md);
  overflow: hidden;
}

.Ma-accordion-item + .Ma-accordion-item {
  border-block-start: var(--ma-border-width) solid var(--ma-clr-border);
}

.Ma-accordion-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--ma-space-s);
  padding: var(--ma-space-s) var(--ma-space-m);
  background-color: var(--ma-clr-bg);
  border: 0;
  font-size: var(--ma-fs-400);
  font-weight: 600;
  text-align: start;
  color: var(--ma-clr-text);
  cursor: pointer;
  transition: background-color var(--ma-transition-fast);
}
.Ma-accordion-toggle:is(:hover, :focus-visible) {
  background-color: var(--ma-clr-bg-alt);
}

.Ma-accordion-content {
  padding: var(--ma-space-s) var(--ma-space-m) var(--ma-space-m);
}

/* === Accessibility === */

/* ink-0/surface-0 i.p.v. text/text-on-dark: flipt correct mee in dark mode
   (voorkomt wit-op-wit skip-link). */
.Ma-skip-link {
  position: absolute;
  top: var(--ma-space-s);
  left: var(--ma-space-s);
  z-index: var(--ma-z-tooltip);
  padding: var(--ma-space-xs) var(--ma-space-s);
  background-color: var(--ma-ink-0);
  color: var(--ma-surface-0);
  border-radius: var(--ma-radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--ma-transition-fast);
}
.Ma-skip-link:focus {
  transform: translateY(0);
}

.Ma-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ma-clr-focus);
  outline-offset: 2px;
}