/*
Theme Name: Sociaal zoogdier mens
Description: Editorial thema voor de gemigreerde site. Redactionele typografie, genummerde stellingen en een glossarium.
Version: 1.0.0
Author: —
Text Domain: szm
*/

/* ============================================================
   Sociaal zoogdier mens — design system
   Editorial / wetenschappelijk longform. Typografie eerst.
   ============================================================ */

/* ------------------------------------------------------------ lettertypen */

/* Newsreader en Inter staan sinds 16-10-2026 in het thema zelf (fonts/), niet meer
   bij Google Fonts. Twee redenen: de tekst versprong wanneer de lettertypen van
   Google laat binnenkwamen (CLS tot 0,31 op staging), en Google valt zo weg als
   derde partij. Alleen de subsets latin en latin-ext; beide families zijn variabel
   in gewicht. Bron: Google Fonts (16-10-2026), licentie SIL Open Font License 1.1. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/newsreader-normaal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/newsreader-normaal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/newsreader-cursief-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/newsreader-cursief-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-normaal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-normaal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Terugvalletters met de maten van Newsreader en Inter. Zolang het lettertype nog
   laadt, staat de tekst in Georgia of Arial, maar even breed en even hoog, zodat
   er niets verspringt wanneer het echte lettertype binnenkomt. Waarden berekend
   met fontTools uit de bestanden hierboven (gemiddelde letterbreedte op een
   Nederlandse zin, en de ascender/descender uit de hhea-tabel). */
@font-face {
  font-family: "Newsreader terugval";
  src: local("Georgia");
  size-adjust: 95.64%;
  ascent-override: 76.85%;
  descent-override: 27.71%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter terugval";
  src: local("Arial"), local("ArialMT");
  size-adjust: 106.56%;
  ascent-override: 90.91%;
  descent-override: 22.64%;
  line-gap-override: 0%;
}

:root {
  /* Licht: wit papier, koele grijsblauwe inkt, blauw accent (ontwerp 1). */
  --paper: #ffffff;
  --surface: #f4f9fc;
  --surface-2: #e8f2f9;
  --ink: #0f1f2b;
  --ink-2: #3c5464;
  /* Was #6e8493 (3,9:1 op wit, te zwak voor kleine tekst); sinds 16-10-2026
     #5f7584 (4,8:1), zelfde tint. */
  --ink-3: #5f7584;
  --rule: #dfeaf1;
  --rule-strong: #c3d6e3;
  --accent: #0775b4;
  --accent-hover: #055c8d;
  --accent-soft: #c1dcec;
  /* Tekst op een --accent-soft achtergrond. --accent zelf haalt daarop maar 3,5:1;
     deze donkerdere tint komt op 4,9:1 en blijft dus leesbaar. */
  --accent-op-soft: #055c8d;
  /* Rand rond een --accent-soft vlak: de vlakkleur een vijfde richting --accent. */
  --rule-op-soft: #9cc7e1;
  /* Hover-achtergrond onder een link: de blauwe tegenhanger van --term-soft. Licht
     genoeg dat --accent erop 4,6:1 haalt. */
  --accent-tint: #eef5fb;
  /* Vaste achtergrond onder een begrip in de lopende tekst. Dieper dan
     --accent-tint, dat op wit nauwelijks te zien is; --ink haalt erop 14:1. */
  --begrip-bg: #dcebf5;
  /* Bij overzweven: feller dan de vaste markering, in beide modi. */
  --begrip-hover-bg: var(--accent-soft);
  --begrip-hover-ink: var(--accent-op-soft);
  /* Begrippen krijgen een eigen signaalkleur, los van het linkblauw. Koel
     blauwgroen: #35707f haalt 5,6:1 op wit en 4,8:1 op --term-soft. */
  --term: #35707f;
  --term-soft: #e8f2f4;
  --shadow: 0 1px 2px rgba(15, 31, 43, 0.04), 0 8px 24px -12px rgba(15, 31, 43, 0.15);

  --font-serif: "Newsreader", "Newsreader terugval", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Inter terugval", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Donkerblauwe balk van de kopbalk en de footer. Deze waarden blijven in
     donkere modus hetzelfde: het is een merkbalk, geen achtergrond. */
  --balk: #055c8d;
  --balk-ink: #ffffff;
  --balk-ink-2: rgba(255, 255, 255, 0.78);
  --balk-rule: rgba(255, 255, 255, 0.2);
  --balk-accent: #c1dcec;

  /* Achtergrond en tekstkleuren van de hero. De hero is lichter dan het
     accentvlak van de auteurs-CTA. */
  --hero-bg: #dfeaf1;
  --hero-ink: #06364f;
  --hero-ink-2: #12506f;
  --hero-rule: rgba(6, 54, 79, 0.18);
  --hero-rule-sterk: rgba(6, 54, 79, 0.35);

  --measure: 68ch;
  --page: 76rem;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1a22;
    --surface: #14232e;
    --surface-2: #1b2e3b;
    --ink: #e7eff4;
    --ink-2: #b2c4d0;
    --ink-3: #8398a6;
    --rule: #23384a;
    --rule-strong: #33506a;
    --accent: #64b5e6;
    --accent-hover: #96cff0;
    --accent-soft: #10293c;
    --accent-op-soft: #9ed4f2;
    --rule-op-soft: #21455e;
    --accent-tint: #142433;
    /* 1,7:1 tegenover --paper (was #1a3446, 1,36:1: te zwak); --ink haalt er 8,8:1 op. */
    --begrip-bg: #21445b;
    /* --accent-soft is in deze modus donkerder dan de markering, dus een eigen,
       lichtere hoverkleur; wit haalt er 6,8:1 op. */
    --begrip-hover-bg: #30607f;
    --begrip-hover-ink: #ffffff;
    --term: #7cc0cf;
    --term-soft: #16303a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    /* Het vlak is donker in deze modus, dus de tekst erop wordt licht. */
    --hero-bg: #10293c;
    --hero-ink: #e7eff4;
    --hero-ink-2: #b2c4d0;
    --hero-rule: rgba(231, 239, 244, 0.16);
    --hero-rule-sterk: rgba(231, 239, 244, 0.32);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-hover);
}

/* ------------------------------------------------------------ layout */

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (max-width: 40rem) {
  .wrap {
    padding-inline: 1.15rem;
  }
}

.prose-wrap {
  max-width: var(--measure);
}

/* ------------------------------------------------------------ header */

.site-header {
  border-bottom: 1px solid var(--balk-rule);
  background: var(--balk);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Wie aangemeld is, ziet bovenaan de zwarte beheerbalk van WordPress. Die staat
   vast; zonder deze regels schoof de kopbalk bij het scrollen eronder, half uit
   beeld, en viel een klik op het vergrootglas op het menu van de beheerbalk
   (gemeld door de klant, 09-11). Onder 600 px scrolt de beheerbalk mee weg. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}

