/* ============================================================
   Kennisbank-artikelen (alle 10 artikelen delen dit bestand)
   Leeskolom var(--measure), inhoudsopgave (sticky op desktop,
   inklapbaar bovenaan op mobiel), callouts, "Lees ook" en een
   lichte, compacte CTA-kaart. Bouwt op DESIGNSYSTEEM v2 in style.css.
   ============================================================ */

/* ── Meta onder de titel: auteur · bijgewerkt · leestijd ── */
.page-hero .article-meta {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-xs);
  margin-top: var(--space-m);
  font-size: var(--step--2);
  color: var(--text-muted);
}
.article-meta__item { display: inline-flex; align-items: center; gap: .35rem; }
.article-meta__item svg { flex-shrink: 0; color: var(--text-muted); }
.article-meta__sep { color: var(--border); }
.article-meta a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(22,24,29,.25);
  text-underline-offset: 3px;
  display: inline-block;
  padding-block: .35rem;          /* tikdoel ≥ 24px */
}
.article-meta a:hover { text-decoration-color: currentColor; }

/* ── Layout: inhoudsopgave + leeskolom ── */
.article-section { padding: var(--space-xl) 0 var(--space-2xl); }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}
@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: start;
  }
}

/* ── Inhoudsopgave ── */
.article-toc { min-width: 0; }
.article-toc__box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 var(--space-m);
}
.article-toc__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-family: var(--font-head);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}
.article-toc__title::-webkit-details-marker { display: none; }
.article-toc__title::after {
  content: '';
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}
.article-toc__box[open] .article-toc__title::after { transform: rotate(-135deg) translateY(-2px); }
.article-toc__title:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; border-radius: var(--radius-sm); }
.article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-xs);
  counter-reset: toc;
}
.article-toc__list li { margin: 0; counter-increment: toc; }
.article-toc__list a {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  min-height: 44px;                  /* tikdoel mobiel */
  padding: .6rem 0;
  color: var(--ink);
  font-size: var(--step--1);
  line-height: 1.35;
  text-decoration: none;
}
.article-toc__list a::before {
  content: counter(toc);
  flex: 0 0 1.4em;
  font-family: var(--font-head);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #256B42;
}
.article-toc__list a:hover { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.article-toc__list a:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; border-radius: var(--radius-sm); }
.article-toc__list a[aria-current="true"] { color: var(--action); font-weight: 600; }

@media (min-width: 560px) and (max-width: 1023px) {
  .article-toc__list { columns: 2; column-gap: var(--space-l); }
  .article-toc__list li { break-inside: avoid; }
}
@media (min-width: 1024px) {
  .article-toc {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-m));
    max-height: calc(100vh - var(--nav-h) - var(--space-l) * 2);
    overflow-y: auto;
  }
  .article-toc__box {
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    padding: 0 var(--space-m) 0 0;
  }
  .article-toc__title { cursor: default; pointer-events: none; min-height: 0; margin-bottom: var(--space-2xs); }
  .article-toc__title::after { display: none; }
  .article-toc__list a { min-height: 0; padding: .35rem 0; }
  .article-toc__list a[aria-current="true"] { box-shadow: -2px 0 0 var(--action); margin-left: -.75rem; padding-left: calc(.75rem - 2px); }
}

/* ── Leeskolom ── */
.article-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  overflow-wrap: break-word;
}
.article-body > * { grid-column: 1; }
.article-body > .article-wide { grid-column: 1 / -1; max-width: var(--wide); width: 100%; }

