/* =======================================================================
   maarsstee-dark.css  (THEME) — FIXED
   - 1 theme hook: body.dark:not(.hc)
   - removed dead selectors (:root[data-theme=...], body.theme-dark)
   - keeps your tokens + mappings
   - adds proper dark styling for article hero + comments (scoped correctly)
   ======================================================================= */

/* =========================
   DARK TOKENS
   ========================= */
:root{
  /* core */
  --dm-bg: #0c0f14;
  --dm-card: #111824;
  --dm-ink: #eef2f6;
  --dm-muted: rgba(238,242,246,.72);
  --dm-line: rgba(255,255,255,.10);
  --dm-border: rgba(255,255,255,.12);

  --dm-shadow: 0 16px 44px rgba(0,0,0,.55);
  --dm-shadow-soft: 0 10px 26px rgba(0,0,0,.40);

  /* washes */
  --dm-wash-red: rgba(232,91,100,.14);
  --dm-wash-teal: rgba(31,182,193,.14);
  --dm-wash-warm: rgba(255,178,122,.14);

  /* gradients */
  --dm-accent-grad: linear-gradient(90deg,
    rgba(232,91,100,.26),
    rgba(255,178,122,.20),
    rgba(31,182,193,.26)
  );
  --dm-accent-grad-strong: linear-gradient(90deg,
    rgba(232,91,100,.42),
    rgba(255,178,122,.30),
    rgba(31,182,193,.42)
  );
  --dm-btn-grad: linear-gradient(135deg,
    rgba(31,182,193,1) 0%,
    rgba(255,178,122,1) 55%,
    rgba(232,91,100,1) 110%
  );

  /* handy derived */
  --dm-ink-soft: rgba(238,242,246,.78);
  --dm-ink-soft2: rgba(238,242,246,.65);

  /* brand tokens (moeten in light óók bestaan) */
  --red:#E85B64;
  --teal:#1FB6C1;

  /* layout / shape */
  --container: 1200px;
  --radius: 18px;

  /* focus */
  --focus: 0 0 0 3px rgba(31,182,193,.35), 0 0 0 6px rgba(232,91,100,.20);

  /* controls sizing */
  --ctrl-h: 40px;
  --ctrl-px: 18px;
}

/* =========================
   APPLY THEME WHEN ACTIVE
   ========================= */
body.dark:not(.hc){
  color-scheme: dark;

  /* map to shared tokens used by base.css */
  --bg: var(--dm-bg);
  --card: var(--dm-card);
  --ink: var(--dm-ink);
  --muted: var(--dm-muted);
  --line: var(--dm-line);
  --border: var(--dm-border);

  --shadow: var(--dm-shadow);
  --shadow-soft: var(--dm-shadow-soft);

  --accent-grad: var(--dm-accent-grad);
  --accent-grad-strong: var(--dm-accent-grad-strong);
  --btn-grad: var(--dm-btn-grad);
}

/* =========================
   PAGE BACKGROUND (body bg)
   ========================= */
