/* document.css - juridische documentpagina's (Privacy, VVO, AV).
   1-op-1 naar Figma Brand Identiteit (Jason-frames): Merkstreepje, kicker
   Document, artikelen, tabellen. Tokens komen uit home.css (Kleur/Vlak/Pagina,
   Tekst/Merk, Font/Kop). Geen overlay, geen pakketkeuze. */

:root{
  --vlak-gedempt:#F2EFEA; /* Kleur/Vlak/Gedempt - tabelkop */
}

body.document-pagina{background:var(--vlak-pagina)}
/* Figma-kicker is 'Document', niet DOCUMENT. De homepage-eyebrow blijft uppercase. */
.document-pagina .eyebrow{text-transform:none}

.document{padding-top:64px;padding-bottom:64px;display:flex;flex-direction:column;gap:48px}

.document-kop{display:flex;flex-direction:column;gap:6px}
.document-kop .streepje{margin-bottom:3px}
.document-kop h1{font-size:40px;line-height:48px;color:var(--tekst-standaard);overflow-wrap:anywhere}
.document-kop .inleiding,
.document-kop .adresblok{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}
.document-kop .adresblok p+p{margin-top:8px}

.document-versie{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}

.document-artikel{display:flex;flex-direction:column;gap:8px}
.document-artikel h2{font-size:var(--h4-grootte);line-height:var(--h4-regelafstand);color:var(--tekst-standaard);overflow-wrap:anywhere}
.document-artikel h3{font-size:var(--h5-grootte);line-height:var(--h5-regelafstand);color:var(--tekst-standaard);overflow-wrap:anywhere}
.document-artikel p{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-standaard)}
.document-artikel a{color:var(--tekst-primair);text-decoration:underline;text-underline-offset:2px}
.document-artikel a:hover{color:var(--vlak-primair-hover)}

.document-artikel ul,
.document-artikel ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.document-artikel li{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-standaard)}
.document-artikel ol{padding-left:26px}

.document-tabel-wrap{width:100%;overflow-x:auto}
.document-artikel table{width:100%;border-collapse:collapse;background:var(--vlak-kaart)}
.document-artikel th{background:var(--vlak-gedempt);font:400 12px/16px var(--font-tekst);color:var(--tekst-gedempt);
  text-align:left;padding:10px 16px;height:36px;vertical-align:middle}
.document-artikel td{font:400 12px/20px var(--font-tekst);color:var(--tekst-standaard);
  text-align:left;padding:12px 16px;min-height:44px;vertical-align:middle;background:var(--vlak-kaart);
  overflow-wrap:anywhere}

@media(max-width:640px){
  .document{padding-top:40px;padding-bottom:48px;gap:40px}
}