.article-body p,
.article-body li {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
}
.article-body > p { margin: 0 0 var(--space-s); }
.article-body > p.article-intro { font-size: var(--step-1); line-height: 1.6; color: var(--text); margin-bottom: var(--space-m); }
.article-body h2 {
  font-size: var(--step-3);
  margin: var(--space-xl) 0 var(--space-s);
  scroll-margin-top: calc(var(--nav-h) + var(--space-m));
  text-wrap: balance;
}
.article-body h3 {
  font-size: var(--step-2);
  margin: var(--space-l) 0 var(--space-xs);
  text-wrap: balance;
}
.article-body :where(a:not(.btn):not(.card)) {
  color: #256B42;                    /* ≥ 4,5:1 op wit en op lichte vlakken */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body :where(a:not(.btn):not(.card)):hover { color: var(--ink); }
.article-body strong { color: var(--ink); }

/* Lijsten */
.article-body ul,
.article-body ol { margin: 0 0 var(--space-m); padding: 0; list-style: none; }
.article-body ul > li,
.article-body ol > li { position: relative; padding-left: 1.5rem; margin-bottom: var(--space-2xs); }
.article-body ul > li::before {
  content: '';
  position: absolute;
  left: .2rem; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--action);
}
.article-body ol { counter-reset: stap; }
.article-body ol > li { counter-increment: stap; padding-left: 2.25rem; }
.article-body ol > li::before {
  content: counter(stap);
  position: absolute;
  left: 0; top: .1em;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: rgba(46,125,79,.1);
  color: #256B42;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}

/* ── Figuren (mogen uitbreken naar --wide) ── */
.article-figure {
  margin: 0 0 var(--space-l);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-muted);
}
.article-figure img { display: block; width: 100%; height: auto; }

/* ── Callouts in de leeskolom ── */
.article-body .callout { margin: var(--space-m) 0; }
.article-body .callout p,
.article-body .callout li { font-size: var(--step--1); line-height: 1.6; }
.article-body .callout p:last-child { margin-bottom: 0; }
.article-body .callout a { color: var(--info); }
.article-body .callout--tip a { color: #256B42; }
.callout__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0B6590;                    /* blauw, ≥ 4,5:1 op --info-bg */
  margin-bottom: var(--space-3xs);
}
.callout--tip .callout__label { color: #256B42; }
.article-body .callout .callout__source { margin-top: var(--space-2xs); font-size: var(--step--2); color: var(--text-muted); }

/* EP-online-knop in een callout */
.article-body .callout .btn { margin-top: var(--space-xs); }

/* Disclaimer: rustig, geen callout */
.article-body .article-note {
  font-size: var(--step--2);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: var(--space-s);
  margin-top: var(--space-l);
}

/* ── Datatabel (bijv. labelpunten) ── */
.article-table-wrap { margin: var(--space-m) 0 var(--space-l); }
.article-table-wrap .table-scroll { border: 1px solid var(--border); background: var(--surface); }
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 0;
}
.article-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--ink);
  padding: var(--space-xs) var(--space-s);
  border-bottom: 1px solid var(--border);
}
.article-table th,
.article-table td { padding: .55rem var(--space-s); text-align: left; border-bottom: 1px solid var(--border); }
.article-table thead th { font-family: var(--font-head); font-weight: 600; color: var(--text-muted); background: var(--bg); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .05em; }
.article-table tbody tr:last-child th,
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table td.num, .article-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.article-table tr.is-highlight { background: rgba(46,125,79,.06); }
.label-chip {
  display: inline-block;
  min-width: 4.2rem;
  padding: .15rem .55rem;
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--2);
  text-align: left;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  padding-right: 1rem;
}
.label-chip--c, .label-chip--d { color: var(--ink); }
.label-chip--a { background: var(--label-a); } .label-chip--b { background: var(--label-b); }
.label-chip--c { background: var(--label-c); } .label-chip--d { background: var(--label-d); }
.label-chip--e { background: var(--label-e); color: var(--ink); } .label-chip--f { background: var(--label-f); }
.label-chip--g { background: var(--label-g); }
.article-table-wrap figcaption { font-size: var(--step--2); color: var(--text-muted); margin-top: var(--space-2xs); }

/* ── FAQ binnen het artikel ── */
.article-body .faq-list { margin-bottom: var(--space-m); border-top: 1px solid var(--border); }
.article-body .faq-trigger { font-size: var(--step-0); min-height: 48px; }
.article-body .faq-body p { font-size: var(--step--1); color: var(--text); line-height: 1.65; }

/* ── Bronnen ── */
.article-sources {
  margin-top: var(--space-xl);
  padding: var(--space-m) var(--space-l);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius);
}
.article-body .article-sources h2 { font-size: var(--step-1); margin: 0 0 var(--space-2xs); }
.article-body .article-sources ul { margin: 0; }
.article-body .article-sources li { font-size: var(--step--1); padding-left: 0; margin: 0; }
.article-body .article-sources li::before { display: none; }
.article-body .article-sources a {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px;
  color: #0B6590;
}
.article-sources a svg { flex-shrink: 0; }
.article-sources__note { font-size: var(--step--2) !important; color: var(--text-muted) !important; margin: var(--space-2xs) 0 0 !important; }