/* Navigatie en de contactknop staan samen rechts in de kopbalk. */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__knop {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  background: var(--balk-ink);
  color: var(--balk);
  border: 1px solid var(--balk-ink);
  transition: background-color 0.15s, color 0.15s;
}
.nav__knop:hover {
  background: var(--balk-accent);
  border-color: var(--balk-accent);
  color: var(--balk);
}
.nav__knop:focus-visible {
  outline: 2px solid var(--balk-ink);
  outline-offset: 3px;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--balk-ink);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand:hover {
  color: var(--balk-ink);
}
.brand__mark {
  color: var(--balk-accent);
  font-size: 1.3rem;
  line-height: 1;
}
.brand__sub {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--balk-ink-2);
}

@media (max-width: 52rem) {
  .brand__sub {
    display: none;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
}

.nav a {
  color: var(--balk-ink-2);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav a:hover {
  color: var(--balk-ink);
  border-bottom-color: var(--balk-accent);
}

/* Op smalle schermen past merknaam + navigatie niet op één regel:
   de header valt dan uiteen in twee rijen. Het omslagpunt stond op 40rem, maar
   tussen 645 en 690 px stak de contactknop dan tot 47 px buiten beeld en scrolde
   de pagina zijwaarts (vastgesteld op 2026-10-08); vandaar 44rem. */
@media (max-width: 44rem) {
  .site-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 0.6rem 0;
  }
  .brand {
    font-size: 1rem;
  }
  .site-header__nav {
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--balk-rule);
    padding-top: 0.5rem;
    padding-bottom: 0.6rem;
  }
  .nav {
    gap: 1.4rem;
    font-size: 0.82rem;
  }
  .nav__knop {
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
  }
}

/* ------------------------------------------------------------ typografie */

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

.display {
  font-size: clamp(2.4rem, 5.5vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}

.page-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 0.85rem;
}

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}

/* Kleine sans-serif labels — gebruikt voor rubrieken, meta, breadcrumbs */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.9rem;
}

.eyebrow--accent {
  color: var(--accent);
}

