/* ================================================================
   SPAIK PRINT-SAFE BASELINE — /spaik-design
   Inline dit blok (of <link>) in ELKE pagina die naar PDF/print gaat.
   Lost de drie bekende Chrome-headless/Quartz print-bugs preventief
   op, zonder dat je de bug hoeft te kennen. Werkt naast tokens.css.

   Geverifieerd 2026-06-10 met Chrome headless --print-to-pdf +
   qlmanage (Quartz, zelfde renderer als macOS Preview).
   ================================================================ */

/* ----------------------------------------------------------------
   BUG 1 — CSS mask rendert in print als massief gekleurd blok.
   Er bestaat GEEN CSS-fix: gebruik nooit -webkit-mask/mask om een
   logo of icoon te recoloren in print-werk. Het juiste patroon:

     sed 's/fill="black"/fill="#FF7150"/g' Logomark.svg > Logomark-orange.svg
     <img class="ps-logo" src="Logomark-orange.svg" alt="SPAIK">

   <img> met relatief pad werkt wél betrouwbaar in headless print.
   ---------------------------------------------------------------- */
.ps-logo { display: block; height: auto; }

/* ----------------------------------------------------------------
   BUG 2 — merkfont-kerning laat woordspaties inklappen in print
   ("Beterwerken metAI"). IvyPresto Headline en PP Agrandir Tight
   hebben kern-pairs die headless-print verkeerd toepast.
   Fix: kerning uit op alle koppen + lichte word-spacing.
   Altijd actief (niet alleen @media print) zodat scherm en PDF
   identiek zetten.
   ---------------------------------------------------------------- */
/* Kerning globaal uit. Was eerst een lijst klassenamen (.ps-title, .type-*),
   maar dan grijpt de fix niet zodra iemand een eigen klasse gebruikt — en dat
   doet elke verse bouwer. Gevonden 26 jul 2026: een agent volgde de skill
   netjes, linkte dit bestand, en kreeg alsnog "Vastemaandprijs" in de
   proof-strip omdat die .proof heette. Kerning uitzetten is onschadelijk voor
   bodytekst en dekt zo alles wat de merkfonts gebruikt. */
* {
  font-kerning: none;
  font-feature-settings: "kern" 0;
  word-spacing: 0.04em;   /* PP Agrandir klapt spaties in; dit is de helft van
                             de kop-waarde, op SF Pro 11pt ~0,4px en dus niet
                             zichtbaar, maar genoeg om de collapse te stoppen */
}

/* Koppen krijgen meer lucht dan de globale ondergrens. */
h1, h2, h3, h4, h5, h6,
.ps-title, .type-display, .type-specific, .type-primary, .type-label {
  word-spacing: 0.06em;
}

/* ----------------------------------------------------------------
   BUG 3 — box-shadow bandt in Preview/Quartz als vage rechthoekige
   halo om elk element. Voor print: shadows volledig strippen en
   kaart-definitie uit een hairline-rand halen.
   .ps-card draagt de hairline altijd, zodat een kaart die op scherm
   op zijn schaduw leunt niet "verdwijnt" zodra print de schaduw
   stript.
   ---------------------------------------------------------------- */
.ps-card {
  border: 1px solid rgba(11, 11, 11, 0.07);
}

@media print {
  * { box-shadow: none !important; }
}

/* ----------------------------------------------------------------
   Print-hygiëne: exacte kleuren afdwingen (anders bleekt Chrome
   pastels en tinten uit) en tekst niet laten afbreken op
   paginagrenzen binnen kaarten.
   ---------------------------------------------------------------- */
@media print {
  html, body, * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ps-card { break-inside: avoid; }
}

/* ----------------------------------------------------------------
   BUG 4 — footer/tabel geklipt op vaste-hoogte A4-pagina's.
   Verreweg de vaakst terugkerende print-zonde (Havensteder Q4,
   SIG-recap, H2-one-pager, FedEx-tabel). Twee oorzaken, één regel:
   op een `display:flex; flex-direction:column` A4-pagina KRIMPEN
   kinderen default (flex-shrink:1). Bij krappe content krimpt een
   tabel of footer stilletjes weg i.p.v. te overflowen — je ziet het
   pas op de render. Guardrail: content-blokken die niet mogen
   comprimeren krijgen flex-shrink:0, de footer wordt naar onder
   geduwd met margin-top:auto (nooit met een vaste bottom-offset).
   LET OP: dit vangt STILLE compressie. Als de content écht te veel
   is voor de pagina, helpt geen CSS — dan is het een compressie-pass
   (font/paddings omlaag) of een pagina-split, altijd bewezen met een
   render-per-pagina (regel #20). Claim nooit "gefixt" zonder screenshot.
   ---------------------------------------------------------------- */
.ps-page > table,
.ps-page > .ps-table,
.ps-footer { flex-shrink: 0; }
.ps-page > .ps-footer { margin-top: auto; }