/* ── Auteur ── */
.article-author {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--border);
}
.article-author__avatar {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  border-radius: 50%;
  aspect-ratio: 1;
}
.article-author__avatar .photo-slot__initials { font-size: var(--step-0); }
.article-body .article-author p { font-size: var(--step--1); margin: 0; line-height: 1.55; }
.article-author__name { font-family: var(--font-head); font-weight: 600; color: var(--ink); }

/* ── Lees ook ── */
.article-related { margin-top: var(--space-xl); }
.article-body .article-related h2 { font-size: var(--step-2); margin: 0 0 var(--space-s); }
.article-related__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
}
@media (min-width: 700px) {
  .article-related__grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
.article-related .card--link {
  padding: var(--space-m);
  color: var(--ink);
  text-decoration: none;
}
.article-related__cat {
  font-family: var(--font-head);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #256B42;
  margin-bottom: var(--space-3xs);
}
.article-related__title { font-family: var(--font-head); font-weight: 600; font-size: var(--step-0); line-height: 1.3; color: var(--ink); }
.article-related .card__arrow { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--step--1); font-family: var(--font-head); font-weight: 600; }

/* ── Afsluitende CTA-kaart: licht en compact ── */
.article-cta-card {
  margin-top: var(--space-xl);
  border-left: 4px solid var(--action);
}
.article-body .article-cta-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 var(--space-2xs) !important;
}
.article-body .article-cta-card p { margin-bottom: var(--space-s); }
.article-cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
}
.article-cta-card .btn--primary { color: #fff; text-decoration: none; }
.article-body .article-cta-card .btn--link { color: #256B42; text-decoration: none; min-height: 44px; }
.article-cta-card .status-note { margin-top: var(--space-s); }
.article-body .article-cta-card .status-note { font-size: var(--step--2); line-height: 1.5; color: var(--text-muted); }
@media (max-width: 480px) {
  .article-cta-card__actions .btn--primary { width: 100%; justify-content: center; }
}

/* ── Terug naar de kennisbank ── */
.article-body .article-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  margin-top: var(--space-l);
  color: #256B42;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  justify-self: start;
}
.article-body .article-back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Minder beweging ── */
@media (prefers-reduced-motion: reduce) {
  .article-toc__title::after { transition: none; }
}

/* ── Afdrukken ── */
@media print {
  .article-toc, .article-related, .article-cta-card, .article-back, .faq-icon { display: none !important; }
  .article-layout, .article-body { display: block; }
  .article-body .faq-body { max-height: none !important; visibility: visible !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Alleen voor schermlezers (bijv. "opent in nieuw venster") */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.article-body .callout .btn { white-space: normal; max-width: 100%; text-align: left; }

/* Kleinere tekst in de leeskolom mag de kolom vullen (globale p { max-width: 68ch } is relatief aan de lettergrootte) */
.article-body .article-note,
.article-body .callout p,
.article-body .article-sources p,
.article-body .article-author p,
.article-body .article-table-wrap figcaption { max-width: none; }
@media (max-width: 600px) {
  .article-meta__sep { display: none; }
  .page-hero .article-meta { gap: 0 var(--space-s); }
  .article-body .callout, .article-sources { padding: var(--space-s) var(--space-m); }
}

.article-table td.num { white-space: nowrap; }
@media (max-width: 600px) {
  .article-table th, .article-table td { padding: .5rem .6rem; }
  .article-table thead th { letter-spacing: .02em; }
}
.article-body .callout .btn--outline-dark { color: var(--ink); text-decoration: none; gap: .5rem; background: var(--surface); }
.article-body .callout .btn--outline-dark:hover { border-color: var(--ink); }

/* 'Lees ook' als lijst (gebruikt door de nieuwe WWS-artikelen) */
.article-body ul.article-related__list { margin: 0; border-top: 1px solid var(--border); max-width: var(--measure); }
.article-body ul.article-related__list > li {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.article-body ul.article-related__list > li::before { display: none; }
.article-body .article-related__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .6rem 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}
.article-body .article-related__list a::after {
  content: '\2192';
  margin-left: auto;
  padding-left: var(--space-s);
  color: #256B42;
}
.article-body .article-related__list a:hover { color: #256B42; text-decoration: underline; text-underline-offset: 3px; }
.article-body .article-related__list a:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; border-radius: var(--radius-sm); }