/* ==== A365 READ (lees-pagina) ===================================== */

.read-page a { font-weight:450;text-decoration:underline; text-decoration-color:var(--underline); text-underline-offset:4px; text-decoration-thickness:1px;  }

/* READ BAND over de volle grid (links + rail) */
.read-band { grid-column: 1 / -1; }

/* Headline/intro/meta op 85% van de GEHELE pagina-breedte */
.measure-80 {
  width: min(calc(var(--page-width) * 0.85), 100%);
  max-width: none;
  margin-inline: 0;
}

/* Headerblok */
.read-header { display: block; }
.read-headline {
  margin: 16px  0  8px;
  font-weight: 700;
  line-height: 1.20;
  font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.90rem);
}
.read-intro {
  margin: 28px 0 32px;
  font-size: clamp(1.15rem, 1.0rem + .75vw, 1.45rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--text);
}

.read-page H3 {margin-bottom:8px;margin-top:12px;line-height:1.23;}

/* =================== META-BALK (één blok) ========================= */
/* Desktop default: flex; alles verticaal gecentreerd */
.article-meta{
  display:flex;
  align-items:center;                 /* ← hier centreren we verticaal */
  justify-content:space-between;
  gap:12px;
  padding:12px 4px 16px;              /* iets meer ruimte onder dan boven */
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background: color-mix(in srgb, var(--bg), white 4%);margin-bottom:-8px!important;
}
.article-meta .meta-left{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.article-meta .author{ font-weight:600; text-decoration:none; color:inherit; }

/* Tijden: twee varianten in dezelfde markup */
.times{ color:var(--muted); font-size:.95rem; }
.times--desktop{ display:flex; flex-wrap:wrap; gap:8px; }
.times--desktop .dot{ opacity:.65; }
.times--mobile{ display:none; }            /* desktop verstopt mobiel-blok */

/* RECHTS: acties */
.article-meta .actions{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto; margin-left:auto; margin-bottom: auto;        /* rechts aan de rand */
}


/* =================== ACTIEKNOPPEN ================================= */
.chip-btn{
  box-sizing:border-box;
  appearance:none;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 10px; min-height:36px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg);
  font:inherit; color:inherit; text-decoration:none; white-space:nowrap;
}
.chip-btn .count{ font-weight:500; }

/* Icons kleuren mee met currentColor (mask-techniek) */
.chip-btn .ico{
  display:inline-block;
  width:20px; height:20px;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}
.ico--share { -webkit-mask-image:url("/assets/gfx/icons/share2.svg"); mask-image:url("/assets/gfx/icons/share2.svg"); }
.ico--save  { -webkit-mask-image:url("/assets/gfx/icons/save.svg");   mask-image:url("/assets/gfx/icons/save.svg"); }
.ico--unsave{ -webkit-mask-image:url("/assets/gfx/icons/saved.svg");  mask-image:url("/assets/gfx/icons/saved.svg"); }
.ico--speech{ -webkit-mask-image:url("/assets/gfx/icons/speech.svg"); mask-image:url("/assets/gfx/icons/speech.svg"); }

/* Save/Unsave toggle — precies één label + één icoon zichtbaar */
.btn-save .ico--unsave,
.btn-save .label--unsave{ display:none !important; }
.btn-save[aria-pressed="true"] .ico--save,
.btn-save[aria-pressed="true"] .label--save{ display:none !important; }
.btn-save[aria-pressed="true"] .ico--unsave,
.btn-save[aria-pressed="true"] .label--unsave{ display:inline !important; }

/* Desktop: labels zichtbaar; share-icoon iets groter; nog steeds gecentreerd */
@media (min-width:768px){
  .times--mobile{ display:none !important; }
  .article-meta .actions .label{ display:inline; }
  .article-meta .btn-comments .count{ display:inline-block; padding-left:2px; font-weight:400; }
  .article-meta .btn-share .ico{ width:23px; height:23px; }
}

/* =================== MOBIEL ======================================= */
/* Op mobiel óók flex, óók verticaal centreren; icon-only; full-bleed gutters */
@media (max-width:767.98px){
  .article-meta{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100vw !important; max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;	
    padding-left: var(--pad-x) !important;
    padding-right:var(--pad-x) !important;
  }
  .times--desktop{ display:none !important; }
  .times--mobile{ display:block !important; }
  .article-meta .actions{
    align-items:center;               /* ← ook hier vertical center */
    margin-left:auto;
  }
  .article-meta .actions .chip-btn{
    height:40px !important;
    padding:8px 10px !important;margin-top:6px!important;
    align-items:center!important; justify-content:center;
  }
  .article-meta .actions .label{ display:none !important; }   /* icon-only */
  .article-meta .actions .btn-comments .count{ display:inline-block; font-weight:600; margin-left:2px; }
  .article-meta .actions .ico{ width:22px !important; height:22px !important; }
	
.read-headline {
  margin: 24px 0  8px;
  font-weight: 800;
  line-height: 1.12;
  font-size: clamp(1.35rem, 1.05rem + 2.5vw, 2.90rem);
}
	
.read-intro {
  margin: 16px 0 16px;
  font-size: clamp(1.15rem, 1.0rem + .75vw, 1.45rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--text);
}
}

/* =================== LEAD FIGURE =================================== */
.lead-figure{ margin:16px 0 8px; }
.lead-figure .media{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg) 92%, #000);
}
.lead-figure .media img{ display:block; width:100%; height:auto;max-height:600px!important; border-radius:var(--radius); }

