/*
  print.css — Print / PDF styleguide for Far From Equilibrium
  ===========================================================
  Loaded site-wide via the root layout with media="print", so every rule here
  applies ONLY to printed / "Save as PDF" output and never touches the screen.

  The screen design is a dark, animated experience (charcoal background, warm
  off-white text, gold accents, a fixed grain overlay, animated "scene"
  visuals). On paper that is wrong: it wastes ink, blows up the clamp()-scaled
  hero titles, and prints empty animation frames. This stylesheet establishes a
  light "paper" print language instead.

  How it works: almost every component colours itself from the design-system
  CSS variables (--bg, --text, --gold, …). We simply REMAP those variables to a
  light-on-paper palette inside @media print, which recolours the whole tree
  with very little per-component CSS. The rest is type scale, page geometry,
  page-break control, and hiding screen-only chrome.

  ── Print token reference (the styleguide) ──────────────────────────────────
    --paper        #ffffff             page background (white — ink economy)
    --ink          #1c1a15             warm near-black body text
    --ink-dim      #33302a             secondary / caption text (kept dark)
    --print-gold   #8a6a1e             gold, darkened to read on white
    --rule         rgba(138,106,30,.45) hairline rules / borders
  ── Page geometry ───────────────────────────────────────────────────────────
    @page          A4, 16mm × 18mm margins
    base font      12pt, line-height 1.5
  ── Type scale (print) ──────────────────────────────────────────────────────
    hero title     26pt    hero sub      13pt    eyebrow/labels  9pt caps
    section title  15pt    section index 10pt    body copy       11pt
*/

@media print {
  /* ── Tokens ──────────────────────────────────────────────────────────────
     Remap the design-system variables to the print palette. Every component
     that reads these variables is recoloured automatically.

     NOTE: the study pages re-link /css/style.css (which @imports
     design-system.css) AFTER this file, so its :root re-declares the screen
     tokens later in the cascade. We mark every remap !important so the print
     palette survives that re-import — without it, var(--text) reverts to the
     light cream screen colour and prose prints near-white on white. */
  :root {
    --paper: #ffffff !important;
    --ink: #1c1a15 !important;
    /* Secondary text stays firmly dark — no light grey on paper, just a hair
       lifted from --ink so captions/labels still read as subordinate. */
    --ink-dim: #33302a !important;
    --print-gold: #8a6a1e !important;
    --rule: rgba(138, 106, 30, 0.45) !important;

    --bg: var(--paper) !important;
    --bg-raised: var(--paper) !important;
    --bg-panel: var(--paper) !important;
    --text: var(--ink) !important;
    --text-dim: var(--ink-dim) !important;
    --gold: var(--print-gold) !important;
    --gold-dim: var(--rule) !important;
    --gold-glow: transparent !important;
  }

  /* ── Global resets ───────────────────────────────────────────────────────
     Force colours to actually print (browsers strip backgrounds by default). */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html {
    font-size: 12pt;
    scroll-behavior: auto;
  }

  body {
    background: var(--paper) !important;
    color: var(--ink);
    line-height: 1.5;
  }

  /* The fixed fractal-noise grain overlay — meaningless on paper. */
  body::before {
    display: none !important;
  }

  /* Scroll-reveal elements start hidden on screen; ensure they print visible. */
  .reveal-on-scroll,
  [class*='reveal'] {
    opacity: 1 !important;
    transform: none !important;
  }

  @page {
    size: A4;
    margin: 16mm 18mm;
  }

  /* ── Hide screen-only chrome ─────────────────────────────────────────────
     Site nav, per-page navigation, CTA rows, and the print button itself. */
  .site-header,
  .card-nav-bar,
  .card-page-cta,
  .study-cta,
  .cta-row,
  .print-button {
    display: none !important;
  }

  /* Tighten the section rhythm — screen uses ~80px; that wastes a third of a
     printed page. */
  .section {
    padding-top: 18pt !important;
    padding-bottom: 18pt !important;
  }

  /* ── Type scale ──────────────────────────────────────────────────────────
     Override the screen clamp() display sizes, which are page-filling. */
  .hero-title,
  .study-card__title {
    font-size: 26pt !important;
    line-height: 1.1 !important;
    color: var(--ink) !important;
  }

  .hero-sub {
    font-size: 13pt !important;
  }

  .hero-eyebrow,
  .study-card__eyebrow {
    font-size: 9pt !important;
    color: var(--print-gold) !important;
  }

  .t-body,
  .t-body-reg,
  .study-prose,
  .study-card__prose {
    font-size: 11pt !important;
  }

  /* SectionHeader: numbered index + title. */
  .section-num {
    font-size: 10pt !important;
  }

  .section-title {
    font-size: 15pt !important;
  }

  /* ── Visuals ─────────────────────────────────────────────────────────────
     Animated scene frames render empty/garbled on paper — hide the frame but
     keep the descriptive caption. Static <img> visuals are kept. */
  .study-visual__frame,
  .study-sub__viz,
  .visual-slot__frame {
    display: none !important;
  }

  /* ── Neutralise hardcoded component darks ────────────────────────────────
     A few components paint their own dark fills (not via the design tokens),
     so the token remap alone can't lighten them. Force them onto paper. */

  /* Panels (.panel / .cta-block) — paper fill with a hairline gold rule;
     drop the decorative gradient overlay. */
  .panel,
  .cta-block {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
  }

  .panel::before {
    display: none !important;
  }

  /* Cards flip via a 3D transform (backface-visibility:hidden + rotateY(180deg)).
     Print rendering flattens 3D unreliably, so the rotated-away face can cover
     the visible one. Flatten the flip and show ONLY the intended face: the front
     for the Equilibrium card, the back (RWS art) for the flipped card. */
  .ec-card__inner {
    transform: none !important;
    transform-style: flat !important;
    transition: none !important;
  }

  .ec-card__face {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    background: var(--paper) !important;
  }

  .ec-card:not(.is-flipped) .ec-card__back {
    display: none !important;
  }

  .ec-card.is-flipped .ec-card__front {
    display: none !important;
  }

  /* Un-rotate the now-visible back so the RWS art isn't mirrored. */
  .ec-card.is-flipped .ec-card__back {
    transform: none !important;
  }

  /* Card hero comparison: constrain large cards so a card page's hero fits. */
  .card-comparison img,
  .study-card__cards img {
    max-width: 150px !important;
    height: auto !important;
  }

  img {
    border-radius: 4px;
  }

  /* ── Page-break control ──────────────────────────────────────────────────
     Keep small, cohesive blocks intact (a figure, a panel, a card, a table
     row) and headings with their text — but let long prose SECTIONS flow
     across page boundaries, otherwise a section taller than the remaining
     space gets pushed whole to the next page and wastes paper. To force one
     section per page instead, add `.section { break-before: page; }`. */
  figure,
  .panel,
  .study-card__note,
  .study-pair,
  .study-card__minor-card,
  .card-comparison,
  tr {
    break-inside: avoid;
  }

  .section-header,
  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  /* Links: no need for the screen's gold underline treatment to dominate. */
  a {
    color: var(--ink);
    text-decoration: none;
  }
}