/* ==========================================================================
   MIEDEMA ASSISTANCE — DARK MODE RESCUE LAYER
   /assets/css/ma-darkmode-rescue.css

   Doel
   ----
   Oude vacature-regels (uit GenerateBlocks → Styles of een cache) gebruiken
   nog var(--contrast) / var(--base-3) / var(--off-white) — GP-variabelen die
   NIET meeflippen in dark mode. Dit bestand overrulet die regels met
   semantische ma-tokens.

   Werking
   -------
   Geen media queries nodig: de ma-tokens flippen zelf al in ma-root.css.
   `html body .klasse` (specificiteit 0,1,2) wint van elke single-class
   regel (0,1,0), ongeacht laadvolgorde of bron. In light mode is het
   resultaat pixel-identiek aan de huidige styling.

   Laden
   -----
   Als ALLERLAATSTE stylesheet enqueuen (zie ma-enqueue.php), ná ma-root.css,
   ma-legacy.css en alle component-CSS. Zodra de bron van de oude regels is
   opgeruimd (GB → Styles bijgewerkt + caches geleegd) mag dit bestand weg.

   Dependencies: ma-root.css (tokens)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PAGE-LEVEL TEKST — was var(--contrast), moet flippen
   -------------------------------------------------------------------------- */

html body .ma-sgl-back,
html body .ma-sgl-list-item,
html body .ma-sgl-prose,
html body .ma-sgl-aanvullende-eis,
html body .ma-sgl-sticky-title,
html body .ma-sgl-strip-value,
html body .gb-text-sgl-back,
html body .gb-text-sgl-aanbod-item,
html body .gb-text-sgl-profiel-item,
html body .gb-text-sgl-verwacht-item,
html body .gb-text-sgl-eisen-item,
html body .gb-text-sgl-toel-item,
html body .gb-text-sgl-extra-text,
html body .gb-text-sgl-s-regio-val,
html body .gb-text-sgl-s-opl-val,
html body .gb-text-sgl-s-vervoer-val,
html body .gb-text-sgl-s-status-val {
  color: var(--ma-ink-0);
}

/* FAQ / accordion op de single */
html body .ma-sgl-root .gb-accordion__toggle,
html body .ma-faq-q,
html body .ma-sgl-root .gb-accordion__content p,
html body .ma-faq-a {
  color: var(--ma-ink-0);
}

html body .ma-sgl-root .gb-accordion__toggle:is(:hover, :focus-visible),
html body .ma-sgl-root .gb-accordion__toggle.gb-block-is-current,
html body .ma-faq-q:is(:hover, :focus-visible),
html body .ma-faq-q.gb-block-is-current {
  color: var(--ma-accent-text);
}


/* --------------------------------------------------------------------------
   2. MUTED TEKST — was var(--global-color-7) / var(--off-white) op licht vlak
   -------------------------------------------------------------------------- */

html body .ma-sgl-next,
html body .ma-sgl-strip-label,
html body .ma-sgl-sticky-regio,
html body .ma-swipe-hint,
html body .gb-text-sgl-next,
html body .gb-text-sgl-sticky-regio,
html body .gb-text-sgl-s-regio-label,
html body .gb-text-sgl-s-opl-label,
html body .gb-text-sgl-s-vervoer-label,
html body .gb-text-sgl-s-status-label {
  color: var(--ma-ink-2);
}

/* Overzicht-intro: was var(--prussian-blue) → onleesbaar op donker */
html body .ma-ovz-desc {
  color: var(--ma-ink-1);
}


/* --------------------------------------------------------------------------
   3. LICHTE OPPERVLAKKEN — was var(--base-3) / var(--off-white), moet flippen
   -------------------------------------------------------------------------- */

/* Data strip: 1px-lijnen via container-bg, cellen als raised surface */
html body .ma-sgl-strip,
html body .gb-element-sgl-strip {
  background-color: var(--ma-border-strong);
  border-color: var(--ma-border-strong);
}

html body .ma-sgl-strip-cell,
html body .gb-element-sgl-s-regio,
html body .gb-element-sgl-s-opl,
html body .gb-element-sgl-s-vervoer,
html body .gb-element-sgl-s-status {
  background-color: var(--ma-surface-1);
}

/* Sticky CTA-balk onderaan de single */
html body .ma-sgl-sticky,
html body .gb-element-sgl-sticky {
  background-color: var(--ma-surface-1);
  border-color: var(--ma-border-strong);
}


/* --------------------------------------------------------------------------
   4. RANDEN & DIVIDERS — was var(--off-white)
   -------------------------------------------------------------------------- */

html body .ma-sgl-nav,
html body .ma-sgl-section-h,
html body .ma-sgl-aanvullende-eis,
html body .ma-sgl-root .gb-accordion__item,
html body .ma-faq-item,
html body .gb-element-sgl-nav,
html body .gb-text-sgl-aanbod-h,
html body .gb-text-sgl-profiel-h,
html body .gb-text-sgl-verwacht-h,
html body .gb-text-sgl-eisen-h,
html body .gb-text-sgl-toel-h,
html body .gb-text-sgl-extra-h {
  border-color: var(--ma-border-strong);
}

/* Swipe-dots op de overzichts-carrousel */
html body .ma-swipe-dot {
  background-color: var(--ma-border-strong);
}

html body .ma-swipe-dot.active {
  background-color: var(--ma-accent);
}


/* --------------------------------------------------------------------------
   5. ACCENT-ELEMENTEN — flippen naar lichter groen + donkere tekst in dark
   -------------------------------------------------------------------------- */

/* Groene TEKST op page-surfaces — AA-veilige variant (WCAG 4.5:1) */
html body .ma-sgl-section-h,
html body .gb-text-sgl-aanbod-h,
html body .gb-text-sgl-profiel-h,
html body .gb-text-sgl-verwacht-h,
html body .gb-text-sgl-eisen-h,
html body .gb-text-sgl-toel-h,
html body .gb-text-sgl-extra-h,
html body .ma-ovz-kicker,
html body .gb-text-ovz-kicker {
  color: var(--ma-accent-text);
}

/* Groene ICONEN (3:1 volstaat → merkgroen mag blijven) */
html body .ma-sgl-list-item .gb-shape,
html body .ma-faq-icon {
  color: var(--ma-accent);
}

html body .ma-sgl-sticky-cta,
html body .ma-ovz-card-cta {
  background-color: var(--ma-accent-solid);
  color: var(--ma-accent-ink);
}

html body .ma-sgl-sticky-cta:is(:hover, :focus),
html body .ma-ovz-card:is(:hover, :focus-within) .ma-ovz-card-cta {
  background-color: var(--ma-accent-solid-hover);
  color: var(--ma-accent-ink);
}

html body .ma-sgl-badge,
html body .gb-element-sgl-badge,
html body .gb-element-ovz-badge {
  background-color: var(--ma-accent-solid);
}

html body .ma-sgl-badge-text,
html body .gb-text-sgl-badge-txt,
html body .gb-text-ovz-status {
  color: var(--ma-accent-ink);
}