/* Credit-badge rechts-onder in de afbeelding */
.lead-figure .media-credit{
  position:absolute; right:8px; bottom:8px;
  padding:4px 8px; border-radius:var(--radius);
  background: color-mix(in srgb, #000 55%, transparent);
  color:#fff; font-size:.76rem; line-height:1;
  pointer-events:none; user-select:none;
}

/* Caption + ▲ caret puntiger en in --brand */
.lead-figure .caption{
  --caption-caret-w: 0px;                 /* halve basis (links/rechts) */
  --caption-caret-h: 0px;                /* hoogte van de pijl (groter = puntiger) */
  --caption-caret-color: var(--spons-blue-border);    /* caret-kleur */
  display:flex; align-items:flex-start; gap:18px;
  color:var(--muted); font-size:.82rem; line-height:1rem;
  margin:7px 0  0; /*border-bottom:1px solid var(--border);*/ padding-bottom:6px;
}
.lead-figure .caption::before{
  content:""; width:0; height:0; flex:0 0 auto; margin:auto 0 auto 0;
  border-left:var(--caption-caret-w) solid transparent;
  border-right:var(--caption-caret-w) solid transparent;
  border-bottom:var(--caption-caret-h) solid var(--caption-caret-color);
}

/* MOBILE: lead + caption full-bleed en nette gutters */
@media (max-width:767.98px){
  .read-page .lead-figure{
    width:100vw !important; max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }
  .read-page .lead-figure .media{ width:100vw; margin:0; border-radius:0; }
  .read-page .lead-figure .media img{ border-radius:0;height:65vw; }
  .read-page .lead-figure .caption{
    width:100%; padding-inline: var(--pad-x); margin-inline:0;gap:2px;
  }
}

/* =================== BODY ========================================== */
.article-body{ margin-top:0 !important; }
.article-body p{ margin:0 0 1rem; }

/* Micro-bold optioneel (nu 0) */
@media (min-width:768px){
  .article-body{
    --faux-bold: 0px;
    width:90% !important;max-width:728px;
    font-size:1.2rem;
    line-height:1.72;
    font-weight:400;
  }
  .article-body :where(p, li){ text-shadow: 0 0 var(--faux-bold) currentColor; }
  @supports (-webkit-text-stroke: 1px black){
    .article-body :where(p, li){
      text-shadow:none;
      -webkit-text-stroke:0.00px currentColor;
      paint-order: stroke fill;
    }
  }
}
@media (max-width:767.98px){
  .article-body{
    font-size: clamp(0.90rem, 1.08rem + 0.35vw, 1.055rem) !important;
    line-height:1.55; font-weight:400; padding: 0 3px 0 2px !important;
  }
}

/* NL-afbreken & prettige regelval */
.article-body{ overflow-wrap:anywhere; }
/*.read-headline{ text-wrap:balance; }*/
.read-intro{ text-wrap:pretty; }

/* iOS/Android: voorkom auto-zoom */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* =================== RAIL & AD ===================================== */
:root{ --rail-nudge: -9px; }
@media (min-width:768px){
  .read-page aside.rail{ margin-top: var(--rail-nudge) !important; }
  .ad-wrapper--article{
    justify-content:flex-start !important;
    margin-left:0 !important; margin-right:0 !important;
    margin-top:36px; margin-bottom:36px;width:auto;min-width:300px;max-width:728px;
  }
  .ad-wrapper--article .ad{ margin:0 auto !important; }
}

/* =================== REACTIES ====================================== */
.comments-area{ margin-top:calc(var(--gap)*2);max-width:728px;margin-bottom:8px; }
.login-alert{
  border:1px solid var(--border); border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg),white 6%); padding:12px;
}

/* === FORCE: save/unsave toont één label + één icoon (desktop & mobiel) === */
.btn-save .label--unsave{ display:none !important; }
.btn-save[aria-pressed="true"] .label--save{ display:none !important; }
.btn-save[aria-pressed="true"] .label--unsave{ display:inline !important; }

.btn-save .ico--unsave{ display:none !important; }
.btn-save[aria-pressed="true"] .ico--save{ display:none !important; }
.btn-save[aria-pressed="true"] .ico--unsave{ display:inline-flex !important; }

/* === DESKTOP: verticaal centreren blijft actief =========================== */
@media (min-width: 768px){
  .article-meta{ align-items: center !important; }
  .article-meta .actions{ align-items: center !important; }
}

/* === MOBIEL: één rij, geen wrap; actions rechts en VERTICAAL CENTRE ====== */
@media (max-width: 767.98px){
  .article-meta{
    display: flex !important;
    align-items: center !important;     /* verticaal centreren */
    justify-content: space-between !important;
    flex-wrap: nowrap !important;       /* ← voorkom dat actions op rij 2 valt */
    gap: 10px;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: var(--pad-x) !important;
    padding-right: var(--pad-x) !important;margin-bottom:-24px!important;
  }

  /* linkerkant mag krimpen zodat alles op 1 rij past */
  .article-meta .meta-left{
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    min-width: 0; 
    flex: 1 1 0 !important;            /* ← laat krimpen */
  }

  /* rechts: altijd midden en op 1 rij */
  .article-meta .actions{
    display: flex !important;
    align-items: center !important;     /* verticaal midden */
    justify-content: flex-end;
    flex: 0 0 auto;
    align-self: center !important;      /* extra zekerheid tegen iOS wrap-bug */
    gap: 8px;
  }

  /* icon-only op mobiel + uniforme hoogtes */
  .article-meta .actions .chip-btn{
    height: 34px !important;
    padding: 8px 10px !important;
    align-items: center; justify-content: center;
  }
  .article-meta .actions .label{ display: none !important; }
  .article-meta .actions .ico{ width: 22px !important; height: 22px !important; }

  /* tijden: alleen de mobiele variant tonen */
  .times--desktop{ display: none !important; }
  .times--mobile{ display: block !important; }
}

