/* ============================================================
   PRINT — a fixed, colored A4 CV (3-page budget, targets 2).
   Loaded with media="print", so no @media wrapper is needed.

   One fixed template: the palette below always wins over both
   screen themes, so light/dark mode on screen never changes
   the PDF. Colors are kept (gold identity on white) and forced
   through print-color-adjust so Chromium actually inks them.

   Strategy for the page budget:
   - The letterhead already carries every contact detail, so the
     ascent chart (#journey), philosophy cards and the #contact
     section are dropped — their substance repeats elsewhere.
   - Content flows continuously: only small leaf blocks are kept
     atomic (timeline cards, skill rows), big wrappers may break
     across the A4 boundary.
   ============================================================ */

/* html[data-theme] keeps these winning over the screen theme blocks */
:root, html[data-theme] {
  /* The screen sheet declares color-scheme: dark, and Chromium paints the
     page canvas (including the @page margin area) with the scheme's dark
     canvas color — a black frame around the CV. Force light here. */
  color-scheme: light;
  --bg: #fff; --bg-alt: #fff;
  --text: #1a1d24; --text-dim: #3d434e; --text-faint: #6a7180;
  --border: #d8dbe2; --border-strong: #c4c8d2;
  --surface: #fff; --surface-2: #fff;
  --gold-100: #7a5c1e; --gold-300: #8a6a30; --gold-500: #8a6a30;
  /* print-only accents */
  --p-gold: #8a6a30;        /* readable dark gold for text/lines */
  --p-gold-mid: #b08a3e;    /* medium gold for fills */
  --p-gold-soft: #caa25a;   /* bright gold for rings/bars */
  --p-gold-tint: #faf5e8;   /* pale gold wash for chips/cards */
  --p-gold-line: #e8dcc0;   /* tinted hairline */
}

@page { size: A4; margin: 11mm 12mm; }

/* Backgrounds and accent colors must survive the printer driver */
*, *::before, *::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

