/* =============================================================
   Alfredo I. Gallardo — CV
   One source, two outputs:
     • Screen: polished personal-CV layout (live site).
     • Print: ATS-clean single column (PDF for upload).
   ============================================================= */

:root {
  --bg:           #fbfaf7;
  --surface:      #ffffff;
  --text:         #18181b;
  --text-muted:   #5b5b62;
  --text-faint:   #8a8a92;
  --rule:         #e6e3dc;
  --accent:       #c2410c;
  --accent-hover: #9a3412;
  --max-width:    44rem;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0c0c0d;
    --surface:      #131316;
    --text:         #ececef;
    --text-muted:   #a4a4ad;
    --text-faint:   #6e6e76;
    --rule:         #26262b;
    --accent:       #fb923c;
    --accent-hover: #fdba74;
  }
}

:root[data-theme="light"] {
  --bg:           #fbfaf7;
  --surface:      #ffffff;
  --text:         #18181b;
  --text-muted:   #5b5b62;
  --text-faint:   #8a8a92;
  --rule:         #e6e3dc;
  --accent:       #c2410c;
  --accent-hover: #9a3412;
}

:root[data-theme="dark"] {
  --bg:           #0c0c0d;
  --surface:      #131316;
  --text:         #ececef;
  --text-muted:   #a4a4ad;
  --text-faint:   #6e6e76;
  --rule:         #26262b;
  --accent:       #fb923c;
  --accent-hover: #fdba74;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

html {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

@supports (font-variation-settings: normal) {
  html { font-family: "Inter var", var(--font-sans); }
}

body { background: var(--bg); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
a:hover, a:focus-visible {
  color: var(--accent-hover);
  border-bottom-color: currentColor;
}
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--text);
}

p { margin: 0; }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 1rem; top: 1rem; width: auto; height: auto;
  background: var(--surface); padding: .5rem .75rem; border: 1px solid var(--rule); border-radius: 6px;
}

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.topbar-name {
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -0.01em;
}
.topbar-actions { display: flex; align-items: center; gap: .5rem; }

.btn-pdf, .btn-theme {
  font: inherit; font-size: .82rem; font-weight: 500;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .35rem .8rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.btn-pdf:hover, .btn-theme:hover, .btn-pdf:focus-visible, .btn-theme:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-theme {
  width: 2rem; padding: .35rem; justify-content: center;
}
.theme-icon { font-size: 1rem; line-height: 1; }

/* Page */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

/* Hero */
.hero { margin-bottom: 2.5rem; }
.hero h1 {
  font-size: clamp(2rem, 4vw + 1rem, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: .75rem;
}
.hero .tagline {
  font-size: 1.05rem;
  color: var(--text);
  max-width: 38rem;
  margin-bottom: .55rem;
}
.hero .tagline strong { font-weight: 600; }
.hero .stack {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text-muted);
  letter-spacing: 0.005em;
  margin-bottom: .35rem;
}
.hero .meta {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text-faint);
  letter-spacing: 0.005em;
  margin-bottom: 1rem;
}
.contact {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  font-size: .92rem;
}
.contact li { display: inline-flex; }
.contact a { color: var(--text); border-bottom: 1px solid var(--rule); }
.contact a:hover, .contact a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* Sections */
.section { margin-top: 2.75rem; }
.section h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 600;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-bottom: 1.25rem;
}

.section p { color: var(--text); }

/* Roles */
.role { margin-bottom: 1.85rem; }
.role:last-child { margin-bottom: 0; }
.role-head { margin-bottom: .35rem; }
.role h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.role h3 .at { color: var(--text-faint); font-weight: 400; margin: 0 .15rem; }
.role h3 .company { color: var(--accent); }
.role-meta {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-faint);
  letter-spacing: 0.005em;
  margin-top: .2rem;
}
.role-meta .dot { margin: 0 .35rem; opacity: .6; }
.role-context {
  font-size: .92rem;
  color: var(--text-muted);
  margin: .35rem 0 .65rem;
  font-style: italic;
}
.role ul, .projects, .plain {
  margin: 0; padding-left: 1.15rem;
}
.role ul li, .projects li, .plain li {
  margin-bottom: .4rem;
}
.role ul li::marker, .projects li::marker, .plain li::marker {
  color: var(--text-faint);
}
.role-links {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-faint);
  margin-top: .55rem;
}
.role-links a { color: var(--text-muted); border-bottom: 1px dotted var(--rule); }
.role-links a:hover, .role-links a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* Skills (compact paragraph form, placed at end of CV for ATS keyword coverage) */
.skills-list {
  font-size: .92rem;
  color: var(--text);
  line-height: 1.65;
}
.skills-list strong {
  font-weight: 600;
  color: var(--text);
}

