/* Een datumpagina op papier (layout ronde 6, voorstel "opbouw" 7, aangepast in de review).

   Alleen op de datumpagina's: data.php zet $print_css = '/css/dagpapier.css' en
   header.inc.php maakt daar al een <link media="print"> van, met ?v= uit
   bestandsversie() (zie /tijd/klokkijken). Andere paginasoorten blijven zoals ze
   zijn. Zo hoeft er maar één paginasoort nagelopen te worden, en dat was het
   bezwaar bij het voorstel van ronde 3 (elke pagina, 650 soorten).

   main.css staat op media="screen". Op papier geldt daar dus niets van: geen
   @font-face, geen var(), geen .visueelverborgen. Alles wat hier nodig is, staat
   hier zelf. Zonder dit bestand geeft /10-10-2026 15 vellen: het hele menu als lijst
   en de pagina zonder opmaak.

   Opzet: één kolom, compact, de memo als kop. Lange lijsten (gebeurtenissen, de
   tijden van de zon) gewoon onder elkaar. Twee kolommen (columns) werkt in de
   afdruk van WebKit niet: voor de hele pagina bleef alles in de eerste kolom staan
   en binnen een lijst gebeurde niets (nagemeten met een echte afdruk naar PDF).

   Weg: kop, menu, zoeken, kruimelpad, tabjes, de weekbalk, iconen, plakband, de
   uitklapbare weerstatistieken, drie zinnen die naar een andere pagina wijzen, de
   disclaimer en de voetregel.
   De bronregels blijven: Wikipedia (CC BY-SA), KNMI en CBS (CC BY) vragen een
   vermelding, ook op papier. Onderaan het adres van de pagina (p.printvoet). */

@page { size: A4; margin: 13mm 14mm 14mm; }

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
}

html, body { background: #fff; color: #111; }
body { margin: 0; font: 9.2pt/1.38 Manrope, Arial, sans-serif; }

/* Weg. Alles buiten #content op de bekende lijn, zoals klokkijken-print.css. */
body > :not(#container),
#container > :not(#contentcontainer),
#contentcontainer > :not(#contentwrapper),
#contentwrapper > :not(#content),
#kruimels, .dagnav, #paginanav, .icon32, .expand, #weerstats, .weekbalk,
.box.notitie > p:not(.bron), .visueelverborgen, .skiplink { display: none !important; }

#container, #contentcontainer, #contentwrapper, #content {
  margin: 0; padding: 0; width: auto; max-width: none; border: 0; background: none; box-shadow: none;
}

/* Zinnen die op het scherm de weg wijzen en op papier niets doen. */
p:has(> a[href="/kalender/verjaardagskalender"]),
p:has(> a[href="/generaties"]),
p:has(> a[href="/feitje-van-de-dag"]) { display: none !important; }

/* De memo: geel briefje over de hele breedte. */
#title {
  margin: 0 0 4mm; padding: 3mm 5mm;
  border: .6pt solid #f5df7a; border-radius: 2.5mm; background: #fdf2bf;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  transform: none; box-shadow: none;
}
#title h1 { margin: 0; font-size: 22pt; line-height: 1.1; font-weight: 800; color: #111; }
#title h1 span { display: block; font-size: 8pt; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #5f4f14; }
#title::before, #title::after { display: none !important; }

/* De kaartjes worden secties met een haarlijn. */
.box {
  margin: 0 0 2.6mm; padding: 0 0 2.2mm; border: 0; border-bottom: .4pt solid #ccc;
  border-radius: 0; background: none; box-shadow: none; transform: none;
  break-inside: avoid;
}
.box::before, .box::after { display: none !important; }
.box h2 { margin: 0 0 1.2mm; font-size: 10.5pt; line-height: 1.25; font-weight: 800; break-after: avoid; }
.box p { margin: 0 0 1.6mm; }
.box a { color: #111; text-decoration: none; }
.highlight { font-weight: 700; background: none; }
sup { font-size: .7em; }

/* Elk kaartje blijft bij elkaar, ook de gebeurtenissen: anders bleef de kop "Gebeurtenissen
   op 20 april" alleen onderaan een vel staan (break-after: avoid op de kop helpt in WebKit
   niet). Is een kaartje langer dan een vel, dan breekt de browser het toch. */

ul { margin: 0 0 1.6mm; padding: 0; list-style: none; }
li { margin: 0 0 1mm; break-inside: avoid; }
.basiclist li { padding-left: 3mm; text-indent: -3mm; }
.basiclist li::before { content: "\2022\00a0\00a0"; color: #888; }
.soort, .dagkop { margin: 1.6mm 0 .6mm; font-size: 8pt; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #555; break-after: avoid; }
hr { border: 0; border-top: .3pt solid #ddd; margin: 2mm 0; }

/* De dag tussen de uitersten (beeld_weerschaal()). main.css geldt hier niet, dus de
   kleuren van de figuur staan hier zelf, zonder var(). Een SVG-vlak drukt af zonder
   print-color-adjust (het is inhoud, geen achtergrond). */
.kw { margin: 1.5mm 0 1.5mm; max-width: 120mm; break-inside: avoid; }
.kw-doek { display: block; width: 100%; overflow: visible; }
.kw-schaal { fill: #f4f1ea; }
.kw-gewoon { fill: #c9e6f0; }
.kw-rand   { fill: none; stroke: #516471; stroke-width: 1; }
.kw-dag    { fill: #1a7fa4; }
.kw-uiterst, .kw-waarde { fill: #111; font-size: 7.5pt; font-weight: 700; }
.kw-jaar   { fill: #555; font-weight: 400; }
.kw figcaption { font-size: 7.5pt; color: #555; }
.zb-s { margin-right: 4mm; }
.zb-s::before { content: ""; display: inline-block; width: 3.5mm; height: 2.4mm; margin-right: 1.2mm;
  border: .4pt solid #516471; vertical-align: -.2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.kw-s-dag::before    { background: #1a7fa4; border-color: #1a7fa4; }
.kw-s-gewoon::before { background: #c9e6f0; }

/* Feitenlijsten als twee kolommen: label grijs, waarde vet. */
.feiten li { display: grid; grid-template-columns: 1fr auto; column-gap: 3mm;
  padding: .5mm 0; border-bottom: .3pt solid #e6e6e6; margin: 0; }
.feiten .naam { color: #555; }
.feiten .wat { font-weight: 700; text-align: right; }

table { border-collapse: collapse; width: 100%; font-size: 8.5pt; }
th, td { text-align: left; padding: .5mm 1.5mm .5mm 0; border-bottom: .3pt solid #e2e2e2; }

/* De bronnen klein onderaan, over de hele breedte. */
.box.notitie { border: 0; margin: 2mm 0 0; padding: 2mm 0 0; break-inside: auto;
  border-top: .4pt solid #999; font-size: 7pt; line-height: 1.35; color: #555; }
.box.notitie p { margin: 0 0 .8mm; }
.printvoet[hidden] { display: block !important; margin: 2mm 0 0;
  font-size: 8pt; color: #555; }