/* Printpagina's voor het voorbereiden (src/pages/printen.ts): het verhaal en de quiz, op A4. */
@font-face { font-family: 'Titan One'; src: url('/fonts/titan-one-latin.woff2') format('woff2'); font-display: block; }
* { box-sizing: border-box; }
html { background: #eee9f6; color-scheme: light; }
body { margin: 0; font-family: system-ui, sans-serif; color: #241a3a; }
.kop { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1rem 1.5rem; background: #140d29; color: #fff; }
.kop > img { width: 9rem; height: auto; }
.kop h1 { margin: 0; font: 400 1.6rem 'Titan One', sans-serif; color: #ffd23f; }
.kop p { margin: .2rem 0 0; color: #cbbfe6; max-width: 46rem; }
.kop nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.kop a, .kop button { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .9rem; border-radius: 10px; font: 700 1rem system-ui, sans-serif; text-decoration: none; cursor: pointer;
  color: #fff; background: transparent; border: 2px solid #5b4f78; }
.kop a[aria-current] { border-color: #ffd23f; color: #ffd23f; }
.kop button { color: #17131f; background: #ffd23f; border-color: #ffd23f; }

.vel { max-width: 52rem; margin: 1.5rem auto; padding: clamp(1rem, 4vw, 2rem) clamp(.8rem, 4vw, 2.2rem); background: #fff; border-radius: 16px; box-shadow: 0 10px 30px -18px #241a3a; }
.vel-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.4rem; padding-bottom: .8rem; border-bottom: 3px solid #241a3a; }
.vel-kop img { width: 8rem; height: auto; }
.vel-kop span { font: 400 1.5rem 'Titan One', sans-serif; color: #c3112e; text-align: right; }
/* De website onderaan: zoals op de kleurplaten (Titan One, zwart, in het midden). */
.vel-voet { margin: 1.6rem 0 0; text-align: center; font: 400 1.25rem 'Titan One', sans-serif; color: #000; letter-spacing: .01em; }

/* Het verhaal: het plaatje naast de tekst. */
.bladen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.blad { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: start; break-inside: avoid; }
.blad img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.blad.is-breed img { aspect-ratio: 16 / 10; }
.blad p { margin: 0; font-size: 1.12rem; line-height: 1.5; }
.blad-nr { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-right: .5rem; border-radius: 50%; color: #fff; background: #241a3a; font: 400 .9rem 'Titan One', sans-serif; vertical-align: .1em; }
.nagesprek { margin: 1.4rem 0 0; padding: .8rem 1rem; border-radius: 10px; background: #fff4c2; font-size: 1.1rem; }

/* De quiz: de vragen met het goede antwoord. */
.vragen { margin: 0; padding-left: 1.6rem; display: grid; gap: 1rem; }
.vragen > li { break-inside: avoid; }
.vraag { margin: 0 0 .3rem; font-weight: 700; font-size: 1.08rem; }
.soort { display: inline-block; margin-right: .5rem; padding: .05rem .5rem; border-radius: 999px; background: #e9e1fb; color: #5b3fa8; font-size: .8rem; font-weight: 700; vertical-align: .1em; }
.vragen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.vragen ul li { padding: .15rem .5rem; border-radius: 6px; }
.vragen ul li.is-goed { background: #d9f7e6; font-weight: 700; }
.vink { color: #127a45; }
.praat { margin: .3rem 0 0; color: #6a5f80; font-style: italic; }

/* Woordzoekers (src/pages/woordzoekerprint.ts): één puzzel per vel, met de oplossingen achteraan. */
.wzp-vel { display: grid; justify-items: center; gap: .8rem; }
.wzp-vel .vel-kop, .wzp-vel .vel-voet { justify-self: stretch; }
.wzp-boven { justify-self: stretch; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wzp-thema { margin: 0; display: flex; align-items: center; gap: .6rem; font: 400 2.1rem 'Titan One', sans-serif; color: #241a3a; }
.wzp-thema span { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: #fff; background: #c3112e; font-size: 1.2rem; }
.wzp-naam { margin: 0; display: flex; align-items: baseline; gap: .4rem; font-weight: 700; color: #6a5f80; }
.wzp-naam span { display: inline-block; width: min(13rem, 38vw); border-bottom: 2px solid #241a3a; }
.wzp-uitleg { justify-self: stretch; margin: 0; color: #6a5f80; }
.wzp-raster { border-collapse: collapse; border: 3px solid #241a3a; margin: .4rem 0; }
.wzp-raster td { padding: 0; text-align: center; vertical-align: middle; border: 1px solid #b7aecb; font: 400 1.6rem/1 'Titan One', sans-serif; color: #241a3a; }
.wzp-6 td { width: min(4.2rem, 13vw); height: min(4.2rem, 13vw); font-size: min(2.2rem, 7vw); }
.wzp-8 td { width: min(3.4rem, 10vw); height: min(3.4rem, 10vw); font-size: min(1.8rem, 5.4vw); }
.wzp-10 td { width: min(2.8rem, 8vw); height: min(2.8rem, 8vw); font-size: min(1.5rem, 4.4vw); }
.wzp-woorden { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; }
.wzp-woorden li { display: inline-flex; align-items: center; gap: .45rem; font: 400 1.35rem 'Titan One', sans-serif; letter-spacing: .04em; }
.wzp-vakje { display: inline-block; width: 1.1rem; height: 1.1rem; border: 2px solid #241a3a; border-radius: 4px; }
.wzp-klein { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 1.4rem 1.2rem; justify-self: stretch; }
.wzp-klein li { display: grid; justify-items: center; gap: .3rem; }
.wzp-klein p { margin: 0; font-weight: 700; }
.wzp-klein .wzp-raster { border-width: 2px; }
.wzp-klein .wzp-raster td { width: auto; height: auto; padding: .12rem .2rem; font-size: .8rem; }
.wzp-raster td.is-woord { background: #ffd23f; }

@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff; }
  .kop { display: none; }
  .vel { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
  .vel-voet { font-size: 16pt; }
  .wzp-vel { break-after: page; min-height: 0; }
  .wzp-klein { grid-template-columns: repeat(3, 1fr); }
  .wzp-naam span { width: 13rem; }
  .wzp-vel:last-of-type { break-after: auto; }
  .wzp-6 td { width: 24mm; height: 24mm; font-size: 12mm; }
  .wzp-8 td { width: 19mm; height: 19mm; font-size: 9.5mm; }
  .wzp-10 td { width: 15.5mm; height: 15.5mm; font-size: 7.5mm; }
}