/* Gedeeld/print/printblad.css
   Printbladen op A4 voor ClassPilot en Talententest: werkbladen, knipkaarten,
   exitkaartjes en docentkaarten. Op het scherm zie je de vellen als papier
   met een balk erboven; bij printen komt elk .pb-vel op een eigen A4.

   Uitgangspunten (de schoolprinter en de leerling):
   - zwart-wit leesbaar: betekenis nooit alleen in kleur
   - enkelzijdig A4, letters minimaal 14 pt, schrijflijnen met ruimte
   - zuinig: kaarten per vel met snijlijnen
   Huisstijl via --pb-accent, --pb-tekst, --pb-lijn, --pb-kop-font, --pb-tekst-font. */

:root {
    --pb-accent: #0E7C7B;
    --pb-tekst: #1f1d3a;
    --pb-zacht: #55536f;
    --pb-lijn: #b9b4c9;
    --pb-kop-font: 'Baloo 2', system-ui, sans-serif;
    --pb-tekst-font: 'Nunito', system-ui, sans-serif;
}

@page { size: A4 portrait; margin: 0; }

html.pb-pagina, html.pb-pagina body { margin: 0; }
html.pb-pagina body { background: #e9e5de; font-family: var(--pb-tekst-font); color: var(--pb-tekst); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Balk boven de vellen (alleen op het scherm) */
.pb-balk {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 12px 16px;
    background: #fff; border-bottom: 1px solid #ddd6ca;
    font-size: 15px;
}
.pb-balk h1 { margin: 0; font: 800 20px var(--pb-kop-font); flex: 1 1 260px; }
.pb-balk a, .pb-balk button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: 12px;
    border: 1px solid #ddd6ca; background: #fff; color: var(--pb-tekst);
    font: 800 15px var(--pb-tekst-font); text-decoration: none; cursor: pointer;
}
.pb-balk .pb-print { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; }
.pb-inhoud { display: flex; flex-wrap: wrap; gap: 8px 14px; width: 100%; font-size: 14px; color: var(--pb-zacht); }
.pb-inhoud label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* Het vel */
.pb-vel {
    width: 210mm; height: 297mm;
    margin: 18px auto;
    padding: 14mm;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    overflow: hidden;
    display: flex; flex-direction: column;
    font-size: 14pt; line-height: 1.4;
}
.pb-vel.is-uit { display: none; }
.pb-vel *, .pb-vel *::before, .pb-vel *::after { box-sizing: border-box; }
.pb-vel h2, .pb-vel h3, .pb-vel h4 { font-family: var(--pb-kop-font); line-height: 1.1; margin: 0; }
.pb-vel h2 { font-size: 24pt; }
.pb-vel h3 { font-size: 17pt; }
.pb-vel h4 { font-size: 14pt; }
.pb-vel p { margin: 0 0 6pt; }
.pb-vel ul, .pb-vel ol { margin: 0 0 6pt; padding-left: 16pt; }

/* Kopregel van elk vel: wat het is, en een naamregel als het een leerlingblad is */
.pb-kop {
    display: flex; align-items: flex-end; gap: 10mm;
    padding-bottom: 4mm; margin-bottom: 6mm;
    border-bottom: 1.5pt solid var(--pb-tekst);
}
.pb-kop > div { flex: 1; }
.pb-kop small { display: block; font-size: 10pt; font-weight: 800; color: var(--pb-zacht); }
.pb-naam { flex: 0 0 70mm; font-size: 12pt; font-weight: 700; white-space: nowrap; }
.pb-naam span { display: inline-block; width: 52mm; border-bottom: 1pt solid var(--pb-tekst); }

/* Rasters met knipkaarten. Het vel heeft geen kopregel; de snijlijnen lopen tot de rand. */
.pb-vel--kaarten { padding: 8mm; }
.pb-raster { flex: 1; display: grid; gap: 0; min-height: 0; }
.pb-raster--2x3 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
.pb-raster--2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); }
.pb-raster--1x2 { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); }
.pb-raster--2x4 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); }
.pb-raster > * { border: 1pt dashed var(--pb-lijn); padding: 7mm; overflow: hidden; display: flex; flex-direction: column; gap: 3mm; position: relative; }
.pb-schaar { font-size: 9pt; color: var(--pb-zacht); text-align: center; margin-bottom: 2mm; }

/* Een rolkaart of andere knipkaart */
.pb-kaart-kop { display: flex; align-items: center; gap: 4mm; }
.pb-kaart-kop i { font-size: 30pt; flex: 0 0 auto; }
.pb-kaart-kop h3 { font-size: 20pt; }
.pb-kaart-kop small { display: block; font-size: 10pt; font-weight: 800; color: var(--pb-zacht); }
.pb-label { font-size: 10pt; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--pb-zacht); margin: 1mm 0 0; }
.pb-zin { font-style: italic; }

/* Schrijflijnen */
.pb-lijnen { display: grid; gap: 0; }
.pb-lijnen span { display: block; height: 11mm; border-bottom: 1pt solid var(--pb-lijn); }
.pb-lijnen--ruim span { height: 13mm; }

/* Vragen op een werkblad */
.pb-vragen { list-style: none; padding: 0; margin: 0; display: grid; gap: 4mm; counter-reset: pb-v; }
.pb-vragen > li { counter-increment: pb-v; display: grid; grid-template-columns: 9mm 1fr; gap: 2mm 3mm; }
.pb-vragen > li::before {
    content: counter(pb-v);
    width: 8mm; height: 8mm; border-radius: 50%;
    border: 1.5pt solid var(--pb-tekst);
    display: grid; place-items: center;
    font: 800 11pt var(--pb-kop-font);
}
.pb-vragen > li > * { grid-column: 2; }
.pb-antwoord { display: flex; align-items: flex-end; gap: 3mm; font-weight: 700; }
.pb-antwoord span { flex: 1; border-bottom: 1pt solid var(--pb-tekst); height: 9mm; }

/* Tabel op een docentkaart */
.pb-tabel { width: 100%; border-collapse: collapse; font-size: 11.5pt; margin-bottom: 4mm; }
.pb-tabel th, .pb-tabel td { border: 0.75pt solid var(--pb-lijn); padding: 2mm 2.5mm; text-align: left; vertical-align: top; }
.pb-tabel th { background: #f2f0f6; font-weight: 800; }
.pb-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.pb-klein { font-size: 11pt; }
.pb-voet { margin-top: auto; padding-top: 3mm; font-size: 9pt; color: var(--pb-zacht); display: flex; justify-content: space-between; }

@media print {
    html.pb-pagina body { background: #fff; }
    .pb-balk { display: none; }
    .pb-vel { margin: 0; box-shadow: none; page-break-after: always; break-after: page; }
    .pb-vel:last-child { page-break-after: auto; break-after: auto; }
}

@media screen and (max-width: 840px) {
    .pb-vel { transform-origin: top left; zoom: .5; }
}