html { scroll-behavior: auto; background: #fff !important; }
body { background: #fff !important; color: var(--text); font-size: 9.5pt; line-height: 1.45; }
.container { max-width: none; padding: 0; }

/* ---------- Dropped in print ---------- */
.bg-ornament, header#site-header, .side-rail, .theme-transition,
.hero-actions, .hero-eyebrow, .hero-title, .hero-role,
.hero-visual,
#journey,
.philosophy,
#contact,
footer { display: none !important; }

/* Reveal/animation state must never hide printed content */
.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.js .skill-bar span { width: var(--pct) !important; transition: none !important; }
*, *::before, *::after { animation: none !important; box-shadow: none !important; text-shadow: none !important; }
.glass-card::before { display: none; }

/* ---------- Letterhead: colored avatar left, identity right ---------- */
.print-only { display: block; }
.print-identity {
  display: grid;
  grid-template-columns: 27mm 1fr;
  gap: 6mm;
  align-items: center;
  margin-bottom: 9pt;
  padding-bottom: 8pt;
  border-bottom: 2pt solid var(--p-gold-soft);
}
.print-photo {
  display: block;
  width: 27mm; height: 27mm;
  border-radius: 50%;
  overflow: hidden;
  border: 2pt solid var(--p-gold-soft);
  outline: 0.75pt solid var(--p-gold-line);
  outline-offset: 2.5pt;
}
.print-photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.print-name { font-size: 21pt; font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; }
.print-role { font-size: 11pt; color: var(--p-gold); font-weight: 700; margin: 1.5pt 0 4.5pt; }
.print-contact { display: flex; flex-wrap: wrap; gap: 2pt 12pt; font-size: 8pt; color: var(--text-dim); }
.print-contact li::before { content: "· "; color: var(--p-gold-mid); }
.print-contact li:first-child::before { content: ""; }

/* ---------- Hero → summary paragraph ---------- */
.hero { min-height: 0; padding: 0; display: block; }
.hero-grid { display: block; }
.hero-desc { font-size: 9.5pt; max-width: none; margin-bottom: 7pt; }
.hero-desc b, .hero-desc strong { color: #1a1d24; }


/* ---------- Sections, compact ---------- */
.section { padding: 9pt 0 0; }
.section-alt { background: #fff; border: 0; }
.section-header { max-width: none; margin-bottom: 5pt; }
.section-tag { display: none; }
.section-lede { display: none; }
/* One line level only: the gold dash marks the section, no underline —
   stacked with the card borders it read as a mess of frames on paper. */
.section-title {
  font-size: 12pt; letter-spacing: 0;
  padding-bottom: 0; border-bottom: 0;
}
.section-title::before {
  content: "";
  display: inline-block;
  width: 12pt; height: 3pt;
  border-radius: 2pt;
  background: var(--p-gold-soft);
  margin-right: 6pt;
  vertical-align: 0.18em;
}
.section-title br { display: none; }

/* ---------- Experience ---------- */
/* Wrappers may break across pages; leaf cards stay whole. */
.xp-layout { gap: 7pt; }
.company-block, .timeline, .skills-layout, .erp-spotlight { break-inside: auto; }
.timeline-card, .erp-fact, .skill-row, .highlight-card { break-inside: avoid; }

.company-meta { gap: 6pt; margin-bottom: 4pt; align-items: center; break-inside: avoid; break-after: avoid; }
.company-logo {
  width: 20pt; height: 20pt; border-radius: 5pt; font-size: 7pt;
  color: var(--p-gold); background: var(--p-gold-tint); border: 1pt solid var(--p-gold-soft);
}
.company-logo-img { background: #fff; padding: 2pt; }
.company-name { font-size: 11pt; display: inline; }
.company-industry { display: inline; font-size: 8pt; }
.company-industry::before { content: " — "; }
.company-period { font-size: 7.5pt; margin-top: 0; }

.timeline-item { grid-template-columns: 10pt 1fr; gap: 5pt; }
.timeline-rail::before { top: 5pt; bottom: -5pt; background: var(--p-gold-line); }
.timeline-item:last-child .timeline-rail::before { background: var(--p-gold-line); height: calc(100% - 5pt); }
.timeline-dot {
  width: 6pt; height: 6pt; margin-top: 4pt;
  background: #fff; border: 1.25pt solid var(--p-gold-mid);
}
.timeline-item.is-current .timeline-dot { background: var(--p-gold-mid); }

/* No box around each role: the timeline rail + dot already structure
   the column, so the card melts into plain flowing text. */
.timeline-card {
  padding: 0 0 0 2pt; margin-bottom: 8pt;
  border: 0; border-radius: 0;
  background: transparent; transform: none !important;
}
.timeline-head { margin-bottom: 2pt; gap: 2pt 10pt; }
.role-title { font-size: 10pt; gap: 5pt; }
.role-period { font-size: 7.5pt; }
.role-flag {
  font-size: 6pt; padding: 1.5pt 5pt;
  background: var(--p-gold-tint); color: var(--p-gold); border: 0;
}
.role-flag.flag-promo { background: var(--p-gold-tint); border: 0; }
.role-summary { font-size: 9pt; margin-bottom: 3pt; }
.role-summary b { color: #1a1d24; }
.role-points { gap: 1.5pt; margin-bottom: 4pt; }
.role-points li { font-size: 8.5pt; padding-left: 9pt; line-height: 1.4; }
.role-points li::before { width: 3.5pt; height: 3.5pt; left: 1pt; top: 0.5em; background: var(--p-gold-soft); }
.role-tags { gap: 3pt; }
/* Chips keep the pale tint for grouping but lose their outlines —
   dozens of tiny frames were the main source of visual noise. */
.role-tags li {
  font-size: 6.5pt; padding: 1.5pt 6pt;
  background: var(--p-gold-tint); color: #5a4a20; border: 0;
}

/* ---------- ERP spotlight ---------- */
.erp-spotlight { grid-template-columns: 1fr; gap: 5pt; }
/* The only frame level left in print: soft tinted hairlines, not gray */
.erp-main { padding: 7pt 9pt; border: 0.75pt solid var(--p-gold-line); border-radius: 5pt; }
.case-badge { font-size: 6.5pt; padding: 2pt 7pt; margin-bottom: 4pt; background: var(--p-gold-tint); border: 0; color: var(--p-gold); }
.erp-head h3 { font-size: 10.5pt; margin-bottom: 2pt; }
.erp-head p { font-size: 8.5pt; max-width: none; margin-bottom: 5pt; }
.erp-modules { grid-template-columns: repeat(4, 1fr); gap: 3pt; }
.erp-modules li { padding: 3pt 5pt; font-size: 7.5pt; gap: 4pt; border: 0; border-radius: 3pt; background: var(--p-gold-tint); }
.erp-modules svg { width: 9pt; height: 9pt; stroke: var(--p-gold); }

/* Facts flow as plain lines under the project card — no boxes.
   The demo-access card is dropped entirely from the printed CV. */
.erp-demo { display: none !important; }
.erp-side { flex-direction: column; gap: 1.5pt; margin-top: 1pt; }
.erp-fact {
  flex: none; flex-direction: row; justify-content: flex-start; align-items: baseline;
  gap: 5pt; padding: 0 0 0 9pt; border: 0; background: none; position: relative;
}
.erp-fact::before {
  content: ""; position: absolute; left: 1pt; top: 0.45em;
  width: 3.5pt; height: 3.5pt; border-radius: 50%;
  background: var(--p-gold-soft);
}
.fact-num { background: none; -webkit-text-fill-color: var(--p-gold); color: var(--p-gold); font-size: 9.5pt; }
.fact-label { font-size: 8.5pt; line-height: 1.4; }

/* ---------- Competencies ---------- */
.skills-layout { grid-template-columns: 1fr 1fr; gap: 5pt; align-items: start; }
.competency-group { padding: 7pt 9pt; border: 0.75pt solid var(--p-gold-line); border-radius: 5pt; }
.competency-title { font-size: 9.5pt; gap: 5pt; margin-bottom: 5pt; }
.competency-title.mt { margin-top: 7pt; }
.competency-title svg { width: 10pt; height: 10pt; stroke: var(--p-gold); }
.competency-desc { font-size: 8pt; margin: -2pt 0 5pt; }

.skill-bars { gap: 4pt; }
.skill-info { font-size: 8.5pt; margin-bottom: 1.5pt; }
.skill-info b { font-size: 7.5pt; color: var(--p-gold); }
.skill-bar { height: 3.5pt; background: #eee8d8; }
.skill-bar span { background: linear-gradient(90deg, var(--p-gold-mid), var(--p-gold-soft)); }
.skill-bar span::after { display: none; }

.tech-grid { gap: 3pt; }
.tech-grid li { font-size: 7pt; padding: 1.5pt 6pt; gap: 3pt; background: var(--p-gold-tint); border: 0; color: #3d434e; }
.tech-grid li svg { width: 8pt; height: 8pt; }
.tech-grid li svg.generic { stroke: var(--p-gold); }

/* ---------- Links print as plain text ---------- */
a { color: inherit; }