body.dark:not(.hc){
  --page-bg:
    radial-gradient(1200px 520px at 10% -5%, var(--dm-wash-red), transparent 60%),
    radial-gradient(1200px 520px at 90% -5%, var(--dm-wash-teal), transparent 60%),
    radial-gradient(900px 420px at 50% 30%, var(--dm-wash-warm), transparent 62%),
    linear-gradient(180deg, #090b10 0%, var(--bg) 55%, #090b10 100%);
}

/* =========================
   TOPBAR theme fills (dark)
   ========================= */
body.dark:not(.hc){
  --topbar-bg: linear-gradient(90deg,
    rgba(31,182,193,.98),
    rgba(255,178,122,.85),
    rgba(232,91,100,.92)
  );
  --topbar-ink:#fff;
  --topbar-border: rgba(255,255,255,.18);

  --topbar-ctrl-border: rgba(255,255,255,.28);
  --topbar-ctrl-bg: rgba(255,255,255,.08);
  --topbar-ctrl-bg-hover: rgba(255,255,255,.14);
  --topbar-ctrl-inset: rgba(255,255,255,.22);

  --topbar-switch-bg: rgba(255,255,255,.22);
  --topbar-switch-knob: #fff;
  --topbar-switch-on: rgba(232,91,100,.72);

  --topbar-ctrl-btn-bg: rgba(255,255,255,.10);
  --topbar-ctrl-btn-bg-hover: rgba(255,255,255,.16);
}

/* =========================
   HEADER / NAV theme fills (dark)
   ========================= */
body.dark:not(.hc){
  --header-bg: rgba(13,16,22,.78);
  --header-border: var(--border);

  --brand-mark-bg: rgba(232,91,100,.16);
  --brand-mark-border: rgba(232,91,100,.22);

  --nav-bg: rgba(255,255,255,.06);
  --nav-bg-hover: rgba(255,255,255,.10);
  --nav-inset: rgba(255,255,255,.12);
  --nav-hover-inset: rgba(31,182,193,.35);
  --nav-hover-shadow: rgba(0,0,0,.35);

  --menu-bg: rgba(17,24,36,.98);
  --menu-hover-bg: linear-gradient(90deg,
    rgba(232,91,100,.14),
    rgba(255,178,122,.12),
    rgba(31,182,193,.14)
  );

  --caret: rgba(238,242,246,.75);

  --btn-outline-bg: rgba(255,255,255,.06);
  --btn-outline-hover: rgba(255,255,255,.10);
}

/* =========================
   HERO backgrounds (dark)
   ========================= */
body.dark:not(.hc){
  --hero-bg:
    radial-gradient(1200px 420px at 8% 10%, rgba(232,91,100,.18), transparent 60%),
    radial-gradient(1200px 420px at 50% 10%, rgba(255,178,122,.14), transparent 60%),
    radial-gradient(1200px 420px at 92% 10%, rgba(31,182,193,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,12,16,1) 0%, rgba(12,15,20,1) 100%);
  --hero-border: var(--border);
  --hero-lead: var(--dm-ink-soft);

  --panel-bg:
    radial-gradient(520px 220px at 12% 8%, rgba(255,255,255,.04), transparent 60%),
    var(--card);

  --photo-bg:
    radial-gradient(360px 180px at 50% 45%, rgba(255,255,255,.06), transparent 72%),
    radial-gradient(520px 220px at 15% 15%, rgba(232,91,100,.18), transparent 60%),
    radial-gradient(520px 220px at 50% 15%, rgba(255,178,122,.14), transparent 60%),
    radial-gradient(520px 220px at 85% 15%, rgba(31,182,193,.14), transparent 60%),
    linear-gradient(180deg, rgba(17,24,36,.92) 0%, rgba(12,15,20,.92) 100%);

  --chip-ink: var(--dm-ink);
  --chip-bg: rgba(255,178,122,.12);
  --chip-border: rgba(255,178,122,.18);
  --chip-bg-hover: rgba(255,178,122,.16);

  --chip-teal-bg: rgba(31,182,193,.12);
  --chip-teal-border: rgba(31,182,193,.18);
  --chip-teal-bg-hover: rgba(31,182,193,.16);
}

/* =========================
   SECTIONS / TEXT TONES (dark)
   ========================= */
body.dark:not(.hc){
  --lead-ink: var(--dm-ink-soft);

  --quote-bg:
    radial-gradient(520px 220px at 12% 12%, rgba(232,91,100,.18), transparent 62%),
    rgba(17,24,36,.92);
  --quote-border: rgba(255,255,255,.12);
  --quote-ink: var(--dm-ink-soft);
  --quote-sig: var(--dm-ink-soft2);
}

/* =========================
   PROJECTS background (dark)
   ========================= */
body.dark:not(.hc){
  --projects-bg:
    radial-gradient(900px 380px at 15% 0%, rgba(232,91,100,.12), transparent 60%),
    radial-gradient(900px 380px at 50% 0%, rgba(255,178,122,.10), transparent 62%),
    radial-gradient(900px 380px at 85% 0%, rgba(31,182,193,.12), transparent 60%),
    var(--bg);
}

/* =========================
   SNACKBAR background (dark)
   ========================= */
body.dark:not(.hc){
  --snackbar-bg:
    radial-gradient(620px 240px at 10% 30%, rgba(232,91,100,.16), transparent 60%),
    radial-gradient(620px 240px at 50% 30%, rgba(255,178,122,.12), transparent 60%),
    radial-gradient(620px 240px at 90% 30%, rgba(31,182,193,.16), transparent 60%),
    linear-gradient(90deg, rgba(232,91,100,.14), rgba(255,178,122,.10), rgba(31,182,193,.14));
}

/* =========================
   NEWSFLASH background (dark)
   ========================= */
body.dark:not(.hc){
  --newsflash-bg: linear-gradient(90deg,
    rgba(232,91,100,.98),
    rgba(255,178,122,.90),
    rgba(31,182,193,.92)
  );
  --newsflash-ink:#fff;
  --newsflash-border: rgba(255,255,255,.12);
}

/* =========================
   FOOTER background (dark)
   ========================= */
body.dark:not(.hc){
  --footer-bg:
    radial-gradient(900px 260px at 15% 0%, rgba(232,91,100,.10), transparent 60%),
    radial-gradient(900px 260px at 50% 0%, rgba(255,178,122,.08), transparent 62%),
    radial-gradient(900px 260px at 85% 0%, rgba(31,182,193,.10), transparent 60%),
    #0a0d12;
}

/* =========================
   PAGE TEMPLATE background (dark)
   ========================= */
body.dark:not(.hc){
  --pagehero-bg:
    radial-gradient(1100px 380px at 10% 0%, rgba(232,91,100,.14), transparent 60%),
    radial-gradient(1100px 380px at 90% 0%, rgba(31,182,193,.14), transparent 60%),
    linear-gradient(180deg, rgba(10,12,16,1) 0%, rgba(12,15,20,1) 100%);
}

/* =========================
   EXTRA
   ========================= */
body.dark:not(.hc) svg [stroke^="rgba(31,35,40"]{
  stroke: var(--dm-ink-soft2) !important;
}
body.dark:not(.hc) svg [stroke^="rgba(31,35,40,.5"]{
  stroke: var(--dm-ink-soft2) !important;
}

/* =======================================================================
   COMPONENT OVERRIDES (dark) — scoped to the real theme hook
   ======================================================================= */

/* Side card / cover / badge */
body.dark:not(.hc) .side-card{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
body.dark:not(.hc) .side-lead{ color: var(--dm-muted); }

body.dark:not(.hc) .cover{ background: rgba(255,255,255,.10); }
body.dark:not(.hc) .cover-badge{
  background: rgba(17,24,36,.72);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
body.dark:not(.hc) .cover-badge .bdot{ background: var(--teal); }

body.dark:not(.hc) .mini-cta{ border-top: 1px solid var(--line); }

/* Generic card + prose */
body.dark:not(.hc) .card{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
body.dark:not(.hc) .prose{ color: var(--dm-ink-soft); }

/* TOC */
body.dark:not(.hc) .toc a{
  background: rgba(31,182,193,.14);
  border: 1px solid rgba(31,182,193,.22);
}
body.dark:not(.hc) .toc a:hover{ background: rgba(31,182,193,.20); }
body.dark:not(.hc) .toc .h3{
  background: rgba(232,91,100,.12);
  border-color: rgba(232,91,100,.18);
}

/* Mini links */
body.dark:not(.hc) .mini-link{
  color: #7FE4EC;
  background: rgba(31,182,193,.18);
  border: 1px solid rgba(31,182,193,.26);
}
body.dark:not(.hc) .mini-link:hover{ background: rgba(31,182,193,.24); }

body.dark:not(.hc) .mini-link.red{
  color: #FF9AA1;
  background: rgba(232,91,100,.18);
  border: 1px solid rgba(232,91,100,.26);
}
body.dark:not(.hc) .mini-link.red:hover{ background: rgba(232,91,100,.24); }

/* Related band */
body.dark:not(.hc) .related{
  background: rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Project cards */
body.dark:not(.hc) .pcard{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
body.dark:not(.hc) .pbody p{ color: var(--dm-muted); }

/* =========================
   COMMENTS — DARK THEME
   ========================= */
body.dark:not(.hc) .comment-card{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
}
body.dark:not(.hc) .comment-card.is-pending{
  border-style: dashed;
  background: rgba(255,255,255,.04);
}
body.dark:not(.hc) .comment-pending-note{
  color: var(--dm-ink-soft);
}

/* =========================
   ARTICLE HERO — DARK THEME
   (this is the bit you said didn’t “go along”)
   ========================= */
body.dark:not(.hc) .article-hero .hero-card,
body.dark:not(.hc) .article-hero .side-card,
body.dark:not(.hc) .article-hero .card{
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

body.dark:not(.hc) .article-hero .hero-sub,
body.dark:not(.hc) .article-hero .side-lead,
body.dark:not(.hc) .article-hero .prose{
  color: var(--dm-ink-soft);
}

body.dark:not(.hc) .article-hero .cover{
  background: rgba(255,255,255,.10);
}

body.dark:not(.hc) .article-hero .cover-badge{
  background: rgba(17,24,36,.72);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

body.dark:not(.hc) .article-hero .pill{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--dm-ink);
}
/* =========================
   ARTICLE HERO BACKGROUND — DARK
   ========================= */
body.dark:not(.hc) .article-hero{
  background: var(--hero-bg);
  border-bottom: 1px solid var(--hero-border);
}
/* =========================
   FORMS / INPUTS — DARK THEME
   ========================= */
body.dark:not(.hc) .form-control,
body.dark:not(.hc) .form-select,
body.dark:not(.hc) textarea.form-control{
  background: rgba(255,255,255,.06);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
}

body.dark:not(.hc) .form-control::placeholder,
body.dark:not(.hc) textarea.form-control::placeholder{
  color: rgba(238,242,246,.55);
}

/* focus */
body.dark:not(.hc) .form-control:focus,
body.dark:not(.hc) .form-select:focus,
body.dark:not(.hc) textarea.form-control:focus{
  background: rgba(255,255,255,.08);
  color: var(--ink);
  border-color: rgba(31,182,193,.55);
  box-shadow: var(--focus);
  outline: 0;
}

/* disabled / readonly */
body.dark:not(.hc) .form-control:disabled,
body.dark:not(.hc) .form-control[readonly],
body.dark:not(.hc) .form-select:disabled{
  background: rgba(255,255,255,.04);
  color: rgba(238,242,246,.55);
  border-color: rgba(255,255,255,.10);
}

/* autofill fix (Chrome) */
body.dark:not(.hc) input:-webkit-autofill,
body.dark:not(.hc) textarea:-webkit-autofill,
body.dark:not(.hc) select:-webkit-autofill{
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* optional: label/help text in dark */
body.dark:not(.hc) .form-text,
body.dark:not(.hc) .comment-msg{
  color: var(--dm-muted);
}
/* =========================
   PAGE HERO — DARK THEME
   ========================= */
body.dark:not(.hc) .page-hero{
  background: var(--pagehero-bg);
  border-bottom: 1px solid var(--border);
}

/* hero-card binnen page-hero */
body.dark:not(.hc) .page-hero .hero-card{
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* tekst in page-hero */
body.dark:not(.hc) .page-hero .hero-title{
  color: var(--ink);
}
body.dark:not(.hc) .page-hero .hero-sub{
  color: var(--dm-ink-soft);
}
/* =========================
   PROSE CONTENT (rendered HTML) — DARK FIX
   ========================= */
body.dark:not(.hc) .card{
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

body.dark:not(.hc) .prose{
  color: var(--dm-ink-soft);
}

/* headings */
body.dark:not(.hc) .prose h1,
body.dark:not(.hc) .prose h2,
body.dark:not(.hc) .prose h3,
body.dark:not(.hc) .prose h4,
body.dark:not(.hc) .prose h5,
body.dark:not(.hc) .prose h6{
  color: var(--ink);
}

/* links */
body.dark:not(.hc) .prose a{
  color: #7FE4EC;
  text-decoration-color: rgba(127,228,236,.35);
}
body.dark:not(.hc) .prose a:hover{
  text-decoration-color: rgba(127,228,236,.65);
}

/* muted text helpers that might appear in content */
body.dark:not(.hc) .prose .text-muted,
body.dark:not(.hc) .prose small{
  color: var(--dm-muted) !important;
}

/* separators */
body.dark:not(.hc) .prose hr{
  border:0;
  border-top: 1px solid var(--line);
  opacity: 1;
}

/* quotes */
body.dark:not(.hc) .prose blockquote{
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border-left: 4px solid rgba(31,182,193,.35);
  border-radius: 12px;
  color: var(--dm-ink-soft);
}

/* code blocks */
body.dark:not(.hc) .prose code{
  color: rgba(238,242,246,.90);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: .12em .35em;
  border-radius: 8px;
}
body.dark:not(.hc) .prose pre{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  overflow:auto;
}
body.dark:not(.hc) .prose pre code{
  background: transparent;
  border: 0;
  padding: 0;
}

/* tables (heel vaak “wit” probleem) */
body.dark:not(.hc) .prose table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
}
body.dark:not(.hc) .prose th,
body.dark:not(.hc) .prose td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--dm-ink-soft);
}
body.dark:not(.hc) .prose th{
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font-weight: 900;
}
body.dark:not(.hc) .prose tr:last-child td{
  border-bottom:0;
}

/* images inside content */
body.dark:not(.hc) .prose img{
  max-width:100%;
  height:auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}
/* events.dark.css — gebruikt jouw theme hook */
body.dark:not(.hc) .ms-events__hero{
  background: var(--pagehero-bg);
  border-bottom: 1px solid var(--border);
}
body.dark:not(.hc) .ms-events .hero-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
body.dark:not(.hc) .ms-events .hero-card::before{ background: var(--teal); }
body.dark:not(.hc) .ms-events .hero-sub{ color: var(--dm-ink-soft); }

body.dark:not(.hc) .ms-events .toolbar{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
}
body.dark:not(.hc) .ms-events label{ color: var(--dm-ink-soft2); }

body.dark:not(.hc) .ms-events input,
body.dark:not(.hc) .ms-events select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--dm-ink);
}

body.dark:not(.hc) .ms-events .chip{
  background: rgba(31,182,193,.14);
  border: 1px solid rgba(31,182,193,.22);
  color: var(--dm-ink);
}
body.dark:not(.hc) .ms-events .chip:hover{ background: rgba(31,182,193,.20); }
body.dark:not(.hc) .ms-events .chip[aria-current="true"]{
  background: rgba(31,182,193,.24);
  box-shadow: 0 0 0 1px rgba(31,182,193,.26) inset;
}
body.dark:not(.hc) .ms-events .chip.red{
  background: rgba(232,91,100,.18);
  border-color: rgba(232,91,100,.26);
}
body.dark:not(.hc) .ms-events .chip.red:hover{ background: rgba(232,91,100,.24); }

body.dark:not(.hc) .ms-events .monthBlock{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
}
body.dark:not(.hc) .ms-events .monthHead{ border-bottom:1px solid rgba(255,255,255,.10); }
body.dark:not(.hc) .ms-events .mini{ color: var(--dm-muted); }

body.dark:not(.hc) .ms-events .eventCard{
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
body.dark:not(.hc) .ms-events .dateBox{
  border: 1px solid rgba(31,182,193,.26);
  background: rgba(31,182,193,.14);
}
body.dark:not(.hc) .ms-events .pill{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--dm-ink);
}
body.dark:not(.hc) .ms-events .pill .dot{ background: var(--teal); }
body.dark:not(.hc) .ms-events .pill.red{
  border-color: rgba(232,91,100,.26);
  background: rgba(232,91,100,.16);
}
body.dark:not(.hc) .ms-events .pill.red .dot{ background: var(--red); }

body.dark:not(.hc) .ms-events .eDesc{ color: var(--dm-muted); }

body.dark:not(.hc) .ms-events .link{
  color: #7FE4EC;
  background: rgba(31,182,193,.18);
  border: 1px solid rgba(31,182,193,.26);
}
body.dark:not(.hc) .ms-events .link:hover{ background: rgba(31,182,193,.24); }
body.dark:not(.hc) .ms-events .link.red{
  color: #FF9AA1;
  background: rgba(232,91,100,.18);
  border: 1px solid rgba(232,91,100,.26);
}
body.dark:not(.hc) .ms-events .link.red:hover{ background: rgba(232,91,100,.24); }

/* CTA */
body.dark:not(.hc) .ms-events .ctaBlock{
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(232,91,100,.14), transparent 60%),
    radial-gradient(900px 260px at 90% 0%, rgba(31,182,193,.14), transparent 60%),
    rgba(255,255,255,.04);
}
body.dark:not(.hc) .ms-events .ctaSub{ color: var(--dm-muted); }
/* Contact – dark */
body.dark:not(.hc) .ms-note{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}

body.dark:not(.hc) .ms-note--ok{
  background: rgba(31,182,193,.16);
  border-color: rgba(31,182,193,.22);
}
body.dark:not(.hc) .ms-note--err{
  background: rgba(232,91,100,.16);
  border-color: rgba(232,91,100,.22);
}

/* map border in dark */
body.dark:not(.hc) .ms-contact__map{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}

/* inputs consistent in dark (als jouw base inputs nog licht zijn) */
body.dark:not(.hc) .ms-contact input,
body.dark:not(.hc) .ms-contact select,
body.dark:not(.hc) .ms-contact textarea{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--ink);
}
body.dark:not(.hc) .ms-contact input::placeholder,
body.dark:not(.hc) .ms-contact textarea::placeholder{
  color: rgba(238,242,246,.55);
}
body.dark:not(.hc) .ms-news__f input,
body.dark:not(.hc) .ms-news__f select{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

body.dark:not(.hc) .ms-news__pcard{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
/* =========================================================
   Dark mode tweaks — NEWS (scoped)
   ========================================================= */
body.dark:not(.hc) .ms-news .archive-hero{
  /* minder 'witte' hero in dark */
  background:
    radial-gradient(1100px 380px at 10% 0%, rgba(232,91,100,.18), transparent 60%),
    radial-gradient(1100px 380px at 90% 0%, rgba(31,182,193,.18), transparent 60%),
    linear-gradient(180deg, rgba(12,15,20,1) 0%, rgba(12,15,20,.75) 100%);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* hero-card: van wit naar dark-card */
body.dark:not(.hc) .ms-news .hero-card{
  background: rgba(17,24,36,.86);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* hero accent bar wat subtieler/glow */
body.dark:not(.hc) .ms-news .hero-card::before{
  box-shadow: 0 10px 22px rgba(31,182,193,.22);
}

/* typography */
body.dark:not(.hc) .ms-news .hero-title{
  color: rgba(255,255,255,.96);
}
body.dark:not(.hc) .ms-news .hero-sub,
body.dark:not(.hc) .ms-news__statline{
  color: rgba(255,255,255,.72);
}

/* filters / inputs */
body.dark:not(.hc) .ms-news__f label{
  color: rgba(255,255,255,.72);
  opacity: 1;
}

body.dark:not(.hc) .ms-news__f input,
body.dark:not(.hc) .ms-news__f select{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}

body.dark:not(.hc) .ms-news__f input::placeholder{
  color: rgba(255,255,255,.55);
}

/* toon/reset buttons (btnx) */
body.dark:not(.hc) .ms-news__btnx{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.90);
}
body.dark:not(.hc) .ms-news__btnx:hover{
  background: rgba(31,182,193,.14);
  border-color: rgba(31,182,193,.28);
}

/* grid cards */
body.dark:not(.hc) .ms-news__pcard{
  background: rgba(17,24,36,.72);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
}

body.dark:not(.hc) .ms-news__title{
  color: rgba(255,255,255,.95);
}
body.dark:not(.hc) .ms-news__meta{
  opacity: 1;
  color: rgba(255,255,255,.62);
}
body.dark:not(.hc) .ms-news__excerpt{
  color: rgba(255,255,255,.72);
}

/* cover area iets donkerder als er geen cover image is */
body.dark:not(.hc) .ms-news__cover{
  background: rgba(255,255,255,.06);
}

/* badge op cover: niet wit-wit, maar dark glass */
body.dark:not(.hc) .ms-news__badge{
  background: rgba(17,24,36,.72);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

/* smallpill */
body.dark:not(.hc) .ms-news__smallpill{
  border-color: rgba(232,91,100,.30);
  background: rgba(232,91,100,.14);
  color: rgba(255,255,255,.88);
}

/* read button */
body.dark:not(.hc) .ms-news__read{
  background: rgba(31,182,193,.14);
  border-color: rgba(31,182,193,.22);
  color: rgba(255,255,255,.92);
}
body.dark:not(.hc) .ms-news__read:hover{
  background: rgba(31,182,193,.20);
}

/* pager */
body.dark:not(.hc) .ms-news__pager a{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
}
body.dark:not(.hc) .ms-news__pager a:hover{
  background: rgba(31,182,193,.14);
  border-color: rgba(31,182,193,.26);
}
body.dark:not(.hc) .ms-news__pager .cur{
  background: rgba(31,182,193,.20);
  border-color: rgba(31,182,193,.34);
}

/* empty card */
body.dark:not(.hc) .ms-news__emptyCard{
  background: rgba(17,24,36,.72);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
}