/* ==========================================================================
   Blok — Prose: lange lopende tekst in een rustige leeskolom
   Leesmaat ca. 70 tekens; tabellen en brede beelden (alignwide) mogen de
   volle breedte van .wrap--smal gebruiken. Ook voor de HTML van de
   blokeditor (wp-block-*, align*, captions).
   ========================================================================== */
.b-prose {
  --b-prose-maat: 44rem;              /* leeskolom */
  --b-prose-sterk: var(--tekst);      /* tekst, koppen, vet */
  --b-prose-accent: var(--blauw);     /* stippen, cijferrondjes, citaatteken */
  --b-prose-vlak: var(--wit);         /* achtergrond van de band (tabelschaduw) */
  --b-prose-kaart: var(--grijs-licht);/* vlak van inhoudsopgave en code */
}
.b-prose.band--grijs { --b-prose-vlak: var(--grijs-licht); --b-prose-kaart: var(--wit); }
.b-prose.band--roze { --b-prose-vlak: var(--roze-licht); --b-prose-kaart: var(--wit); }
.b-prose.band--navy {
  --b-prose-sterk: var(--wit);
  --b-prose-accent: var(--blauw-licht);
  --b-prose-vlak: var(--navy);
  --b-prose-kaart: var(--navy-90);
}

/* --- Kop van het blok (optioneel) -------------------------------------- */
.b-prose__kop {
  max-width: var(--b-prose-maat);
  margin: 0 auto clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.b-prose__titel { max-width: 20ch; }

/* --- Leeskolom ----------------------------------------------------------- */
.b-prose__tekst {
  color: var(--b-prose-sterk);
  font-size: clamp(var(--fs-body), 1rem + .2vw, 1.1875rem);
  line-height: 1.72;
  overflow-wrap: break-word;
}
/* Elk element in de leeskolom gecentreerd; brede elementen gebruiken de wrap */
/* min(100%, …): ook elementen met een vaste breedte (klassieke captions met
   style="width: 700px") blijven binnen het scherm */
.b-prose__tekst > * {
  max-width: min(100%, var(--b-prose-maat));
  margin-inline: auto;
}
.b-prose__tekst > * + * { margin-top: 1.2em; }
.b-prose__tekst > :is(.alignwide, .alignfull, .b-prose__tabel, .wp-block-table) { max-width: none; }

/* Inleiding: eerste alinea die helemaal vet was, of <p class="lead"> */
.b-prose__tekst > :is(.b-prose__intro, .lead) {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  color: var(--b-prose-sterk);
}
.b-prose__tekst > :is(.b-prose__intro, .lead) + * { margin-top: 1.5em; }

/* --- Koppen ------------------------------------------------------------- */
.b-prose__tekst :is(h2, h3, h4, h5, h6) { color: var(--b-prose-sterk); text-wrap: balance; }
.b-prose__tekst h2 {
  margin-top: 1.9em;
  font-size: clamp(1.55rem, 1.22rem + 1.25vw, 2.15rem);
  line-height: 1.2;
}
.b-prose__tekst h3 {
  margin-top: 1.75em;
  font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
}
.b-prose__tekst :is(h4, h5, h6) {
  margin-top: 1.6em;
  font-size: 1.0625em;
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.b-prose__tekst > :is(h2, h3, h4, h5, h6) + * { margin-top: .6em; }
.b-prose__tekst > h2 + :is(h3, h4) { margin-top: 1em; }
.b-prose__tekst > :first-child { margin-top: 0; }

/* --- Links en inline ---------------------------------------------------- */
.b-prose__tekst a:not(.btn) {
  font-weight: var(--fw-medium);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.b-prose__tekst a:not(.btn):hover { text-decoration-thickness: 2px; }
.b-prose__tekst strong,
.b-prose__tekst b { color: var(--b-prose-sterk); }
.b-prose__tekst mark {
  padding: 0 .15em;
  border-radius: 4px;
  background: var(--roze);
  color: var(--navy);
}
.b-prose__tekst small { font-size: var(--fs-small); }
.b-prose__tekst address { font-style: normal; }
.b-prose__tekst :is(code, kbd) {
  padding: .1em .35em;
  border-radius: 6px;
  background: var(--b-prose-kaart);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
}
.b-prose__tekst pre {
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--b-prose-kaart);
  overflow-x: auto;
  font-size: var(--fs-small);
  line-height: 1.6;
}
.b-prose__tekst pre code { padding: 0; background: none; font-size: inherit; }

/* --- Lijsten: blauwe stip; genummerd in een rondje met blauwe rand
   (zoals de route op de homepage) ----------------------------------- */
.b-prose__tekst :is(ul, ol) { padding-left: 0; list-style: none; }
.b-prose__tekst li { position: relative; }
.b-prose__tekst li + li { margin-top: .55em; }
.b-prose__tekst li > :is(ul, ol) { margin-top: .55em; }
.b-prose__tekst li > p + p { margin-top: .6em; }

.b-prose__tekst ul > li { padding-left: 1.6em; }
.b-prose__tekst ul > li::before {
  content: "";
  position: absolute;
  left: .35em;
  top: calc((1lh - .44em) / 2);
  width: .44em;
  height: .44em;
  border-radius: 50%;
  background: var(--b-prose-accent);
}
/* Geneste lijst: open stip */
.b-prose__tekst li ul > li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--b-prose-accent); }

