/* ==========================================================================
   print.css — the /cv/ page, screen and print
   Loaded only by cv/index.html. Reuses tokens.css and base.css for type and
   colour, then overrides layout for a linear, print-first document.
   ========================================================================== */

body {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 3rem);
}

.cv-header {
  padding-bottom: var(--space-m);
  border-bottom: 2px solid var(--text);
  margin-bottom: var(--space-l);
}

.cv-header h1 {
  font-size: var(--step-3);
}

.cv-header__role {
  color: var(--text-muted);
}

.cv-header__location {
  /* Overrides base.css's global `p + p { margin-top: ... }` rule, which
     would otherwise put a gap between this and .cv-header__role above —
     the role and location read as one tight block under the name. */
  margin-top: 0;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* One line below the location, each item separated by a dash rather than
   stacked — reads as a single contact strip. Wraps naturally on narrow
   viewports instead of overflowing. Each item reads as an obvious
   clickable link (base.css's default `a` styling — accent colour,
   underline — applies here; unlike .cv-entry__company-link and
   .info-card__cert-link, these are deliberately NOT given the "reads as
   plain text" treatment, since contact details are the one place a CV
   reader actively wants to see what's clickable). */
.cv-header__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: var(--space-3xs);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.cv-header__contact p + p::before {
  content: '–';
  margin-inline: var(--space-xs);
  color: var(--border-strong);
}

.cv-print-note {
  margin-bottom: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  background-color: var(--accent-soft);
  color: var(--accent-soft-text);
  font-size: var(--step--1);
}

.cv-section {
  margin-bottom: var(--space-l);
}

.cv-section h2 {
  font-size: var(--step-1);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding-bottom: var(--space-3xs);
  border-bottom: var(--border-width) solid var(--border);
  margin-bottom: var(--space-s);
}

.cv-entry {
  margin-bottom: var(--space-m);
}

.cv-entry:last-child {
  margin-bottom: 0;
}

/* Entries are deliberately NOT break-inside: avoid as a whole -- with
   entries this size, forcing one to stay fully intact means the entire
   block jumps to the next page the moment it doesn't fit in what's left
   of the current one, leaving a large blank gap at the page bottom
   (visible as a near-empty page 1 on a phone-sized PDF viewer). Instead,
   only the pieces that would look broken if split are protected: a
   heading never sits alone at the bottom of a page with its content on
   the next, and no single bullet point is cut mid-line. */
.cv-entry__head,
.cv-entry__meta {
  break-after: avoid;
}

.cv-entry__head {
  /* The title and date range are two separate flex children in this row
     -- without this, a tight page break can split them apart (title
     alone at the bottom of one page, dates stranded at the top of the
     next). */
  break-inside: avoid;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-m);
}

.cv-entry__title {
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

/* Company name links through, but reads as plain title text — same
   reasoning as .timeline-group__company-link on the main page. */
.cv-entry__company-link {
  color: inherit;
  text-decoration: none;
}

.cv-entry__dates {
  color: var(--text-muted);
  font-size: var(--step--1);
  white-space: nowrap;
}

.cv-entry__meta {
  color: var(--text-muted);
  font-size: var(--step--1);
  margin-top: 0.1em;
}

.cv-entry ul {
  margin-top: var(--space-2xs);
  padding-left: 1.1em;
}

.cv-entry li {
  break-inside: avoid;
}

.cv-entry li + li {
  margin-top: var(--space-3xs);
}

.cv-entry__tech {
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.cv-entry__tech::before {
  content: 'Tech: ';
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.cv-skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs) var(--space-l);
}

.cv-skills dt {
  font-weight: var(--weight-semibold);
  font-size: var(--step--1);
}

.cv-skills dd {
  color: var(--text-muted);
  font-size: var(--step--1);
  margin: 0 0 var(--space-s);
}

.cv-actions {
  display: flex;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

/* --- Print ------------------------------------------------------------------ */

@media print {
  .cv-actions,
  .cv-print-note {
    display: none;
  }

  /* Force ink-on-paper regardless of the visitor's theme or whether their
     browser has "print background graphics" enabled. The background/color
     !important below only covers body's OWN text -- it does nothing for
     descendants like .cv-header__role or .cv-skills dd that set their own
     `color: var(--text-muted)`. Those still read the live custom property,
     so in dark theme they'd print in the dark theme's light-on-dark grey
     (#a6acb4) -- effectively invisible on white paper. Resetting the
     tokens themselves fixes every such element in one place, matching
     what light theme already uses (tokens.css's default :root block). */
  /* !important is required here: :root[data-theme='dark'] in tokens.css
     is an unconditional rule (not gated by any media query) with higher
     specificity than a bare `html` selector, so without !important it
     would still win and this override would do nothing when the visitor
     has dark theme active. */
  html {
    --text: #16181c !important;
    --text-muted: #565b63 !important;
    --border: #e2ded7 !important;
    --border-strong: #8b857c !important;
    --accent: #0b5e55 !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  body {
    max-width: none;
    padding: 0;
    font-size: 11pt;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  /* Contact links are the one exception to the ink-only "a" rule above:
     underlined so they still read as clickable links in a saved/printed
     PDF, without spending colour ink on them. */
  .cv-header__contact a {
    text-decoration: underline;
  }

  .cv-header {
    border-bottom-color: #000;
  }

  .cv-section h2 {
    border-bottom-color: #999;
  }

  @page {
    margin: 1.6cm;
  }
}