.meta {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------ breadcrumb */

.breadcrumb {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.breadcrumb span[aria-hidden] {
  color: var(--rule-strong);
}

/* ------------------------------------------------------------ prose */

.prose {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink);
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose p {
  margin: 0;
}

/* `.prose p { margin: 0 }` hierboven is specifieker dan `.prose > * + *` en haalde
   daardoor de tussenruimte tussen opeenvolgende alinea's weg. Deze regel zet ze terug. */
.prose > p + *,
.prose > * + p {
  margin-top: 1.15em;
}

/* De witruimte boven een tussentitel stond op 2,2em; dat trok de tekst te ver
   uit elkaar. 1,5em houdt de tussentitel nog altijd duidelijk los van de
   alinea erboven, maar dichter bij de tekst waar hij bij hoort. */
.prose h1,
.prose h2,
.prose h3 {
  margin: 1.5em 0 0.5em;
  font-size: 1.35rem;
}

/* Bij een begrip: de eerste tussentitel na de definities (szm_markeer_toelichting
   in de plugin). Extra witruimte erboven scheidt de definities van de toelichting. */
.prose h2.begrip__toelichting {
  margin-top: 3.25em;
}
/* Begrip zonder tussentitels: het eerste blok na "Onze definitie:" (alinea,
   opsomming of beeldblok). Ongeveer dezelfde witruimte als hierboven. */
.prose .begrip__toelichting:not(h2) {
  margin-top: 2.75rem;
}

.prose ul,
.prose ol {
  margin: 1.15em 0;
  padding-left: 1.4em;
}
.prose li + li {
  margin-top: 0.4em;
}

.prose em {
  color: var(--ink-2);
}

/* Diagrammen staan vooraan uitgelijnd, gelijk met de tekst ernaast. Een beeld
   dat wél gecentreerd moet staan, krijgt in de editor de klasse .aligncenter. */
.prose img {
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  display: block;
  margin-inline: 0;
}

/* Een citaatregel, de tabel eronder en de bronvermelding vormen één geheel.
   De gewone alinea-afstand (1,15em) trok ze zichtbaar uit elkaar. */
.prose > p + table,
.prose > table + p {
  margin-top: 0.5em;
}

.prose a {
  color: var(--accent);
}

/* Een heel lang webadres mag afbreken in plaats van de kolom uit te lopen. */
.prose a[href^="http"] {
  overflow-wrap: anywhere;
}

/* Bronvermeldingen — een alinea die begint met <em>Bron:</em> gevolgd door het
   adres. Het adres paste er net niet naast en sprong daardoor naar de volgende
   regel, met een gat na "Bron:". Een fractie kleiner houdt de vermelding op
   één regel; meteen ook een rustiger onderscheid met de lopende tekst.
   Begriplinks tellen niet mee: de automatische linker geeft ze een volledig
   adres, waardoor een alinea "<em>Onze definitie:</em> … begrip …" anders
   ook kleiner werd (mail Jan, 2026-10-18). Links naar de eigen site (oud of nieuw
   domein, of staging) evenmin: een bron is altijd een externe site (mail Jan,
   2026-10-24, begrip "Indeling der diersoorten"). */
.prose p:has(> em:first-child + a[href^="http"]:not(.szm-begrip):not(.tag_url):not([href*="sociaalzoogdiermens"])) {
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* Inline begrippen-links: het kenmerk van deze site.
   Sinds 2026-10-07 een vaste lichtblauwe achtergrond in plaats van een stippellijn
   (vraag van de klant). Omdat ze overal staan, krijgt een herhaling van hetzelfde
   begrip kort daarna geen achtergrond: zie .begrip-herhaald verderop. */
.prose a.tag_url {
  color: inherit;
  text-decoration: none;
  background: var(--begrip-bg);
  box-shadow: 0 0 0 2px var(--begrip-bg);
  border-radius: 2px;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.prose a.tag_url:hover {
  background: var(--begrip-hover-bg);
  box-shadow: 0 0 0 2px var(--begrip-hover-bg);
  color: var(--begrip-hover-ink);
}

/* Afbeeldingsblok uit het oude CMS (ckeditor) */
.prose .ckeditor_image {
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
/* In de oude inhoud staat het afbeeldingsblok soms binnen een opsomming.
   Het zou dan de inspringing van de lijst erven en tot 45 px rechts van de
   tekstkolom beginnen; de negatieve marge trekt het terug naar de linkerrand,
   gelijk met de blokken die niet in een lijst staan. Per lijstniveau 1,4em,
   dezelfde waarde als de padding-left van .prose ul/ol hierboven. */
/* Een link naar een afbeeldingsblok (bv. #gedragsmodel-essentie) mag de titel
   niet onder de vaste kopbalk laten verdwijnen. */
.prose .ckeditor_image[id] {
  scroll-margin-top: 6rem;
}
.prose li > .ckeditor_image {
  margin-left: -1.4em;
}
.prose li li > .ckeditor_image {
  margin-left: -2.8em;
}
.prose .ckeditor_image .beeldblok__titel {
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.9rem;
  color: var(--ink-2);
}
.prose .ckeditor_image span {
  display: block;
  margin-top: 1rem;
  font-size: 0.925rem;
  color: var(--ink-2);
}
/* De editor zet bij het opslaan <font color> om in <span style="color">. Zo'n span
   binnen een link is gewoon tekst en geen onderschrift: anders kwam elk woord op een
   eigen regel (Gevoel S2, mail Jan, 2026-10-28). */
.prose .ckeditor_image a span {
  display: inline;
  margin-top: 0;
  font-size: inherit;
}

/* Venster met een diagram en zijn uitleg (js/figuur.js), geopend vanuit een
   tekstlink zoals "de afbeelding Eenvoudig gedragsmodel". */
.figuurvenster {
  width: min(56rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.figuurvenster::backdrop {
  background: rgba(15, 31, 43, 0.55);
}
/* Reserve voor browsers zonder <dialog> (js/figuur.js): zelfde venster, zelf
   gecentreerd, met een eigen achtergrondlaag. */
.figuurvenster--reserve {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  margin: 0;
}
.figuurvenster--reserve[hidden],
.figuurvenster__achtergrond[hidden] {
  display: none;
}
.figuurvenster__achtergrond {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 31, 43, 0.55);
}
/* Browsers die <template> niet kennen, zouden de inhoud anders gewoon tonen. */
template.szm-figuur {
  display: none;
}
.figuurvenster__inhoud {
  padding: 1rem;
}
.figuurvenster__inhoud .ckeditor_image {
  margin: 0;
}
.figuurvenster__inhoud img {
  display: block;
  max-width: 100%;
  height: auto;
}
.figuurvenster__sluit {
  position: sticky;
  top: 0.5rem;
  float: right;
  margin: 0.5rem 0.5rem 0 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.figuurvenster__sluit:hover {
  color: var(--accent);
  border-color: var(--accent-soft);
}

/* ------------------------------------------------------------ card */

.card-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.card {
  background: var(--paper);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
/* Bij hover kleurt de hele kaart mee met het accentvlak. De kleinere tekst
   krijgt dan een donkerdere tint, anders zakt ze weg in dat vlak. */
.card:hover {
  background: var(--accent-soft);
  color: inherit;
}
.card:hover .card__excerpt {
  color: var(--hero-ink-2);
}
.card:hover .eyebrow,
.card:hover .meta {
  color: var(--accent-op-soft);
}
.card__title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.015em;
}
.card:hover .card__title {
  color: var(--hero-ink);
}
.card__excerpt {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.card__foot {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* ------------------------------------------------------------ chip */

.chip {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-op-soft);
  background: var(--accent-soft);
  border-radius: 100px;
  padding: 0.25rem 0.6rem;
  text-decoration: none;
}
a.chip:hover {
  background: var(--accent);
  color: var(--paper);
}

.chip--term {
  color: var(--term);
  background: var(--term-soft);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.78rem;
}

/* ------------------------------------------------------------ artikel-lijst
   De blog-template: rijen met een duidelijke leeshiërarchie. */

.post-list {
  border-top: 1px solid var(--rule);
}

.post-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 2.5rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  align-items: start;
  transition: opacity 0.15s;
}

.post-row__aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.3rem;
}

.post-row__thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  /* De beelden zijn overwegend diagrammen op witte achtergrond:
     'contain' houdt ze leesbaar, 'cover' sneed het lege midden uit. */
  object-fit: contain;
  padding: 0.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: #fff;
}

.post-row__title {
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
  transition: color 0.15s;
}
.post-row:hover .post-row__title {
  color: var(--accent);
}

.post-row__excerpt {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 0.9rem;
  max-width: 60ch;
}

.post-row__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

@media (max-width: 44rem) {
  .post-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.75rem 0;
  }
  .post-row__aside {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .post-row__thumb {
    width: 5.5rem;
    flex: none;
  }
  .post-row__title {
    font-size: 1.3rem;
  }
}

/* ------------------------------------------------------------ artikel-detail */

.article-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
}

.article-header__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.article-hero {
  margin: 0 0 2.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--surface);
}
.article-hero img {
  display: block;
  width: 100%;
  /* Veel leadbeelden zijn diagrammen op wit; 'contain' snijdt daar niets af. */
  max-height: 26rem;
  object-fit: contain;
  background: #fff;
}
/* Hoofdstukken: elke kopfoto in dezelfde verhouding, zodat de kop van elk
   hoofdstuk even hoog is. 'cover' snijdt bij — bij een staande foto blijft de
   middenband over, en dat is precies de bedoeling: de foto mag de titel niet
   wegdrukken. Artikels houden hun eigen 'contain', want daar staan diagrammen. */
/* Verhouding hoogte/breedte 0,28 (25:7), gevraagd door Jan op 02-11; was 3:1 (0,33). */
.article-hero--vast img {
  aspect-ratio: 25 / 7;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
/* Essentie (post 127): uitsnede 1,5 cm hoger in het beeld bij een bannerbreedte van 32 cm
   (4,8 cm speling, midden = 50%), gevraagd door Jan op 04-11. */
.postid-127 .article-hero--vast img {
  object-position: center 19%;
}

.article-hero figcaption {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-3);
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------ stellingen
   Het eigen contentmodel van deze site: genummerde stellingen per hoofdstuk. */

/* Inhoudsopgave bovenaan een hoofdstuk */
.toc {
  background: var(--accent-soft);
  border: 1px solid var(--rule-op-soft);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
}
/* De kop staat standaard in --ink-3; dat haalt op het blauwe vlak maar ~3,2:1. */
.toc .eyebrow {
  color: var(--ink-2);
}
/* Eén kolom, ook op een breed scherm: de stellingen horen in hun nummering
   onder elkaar te staan, niet in twee kolommen naast elkaar. */
.toc ol {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.95rem;
}
.toc li {
  margin-bottom: 0.5rem;
  break-inside: avoid;
  padding-left: 0.2rem;
}
.toc a {
  color: var(--ink-2);
  text-decoration: none;
}
.toc a:hover {
  color: var(--accent-op-soft);
  text-decoration: underline;
}
/* ------------------------------------------------------------ begrippen */

.az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.az-nav a {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-2);
  background: var(--surface);
}
.az-nav a:hover {
  background: var(--accent);
  color: var(--paper);
}

.az-group {
  margin-bottom: 2.75rem;
  scroll-margin-top: 6rem;
}
.az-group__letter {
  font-size: 1.6rem;
  color: var(--accent);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-soft);
}
.term-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.15rem 1.5rem;
}
.term-list a {
  text-decoration: none;
  color: var(--ink);
  padding: 0.4rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: var(--radius);
  font-size: 0.975rem;
}
.term-list a:hover {
  background: var(--accent-tint);
  color: var(--accent);
}

/* ------------------------------------------------------------ secties */

.section {
  padding-block: 4rem;
}
.section + .section {
  border-top: 1px solid var(--rule);
}

/* Ruimte onder de vaste kopbalk wanneer er naar een sectie gesprongen wordt. */
.section[id] {
  scroll-margin-top: 5.5rem;
}

/* Sectie op een zacht getinte achtergrond in plaats van op wit. */
.section--zacht {
  background: var(--surface);
  border-top: 0;
}
.section--zacht + .section {
  border-top: 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: 1.75rem;
  margin: 0;
  letter-spacing: -0.02em;
}

.link-more {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.link-more:hover {
  text-decoration: underline;
}

/* Iets ruimere inleiding op de homepage. Sinds het beeld erboven staat
   (15-10-2026) loopt ze over één kolom, op leesbreedte. */
.prose--intro {
  font-size: 1.1rem;
  max-width: 46rem;
}
.prose--intro ul {
  padding-left: 1.2em;
}
.prose--intro li::marker {
  color: var(--accent);
}

/* ------------------------------------------------------------ hero */

/* De hero staat op het lichtblauwe accentvlak; de sectie eronder blijft wit.
   Alle tekst erin krijgt donkerblauwe tinten in plaats van de gewone inkt. */
.hero {
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem);
  background: var(--hero-bg);
  border-bottom: 1px solid var(--rule-strong);
}
.hero .display {
  color: var(--hero-ink);
}
.hero .lede {
  color: var(--hero-ink-2);
}
.hero .eyebrow--accent {
  color: var(--accent-op-soft);
}
/* Op het lichtblauwe vlak is de donkere blauwtint van de knop sterker dan --accent. */
.hero .btn--primair {
  background: var(--accent-op-soft);
  border-color: var(--accent-op-soft);
}
.hero .btn--primair:hover {
  background: var(--hero-ink);
  border-color: var(--hero-ink);
}
/* Tekst links, cijfers en knop in een smallere rechterkolom. De twee kolommen
   sluiten onderaan op elkaar aan. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
}
.hero__tekst {
  max-width: 46rem;
}

/* Cijfers onder elkaar: getal links, label rechts, met een lijn ertussen. */
.hero__stats {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hero-rule-sterk);
}
.hero__stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--hero-rule);
}
.hero__stats .stat__label {
  margin-top: 0;
}