/* === 1) MOBIEL: caret (▲) naast de EERSTE regel van de caption ================= */
@media (max-width: 767.98px){
  /* Zorg dat de items in de caption aan de bovenkant uitlijnen */
  .lead-figure .caption{
    align-items: flex-start !important;
  }
  /* Zet de caret expliciet aan de bovenkant (naast de 1e regel), niet midden */
  .lead-figure .caption::before{
    align-self: flex-start !important;
    margin: .05em  0 0 0 !important; /* kleine top-offset richting eerste baseline */
  }
}

/* === 2) META-BLOK: desktop = gesloten kaart (radius 3px); mobiel = zoals het was === */
/* Desktop: volledig kader met afgeronde hoeken */
@media (min-width: 768px){
  .article-meta{
    border: 1px solid var(--border) !important;
    border-radius: 3px !important;          /* exact 3px zoals gevraagd */
    padding: 10px 12px !important;
    background: color-mix(in srgb, var(--bg), white 4%) !important;
  }
}

/* Mobiel: alleen boven- en onderlijn, géén afgeronde hoeken (blijft zoals je had) */
@media (max-width: 767.98px){
  .article-meta{
    border: 0 !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
  }
}

/* READ: alléén de onderste 300x250 sticky — niet de 300x600 bovenin */

/* 1) Zet de top 300x600 (ad--skyscraper) expliciet NIET sticky op de read-rail */
.rail--read .ad--skyscraper{
  position: static !important;
  top: auto !important;
}

/* 2) Maak alléén de wrapper .rail-sticky sticky (onderste 300x250) */
.rail--read .rail-sticky{
  position: sticky;
  top: var(--rail-sticky-top, 12px); /* pas marge tot header naar smaak aan */
}

/* cosmetisch (optioneel): zorg dat de sticky ad zich gedraagt als blok */
.rail--read .rail-sticky .ad{
  display: block;
}

/* === Actieknoppen: subtiele hover met lichte grijze achtergrond === */
/* (werkt op light/dark/auto door mix met var(--bg)) */

.chip-btn{
  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
  will-change: background-color;
	
}

