/* ═══════════════ bijpip — typography.css ═══════════════
   Laag 2. Alleen tekst: koppen, body, WP-editor output (.prose/.entry-content).
   Tokens komen uit global.css — hier worden ze alleen toegepast.
   Geen !important in deze laag.
   ════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 em, h2 em, h3 em { font-style: normal; color: var(--wine); } /* 27-10-2026: accentwoord niet meer cursief (Joey) */

/* WP-editorcontent (WYSIWYG uit ACF en post_content) krijgt dezelfde
   ritmiek als .prose uit het concept. */
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 {
  font-size: 30px;
  line-height: 1.22;
  margin: 38px 0 12px;
}
.entry-content h3 {
  font-size: 20px;
  line-height: 1.3;
  margin: 26px 0 8px;
}
.entry-content p,
.entry-content li {
  font-size: 15px;
  line-height: 1.78;
  color: var(--muted);
}
.entry-content p + p { margin-top: 12px; }
.entry-content strong, .entry-content b { color: var(--ink); font-weight: 500; }
.entry-content a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { text-decoration: none; }
.entry-content ul, .entry-content ol { margin: 14px 0; padding-left: 0; list-style: none; }
.entry-content ol { counter-reset: bpol; }
.entry-content ul li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.entry-content ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}
.entry-content ol li { position: relative; padding-left: 26px; margin-bottom: 7px; counter-increment: bpol; }
.entry-content ol li::before {
  content: counter(bpol) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--wine);
  font-size: 13px;
  font-weight: 500;
}
.entry-content blockquote {
  margin: 22px 0;
  padding: 18px 22px;
  background: var(--cream);
  border-left: 2px solid var(--wine);
  border-radius: var(--r);
  font-family: var(--font-head);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
}
.entry-content img { max-width: 100%; height: auto; border-radius: var(--r); }
.entry-content hr { margin: 30px 0; border: 0; border-top: 1px solid var(--line); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entry-content th, .entry-content td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.entry-content th { font-weight: 500; color: var(--ink); }

/* Eén tekstregel mag een pagina nooit horizontaal laten schuiven. */
h1, h2, h3, h4, p, li, td, th, dd, dt, a, span, b, i, em, strong, small {
  overflow-wrap: anywhere;
}

/* ═══════════════ De h1 van de homepagina ═══════════════
   De homepagina heeft geen eigen paginakop (de strook categorievakken is
   het openingsbeeld), dus draagt de merknaam in de header daar de enige
   h1 van de pagina. Zie header.php: alleen op is_front_page() komt er een
   <h1 class="header__logo-h"> om de merknaam heen, op elke andere pagina
   blijft het de kale <span> en hoort de h1 bij de paginakop.

   Deze regel bestaat om de WEERGAVE gelijk te houden: een h1 krijgt van
   de browser en van de kopregels hierboven een eigen font, grootte,
   gewicht en marge. Alles staat hier op inherit, dus de regel ziet er
   exact zo uit als toen het een losse <span> in de <a> was. Vaste
   waarden / inherit, geen clamp() en geen vw: koppen schalen in dit
   thema niet mee met de schermbreedte.
   ═══════════════════════════════════════════════════════ */

.header__logo-h {
  display: block;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* ═══════════════ Koppen: vaste trappen, geen clamp()/vw ═══════════════
   Koppen mogen niet meeschalen met de schermbreedte: de basisregels
   hierboven dragen de desktopgrootte, deze twee media queries zetten er
   één stap kleiner en één stap mobiel onder. Zelfde selectors, zelfde
   specificiteit, verderop in hetzelfde bestand - dus deze winnen.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .entry-content h2 { font-size: 26px; }
  .entry-content h3 { font-size: 19px; }
}

@media (max-width: 600px) {
  .entry-content h2 { font-size: 22px; }
  .entry-content h3 { font-size: 17px; }
}