/* JURIDISCH — gedeeld contract voor de twee juridische pagina's
   (privacyverklaring.html = pv1..pv3, algemene-voorwaarden.html = av1..av3).
   Nieuw bestand, 2026-08-11, Traffic To Talks.

   WAAROM DIT BESTAND BESTAAT
   De lopende tekst zelf krijgt GEEN nieuwe opmaak: die draait volledig op het
   bestaande prose-contract .artikel-body uit css/kennisbank/artikel.css
   (p / h2 / h3 / ul / ol / strong, inclusief de oranje punt-markers). Zo zien
   de juridische pagina's er hetzelfde uit als een kennisbank-artikel.

   Wat het prose-contract NIET dekt en hier dus wel staat:
   1. Links in lopende tekst. base.css zet sitebreed `a { text-decoration: none }`
      en .artikel-body kent geen eigen link-stijl (artikelen bevatten in de
      praktijk geen inline links). In een juridisch document staan wel links
      (mailto, de andere juridische pagina, de Autoriteit Persoonsgegevens), en
      die moeten als link herkenbaar zijn.
   2. Een gecentreerde leeskolom. .artikel-body is 720px breed en staat op de
      artikelpagina links naast een 300px sidebar. Die sidebar bestaat hier niet,
      dus zonder centrering zou de tekst links in een container van 1380px
      plakken met een lege rechterhelft.
   3. Twee kleine eigen elementen: de "laatst bijgewerkt"-regel en de zichtbare
      markering van openstaande punten (.jur-open).

   Alles wat het prose-contract aanvult staat onder .jur-kolom, zodat geen enkele
   regel hiervan kan lekken naar de kennisbank-artikelen die hetzelfde
   .artikel-body dragen.
   Oude waarde verbatim: "Alles staat onder .jur-kolom, zodat geen enkele regel
   hiervan kan lekken naar de kennisbank-artikelen die hetzelfde .artikel-body
   dragen." Aangepast 2026-08-11: sinds de visuele eindcontrole staat er één
   regel buiten .jur-kolom, namelijk de PageHero-kolom hieronder. Die kan niet
   lekken omdat dit bestand alleen op deze twee pagina's wordt geladen.

   Geladen door: _qa/shell-privacy.html en _qa/shell-voorwaarden.html, NA
   css/kennisbank/artikel.css (die levert het prose-contract dat hier wordt
   aangevuld). */

/* ---------- PageHero-kolom ----------
   BEVINDING visuele eindcontrole 2026-08-11: op privacyverklaring.html viel de
   ronde oranje kop-punt vanaf ongeveer 1352px viewportbreedte op een eigen
   tweede regel, als een losse stip onder de titel. Oorzaak: "PRIVACYVERKLARING"
   is één ondeelbaar woord dat bij de bovengrens van --text-hero (5.5rem = 88px)
   661px breed wordt, en dat past niet meer met de punt erbij in de 660px van
   .page-hero-copy. Gemeten minimum zonder wrap is 680px; 700px geeft marge voor
   afwijkende fontrendering. De kolom van de leadregel verandert niet mee, die
   heeft zijn eigen max-width van 54ch, en "Algemene voorwaarden." breekt op de
   spatie en bleef in beide gevallen twee regels.
   Oude waarde verbatim (css/sections/page-hero.css, blijft daar staan voor de
   overige pagina's):
     .page-hero-copy {
       max-width: 660px;
     }
   Dit bestand wordt alleen door shell-privacy.html en shell-voorwaarden.html
   geladen, en pas NA page-hero.css, dus deze regel raakt geen andere pagina. */

.page-hero .page-hero-copy {
  max-width: 700px;
}

/* ---------- Leeskolom ---------- */

.jur-kolom {
  max-width: 780px;
  margin-inline: auto;
}

/* .artikel-body is zelf 720px; binnen de gecentreerde kolom mag hij de volle
   breedte pakken, anders ontstaat er een tweede, zichtbare inspringing. */
.jur-kolom .artikel-body {
  max-width: none;
}

/* ---------- Links in lopende tekst ---------- */

.jur-kolom .artikel-body a,
.jur-kolom .jur-meta a {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}

.jur-kolom .artikel-body a:hover,
.jur-kolom .jur-meta a:hover { color: var(--orange-600); }

.jur-kolom .artikel-body a:focus-visible,
.jur-kolom .jur-meta a:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Meta-regel boven de tekst ---------- */

.jur-meta {
  font-size: var(--text-small);
  color: var(--text-muted);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line-paper);
}

/* ---------- Inhoudsopgave ---------- */

.jur-inhoud {
  padding: 1.5rem 1.6rem 1.6rem;
  margin-bottom: 2.75rem;
}

.jur-inhoud-kop {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .9rem;
}

.jur-inhoud ol {
  counter-reset: jur-toc;
  columns: 2;
  column-gap: 2rem;
}

@media (max-width: 640px) {
  .jur-inhoud ol { columns: 1; }
}

.jur-inhoud li {
  break-inside: avoid;
  margin-bottom: .45em;
}

.jur-inhoud a {
  display: block;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--text-body);
  transition: color .15s ease;
}

.jur-inhoud a::before {
  counter-increment: jur-toc;
  content: counter(jur-toc) ". ";
  font-weight: 700;
  color: var(--text-strong);
}

.jur-inhoud a:hover { color: var(--orange-600); }

.jur-inhoud a:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Openstaand punt ----------
   Elke [PLACEHOLDER: ...] in de tekst zit in een <span class="jur-open">. Bewust
   luid: deze pagina's mogen niet live gaan zolang er nog een oranje blok in
   staat. Zodra Sennasearch een waarde aanlevert wordt de hele span vervangen
   door gewone tekst; is de laatste weg, dan kan dit blok uit de css.
   Bewust een <span> en geen <mark>: dit is een redactionele restpost voor ons,
   geen inhoudelijke markering voor de lezer, en <mark> wordt door sommige
   schermlezers als nadruk voorgelezen. */

.jur-open {
  background: var(--orange-100);
  color: var(--navy-950);
  font-weight: 600;
  padding: .1em .4em;
  border-radius: var(--r-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Slotkaart ---------- */

.jur-slot {
  margin-top: 3rem;
  padding: 1.6rem 1.75rem;
}

.jur-slot p { margin-bottom: .6em; }
.jur-slot p:last-child { margin-bottom: 0; }

/* ===========================================================================
   Cookietabel (Timo 2026-08-19, hoort bij sections/cookies/ck2.html)
   ===========================================================================
   .artikel-body is een prose-contract voor p/h2/h3/ul/ol/strong en dekt geen
   tabellen. Een cookieverklaring is precies het document waar een tabel wél het
   juiste middel is: vier vaste kolommen per cookie (naam, van wie, waarvoor,
   hoe lang), en dat leest als lopende tekst slechter.

   De wikkel eromheen scrollt horizontaal in plaats van de pagina. Vier kolommen
   passen op 360px nooit; zonder deze wikkel duwt de tabel de hele pagina breder
   en scrollt de site zijwaarts, en dat is een fout die je op een telefoon pas
   ziet als de klant hem meldt.
   =========================================================================== */

.jur-tabelwikkel {
  margin: 1.4em 0 1.6em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-card);
}

.jur-tabel {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
}

.jur-tabel th,
.jur-tabel td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-paper);
}

.jur-tabel tr:last-child td { border-bottom: 0; }

.jur-tabel th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-strong);
  background: var(--surface-cream);
  white-space: nowrap;
}

.jur-tabel td { color: var(--text-body); }

.jur-tabel td:first-child {
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
}