@media (max-width: 56rem) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.stat__num {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent-op-soft);
  line-height: 1;
}
.stat__label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hero-ink-2);
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------ knoppen */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  padding: 0.95rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn--primair {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.btn--primair:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--paper);
}
.btn--secundair {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--secundair:hover {
  background: var(--surface);
  border-color: var(--ink-3);
  color: var(--ink);
}

/* Een knop binnen een lopende tekst. Zonder deze regel wint `.prose a` van
   `.btn--primair` — die staat later in het bestand en is even specifiek — en
   krijgt de knop blauwe letters op een blauw vlak. */
.prose a.btn {
  text-decoration: none;
}
.prose a.btn--primair {
  color: var(--paper);
}
.prose a.btn--primair:hover {
  color: var(--paper);
}
.prose a.btn--secundair {
  color: var(--ink);
}

/* Knoppenrij in de hero, tussen de inleiding en het cijferblok */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ------------------------------------------------------------ homepagebanner */

/* De uitgelichte afbeelding van de homepage, onder de hero met witruimte ertussen.
   Het kader en de 3:1-verhouding komen van `.article-hero--vast`, zoals bij de
   hoofdstukken. De school van Athene (2400x1200, 2:1) verliest daardoor boven en
   onder een strook; op 45% blijven de figuren beter in beeld dan op het midden. */
.homepage-banner {
  padding-top: clamp(1.75rem, 4vw, 3rem);
}
.homepage-banner .article-hero {
  margin: 0;
}
.homepage-banner .article-hero img {
  object-position: center 45%;
}
/* Het logo van het Ethisch Fonds is een JPEG met een witte achtergrond; die krijgt
   een eigen wit kaartje zodat de witte rand bedoeld oogt, ook in donkere modus. */
.over-ons__logo {
  margin: 0;
  /* Zonder dit rekt het kaartje mee met de rasterkolom. */
  justify-self: start;
  display: inline-block;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.over-ons__logo img {
  display: block;
  width: 15rem;
  height: auto;
}

/* ------------------------------------------------------------ tekst naast beeld */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* Beeld links, tekst rechts — de tekst houdt de breedste kolom. Het beeld staat
   op halve hoogte van de tekst ernaast; met `start` bleef het bovenaan hangen en
   stond er onder het kaartje een groot gat zodra de tekst langer werd. */
.split--beeld-links {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
}
.split--beeld-links > *:first-child {
  order: 2;
}
.split--beeld-links > *:last-child {
  order: 1;
}

/* Het logo van het Ethisch Fonds op de homepage: de kolom is zo breed als het
   kaartje, de tekst krijgt de rest. Met twee gelijke kolommen stond er rechts van
   het logo zo'n 280 px leegte en werd de tekst bij een smaller venster snel
   smal (vraag van de klant, 09-11: rechts van het logo hoogstens tweemaal de
   ruimte links ervan). */
.split--logo {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4.5vw, 4.5rem);
}

@media (max-width: 56rem) {
  .split {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .split--beeld-links > *:first-child,
  .split--beeld-links > *:last-child {
    order: 0;
  }
}

/* ------------------------------------------------------------ toelichting
   Een woord met een uitleg die bij het overzweven of aantikken verschijnt.
   Geen JavaScript: het kadertje hangt aan :hover en :focus-visible, zodat het
   ook met het toetsenbord te bereiken is. De tekst staat in data-tip. */

/* Sinds 2026-10-08 dezelfde vaste achtergrond als een begrip in de tekst (in
   plaats van een stippellijn), zodat alles wat bij overzweven iets toont er
   hetzelfde uitziet (vraag van de klant). */
/* Het kadertje (::after) hangt aan de alinea, niet aan het woord. Aan het woord
   liep het buiten beeld zodra het woord rechts in de kolom stond, en omdat een
   verborgen kadertje toch plaats inneemt, scrolde de hele pagina dan 62 px
   zijwaarts (vastgesteld op 2026-10-08 bij 733 px breed). */
.prose p:has(> .szm-tip) {
  position: relative;
}
.szm-tip {
  background: var(--begrip-bg);
  box-shadow: 0 0 0 2px var(--begrip-bg);
  border-radius: 2px;
  cursor: help;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.szm-tip:hover,
.szm-tip:focus-visible {
  background: var(--begrip-hover-bg);
  box-shadow: 0 0 0 2px var(--begrip-hover-bg);
  color: var(--begrip-hover-ink);
}

.szm-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.55rem);
  z-index: 5;
  width: max-content;
  max-width: min(22rem, 70vw);
  padding: 0.7rem 0.85rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

.szm-tip:hover::after,
.szm-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Op een smal scherm loopt het kadertje anders buiten beeld. */
@media (max-width: 34rem) {
  .szm-tip::after {
    left: 50%;
    transform: translateX(-50%);
    max-width: 85vw;
  }
}

/* ------------------------------------------------------------ over ons */

.over-ons__titel {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 1rem;
  letter-spacing: -0.025em;
}

/* ------------------------------------------------------------ auteurs-CTA */

/* Zelfde lichtblauwe vlak als de hero: samen vormen ze de twee accenten op de
   homepage, met de artikels er wit tussenin. */
.auteurs-cta {
  background: var(--accent-soft);
  border-top: 1px solid var(--rule-op-soft);
  border-bottom: 1px solid var(--rule-op-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.auteurs-cta h2 {
  color: var(--hero-ink);
}
.auteurs-cta .eyebrow--accent {
  color: var(--accent-op-soft);
}
.auteurs-cta .btn--primair {
  background: var(--accent-op-soft);
  border-color: var(--accent-op-soft);
}
.auteurs-cta .btn--primair:hover {
  background: var(--hero-ink);
  border-color: var(--hero-ink);
}
.auteurs-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.auteurs-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 0.75rem;
  letter-spacing: -0.025em;
}
.auteurs-cta p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--hero-ink-2);
  max-width: 52ch;
}
.auteurs-cta strong {
  color: var(--hero-ink);
}
.auteurs-cta__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}
@media (max-width: 56rem) {
  .auteurs-cta__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .auteurs-cta__acties {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------ deel-kaarten */

.part {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.part__title {
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: -0.02em;
}
.part__title a {
  text-decoration: none;
  color: var(--ink);
}
.part__title a:hover {
  color: var(--accent);
}
.part__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.part__list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.45rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: var(--radius);
  font-size: 0.975rem;
}
.part__list a:hover {
  background: var(--surface);
  color: var(--accent);
}
.part__count {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.parts-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* ------------------------------------------------------------ footer */

.site-footer {
  margin-top: 4rem;
  padding-block: 3.5rem;
  background: var(--balk);
  color: var(--balk-ink-2);
}

/* Vier kolommen: wie we zijn, navigatie, naslag, logo. */
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 62rem) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }
}
@media (max-width: 36rem) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