/* Alleen apparaten met een echte hover (dus geen onbedoelde effecten op touch) */
@media (hover:hover){
  .chip-btn:hover{
    /* héél licht grijs vlakje bovenop je huidige thema-achtergrond */
    background: color-mix(in srgb, var(--bg), #fff 15%);
    text-decoration: none; /* zeker geen underline */
  }
  .chip-btn:active{
    /* tikje sterker bij mousedown/click */
    background: color-mix(in srgb, var(--bg), #fff 20%);
  }
}

/* Link-variant (Reacties) nooit underline, ook niet bij hover/focus */
.chip-btn.btn-comments,
.chip-btn.btn-comments:hover,
.chip-btn.btn-comments:focus{
  text-decoration: none;
}

/* (optioneel) nette focusring voor toetsenbordgebruikers */
.chip-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand, #1a73e8), #fff 10%);
  outline-offset: 2px;
}

/* === Actieknoppen: subtiele hover die met thema meeloopt (zonder color-mix) === */

/* Tint-variabelen: licht in light mode, wit-tint in dark mode */
:root{
  --chip-hover-overlay: rgba(0,0,0,.05);   /* ~5% zwart bovenop bg */
  --chip-active-overlay: rgba(0,0,0,.08);
}
html[data-theme="dark"]{
  --chip-hover-overlay: rgba(255,255,255,.07); /* ~7% wit bovenop bg */
  --chip-active-overlay: rgba(255,255,255,.10);
}
/* (optioneel: als je ook 'auto' gebruikt en je core.js zet data-theme="auto" 
   zonder verdere resolutie, kun je ook nog dit toevoegen:
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --chip-hover-overlay: rgba(255,255,255,.07);
    --chip-active-overlay: rgba(255,255,255,.10);
  }
}
) */

/* Basis: smooth hover/active animatie */
.chip-btn{
  transition: box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  will-change: box-shadow, background-color;
}

/* Alleen op devices met echte hover (geen rare effecten op touch) */
@media (hover:hover){
  .chip-btn:hover{
    /* “overlay” via enorme inset shadow; werkt overal en respecteert bg */
    box-shadow: inset 0 0 0 100vmax var(--chip-hover-overlay);
    text-decoration: none;
  }
  .chip-btn:active{
    box-shadow: inset 0 0 0 100vmax var(--chip-active-overlay);
  }
}

/* Reacties-link nooit underline, ook niet bij hover/focus */
.chip-btn.btn-comments,
.chip-btn.btn-comments:hover,
.chip-btn.btn-comments:focus{
  text-decoration: none;
}
/* === XS-phones: compactere meta-action knoppen (<390px) ============== */
@media (max-width: 389.98px){
  /* iets minder ruimte tussen de knoppen */
  .article-meta .actions{
    gap: 6px !important;
  }

  /* kleinere padding + iets lagere knophoogte */
  .article-meta .actions .chip-btn{
    padding: 6px 8px !important;
    min-height: 32px !important;
  }

  /* kleinere iconen (werkt voor mask én img) */
  .article-meta .actions .chip-btn .ico,
  .article-meta .actions .chip-btn .ico img{
    inline-size: 18px !important;
    block-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  /* share-icoon was groter gemaakt; hier weer gelijk trekken */
  .article-meta .actions .btn-share .ico{
    inline-size: 18px !important;
    block-size: 18px !important;
  }

  /* reacties-aantal iets compacter */
  .article-meta .actions .btn-comments .count{
    margin-left: 1px !important;
    font-size: .92rem;
    line-height: 1;
  }
}
.image-desc{ margin:6px 0 0; color:var(--muted); font-size:.92rem; line-height:1.25; }

/* 1) Prehead: default desktop = niet wrappen; mobile mag wrappen */
.read-prehead{
  display:flex; align-items:center; gap:8px;margin: 12px 0;
  flex-wrap: nowrap;           /* desktop: houd op 1 regel als het past */
  color: var(--muted); font-size:.85rem; line-height:1.2;font-weight:500;
}
@media (max-width:767.98px){
  .read-prehead{ flex-wrap: wrap;margin: 16px 0; }   /* mobiel mag breken naar 2 regels */
}

/* 2) Flex-items mogen krimpen; voorkom rare min-content caps */
.read-prehead > *{ min-width:0; }
.read-prehead .pre-cat{ flex:0 1 auto;color:var(--text);text-transform: uppercase;text-decoration: none!important;font-weight:500; }

/* 3) Maak leestijd 1 onbreekbare chunk + zet dot eraan vast */
/*.read-prehead .dot{ display:none; }    we vervangen deze dot visueel */
.read-prehead .reading-time{
  flex:0 0 auto;                      /* niet krimpen als fragment */
  display:inline-flex; align-items:baseline;margin-top:0px!important;margin-left:-8px!important;
  white-space:nowrap; word-break:normal; overflow-wrap:normal; hyphens:none;
}

.read-prehead .reading-time::before{
  content:"";
  display:block;            /* nodig voor vertical-align/transform */
  font-size:1.45em;                /* GROTERE > (desktop) */
  font-weight:400;                 /* optisch wat ‘voller’ */
  line-height:1;
  vertical-align:-0.06em;          /* mini baseline-correctie */
  margin-left:-2px;margin-top:14px;                /* dicht tegen categorie (was -4px) */
  margin-right:12px;                /* ruimte vóór “LEESTIJD:” */
  opacity:.50;                     /* iets duidelijker dan .65 */
}
@media (max-width:767.98px){
  

	
.read-prehead .reading-time::before{ 
  content:"";
  display:block;            /* nodig voor vertical-align/transform */
  font-size:1.45em;                /* GROTERE > (desktop) */
  font-weight:400;                 /* optisch wat ‘voller’ */
  line-height:1;
            /* mini baseline-correctie */
  margin-left:-2px;margin-bottom:-6px!important;                /* dicht tegen categorie (was -4px) */
  margin-right:12px;                /* ruimte vóór “LEESTIJD:” */
  opacity:.50;                     /* iets duidelijker dan .65 */
}
	
.read-prehead .reading-time{
                    /* niet krimpen als fragment */
  display:inline-flex; align-items:baseline;margin-top:-2px!important;
  white-space:nowrap; word-break:normal; overflow-wrap:normal; hyphens:none;
}
}

.rt-num{padding:0 4px 0 0;}
.rt-unit{padding:0 4px 0 0;}

/* 4) Hoverkleur categorie */
@media (hover:hover){
  .read-prehead .pre-cat:hover{
    color: color-mix(in srgb, var(--muted), var(--text) 45%);
  }
}

/* 5) Afstand tot headline per breakpoint blijft configureerbaar */
.read-prehead + .read-headline{ margin-top: var(--prehead-gap-desktop, 24px); }
@media (max-width:767.98px){
  .read-prehead{ font-size:.83rem;margin-top: var(--prehead-gap-mobile, 16px); }
  .read-prehead + .read-headline{ margin-top: var(--prehead-gap-mobile, 16px); }
 
}
/* ==== META-DATES (publish/update) ================================== */
:root{
  --meta-expand-pl: 8px;  /* links padding in paneel */
  --meta-expand-py: 0px;   /* boven/onder padding in paneel */
  --meta-expand-gap: 0px; /* ruimte tussen update en publicatie regel */
}

.meta-row--upd {color: var(--text);}
.red {color: var(--muted)!important;}

.meta-dates{ display:flex; flex-direction:column; gap:6px;margin-bottom:-2px; }

.meta-primary{
  appearance:none; border:0; background:transparent; padding:0;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  color: var(--text); font-size: .82rem; line-height:1.2;text-transform: uppercase;
}
.meta-primary.is-static{ cursor:default; }

.meta-chev{ font-size:2.0em; line-height:0.6; opacity:1.0;color:var(--brand) }
.meta-dates.is-open .meta-chev{ opacity:0.25; }

.upd-color {color:var(--muted); font-weight:600;margin-right:0px;}

.meta-expand{
  display:block;
  border-left: 1px solid var(--border);
  padding: var(--meta-expand-py) 0 var(--meta-expand-py) var(--meta-expand-pl);
}
.meta-expand[hidden]{ display:none; }

.meta-row{ display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap: 2px 2px;font-size:.82rem;text-transform: uppercase; }
.meta-row + .meta-row{ margin-top: var(--meta-expand-gap);font-size:.82rem;text-transform: uppercase; }
.meta-label{ color: var(--muted); font-weight:500; font-size:.82rem;text-transform: uppercase; }

/* Kleinere basis op mobiel (typografisch) */
@media (max-width:767.98px){
  .meta-primary{ font-size:.82rem; }
  .meta-label{ font-size:.82rem;text-transform: uppercase; }
}

/* === “hoekje omlaag” i.p.v. ▾ ======================================= */
.meta-chev.angle-down{
  --chev-size: 6px;       /* pas aan naar smaak (desktop mag 9–10px)   */
  --chev-stroke: 1px;     /* lijndikte van de hoek                     */
  position: relative;
  display: inline-block;
  width: calc(var(--chev-size) * 1.2);
  height: var(--chev-size);
  margin-left: 4px;
  vertical-align: -1px;   /* optische uitlijning met tekst */
  rotate: 180deg;margin-top:-3px;
}

/* Twee lijntjes vormen samen een V */
.meta-chev.angle-down::before,
.meta-chev.angle-down::after{
  content: "";
  position: absolute;
  top: 0;
  width: var(--chev-stroke);
  height: 100%;
  background: var(--muted);
  transform-origin: 50% 0;
  border-radius: 1px;     /* net wat zachter */
}
.meta-chev.angle-down::before{ left: 45%; transform: rotate(45deg); }
.meta-chev.angle-down::after { right:45%; transform: rotate(-45deg); }

/* (optioneel) iets groter op desktop */
@media (min-width:1024px){
  .meta-chev.angle-down{ --chev-size: 7px; --chev-stroke: 1px; }
}

/* (optioneel) als paneel open is, kun je een subtiele nudge geven */
.meta-primary[aria-expanded="true"] .meta-chev.angle-down{
  transform: translateY(1px);
}

/* ======================= LIVE BLOG BLOK =============================== */

.live-blog{
  --live-axis-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  --live-dot-color: var(--text);
  --live-bg: color-mix(in srgb, var(--bg), white 5%);
  --live-left-width: 729px;           /* desktop max-breedte van het blok */
  --live-axis-offset: 0px;           /* afstand card-rand → verticale lijn */

  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--live-bg);
  padding:16px 16px 12px;
  margin:24px 0 24px;
}

@media (min-width:768px){
  /* optioneel: liveblok niet breder dan deze waarde */
  .live-blog{
    max-width: var(--live-left-width);
  }
}

/* Kop / eyebrow "LIVEBLOG" + extra titel */
.live-blog__header{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}

.live-blog__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:1.0rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  color:var(--brand);
}