/* Footer */
.footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
  color: var(--text-muted);
}
.footer p { margin-bottom: .35rem; }
.footer .updated {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-faint);
}

/* Mobile */
@media (max-width: 640px) {
  html { font-size: 16px; }
  .page { padding: 2rem 1.1rem 3rem; }
}

/* =============================================================
   PRINT STYLES — produce ATS-clean PDF
   - Single column flow
   - Standard typography
   - Black on white, no decoration
   - No interactive UI (topbar, theme toggle, footer CTA)
   ============================================================= */

@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --text: #000000;
    --text-muted: #2a2a2a;
    --text-faint: #4a4a4a;
    --rule: #cccccc;
    --accent: #000000;
    --accent-hover: #000000;
  }

  @page {
    size: Letter;
    margin: 0.55in 0.6in;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.42;
    font-family: "Inter", Georgia, "Times New Roman", serif;
  }

  /* Hide live-only chrome */
  .topbar,
  .skip-link,
  .btn-pdf,
  .btn-theme,
  #theme-toggle,
  .footer .updated { display: none !important; }

  .page {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  a {
    color: #000 !important;
    text-decoration: none !important;
    border-bottom: none !important;
  }

  /* Make links visible as text in the PDF without ::after URL noise */
  .contact a, .role-links a, .footer a, .projects a, .skills a {
    color: #000 !important;
  }

  h1 { font-size: 18pt; margin-bottom: 4pt; letter-spacing: -0.01em; }
  h2 {
    font-size: 10pt !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-top: 0.75pt solid #000 !important;
    padding-top: 6pt !important;
    margin-top: 12pt !important;
    margin-bottom: 6pt !important;
    color: #000 !important;
    page-break-after: avoid;
  }
  h3 {
    font-size: 11pt !important;
    margin-bottom: 1pt;
    color: #000 !important;
    page-break-after: avoid;
  }
  h3 .company { color: #000 !important; }
  h3 .at { color: #444 !important; }

  .hero { margin-bottom: 8pt !important; }
  .hero .tagline { font-size: 10.5pt; max-width: none; margin-bottom: 2pt; }
  .hero .meta,
  .hero .stack {
    font-family: "Inter", Georgia, serif !important;
    color: #333 !important;
    font-size: 9.5pt;
    margin-bottom: 3pt;
  }
  .hero .stack { color: #000 !important; font-weight: 500; }

  .contact {
    gap: 0 12pt;
    font-size: 9.5pt;
    margin-bottom: 0;
  }
  .contact a {
    border: none !important;
    color: #000 !important;
  }

  .section { margin-top: 0 !important; page-break-inside: auto; }
  .section p { font-size: 10.5pt; }

  .role {
    margin-bottom: 9pt !important;
    page-break-inside: avoid;
  }
  .role-meta {
    font-family: "Inter", Georgia, serif !important;
    font-size: 9pt !important;
    color: #444 !important;
    margin-top: 0 !important;
  }
  .role-context {
    font-size: 9.5pt !important;
    color: #333 !important;
    margin: 1pt 0 3pt !important;
  }
  .role ul, .projects, .plain {
    padding-left: 14pt;
  }
  .role ul li, .projects li, .plain li {
    margin-bottom: 2pt;
    font-size: 10.5pt;
  }
  .role-links {
    font-family: "Inter", Georgia, serif !important;
    font-size: 9pt !important;
    color: #444 !important;
    margin-top: 2pt !important;
  }
  .role-links a { color: #000 !important; border: none !important; }

  .skills-list {
    font-size: 9.5pt;
    color: #000 !important;
    line-height: 1.4;
  }
  .skills-list strong { color: #000 !important; }

  .footer {
    margin-top: 10pt !important;
    padding-top: 6pt !important;
    border-top: 0.5pt solid #ccc !important;
    color: #000 !important;
    font-size: 9.5pt;
  }
  .footer a { color: #000 !important; }
}

/* Print-preview helper class — for generating the PDF deterministically
   regardless of the browser's print stylesheet support. */
.print-mode {
  background: #fff !important;
  color: #000 !important;
}
.print-mode .topbar { display: none; }