.site-footer p {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--balk-ink-2);
  line-height: 1.6;
}
.site-footer a {
  color: var(--balk-ink);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--balk-accent);
  text-decoration: underline;
}

.site-footer__titel {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--balk-ink);
}
.site-footer p.site-footer__titel {
  margin-bottom: 0.75rem;
}

.site-footer__kop {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--balk-accent);
}
.site-footer p.site-footer__kop {
  margin-bottom: 0.85rem;
}

.site-footer__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

.site-footer__adres {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-style: normal;
  color: var(--balk-ink-2);
  line-height: 1.7;
}
.site-footer__adres strong {
  color: var(--balk-ink);
  font-weight: 600;
}

/* Het logo is tweekleurig met donkere letters; op de blauwe balk krijgt het
   een wit kaartje, net als het logo van het Ethisch Fonds op de homepage. */
.site-footer__kolom--logo {
  justify-self: end;
}
@media (max-width: 62rem) {
  .site-footer__kolom--logo {
    justify-self: start;
  }
}
.site-footer__logo {
  margin: 0;
  display: inline-block;
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.site-footer__logo img {
  display: block;
  width: 8.5rem;
  height: auto;
}

/* Smalle onderregel: ©, privacyverklaring en cookie-instellingen. */
.site-footer__onder {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--balk-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
}

/* "Site by JVV": op dezelfde regel, helemaal rechts. */
.site-footer__maker {
  margin-left: auto;
}

/* ------------------------------------------------------------ prev/next */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.pager a {
  text-decoration: none;
  max-width: 20rem;
}
.pager__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.35rem;
}
.pager__title {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.3;
  font-weight: 600;
}
.pager a:hover .pager__title {
  color: var(--accent);
}
.pager__next {
  text-align: right;
  margin-left: auto;
}

/* ------------------------------------------------------------ misc */

.related {
  margin-top: 3rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}
.related h2 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.9rem;
}
.related__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.empty {
  color: var(--ink-3);
  font-style: italic;
}

/* ------------------------------------------------------------ reacties
   Nagebouwd zoals WordPress reacties standaard toont. */

.reacties {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.reacties--compact {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--rule-strong);
}

.reacties__kop {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.25rem;
}

.reacties__lijst {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.reactie {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.9rem;
  align-items: start;
}

.reactie__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-op-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
}

.reactie__meta {
  margin: 0 0 0.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.reactie__auteur {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.reactie__datum {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--ink-3);
}

.reactie__tekst {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-2);
}

/* Illustratief reactieformulier (in WordPress is dit ingebouwd) */
.reactie-form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}

.reactie-form__kop {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 0.85rem;
}

.reactie-form__vak,
.reactie-form__veld {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink-3);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
}

.reactie-form__vak {
  min-height: 4.5rem;
  margin-bottom: 0.6rem;
}

.reactie-form__rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.reactie-form__voet {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.reactie-form__knop {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
}

.reactie-form__note {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--ink-3);
}

@media (max-width: 34rem) {
  .reactie-form__rij {
    grid-template-columns: 1fr;
  }
}

/* Redactionele opmerking, bv. over synoniempagina's */
.notice {
  font-family: var(--font-sans);
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--term-soft);
  border-left: 2px solid var(--term);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.75rem 1rem;
  margin: 1.25rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   WordPress-specifiek
   ============================================================ */

.entry-content { /* zelfde als .prose */ }