.b-prose__tekst ol { counter-reset: b-prose; }
.b-prose__tekst ol > li { padding-left: 2.6em; counter-increment: b-prose; }
.b-prose__tekst ol > li::before {
  content: counter(b-prose);
  position: absolute;
  left: 0;
  /* Midden op de eerste regel: regelhoogte van de li (1.72 × li-letter) min
     het rondje, in de eenheid van dit kleinere label (.82 × li-letter) */
  top: calc((1.72em / .82 - 1.75em) / 2);
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border: 1.5px solid var(--b-prose-accent);
  border-radius: 50%;
  font-size: .82em;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--b-prose-sterk);
}
/* Geneste genummerde lijst: a, b, c zonder rondje */
.b-prose__tekst li ol > li { padding-left: 1.75em; }
.b-prose__tekst li ol > li::before {
  content: counter(b-prose, lower-alpha) ".";
  top: 0;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Lijst met start- of reversed-attribuut: de eigen nummering van de browser
   (CSS-tellers kunnen dat attribuut niet lezen) */
.b-prose__tekst ol:is([start], [reversed]) { padding-left: 1.6em; list-style: decimal; }
.b-prose__tekst ol:is([start], [reversed]) > li { padding-left: .35em; }
.b-prose__tekst ol:is([start], [reversed]) > li::before { content: none; }
.b-prose__tekst ol:is([start], [reversed]) > li::marker { color: var(--b-prose-sterk); font-weight: var(--fw-bold); }

/* Definitielijst */
.b-prose__tekst dt { font-weight: var(--fw-bold); }
.b-prose__tekst dd { margin: .2em 0 0; }
.b-prose__tekst dd + dt { margin-top: .9em; }

/* --- Citaat --------------------------------------------------------------
   Blauw citaatteken (zelfde vorm als het quote-icoon), tekst groter. */
.b-prose__tekst > :is(blockquote, .wp-block-quote, .wp-block-pullquote) { margin-block: 2em; }
.b-prose__tekst blockquote {
  position: relative;
  margin-inline: auto;
  padding-top: 2.6rem;
  border: 0;
}
.b-prose__tekst blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  left: -.2rem;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--b-prose-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.5 8C8.3 9.4 5 13.4 5 18.6V24h8v-8H9.2c.2-2.6 2-4.6 4.8-5.5zm13 0c-5.2 1.4-8.5 5.4-8.5 10.6V24h8v-8h-3.8c.2-2.6 2-4.6 4.8-5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.5 8C8.3 9.4 5 13.4 5 18.6V24h8v-8H9.2c.2-2.6 2-4.6 4.8-5.5zm13 0c-5.2 1.4-8.5 5.4-8.5 10.6V24h8v-8h-3.8c.2-2.6 2-4.6 4.8-5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.b-prose__tekst blockquote p {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  font-weight: var(--fw-medium);
  line-height: 1.42;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.b-prose__tekst blockquote p + p { margin-top: .6em; }
.b-prose__tekst blockquote :is(cite, footer) {
  display: block;
  margin-top: .9rem;
  font-size: var(--fs-small);
  font-style: normal;
  font-weight: var(--fw-bold);
  line-height: 1.45;
  color: var(--tekst-zacht);
}
.b-prose__tekst .wp-block-pullquote { padding: 0; border: 0; text-align: left; }
.b-prose__tekst .wp-block-pullquote blockquote { margin: 0; }
@media (forced-colors: active) {
  .b-prose__tekst blockquote::before { background: CanvasText; forced-color-adjust: none; }
}

/* --- Beeld ------------------------------------------------------------- */
.b-prose__tekst img { height: auto; border-radius: var(--r-md); }
.b-prose__tekst > :is(figure, .wp-block-image, .wp-block-embed, .wp-block-video, .wp-caption) { margin-block: 2em; }
.b-prose__tekst figure img,
.b-prose__tekst figure picture { width: 100%; }
.b-prose__tekst :is(figcaption, .wp-element-caption, .wp-caption-text) {
  margin-top: .8rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--tekst-zacht);
}
/* Breed beeld (blokeditor "brede breedte"): de volle wrap */
.b-prose__tekst > :is(.alignwide, .alignfull) img { border-radius: var(--r-lg); }
.b-prose__tekst .aligncenter { margin-inline: auto; text-align: center; }
.b-prose__tekst .aligncenter img { margin-inline: auto; }
/* Links/rechts uitgelijnd: zwevend in de leeskolom vanaf 720px, daaronder vol */
@media (min-width: 720px) {
  .b-prose__tekst > .alignleft {
    float: left;
    max-width: min(45%, 20rem);
    margin: .35em 1.75em 1em max(0px, (100% - var(--b-prose-maat)) / 2);
  }
  .b-prose__tekst > .alignright {
    float: right;
    max-width: min(45%, 20rem);
    margin: .35em max(0px, (100% - var(--b-prose-maat)) / 2) 1em 1.75em;
  }
  .b-prose__tekst > :is(h2, h3, hr, .b-prose__tabel, .wp-block-table, .alignwide, .alignfull) { clear: both; }
  /* Klassieke editor: uitgelijnd beeld binnen een alinea */
  .b-prose__tekst p > img.alignleft { float: left; max-width: min(45%, 20rem); margin: .35em 1.5em 1em 0; }
  .b-prose__tekst p > img.alignright { float: right; max-width: min(45%, 20rem); margin: .35em 0 1em 1.5em; }
}
.b-prose__tekst p > img.aligncenter { display: block; margin: 2em auto; }
.b-prose__tekst::after { content: ""; display: table; clear: both; }

/* Video en embeds: altijd 16:9 binnen de kolom */
.b-prose__tekst :is(iframe, video, embed) { max-width: 100%; border: 0; border-radius: var(--r-md); }
.b-prose__tekst :is(.wp-block-embed__wrapper, .wp-block-video) :is(iframe, video) { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* --- Tabel -------------------------------------------------------------
   Scrollvak (.b-prose__tabel, rond elke tabel gezet) met schaduwranden die
   alleen verschijnen als er iets te scrollen valt. */
.b-prose__tabel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--b-prose-vlak) 30%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--b-prose-vlak) 30%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 64, .16), transparent) left / .9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 64, .16), transparent) right / .9rem 100% no-repeat scroll;
}
.b-prose.band--navy .b-prose__tabel {
  background:
    linear-gradient(to right, var(--b-prose-vlak) 30%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--b-prose-vlak) 30%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, .22), transparent) left / .9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, .22), transparent) right / .9rem 100% no-repeat scroll;
}
.b-prose__tekst > :is(.b-prose__tabel, .wp-block-table) { margin-block: 2em; }
.b-prose__tekst .wp-block-table { overflow: visible; }
.b-prose__tekst .wp-block-table .b-prose__tabel { margin: 0; }
.b-prose__tekst table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* Drie of meer kolommen: liever horizontaal scrollen dan smalle kolommen
   met één woord per regel */