.live-blog__eyebrow-dot{
  inline-size:10px;
  block-size:10px;
  border-radius:50%;
  background:var(--brand-3);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-3) 25%, transparent);
}

.live-blog__title{
  margin:0;
  font-size:1.20rem;
  line-height:1.3;
  font-weight:700;
}

.live-blog__intro{
  margin:4px 0 4px;
  font-size:.95rem;
  line-height:1.5;
  color:var(--muted);
}

/* Tabs (knoppen om te switchen) */
.live-blog__tabs{
  display:inline-flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

.live-tab{
  appearance:none;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg), white 6%);
  padding:6px 12px 8px 12px;
  font:inherit;
  font-size:.82rem;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  color:var(--text);
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.live-tab.is-active{
  border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 10%, var(--bg));
  color:var(--brand);
}

@media (hover:hover){
  .live-tab:hover{
    border-color:color-mix(in srgb, var(--brand) 65%, var(--border));
  }
}

/* Panels */
.live-blog__panels{
  margin-top:10px;
}

.live-panel[hidden]{
  display:none !important;
}

/* Timeline / updates-lijst
   - border-left verbindt alle blokken
   - dot per update op de linker rand
*/
.live-updates{
  margin:0;
  padding:6px 0 4px var(--live-axis-offset);
  list-style:none;
  border-left:2px dashed var(--border);
}

.live-update{
  position:relative;
  padding:10px 12px 12px 18px;
  margin:0 0 18px;
  border-radius:0;
  background:color-mix(in srgb, var(--bg), white 3%);
  /*box-shadow:0 1px 0 rgba(0,0,0,.10);*/
  border: 1px solid var(--border);
border-left:none!important;
}

/* Blauwe gesloten dot op de linker border, uitgelijnd met tijd */
.live-update::before{
  content:"";
  position:absolute;
  left:calc(var(--live-axis-offset) - 3.5px); /* precies op de border-left van de lijst */
  top:18px;                                /* visueel uitlijnen met de tijd */
  inline-size:6px;
  block-size:6px;
  border-radius:50%;
  background:var(--bg);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand), var(--live-dot-color) 28%);
}

/* Meta-balk in de update (tijd + relatieve tijd + evt. label) */
.live-update__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin-bottom:4px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-top: 2px;
}

.live-update__time{
  font-weight:700;
  color:var(--brand-3);
}

.live-update__rel{
  opacity:.85;
}

.live-update__tag{
  margin-left:auto;
  font-weight:600;
  font-size:.76rem;
  padding:2px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--bg), var(--brand) 6%);
  color:var(--brand);
}

/* Titel + body van de update */
.live-update__title{
  margin:0 0 4px;
  font-size:1.2rem;
  line-height:1.4;
  font-weight:600;
}

.live-update__body{
  font-size:1.05rem;
  line-height:1.55;
  color:var(--text);
}

.live-update__body p{
  margin:0 0 .75rem;
}

/* Afbeeldingen in de update */
.live-update__media{
  margin:4px 0 0;
}

.live-update__media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
}