/* Automatisch gelegde begrippenlinks door de plugin */
a.szm-begrip,
.prose a.tag_url {
  color: inherit;
  text-decoration: none;
  background: var(--begrip-bg);
  box-shadow: 0 0 0 2px var(--begrip-bg);
  border-radius: 2px;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
a.szm-begrip:hover,
.prose a.tag_url:hover {
  background: var(--begrip-hover-bg);
  box-shadow: 0 0 0 2px var(--begrip-hover-bg);
  color: var(--begrip-hover-ink);
}
/* Hetzelfde begrip binnen ±20 regels na de vorige markering (szm_begrippen_herhaling
   in de plugin): nog altijd een link, maar zonder achtergrond tot je erover gaat. */
a.szm-begrip.begrip-herhaald,
.prose a.tag_url.begrip-herhaald {
  background: none;
  box-shadow: none;
}
a.szm-begrip.begrip-herhaald:hover,
.prose a.tag_url.begrip-herhaald:hover {
  background: var(--begrip-hover-bg);
  box-shadow: 0 0 0 2px var(--begrip-hover-bg);
  color: var(--begrip-hover-ink);
}

/* Stellingen zoals de plugin ze onder een hoofdstuk zet.

   Het nummerbolletje (S1, S2, ...) stond vroeger in een eigen kolom van 4,5rem
   en duwde de hele stelling — titel, tussentitels, tekst en diagrammen — ruim
   6rem naar rechts. Nu zweeft het bolletje links naast de titel: de titel begint
   op dezelfde hoogte als het bolletje, en alles eronder loopt over de volle
   breedte van de tekstkolom, vooraan uitgelijnd met de rest van de pagina. */
.szm-stellingen {
  margin-top: 2.5rem;
}
.szm-stelling {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 6rem;
}
/* Het bolletje zweeft; zonder dit zou een korte stelling eronder uit lopen. */
.szm-stelling::after {
  content: "";
  display: block;
  clear: both;
}
.szm-stelling:last-child { border-bottom: 0; }
/* Staan de stellingen bovenaan de tekst, dan begint de titel van de eerste op
   dezelfde hoogte als de zijbalk ernaast (vraag klant, mail 16-10). */
.entry-content > .szm-stellingen:first-child { margin-top: 0; }
.entry-content > .szm-stellingen:first-child > .szm-stelling:first-child { padding-top: 0; }
.szm-stelling__nr {
  float: left;
  width: 3.25rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-op-soft);
  background: var(--accent-soft);
  border-radius: 100px;
  padding: 0.3rem 0;
  text-align: center;
  /* Zet de tekst van het bolletje op de hoogte van de eerste titelregel. */
  margin: 0 0.9rem 0 0;
}
/* `overflow: hidden` geeft de titel een eigen blokcontext: hij blijft netjes
   naast het bolletje staan in plaats van eromheen te lopen.

   De selector begint met `.prose` omdat `.prose h2` anders wint: die regel gaf
   de titel een marge bovenaan en zette hem daardoor een regel lager dan het
   nummerbolletje. */
.prose .szm-stelling__titel {
  overflow: hidden;
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 0 0 1.1rem;
  letter-spacing: -0.02em;
}
.szm-stelling__reacties {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  margin: 1.25rem 0 0;
}
.szm-stelling__reacties a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.szm-stelling__reacties a:hover { color: var(--accent); border-color: var(--accent); }

/* Alleen zichtbaar voor wie mag bewerken (zie szm_append_stellingen). */
.szm-stelling__bewerk { margin: -.25rem 0 .75rem; font-size: .8125rem; }
.szm-stelling__bewerk a { color: var(--accent); }

@media (max-width: 44rem) {
  .szm-stelling { padding: 2rem 0; }
  .szm-stelling__nr { width: 2.9rem; margin-right: 0.7rem; }
  .prose .szm-stelling__titel { font-size: 1.2rem; }
}

/* Reacties (WordPress-markup) */
.comments-area {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.comments-title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.25rem;
}
.comment-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.comment-list ol.children {
  list-style: none;
  margin: 1.25rem 0 0 2.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.comment-body { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.9rem; align-items: start; }
.comment-avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-op-soft);
  display: grid; place-items: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem;
}
.comment-meta { margin: 0 0 0.2rem; display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; }
.comment-author { font-family: var(--font-sans); font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.comment-date { font-family: var(--font-sans); font-size: 0.75rem; color: var(--ink-3); }
.comment-text p { margin: 0 0 0.6rem; font-size: 1rem; line-height: 1.62; color: var(--ink-2); }
.comment-wacht {
  margin: 0.4rem 0 0;
  padding: 0.45rem 0.7rem;
  font-family: var(--font-sans); font-size: 0.8125rem;
  color: var(--ink-2);
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}

.comment-reply-link {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  text-decoration: none;
}

.comment-respond {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.comment-reply-title {
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600;
  color: var(--ink-2); margin: 0 0 0.85rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.6rem;
}
.comment-form textarea { min-height: 6rem; resize: vertical; }
.comment-form label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-bottom: 0.2rem;
}
.comment-form .submit {
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600;
  color: var(--paper); background: var(--accent);
  border: 0; border-radius: var(--radius);
  padding: 0.6rem 1.2rem; cursor: pointer;
}
.comment-form .submit:hover { background: var(--accent-hover); }
.comment-form .comment-notes,
.comment-form .comment-form-cookies-consent label {
  font-size: 0.75rem; color: var(--ink-3);
}
.comment-form-cookies-consent { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.75rem; }
.comment-form-cookies-consent input { width: auto; }

.no-comments { font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-3); }

/* Paginering */
.pagination {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule);
  font-family: var(--font-sans); font-size: 0.85rem;
}
.pagination .page-numbers {
  padding: 0.4rem 0.75rem; border-radius: var(--radius);
  text-decoration: none; color: var(--ink-2); background: var(--surface);
}
.pagination .page-numbers.current { background: var(--accent); color: var(--paper); }

