/* cv.css — a small CV-oriented stylesheet.
 *
 * Every metric is a token. The screen scale lives on :root in px; @media print
 * remaps the SAME tokens to the pt scale recruiters expect (name 18pt,
 * section titles 12pt, body 10.5pt, secondary 9.5pt) — components never carry
 * a hard-coded size. The sheet itself is paper: A4 width, the pdf's margins,
 * light palette in both color schemes.
 *
 * Layers: tokens → base → chrome (backdrop, toolbar) → sheet components
 * (header, section, skills, jobs, facts) → responsive → print.
 */

/* ---------- tokens ---------- */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
}

:root {
  /* palette — the sheet is always paper-light; only the backdrop follows the scheme */
  --bg: #ffffff;
  --soft: #f6f6f8;
  --fg: #0b0b0f;
  --muted: #6a6a76;
  --line: #e9e9ee;
  --accent: #1e3a8a;
  --accent-weak: rgba(30, 58, 138, .07);
  --backdrop: #d8dade;
  --shadow-sheet: 0 2px 6px rgba(10,10,15,.10), 0 28px 70px -28px rgba(10,10,15,.45);
  --shadow-chip: 0 1px 2px rgba(10,10,15,.07);

  /* type scale (screen) */
  --fs-name: clamp(25px, 4.8vw, 33px);
  --fs-role: clamp(16px, 3.1vw, 18px);
  --fs-section: 12.5px;   /* section titles (uppercase) */
  --fs-co: 17px;        /* company names */
  --fs-body: 15px;      /* summary, highlights, skill keywords */
  --fs-detail: 13.5px;    /* contacts, positions, dates, facts */
  --fs-micro: 12px;   /* tags */
  --lh-body: 1.55;

  /* spacing scale */
  --sp-section: 32px;
  --sp-title: 16px;     /* below a section title */
  --sp-job: 16px;       /* job vertical padding */
  --sp-li: 6px;         /* between highlights */
}

@media (prefers-color-scheme: dark) {
  :root { --backdrop: #0b0b0d; }
}

/* the whole print story for sizes: the same tokens, in points */
@media print {
  :root {
    --fs-name: 18pt;
    --fs-role: 12pt;
    --fs-section: 12pt;
    --fs-co: 12pt;
    --fs-body: 10.5pt;
    --fs-detail: 9.5pt;
    --fs-micro: 9pt;
    --lh-body: 1.33;
    --sp-section: 9pt;
    --sp-title: 5pt;
    --sp-job: 6pt;
    --sp-li: 2.5pt;
    --shadow-sheet: none;
  }
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--backdrop);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }

/* ---------- chrome: toolbar (screen only) ---------- */
.toolbar {
  width: min(210mm, calc(100% - 24px)); margin: 0 auto; padding: 16px 0 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
}
.lang-alt {
  margin-right: auto; padding: 6px 2px;
  font-size: var(--fs-detail); font-weight: 600; letter-spacing: .01em;
  color: var(--muted); text-decoration: none;
}
.lang-alt:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.btn-pdf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 12px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  font: inherit; font-size: var(--fs-detail); font-weight: 600; letter-spacing: .01em; cursor: pointer;
  box-shadow: var(--shadow-chip);
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-pdf:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 2px 8px rgba(10,10,15,.10); }
.btn-pdf svg { width: 14px; height: 14px; color: var(--accent); }

/* ---------- the sheet ---------- */
.sheet {
  background: var(--bg);
  width: min(210mm, calc(100% - 24px)); min-height: 297mm;
  margin: 14px auto 56px; padding: 13mm 18mm;
  box-shadow: var(--shadow-sheet);
  border-radius: 3px;
}

/* ---------- header ---------- */
.cv-header { display: flex; gap: 22px; align-items: center; }
.avatar {
  width: 104px; height: 104px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.identity { flex: 1; min-width: 0; }
h1 { font-size: var(--fs-name); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.role { margin-top: 6px; font-size: var(--fs-role); font-weight: 600; }
.role b { color: var(--accent); font-weight: 600; }
.contact {
  margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: var(--fs-detail); color: var(--muted);
}
.contact a, .contact span { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.contact a:hover { color: var(--accent); }
.contact svg { width: 14px; height: 14px; opacity: .85; flex-shrink: 0; }

/* ---------- sections ---------- */
section { margin-top: var(--sp-section); }
.section-title {
  font-size: var(--fs-section); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); padding-bottom: 8px; margin-bottom: var(--sp-title);
  border-bottom: 2px solid #e0e2e9;
}
.summary { color: var(--muted); }
.summary b { color: var(--fg); font-weight: 600; }

/* ---------- skills ---------- */
.skills { display: grid; gap: 10px; }
.skill-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline; }
.skill-row dt { font-size: var(--fs-detail); font-weight: 650; color: var(--fg); }
.skill-row dd { color: var(--muted); }

/* ---------- experience ---------- */
.job { padding: var(--sp-job) 0; border-top: 1px solid var(--line); }
.job:first-of-type { border-top: none; padding-top: 4px; }
.job-head { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.job-co { font-size: var(--fs-co); font-weight: 700; letter-spacing: -.01em; }
.job-role { font-size: var(--fs-detail); font-weight: 600; color: var(--accent); }
.job-tag { font-size: var(--fs-micro); font-weight: 600; color: var(--accent); background: var(--accent-weak); padding: 2px 8px; border-radius: 999px; }
.job-meta { margin-left: auto; font-size: var(--fs-detail); color: var(--muted); text-align: right; white-space: nowrap; }
ul.highlights { margin-top: 9px; padding-left: 0; list-style: none; display: grid; gap: var(--sp-li); }
ul.highlights li { position: relative; padding-left: 18px; color: var(--muted); }
ul.highlights li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
ul.highlights li b { color: var(--fg); font-weight: 600; }

/* ---------- education / certifications / languages ---------- */
.fact { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-detail); }
.fact + .fact { margin-top: 7px; }
.fact .lbl { color: var(--fg); font-weight: 600; }
.fact .val { color: var(--muted); margin-left: auto; }

/* ---------- responsive ---------- */
@media (max-width: 540px) { .skill-row { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- print: page setup, chrome off, ATS flattening ---------- */
@media print {
  @page { size: A4; margin: 11mm 12.5mm; }
  html, body { background: #fff; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .toolbar, .btn-pdf, .lang-alt { display: none !important; }
  .sheet { width: auto; min-height: 0; margin: 0; padding: 0; border-radius: 0; }
  .cv-header { gap: 16px; }
  .avatar { width: 74px; height: 74px; }
  .contact { margin-top: 8px; gap: 4px 14px; }
  .section-title { padding-bottom: 4px; }
  ul.highlights { margin-top: 5px; }
  ul.highlights li { padding-left: 15px; }
  .fact + .fact { margin-top: 2pt; }
  .fact { line-height: 1.25; }
  section { break-inside: auto; }
  .contact { margin-top: 6px; }
  .job, .skills { break-inside: avoid; }
  .section-title { break-after: avoid; }
}