.live-update__media figcaption{
  margin-top:4px;
  font-size:.80rem;
  line-height:1.3;
  color:var(--muted);
}

/* Social-embeds */
.live-update__embed{
  margin-top:6px;
}

/* Placeholder-stijl zodat je ziet waar embeds komen */
.embed-placeholder{
  padding:10px;
  border-radius:var(--radius);
  border:1px dashed var(--border);
  font-size:.80rem;
  color:var(--muted);
  background:color-mix(in srgb,var(--bg), white 4%);
}

/* Kleinere kaart op mobiel + full-width look indien gewenst */
@media (max-width:767.98px){
  .live-blog{
    margin-inline: calc(var(--pad-x) * -1);
    border-radius:0;
    border-left:0;
    border-right:0;
    padding-inline: calc(var(--pad-x) + 2px);
  }

  .live-updates{
    padding-left: var(--live-axis-offset);
  }

  .live-update{
    padding-right:4px;
  }
	
.live-tab{
  appearance:none;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg), white 6%);
  padding:6px 12px 4.5px 12px;
	}}

/* Donker thema: as & dot iets lichter maken op donkere bg */
html[data-theme="dark"] .live-blog{
  --live-bg: color-mix(in srgb, var(--bg), #000 5%);
  --live-axis-color: color-mix(in srgb, var(--brand) 55%, var(--border));
}

/* === LIVEBLOG: tabs zwart/wit === */

.live-tab{
  border-color: var(--border);
  background: var(--bg);
  color: var(--text);
}

/* Actieve tab: zwart met witte tekst */
.live-tab.is-active{
  border-color: #000;
  background: #000;
  color: #fff;
}

/* Darkmode: iets minder hard zwart */
html[data-theme="dark"] .live-tab.is-active{
  background: color-mix(in srgb, #000 70%, var(--bg) 30%);
  border-color: color-mix(in srgb, #000 70%, var(--bg) 30%);
  color: #fff;
}

/* Hover mag subtiel blijven */
@media (hover:hover){
  .live-tab:hover{
    border-color: color-mix(in srgb, #000 40%, var(--border));
  }
}

/* =================== TAGS / ONDERWERPEN ============================== */

.article-tags{
  margin: 16px 0 24px;
  max-width: 728px;
}

@media (min-width: 768px){
  /* netjes uitlijnen met de article-body (die ook ~90% is) */
  .article-tags{
    width: 90%;
  }
}

.article-tags__title{
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--muted);
}

.article-tags__list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-tags__item{
  margin: 0;
}

.tag-chip{
  display: inline-flex;
  align-items: center;
  padding: 4px  10px 5px;
  border: 1px solid var(--brand); 
  border-radius: 3px;          /* expliciet 3px zoals gevraagd */
  background: var(--bg);            /* wit vlak */
  font-size: .80rem;font-weight:600!important;
  line-height: 1.2;
  color: var(--brand); 
  text-decoration: none!important;
  white-space: nowrap;
  cursor: pointer;
}

/* Hover/active: iets grijs */
@media (hover:hover){
  .tag-chip:hover{
    background: var(--brand);color: var(--bg);text-decoration: none!important;   
  }
  .tag-chip:active{
    background: var(--brand-2);       /* tikje donkerder bij click */
  }
}

/* Darkmode: chip iets minder fel wit */
html[data-theme="dark"] .tag-chip{
  background: color-mix(in srgb, var(--bg), #fff 6%);
  color: var(--muted); 
}

@media (hover:hover){
  html[data-theme="dark"] .tag-chip:hover{
    background: color-mix(in srgb, var(--bg), #fff 50%);
	color: var(--black);
  }
}

/* Op mobiel iets lucht eromheen voor de advertentie */
@media (max-width: 767.98px){
  .article-tags{
    margin-top: 20px;
    margin-bottom: 32px;
  }

.tag-chip{
   padding: 5px  10px 4px;font-weight:700;
 }
	
}



/* === Headline met linker merkbalk: altijd zichtbaar ================== */
:root{
  --hl-bar-w: 12px;     /* desktop-breedte van de balk */
  --hl-bar-w-sm: 3px;   /* mobiel-breedte van de balk */
  --hl-pad-y: 8px;     /* extra ruimte boven/onder kop */
  /* Hoeveel ruimte zit er links/rechts naast het canvas? */
  --canvas-gutter: calc((100vw - min(100vw, var(--page-width))) / 2);
}

.read-band{ overflow: visible !important; }

.read-headline{
  position: relative;
  padding-block: var(--hl-pad-y);
  margin-left: 0;
}

/* Balk: hoogte volgt de kop; left kleeft aan viewport als nodig */
.read-headline::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: var(--hl-bar-w);
  background: var(--brand);
  border-radius: 0;

  /* Idee:
     - Als er genoeg buitenruimte naast het canvas zit (>= balkbreedte),
       hang dan exact 10px buiten het canvas.
     - Is die buitenruimte kleiner, kleef dan tegen de schermrand.
     => pad-x + min( balkbreedte, buitenruimte )
   */
  left: calc(-1.75 * ( var(--pad-x) + min(var(--hl-bar-w), var(--canvas-gutter)) ));
}

@media (min-width: 1024px) {.read-headline{ padding-bottom:12px; } }

/* Mobiel/tablet: smallere balk, blijft tegen schermrand kleven */
@media (max-width: 1023.98px){
  .read-headline::before{
    width: var(--hl-bar-w-sm);
    /* --canvas-gutter is hier meestal 0 → left wordt automatisch -pad-x */
    left: calc(-1 * ( var(--pad-x) + min(var(--hl-bar-w-sm), var(--canvas-gutter)) ));
  }
}

/* Veiligheid: niets afknippen door containers */
.container, .page-grid{ overflow: visible; }

@media (max-width: 767.98px){
.end_article {width:15%!important;height: 6px;background: var(--brand);margin-bottom:32px!important;}
}

.end_article {width:8.2%;height: 6px;background: var(--brand);margin-bottom:32px!important;}

.article-body em.article-source{
  color: var(--muted);       /* of een vaste kleur, bijvoorbeeld #777 */
  font-style: italic;
}


.article-body .article-inline-figure{
  margin: 1.75rem 0 1.50rem 0;
  border-radius: var(--radius, 3px);
  overflow: hidden;
  background: color-mix(in srgb, var(--bg, #ffffff) 94%, #000 6%);
  }

.article-body .article-inline-figure .media{
  position: relative;
  display: block;
  overflow: hidden;
}

.article-body .article-inline-figure img{
  display: block;
  width: 100%;
  height: auto;
}

/* Credit in hoekje, eigen stijl zodat lead-image credit niet geraakt wordt */
.article-body .article-inline-figure .media-credit{
  position: absolute;
  right: 8px;
  bottom: 6px;
  padding: 6px  12px;
  border-radius: 3px;
  font-size: 0.7rem;
  line-height: 1;
  background: rgba(0,0,0,.7);
  color: #fff;
  text-transform: none;
  }

/* Caption onder afbeelding */
.article-body .article-inline-figure .caption{
  padding: 6px 18px 8px 18px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted, #666);
  background: color-mix(in srgb, var(--bg, #ffffff) 98%, #000 2%);
  border-top: 1px solid color-mix(in srgb, var(--border, #dde2ec) 80%, transparent);
  border-left: 4px solid var(--brand);
}

.article-body .article-inline-figure .caption span{
  display: inline;
}

/* ==== MOBIEL: INLINE FIGURE FULL-BLEED ================================== */
@media (max-width: 768px){

  /* Zorg dat we eventuele horizontale overshoot niet zien
  .read-page{
    overflow-x:hidden;
  } */

  .article-body .article-inline-figure{
    /* full-bleed */
    width: 100%;
    max-width: 100%;

    
    margin: 1.5rem 0 1.5rem;
   /* margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);*/

    /* geen afgeronde hoeken + geen clippen */
    border-radius: 0 !important;
    overflow: visible !important;
    border: none;
  }

  /* Zeker weten dat er nergens rondingen blijven hangen */
  .article-body .article-inline-figure .media,
  .article-body .article-inline-figure img{
    border-radius: 3px !important;
  }
.article-body .article-inline-figure .caption{
  padding: 6px 8px 6px 8px;
}


}
	
	
/* ================================
   SHARE-MENU (read-page)
   ================================ */

.article-meta .share-wrapper{
  position:relative;
  display:inline-block;
}

/* Alleen de LOOK & FEEL, geen top/position meer hier */
.share-menu{
  min-width:220px;
  max-width:min(280px, 100vw - 32px);
  padding:6px 0;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--bg-elevated, var(--bg));
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:40;
}

.share-menu__inner{
  display:flex;
  flex-direction:column;
}

/* JOUW dashed border + tekst gewoon laten staan */
.share-menu__item{
  display:flex;
  align-items:center;
  width:100%;
  padding:6px 12px;
  gap:10px;
  background:none;
  border:0;
  text-align:left;
  font:inherit;
  cursor:pointer;
  border-bottom: 1px dashed var(--border);
}

.share-menu__item:last-child{
  border-bottom: none;
}

.share-menu__item:hover,
.share-menu__item:focus-visible{
  background:color-mix(in srgb, var(--brand) 6%, transparent);
  outline:none;
}

.share-menu__icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.share-menu__icon svg{
  width:18px;
  height:18px;
  display:block;
}

.share-menu__text{
  flex:1;
  font-size:0.93rem;
}

.share-menu__label{
  flex:1;
  font-size:.93rem;
}

/* Op mobiel mag hij wat meer naar links + grotere tappables */
@media (max-width:768px){
  .share-menu__item{
    padding:8px 12px;
  }
  .share-menu__text{
    flex:1;
    font-size:1.0rem;
  }
}

/* SHARE: basispositionering tov de knop */
.share-wrapper{
  position: relative;
}

/* Het menu zelf: absolute tov share-wrapper */
.share-wrapper [data-share-menu]{
  position: absolute;
  right: 0;
  z-index: 40;
}

/* Standaard: onder de knop */
.share-wrapper [data-share-menu].share-menu--below{
  top: 100%;
  margin-top: 8px;
}

/* Alternatief: boven de knop */
.share-wrapper [data-share-menu].share-menu--above{
  bottom: 100%;
  margin-bottom: 8px;
}

/* Mobiel: altijd binnen het scherm kunnen scrollen */
@media (max-width: 768px){
  .share-wrapper [data-share-menu]{
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
}

/* ===================== LIVEBLOG — typografie & smooth refresh ===================== */

/* Basis-font in live-updates afdwingen */
.live-update__body {
  font-size: 0.95rem;
}

.live-update__body h1,
.live-update__body h2,
.live-update__body h3,
.live-update__body h4,
.live-update__body h5,
.live-update__body h6 {
  font-size: inherit;
  margin: 0 0 0.25rem;
}

/* Lijst zelf: zachte opacity-transitie bij refresh */
.live-updates {
  transition: opacity 0.01s ease-out;
}

.live-updates.live-updates--loading {
  opacity: 1.0;
}

/* Nieuwe bovenste update: roze gloed → langzaam terug naar var(--bg) */
.live-update {
  transition: background-color 0.1s ease-out;
}

.live-update--new {
  animation: a365-live-update-highlight 3s ease-out forwards;
}

@keyframes a365-live-update-highlight {
  0% {
    background-color: rgba(255, 105, 180, 0.35); /* roze-ish */
  }
  40% {
    background-color: rgba(255, 105, 180, 0.18);
  }
  100% {
    background-color: var(--bg);
  }
}
/* Liveblog afgesloten staat */
.live-blog.is-closed {
  border-color: var(--border);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
	  
	  /*color-mix(in srgb, var(--bg) 80%, var(--muted) 5%);*/
}

.live-blog__status--closed {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);border:1px dashed var(--border);
  background: color-mix(in srgb, var(--bg) 70%, var(--brand-2) 25%);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
}


/* ==== X / Twitter embeds: responsief ====================== */

blockquote.twitter-tweet {
  display: block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 16px 0;
  padding: 0 16px 8px 16px;

  /* Belangrijk voor mobiel: nooit breder dan de container */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}

/* Eventuele X/Twitter iframes altijd binnen de kolom houden */
.article-body iframe[src*="twitter.com"],
.article-body iframe[src*="x.com"],
.live-update__body iframe[src*="twitter.com"],
.live-update__body iframe[src*="x.com"] {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 480px){
  /*.read-page{
    overflow-x: hidden;
  }*/

/* Eventuele X/Twitter iframes altijd binnen de kolom houden */
.article-body iframe[src*="twitter.com"],
.article-body iframe[src*="x.com"],
.live-update__body iframe[src*="twitter.com"],
.live-update__body iframe[src*="x.com"] {
  max-width: 96% !important;
  width: 96% !important;
  box-sizing: border-box;
}
	
.live-update__body .media {margin-right:16px!important;}

}

/*  alert S  */

.alert-block.suicide-support {
    font-size:1.05rem;line-height:1.42rem;margin-top:24px;margin-bottom:24px;background:var(--bg);border:1px solid var(--muted);border-left:4px solid var(--muted);padding:12px;border-radius:3px;color:var(--text);
}

.alert-block.femicide-support {
    font-size:1.05rem;line-height:1.42rem;margin-top:24px;margin-bottom:24px;background:var(--bg);border:1px solid var(--muted);border-left:4px solid var(--muted);padding:12px;border-radius:3px;color:var(--text);
}

.alert-block.gambling-warning {
    font-size:1.05rem;line-height:1.42rem;margin-top:24px;margin-bottom:24px;background:var(--bg);border:1px solid var(--muted);border-left:4px solid var(--brand-3);padding:12px;border-radius:3px;color:var(--text);
}

.alert-block.health-disclaimer {font-size:1.05rem;line-height:1.42rem;margin-top:24px;margin-bottom:24px;background:var(--bg);border:1px solid var(--muted);border-left:4px solid var(--muted);padding:12px;border-radius:3px;color:var(--text);}

.alert-block span {font-weight:550;color:var(--text);display:inline-block;width:100%;margin: 0 0 4px 0;}

/*  alert E  */

/* ==== LIVEBLOG – advertentie tussen updates ========================= */

/* Het advertentie-item zelf */
.live-updates .live-update--ad {
  list-style: none;
  padding: 12px 0 16px;
  margin: 8px 0;
  border-top: 1px solid var(--border, #e0e4ec);
  border-bottom: 1px solid var(--border, #e0e4ec);
  background: transparent;
}

/* Zorg dat de advertentie visueel los staat van de items erboven/eronder */
.live-updates .live-update--ad + .live-update {
  margin-top: 8px;
}

/* Wrapper: centreren van de 300x250 advertentie */
.ad-wrapper--live {
  display: flex;
  justify-content: center;
}

/* De daadwerkelijke advertentie (300x250) netjes centreren en niet te breed */
.ad-wrapper--live .ad {
  max-width: 300px;
  margin-inline: auto;
}
.live-updates .live-update--ad {
  border: 0;
  padding:0;
  margin:   0;
}

/* Advertentie-item: geen tijdlijn-dot / marker tonen */
.live-updates .live-update--ad::before {
  content: none !important;
  display: none !important;
}

/* Voor het geval de dot via list-marker wordt getekend */
.live-updates .live-update--ad {
  list-style: none;
}

/* Extra veilig: marker expliciet uitschakelen */
.live-updates .live-update--ad::marker {
  content: '' !important;
}


/* ALGEMENE SPACING TUSSEN LIVE-UPDATES (GEEN ADS) */
.live-updates .live-update:not(.live-update--ad):not(:last-child) {
  margin-bottom: 24px;
  padding-bottom: 8px;
}

/* ADVERTENTIE-ITEMS: EIGEN, KLEINERE SPACING */
.live-updates .live-update--ad {
  margin: 12px 0 8px;   /* speel met deze waardes naar smaak */
  padding: 0;
  border: 0;
}

/* Zorg dat de wrapper zelf niet óók nog extra ondermarge toevoegt */
.live-updates .live-update--ad .ad-wrapper--live {
  margin-bottom: 0;
}

/* MOBIEL: 300x250 advertentie mooi centreren */
@media (max-width: 768.98px){
  .ad-wrapper--live .ad {
    max-width: 300px;
    margin-inline: auto;margin-bottom:-8px!important;
  }
}