/* Zoekformulier */
.search-form { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.search-form input[type="search"] {
  flex: 1; font-family: var(--font-sans); font-size: 0.9rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--rule-strong);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.search-form button {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem;
  background: var(--accent); color: var(--paper);
  border: 0; border-radius: var(--radius); padding: 0.6rem 1.1rem; cursor: pointer;
}

.wp-caption, figure { max-width: 100%; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
/* `.prose img` lijnt beelden vooraan uit; deze regel moet daar sterker dan zijn,
   anders doet .aligncenter niets meer binnen een tekstblok. */
.aligncenter,
.prose img.aligncenter { display: block; margin-inline: auto; }

/* Tekst naast een beeld (vraag van de klant, 09-11): een beeld dat in de editor
   links of rechts uitgelijnd is, zweeft en de tekst loopt ernaast door. `.prose img`
   zet de zijmarge op 0; deze regels zijn sterker en geven de ruimte terug. Op een
   smal scherm staat het beeld gewoon boven de tekst. */
.prose .alignleft,
.prose img.alignleft { float: left; margin: 0.3rem 1.75rem 1rem 0; }
.prose .alignright,
.prose img.alignright { float: right; margin: 0.3rem 0 1rem 1.75rem; }
/* Hoogstens 45% van de kolom, zodat er naast het beeld nog een leesbare strook
   tekst overblijft (de kolom is ±655 px breed). */
.prose .alignleft,
.prose .alignright { max-width: 45%; }
.prose .alignleft img,
.prose .alignright img { max-width: 100%; height: auto; }
.prose::after { content: ""; display: table; clear: both; }
@media (max-width: 40rem) {
  .prose .alignleft,
  .prose img.alignleft,
  .prose .alignright,
  .prose img.alignright { float: none; margin: 0 0 1rem; max-width: 100%; }
}
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* Anker-doelen moeten onder de plakkende sitekop uit komen. */
.entry-content :is(h2, h3, h4, h5)[id] {
  scroll-margin-top: 5.5rem;
}

/* ------------------------------------------------------------ bibliografie */

.prose .bibliografie__intro {
  color: var(--ink-3);
  font-size: 0.92rem;
}
.prose .bibliografie p {
  padding-left: 1.75rem;
  text-indent: -1.75rem;
  margin-block: 0 0.9rem;
}

/* ------------------------------------------------------------ zoeken

   Kopbalk: een vergrootglas dat een <details> opent. Het paneel hangt onder de
   balk en is op smalle schermen even breed als de balk zelf. */

.zoek {
  position: relative;
}

.zoek__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 100px;
  color: var(--balk-ink-2);
  cursor: pointer;
  list-style: none;
  transition: color 0.15s, background-color 0.15s;
}
/* Het standaard driehoekje van <summary> weg, in alle browsers. */
.zoek__knop::-webkit-details-marker { display: none; }
.zoek__knop::marker { content: ""; }

.zoek__knop:hover {
  color: var(--balk-ink);
  background: rgba(255, 255, 255, 0.12);
}
.zoek__knop:focus-visible {
  outline: 2px solid var(--balk-ink);
  outline-offset: 2px;
}
.zoek[open] .zoek__knop {
  color: var(--balk);
  background: var(--balk-ink);
}

.zoek__pictogram {
  width: 1.15rem;
  height: 1.15rem;
}

.zoek__paneel {
  position: absolute;
  top: calc(100% + 0.85rem);
  right: 0;
  z-index: 60;
  width: min(24rem, calc(100vw - 2.5rem));
  padding: 0.9rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Het formulier zelf: veld met een knop ertegenaan. */
.zoekform {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.zoekform__veld {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
}
.zoekform__veld::placeholder {
  color: var(--ink-3);
}
.zoekform__veld:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.zoekform__verzend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.4rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.15s;
}
.zoekform__verzend:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.zoekform__verzend:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.zoekform__pictogram {
  width: 1.05rem;
  height: 1.05rem;
}

/* Losse variant op een lichte achtergrond: lege zoekpagina en 404. */
.zoekform--blok {
  max-width: 30rem;
  margin: 1.5rem 0;
}
.zoekform--blok .zoekform__veld {
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
}
.zoekform--blok .zoekform__verzend {
  width: 3rem;
}

/* ------------------------------------------------------------ zoekresultaten

   De resultaten lopen door elkaar heen: artikels, hoofdstukken, stellingen,
   begrippen. Het soort staat daarom links, in een eigen kolom. */

.zoek-kop {
  margin-bottom: 2rem;
  max-width: 46rem;
}
.zoek-kop__aantal {
  margin-top: 0.6rem;
}

.zoek-lijst {
  border-top: 1px solid var(--rule);
}

.zoek-treffer {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  align-items: start;
}

.zoek-treffer__soort {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0.35rem 0 0;
}

.zoek-treffer__titel {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 0.45rem;
  transition: color 0.15s;
}
.zoek-treffer:hover .zoek-treffer__titel {
  color: var(--accent);
}

.zoek-treffer__fragment {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 0.6rem;
  max-width: 62ch;
}

.zoek-treffer__fragment mark {
  background: var(--accent-soft);
  color: var(--accent-op-soft);
  border-radius: 2px;
  padding: 0 0.15em;
}

.zoek-treffer__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.zoek-leeg__wegwijzers {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

@media (max-width: 44rem) {
  .zoek-treffer {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 1.4rem 0;
  }
  .zoek-treffer__soort {
    margin-top: 0;
  }
}

/* In de kopbalk op smalle schermen staat het vergrootglas tussen de menu-items;
   het paneel wordt dan even breed als de balk. */
@media (max-width: 40rem) {
  .zoek {
    position: static;
  }
  .zoek__paneel {
    top: calc(100% + 0.5rem);
    left: 1.25rem;
    right: 1.25rem;
    width: auto;
  }
}


/* ------------------------------------------------------------ zijbalk "Op deze pagina"

   Opgebouwd door js/zijbalk.js op begrippen, stellingen en artikels met minstens drie
   tussenkoppen, en op hoofdstukken met de lijst van hun stellingen.
   Links van de tekst, plakkend tijdens het scrollen en te verbergen.
   Tussen 48 en 62rem (een smaller laptopvenster) blijft ze links staan, maar smaller.
   Pas onder 48rem (telefoon) wordt ze een balk boven de tekst. */

.prose-wrap.heeft-zijbalk {
  max-width: none;
  display: grid;
  grid-template-columns: 15rem minmax(0, var(--measure));
  column-gap: 3rem;
  align-items: start;
}

.prose-wrap.heeft-zijbalk > :not(.zijbalk) {
  grid-column: 2;
}

.prose-wrap.heeft-zijbalk.zijbalk-dicht {
  grid-template-columns: 9.5rem minmax(0, var(--measure));
}

.zijbalk {
  grid-column: 1;
  grid-row: 1 / span 99;
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--font-sans);
}

.zijbalk__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
}

.zijbalk__titel {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Een echte knop met kader en een kruisje, zodat duidelijk is dat de zijbalk dicht kan. */
.zijbalk__knop {
  flex: none;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-2);
  background: var(--paper, #fff);
  border: 1px solid var(--rule-op-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.zijbalk__knop:hover,
.zijbalk__knop:focus-visible {
  color: var(--accent-op-soft);
  border-color: var(--accent-op-soft);
}

/* Dicht: alleen de knop blijft over, zonder de titel. */
.zijbalk-dicht .zijbalk__titel {
  display: none;
}

.zijbalk-dicht .zijbalk__kop {
  margin: 0;
}

.zijbalk-dicht .zijbalk__lijst {
  display: none;
}

.zijbalk__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zijbalk__item + .zijbalk__item {
  margin-top: 0.45rem;
}

.zijbalk__item a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.6rem;
  transition: color 0.15s, border-color 0.15s;
}

.zijbalk__item--n3 a {
  font-size: 0.825rem;
  margin-left: 0.85rem;
}

.zijbalk__item a:hover,
.zijbalk__item a:focus-visible {
  color: var(--accent-op-soft);
}

.zijbalk__item a[aria-current="true"] {
  color: var(--accent-op-soft);
  font-weight: 600;
  border-left-color: var(--accent-op-soft);
}

/* Smaller laptopvenster: de zijbalk blijft links naast de tekst en schuift mee met de
   lezer, zoals op een breed scherm, maar in een smallere kolom (mail Jan, 2026-10-14). */
@media (max-width: 62rem) and (min-width: 48.0625rem) {
  .prose-wrap.heeft-zijbalk {
    grid-template-columns: 11.5rem minmax(0, var(--measure));
    column-gap: 1.75rem;
  }
  .prose-wrap.heeft-zijbalk.zijbalk-dicht {
    grid-template-columns: 9.5rem minmax(0, var(--measure));
  }
  .zijbalk__item a {
    font-size: 0.82rem;
  }
}

/* Zonder zijbalk (minder dan drie tussenkoppen) springt de tekst even ver in als
   ernaast, zodat hij op elk begrip, elke stelling en elk artikel op dezelfde lijn
   begint. Anders stond hij tegen de linkerrand (mail Jan, 2026-10-28). */
@media (min-width: 62.0625rem) {
  :is(.single-szm_begrip, .single-szm_stelling, .single-post) .prose-wrap:not(.heeft-zijbalk) {
    max-width: calc(18rem + var(--measure));
    padding-left: 18rem;
  }
}

@media (max-width: 62rem) and (min-width: 48.0625rem) {
  :is(.single-szm_begrip, .single-szm_stelling, .single-post) .prose-wrap:not(.heeft-zijbalk) {
    max-width: calc(13.25rem + var(--measure));
    padding-left: 13.25rem;
  }
}

/* Telefoon: de zijbalk wordt een balk met de knop, die onder de sitekop blijft staan
   tijdens het scrollen. De lijst opent als paneel over de tekst en gaat dicht na een
   keuze. --zijbalk-top is de hoogte van de sitekop en wordt door js/zijbalk.js gezet. */
@media (max-width: 48rem) {
  .prose-wrap.heeft-zijbalk,
  .prose-wrap.heeft-zijbalk.zijbalk-dicht {
    display: block;
    max-width: var(--measure);
  }
  .zijbalk {
    position: sticky;
    top: var(--zijbalk-top, 0);
    z-index: 40;
    max-height: none;
    overflow: visible;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--accent-soft);
    border: 1px solid var(--rule-op-soft);
    border-radius: var(--radius);
  }
  .prose-wrap:not(.zijbalk-dicht) .zijbalk__kop {
    margin-bottom: 0;
  }
  .zijbalk__lijst {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 65vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.9rem 1rem;
    background: var(--paper, #fff);
    border: 1px solid var(--rule-op-soft);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}


/* ------------------------------------------------------------ overzicht van alle stellingen */

.stellingen-sprong {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem 2rem;
  margin-bottom: 3rem;
  padding: 1.25rem 1.5rem;
  background: var(--accent-soft);
  border: 1px solid var(--rule-op-soft);
  border-radius: var(--radius);
  font-family: var(--font-sans);
}

.stellingen-sprong .eyebrow {
  margin-bottom: 0.5rem;
}

.stellingen-sprong ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stellingen-sprong li + li {
  margin-top: 0.35rem;
}

.stellingen-deel + .stellingen-deel {
  margin-top: 4rem;
}

.stellingen-deel__titel,
.stellingen-hoofdstuk__titel {
  scroll-margin-top: 5.5rem;
}

.stellingen-deel__titel {
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--rule);
}

.stellingen-deel__titel a,
.stellingen-hoofdstuk__titel a,
.prose .szm-stelling__titel a {
  color: inherit;
  text-decoration: none;
}

.stellingen-hoofdstuk {
  scroll-margin-top: 5.5rem;
}

.stellingen-hoofdstuk + .stellingen-hoofdstuk {
  margin-top: 3rem;
}

.stellingen-hoofdstuk__titel {
  margin: 0 0 0.5rem;
}

/* Lange adressen en woorden in de lopende tekst mogen afbreken, zodat de pagina op een
   telefoon niet zijwaarts schuift (een kale URL in een stelling deed dat). */
.prose {
  overflow-wrap: anywhere;
}

/* Lijst van stellingtitels in het overzicht: nummer en titel, zonder de tekst. */
.stellingen-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.stellingen-lijst li {
  border-bottom: 1px solid var(--rule);
}

.stellingen-lijst a {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 0.25rem;
  color: inherit;
  text-decoration: none;
  line-height: 1.4;
}

.stellingen-lijst a:hover,
.stellingen-lijst a:focus-visible {
  color: var(--accent-op-soft);
  background: var(--accent-soft);
}

.stellingen-lijst__nr {
  flex: none;
  min-width: 2.4rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ------------------------------------------------------------ telefoon

   De kopbalk telde op een telefoon drie regels (merk, menu, Contact op een eigen regel).
   Met krappere tussenruimte past het menu met zoekknop en Contact op één regel. */
@media (max-width: 30rem) {
  .site-header__nav {
    gap: 0.5rem 0.5rem;
    justify-content: space-between;
  }
  .nav {
    gap: 0.75rem;
    font-size: 0.78rem;
  }
  .nav__knop {
    padding: 0.35rem 0.55rem;
    font-size: 0.74rem;
  }
}

/* Onder 23rem past ook dat niet meer op één regel: Contact gaat dan netjes naar de volgende. */
@media (max-width: 23rem) {
  .site-header__nav {
    justify-content: flex-start;
  }
}

/* Ingesloten video's en kaarten (een iframe met vaste breedte uit het oude CMS) schuiven
   niet meer buiten het scherm. */
.prose iframe,
.prose video,
.prose embed,
.prose object {
  max-width: 100%;
}
.prose iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Een lang webadres in een reactie mag afbreken in plaats van de pagina te verbreden. */
.comments-area {
  overflow-wrap: anywhere;
}

/* Een lang woord in een titel ("gemeenschapsaandelen") mag afbreken op een scherm van 320 px. */
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}