.b-prose__tekst table:has(tr > :nth-child(3)) { min-width: 34rem; }
.b-prose__tekst table:has(tr > :nth-child(5)) { min-width: 46rem; }
.b-prose__tekst caption {
  padding-bottom: .75rem;
  caption-side: top;
  text-align: left;
  font-weight: var(--fw-bold);
  color: var(--b-prose-sterk);
}
.b-prose__tekst :is(thead, tbody, tfoot) { border: 0; } /* blokbibliotheek zet hier randen */
.b-prose__tekst :is(th, td) {
  min-width: 7.5rem;
  padding: .85rem 1rem .85rem 0;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  text-align: left;
  vertical-align: top;
}
.b-prose__tekst :is(th, td):last-child { padding-right: 0; }
.b-prose__tekst thead th {
  padding-top: 0;
  border-bottom: 2px solid var(--b-prose-sterk);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.b-prose__tekst tbody th { font-weight: var(--fw-bold); }
.b-prose__tekst tfoot td { font-weight: var(--fw-bold); border-bottom: 0; }
/* Toetsenbordfocus op het scrollvak (prose.js maakt het focusbaar als het scrolt) */
.b-prose__tabel:focus-visible { border-radius: var(--r-sm); }

/* --- Scheidingslijn ------------------------------------------------------ */
.b-prose__tekst hr {
  height: 0;
  margin-block: 2.5em;
  border: 0;
  border-top: 1px solid var(--lijn);
}

/* --- Blokeditor: tekstuitlijning en knoppen ------------------------------
   prose.php geeft .wp-block-button__link de .btn-klassen van components.css;
   hier alleen de rij. */
.b-prose__tekst .has-text-align-center { text-align: center; }
.b-prose__tekst .has-text-align-right { text-align: right; }
.b-prose__tekst .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.b-prose__tekst .wp-block-buttons.is-content-justification-center { justify-content: center; }

/* --- Inhoudsopgave ------------------------------------------------------
   Mobiel en tablet een kaart boven de tekst; vanaf 1100px een vaste
   zijkolom links naast de tekst. */
.b-prose__inhoud {
  max-width: var(--b-prose-maat);
  margin: 0 auto clamp(2.25rem, 1.75rem + 1.5vw, 3rem);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--b-prose-kaart);
}
.b-prose__inhoud-titel {
  margin-bottom: .75rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--tekst-zacht);
}
.b-prose__inhoud-lijst {
  display: grid;
  gap: .1rem 2rem;
  counter-reset: b-prose-inhoud;
}
@media (min-width: 640px) {
  .b-prose__inhoud-lijst:has(> li:nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.b-prose__inhoud-lijst li {
  display: flex;
  gap: .65rem;
  counter-increment: b-prose-inhoud;
}
.b-prose__inhoud-lijst li::before {
  content: counter(b-prose-inhoud, decimal-leading-zero);
  flex: none;
  padding-top: .5rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  color: var(--tekst-zacht);
}
.b-prose__inhoud a {
  display: block;
  padding-block: .4rem;
  color: var(--b-prose-sterk);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-decoration: none;
}
.b-prose__inhoud a:hover { text-decoration: underline; text-underline-offset: .2em; }
.b-prose__inhoud a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }

@media (min-width: 1100px) {
  .b-prose--met-inhoud .b-prose__wrap {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    grid-template-areas:
      "inhoud kop"
      "inhoud tekst";
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 6vw, 6rem);
  }
  .b-prose--met-inhoud .b-prose__kop { grid-area: kop; margin-inline: 0; }
  .b-prose--met-inhoud .b-prose__tekst { grid-area: tekst; }
  .b-prose--met-inhoud .b-prose__tekst > * { margin-inline: 0; }
  .b-prose--met-inhoud .b-prose__tekst > :is(.alignleft, .alignright) { margin-left: 0; margin-right: 0; }
  .b-prose--met-inhoud .b-prose__tekst > .alignleft { margin-right: 1.75em; }
  .b-prose--met-inhoud .b-prose__tekst > .alignright { margin-left: 1.75em; }
  .b-prose--met-inhoud .b-prose__tekst > :is(.alignwide, .alignfull, .b-prose__tabel, .wp-block-table) { max-width: min(100%, var(--b-prose-maat) + 8rem); }

  /* Zijkolom: blijft staan tijdens het lezen; lijn met de actieve kop */
  .b-prose--met-inhoud .b-prose__inhoud {
    grid-area: inhoud;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    max-height: calc(100vh - var(--header-h) - 4rem);
    overflow-y: auto;
    /* Binnenruimte voor de focusring: het scrollvak knipt alles af wat buiten
       de rand valt. De negatieve marge houdt de uitlijning gelijk. */
    margin: -.5rem;
    padding: .5rem;
    border-radius: 0;
    background: none;
  }
  .b-prose--met-inhoud .b-prose__inhoud .b-prose__inhoud-lijst { grid-template-columns: minmax(0, 1fr); gap: 0; border-left: 1px solid var(--lijn); }
  .b-prose--met-inhoud .b-prose__inhoud-lijst li { gap: 0; }
  .b-prose--met-inhoud .b-prose__inhoud-lijst li::before { display: none; }
  .b-prose--met-inhoud .b-prose__inhoud a {
    margin-left: -1px;
    padding: .45rem 0 .45rem 1rem;
    border-left: 2px solid transparent;
    color: var(--tekst-zacht);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .b-prose--met-inhoud .b-prose__inhoud a:hover { color: var(--b-prose-sterk); }
  .b-prose--met-inhoud .b-prose__inhoud a[aria-current="true"] {
    border-left-color: var(--b-prose-accent);
    color: var(--b-prose-sterk);
    text-decoration: none;
  }
}