/* ==========================================================================
   print.css — F6b: clean A4 layout for the PDF button (window.print()).
   Loaded with <link media="print">, so it never affects screen rendering.
   ALL colors come from css/tokens.css (--c-print-*) — no hex here.

   Rules of the page:
   - no canvas / FAB / overlay / chip bar / footer chrome
   - the FULL CV prints even when filters are active (.is-hidden is undone)
   - compact readable typography on white, sensible page breaks
   - external links show their URL
   ========================================================================== */

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

html { scroll-behavior: auto; }

body {
  background: var(--c-print-bg);
  color: var(--c-print-text);
  padding-bottom: 0;
  font-size: 10pt;
  line-height: 1.45;
}

/* === ALL TEXT BLACK on paper ===
   Forces every run of text to the print ink colour, killing any light,
   gradient-CLIPPED (transparent-fill) or not-yet-revealed (opacity:0 glyph)
   text that would otherwise print as suspicious blank gaps. */
*,
*::before,
*::after {
  color: var(--c-print-text) !important;
  -webkit-text-fill-color: var(--c-print-text) !important;
  text-shadow: none !important;
}
/* glyph-split titles assemble on scroll; on paper show them fully */
.glyph {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- interactive chrome: gone ---------- */

#bg3d,
.filter-fab,
.filter-overlay,
.filter-chip-panel,
.header-actions,
.site-footer,
.site-subbar,
.skip-link {
  display: none !important;
}

/* ---------- step-scroll (scene-nav) chrome: flatten for print ----------
   The scene stepper makes every locked scene 100svh tall, centres content with
   flex, offsets the hero by 48vh, fixes the footer and shows a dot-nav. All of
   that produces oversized / BLANK pages when printed. Collapse the scenes back
   to ordinary flowing blocks so the CV paginates on content, not on viewports. */
body.scene-nav .section,
body.scene-nav #about,
body.scene-nav #expertise,
body.scene-nav #education,
body.scene-nav #contact,
body.scene-nav .section--hero {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  padding-top: 10pt !important;
  padding-bottom: 0 !important;
}

.scene-dot-nav,
#filter-fab,
.mcursor { display: none !important; }

/* hero: drop the 48vh particle-name offset and reveal the DOM name (the
   canvas-rendered name never prints, so without this the hero has no name). */
.hero__inner,
body.deflagration-active .hero__inner { padding-top: 0 !important; }

body.deflagration-active .hero__kicker {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 2pt !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  font-size: 20pt !important;
  font-weight: 700 !important;
  color: var(--c-print-text) !important;
  -webkit-text-fill-color: var(--c-print-text) !important;
}

/* ---------- print the FULL CV even with active filters ---------- */

.is-hidden {
  opacity: 1 !important;
  transform: none !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  border-width: 1px !important;
}

/* ...UNLESS the user chose "filtered selection only" at export time: then the
   non-matching experience units stay out so the PDF shows just the filtered CV. */
body.print-filtered .is-hidden,
body.print-filtered .exp-card.is-hidden,
body.print-filtered .project.is-hidden {
  display: none !important;
}

/* the screen rule hides filtered exp-cards with display:none — undo for print */
.exp-card.is-hidden { display: flex !important; max-height: none !important; }
.project.is-hidden { padding: 6pt 8pt !important; margin: 0 !important; }

/* GSAP may have left mid-animation inline styles on reveal targets */
.section-title,
.about__summary,
.card,
.contact-link,
.education-langs,
.hero__inner {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- header ---------- */

.site-header {
  position: static;
  background: var(--c-print-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 2pt solid var(--c-print-text);
}

.site-header__inner { padding: 0 0 6pt; max-width: none; }

.brand {
  background: none;
  -webkit-text-fill-color: var(--c-print-text);
  color: var(--c-print-text);
}

.brand__sep,
.brand__name {
  display: inline;
  max-width: none !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible !important;
  -webkit-text-fill-color: var(--c-print-muted);
  color: var(--c-print-muted);
  font-weight: 500;
}

.counters { color: var(--c-print-muted); }

.hero__counters { margin: 2pt 0 0; }
.hero__counters .counters { font-size: 10pt; color: var(--c-print-muted); }

/* ---------- layout / sections ---------- */

main { max-width: none; padding: 0; }

.section { padding: 10pt 0 0; }

.section-title {
  font-size: 14pt;
  margin-bottom: 8pt;
  break-after: avoid;
  page-break-after: avoid;
}

.section-title::before { background: var(--c-print-accent); }

/* ---------- hero / about (compact) ---------- */

.section--hero {
  min-height: 0;
  display: block;
  padding-top: 8pt;
}

.hero__kicker { font-size: 11pt; color: var(--c-print-muted); margin-bottom: 2pt; }

.hero__headline {
  background: none;
  -webkit-text-fill-color: var(--c-print-text);
  color: var(--c-print-text);
  font-size: 20pt;
  margin-bottom: 4pt;
}

.hero__sub { font-size: 11pt; color: var(--c-print-muted); margin: 0 0 2pt; }
.hero__meta { color: var(--c-print-faint); margin: 0; }

.about__summary { font-size: 10.5pt; color: var(--c-print-text); max-width: none; }

/* ---------- cards / expertise ---------- */

.card,
.project,
.contact-link {
  background: var(--c-print-bg);
  color: var(--c-print-text);
  border: 1pt solid var(--c-print-border);
  border-radius: 4pt;
  break-inside: avoid;
  page-break-inside: avoid;
}

.card { padding: 8pt; }
.project { padding: 6pt 8pt; }

.expertise-grid { grid-template-columns: repeat(2, 1fr); gap: 6pt; }

.expertise-card__title { font-size: 11pt; margin-bottom: 3pt; }
.expertise-card__items { color: var(--c-print-muted); margin-bottom: 4pt; }

/* ---------- experience: every card EXPANDED + stacked ---------- */

/* The screen UI is a 3-up accordion (collapsed cards hide .exp-card__detail).
   On paper we drop the grid, stack the cards full-width, and force ALL details
   open so each experience prints in full (not the collapsed summary). */
.experience-grid { display: block !important; }
.exp-card {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  max-height: none !important;
  background: var(--c-print-bg) !important;
  border: 1pt solid var(--c-print-border) !important;
  border-radius: 4pt;
  padding: 8pt !important;
  margin: 0 0 8pt !important;
  cursor: auto !important;
  /* override the generic .card "avoid" — a tall card (e.g. Winteraction, 7
     roles) must be allowed to flow across pages, else it jumps whole to the
     next page and leaves the previous one mostly blank. */
  break-inside: auto !important;
  page-break-inside: auto !important;
}
.exp-card::before { display: none !important; } /* decorative glass layer off */
.exp-card__detail {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  margin-top: 6pt;
}

/* Strip the on-screen glass/gleam decorations that don't belong on paper: the
   white sheen ::after on role heads and tag pills was printing OVER the text
   (so some tags looked missing), and the reflective role-head box. */
.exp-card .role__head {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
.exp-card .role__head::after,
.exp-card .tag-pills .pill::after { display: none !important; content: none !important; }

/* Tags: solid black text, light border, nothing clipped. */
.pill,
.exp-card .tag-pills .pill {
  color: var(--c-print-text) !important;
  border: 1pt solid var(--c-print-border) !important;
  background: none !important;
  overflow: visible !important;
}

.company-card__head { margin-bottom: 4pt; }
.company-card__name { font-size: 12pt; }
.company-card__location { color: var(--c-print-faint); }

.role__title { font-size: 10.5pt; }
.role__period { color: var(--c-print-faint); }
.role__hook { color: var(--c-print-muted); margin: 2pt 0 4pt; }

.projects { gap: 6pt; margin-top: 4pt; }
.project__name { font-size: 10pt; margin-bottom: 2pt; }

.bullets { color: var(--c-print-text); font-size: 9pt; }
.bullets li { margin-bottom: 1pt; }

/* ---------- pills / links ---------- */

.pill,
.pill--ai,
.pill--3dxr,
.pill--2dmedia,
.pill--dev {
  color: var(--c-print-muted);
  border-color: var(--c-print-border);
  font-size: 7.5pt;
}

a { color: var(--c-print-text); text-decoration: none; }

/* external links show their URL */
.links a[href^="http"]::after,
.contact-link[href^="http"]::after {
  content: " (" attr(href) ")";
  color: var(--c-print-faint);
  font-size: 8pt;
  font-weight: 400;
  word-break: break-all;
}

.links { gap: 8pt; }
.links a { color: var(--c-print-accent); }

/* ---------- education / contact ---------- */

.education-list { grid-template-columns: repeat(2, 1fr); gap: 6pt; }
.education-card__meta { color: var(--c-print-faint); }
.education-langs { color: var(--c-print-muted); margin-top: 8pt; }

.contact-links { grid-template-columns: repeat(2, 1fr); gap: 6pt; }
.contact-link { padding: 6pt 8pt; }
.contact-link__label { color: var(--c-print-faint); min-width: 60pt; }

/* contact restyle: the form is interactive (useless on paper) → hide it; show
   the social links as name + URL, drop the white icons (invisible on white). */
.contact-form { display: none !important; }
.contact-layout { display: block !important; }
.contact-socials { display: block !important; }
.social-link {
  display: block !important;
  background: var(--c-print-bg) !important;
  color: var(--c-print-text) !important;
  border: 1pt solid var(--c-print-border) !important;
  border-radius: 4pt;
  padding: 5pt 8pt !important;
  margin-bottom: 4pt;
  break-inside: avoid;
}
.social-link__icon { display: none !important; }
.social-link[href^="http"]::after {
  content: " — " attr(href);
  color: var(--c-print-faint);
  font-weight: 400;
  font-size: 8pt;
  word-break: break-all;
}