/* ===========================================================
   Federico Medinilla — Resume / Microsite
   SCREEN  = KyndredAI-branded microsite (violet, Space Grotesk).
   PRINT   = ATS-safe text PDF (system fonts, single accent, clean).
   Single-column either way.
   =========================================================== */

/* ---- KyndredAI self-hosted fonts (served at site root /fonts/) ---- */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-700.woff2') format('woff2')}

:root {
  /* KyndredAI brand tokens */
  --v-700:#4A3CC2; --v-600:#5A49E0; --v-500:#6D5EF6; --v-300:#A99FF9;
  --v-glow:rgba(109,94,246,0.16);
  --success:#16B981;
  --ink:#0B0E14; --ink-soft:#11151F;
  --slate:#5B6577; --paper:#F7F8FA; --border:#E6E9EF;
  /* Control chip tokens — mirror kyndredai.com, flip in dark mode (screen only) */
  --ctrl-surface:#fff; --ctrl-border:#E6E9EF; --ctrl-muted:#5B6577; --ctrl-text:#0B0E14; --ctrl-paper:#F7F8FA;

  --accent:#4A3CC2;          /* single print accent (violet, ~7:1 on white) */
  --muted:#5B6577;
  --rule:#E6E9EF;
  --maxw:8.5in;
  --pad:0.78in;

  --font-print:"Calibri","Segoe UI",Arial,Helvetica,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-head:"Space Grotesk","Inter",system-ui,sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-print);   /* print-safe default; screen overrides below */
  font-size: 11pt;
  line-height: 1.3;
  background: #eef1f3;
}

/* ---- The page sheet ---- */
.resume {
  max-width: var(--maxw);
  margin: 24px auto;
  padding: var(--pad);
  background: #fff;
  border-left: 5px solid var(--accent);
  box-shadow: 0 2px 14px rgba(0,0,0,.10);
}

/* ---- Header / contact ---- */
.head h1 { margin: 0; font-size: 22pt; letter-spacing: .2px; color: var(--accent); }
.head .role { margin: 2px 0 8px; font-size: 12pt; font-weight: 600; color: var(--ink); }
.contact {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 10pt; color: var(--muted);
}
.contact li { white-space: nowrap; }
.contact a { color: var(--muted); text-decoration: none; }

/* ---- Section blocks ---- */
.block { margin-top: 16px; }
.block h2 {
  margin: 0 0 8px; font-size: 12pt; text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent); border-bottom: 1.5px solid var(--rule); padding-bottom: 3px;
}
.summary { margin: 0; }

/* ---- Skills ---- */
.skills { margin: 0; }
.skill-row { display: flex; gap: 10px; margin-bottom: 4px; }
.skill-row dt { flex: 0 0 9.5em; font-weight: 700; color: var(--ink); }
.skill-row dd { margin: 0; flex: 1; }

/* ---- Experience / projects ---- */
.job { margin-bottom: 12px; }
.job-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.job-head h3 { margin: 0; font-size: 11.5pt; font-weight: 700; }
.proj-stack { font-weight: 400; color: var(--muted); }
.dates { font-size: 10pt; color: var(--muted); white-space: nowrap; }
.meta { margin: 1px 0 5px; font-size: 10.5pt; color: var(--muted); }
.bullets, .certs { margin: 4px 0 0; padding-left: 18px; }
.bullets li, .certs li { margin-bottom: 3px; }
.courses { margin: 6px 0 0; }

/* ===========================================================
   SCREEN ONLY  ->  KyndredAI personality
   (none of this reaches the printed PDF)
   =========================================================== */
@media screen {
  body {
    font-family: var(--font-body);
    color: var(--ink);
    background:
      radial-gradient(1100px 420px at 50% -8%, var(--v-glow), transparent 62%),
      radial-gradient(900px 500px at 100% 110%, rgba(22,185,129,.07), transparent 60%),
      var(--paper);
    min-height: 100vh;
  }
  .resume {
    margin: 40px auto;
    border-left: none;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(11,14,20,.10), 0 30px 60px rgba(11,14,20,.10);
    position: relative;
    overflow: hidden;
  }
  /* gradient top rail — violet -> green, the KyndredAI signature */
  .resume::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
    background: linear-gradient(90deg, var(--v-600), var(--v-500) 45%, var(--success));
  }

  h1, h2, h3 { font-family: var(--font-head); letter-spacing: -0.01em; }

  /* gradient name */
  .head h1 {
    font-size: 26pt; font-weight: 700; line-height: 1.05;
    background: linear-gradient(120deg, var(--v-700), var(--v-500));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--v-700);
  }
  .head .role { color: var(--ink); font-weight: 600; opacity: .92; }

  .block h2 {
    color: var(--v-700); border-bottom: none; padding-bottom: 6px; position: relative;
  }
  .block h2::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--v-600), var(--success));
  }

  .skill-row dt { color: var(--v-700); }
  .job-head h3 { color: var(--ink-soft); }
  .proj-stack { color: var(--v-600); font-weight: 500; }
  .dates { color: var(--v-600); font-weight: 500; }
  .contact a { color: var(--slate); transition: color .15s ease; }
  .contact a:hover { color: var(--v-600); }
  .bullets li::marker { color: var(--v-500); }

  /* ---- Sticky controls (bottom-left): theme + language — EXACT match to kyndredai.com ---- */
  .sticky-controls {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 200;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem; border-radius: 999px;
    background: var(--ctrl-surface); border: 1px solid var(--ctrl-border);
    box-shadow: 0 8px 24px rgba(11,14,20,.20);
  }
  .theme-toggle {
    width: 38px; height: 38px; border-radius: 999px; border: none; background: transparent;
    color: var(--ctrl-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .theme-toggle:hover { background: var(--ctrl-paper); }
  .theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .theme-toggle .icon-sun { display: none; }
  .lang {
    display: inline-flex; gap: .25rem; align-items: center;
    border: 1px solid var(--ctrl-border); border-radius: 999px; padding: .2rem .3rem;
  }
  .lang a {
    color: var(--ctrl-muted); font-size: clamp(0.83rem, 0.78rem + 0.24vw, 0.94rem);
    font-weight: 700; line-height: 1; padding: .25rem .6rem; border-radius: 999px; text-decoration: none;
  }
  .lang a:hover { color: var(--ctrl-text); }
  .lang a[aria-current="true"] { background: var(--v-600); color: #fff; }

  /* ---- Back to kyndredai.com (top-left) — same chip styling ---- */
  .cv-back {
    position: fixed; left: 1rem; top: 1rem; z-index: 200;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .85rem .42rem .62rem; border-radius: 999px;
    background: var(--ctrl-surface); border: 1px solid var(--ctrl-border);
    box-shadow: 0 8px 24px rgba(11,14,20,.20);
    color: var(--ctrl-text); font-family: var(--font-head); font-weight: 700;
    font-size: .85rem; line-height: 1; text-decoration: none;
  }
  .cv-back:hover { background: var(--ctrl-paper); }
  .cv-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* ---- Download résumé (top-right) — violet primary CTA ---- */
  .cv-download {
    position: fixed; right: 1rem; top: 1rem; z-index: 200;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 999px;
    background: var(--v-600); color: #fff; border: 1px solid transparent;
    box-shadow: 0 8px 22px rgba(109,94,246,.32);
    font-family: var(--font-head); font-weight: 700; font-size: .85rem; line-height: 1; text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
  }
  .cv-download:hover { background: var(--v-700); transform: translateY(-1px); }
  .cv-download svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* ---- Dark mode (toggle-driven) — screen only. Control tokens flip like the site. ---- */
  html[data-theme="dark"] {
    --ctrl-surface:#151A26; --ctrl-border:rgba(255,255,255,0.10);
    --ctrl-muted:#9AA4B2; --ctrl-text:#EAECF2; --ctrl-paper:#0E121B;
  }
  html[data-theme="dark"] body {
    background:
      radial-gradient(1100px 420px at 50% -8%, rgba(109,94,246,.18), transparent 62%),
      var(--ink);
    color: #E7E9EE;
  }
  html[data-theme="dark"] .resume { background: var(--ink-soft); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
  html[data-theme="dark"] .head .role { color: #E7E9EE; }
  html[data-theme="dark"] .skill-row dt { color: var(--v-300); }
  html[data-theme="dark"] .skill-row dd,
  html[data-theme="dark"] .summary,
  html[data-theme="dark"] .bullets li,
  html[data-theme="dark"] .certs li,
  html[data-theme="dark"] .courses { color: #C7CBD4; }
  html[data-theme="dark"] .job-head h3 { color: #F2F3F6; }
  html[data-theme="dark"] .block h2 { color: var(--v-300); }
  html[data-theme="dark"] .contact a { color: #AEB6C4; }
  html[data-theme="dark"] .meta,
  html[data-theme="dark"] .proj-stack,
  html[data-theme="dark"] .dates { color: var(--v-300); }
  html[data-theme="dark"] .sticky-controls,
  html[data-theme="dark"] .cv-back { box-shadow: 0 8px 24px rgba(0,0,0,.55); }
  html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
  html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
}

/* ===========================================================
   MOBILE (screen only)  ->  comfortable single column
   =========================================================== */
@media screen and (max-width: 640px) {
  .resume {
    margin: 60px 12px 28px;          /* top gap clears the back button */
    padding: 24px 20px 60px;         /* bottom space so the floating control sits over empty area */
    border-radius: 14px;
  }
  .head h1 { font-size: 28px; line-height: 1.08; }
  .head .role { font-size: 13.5px; }
  .contact { gap: 3px 12px; font-size: 12px; }
  .contact li { white-space: normal; }

  .block { margin-top: 18px; }
  .block h2 { font-size: 12.5px; }

  /* skills: label stacked ABOVE its values (no cramped two columns) */
  .skill-row { flex-direction: column; gap: 1px; margin-bottom: 9px; }
  .skill-row dt { flex: none; }

  /* experience/projects: title and dates stacked, not squeezed onto one row */
  .job-head { flex-direction: column; align-items: flex-start; gap: 1px; }
  .job-head .dates { font-size: 11.5px; }

  /* back button: pinned above the card, scrolls with the page so it never covers content */
  .cv-back { position: absolute; top: 16px; left: 14px; font-size: .82rem; padding: .4rem .8rem .4rem .58rem; }
  .cv-download { position: absolute; top: 14px; right: 14px; font-size: .82rem; padding: .46rem .8rem; }
}

/* ===========================================================
   PRINT  ->  clean, text-based, single-page PDF (ATS-safe)
   =========================================================== */
@page { size: Letter; margin: 0.5in; }

@media print {
  .sticky-controls, .cv-back, .cv-download { display: none !important; }
  body { background: #fff; color: #1a1a1a; font-family: var(--font-print); font-size: 10pt; line-height: 1.16; }
  .resume { max-width: none; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; overflow: visible; }
  .resume::before { display: none; }

  h1, h2, h3 { font-family: var(--font-print); letter-spacing: normal; }
  /* force the name back to a solid, printable color (kills gradient-text transparency) */
  .head h1 { font-size: 19pt; color: var(--accent); -webkit-text-fill-color: var(--accent); background: none; }
  .head .role { font-size: 11pt; margin: 1px 0 5px; color: #1a1a1a; opacity: 1; }
  .contact { font-size: 9pt; }
  .contact a, a { color: #1a1a1a !important; text-decoration: none; }

  .block { margin-top: 7px; }
  .block h2 { font-size: 10.5pt; color: var(--accent); border-bottom: 1.5px solid var(--rule); padding-bottom: 2px; margin-bottom: 4px; }
  .block h2::after { display: none; }
  .skill-row dt { color: #1a1a1a; }
  .job { margin-bottom: 5px; }
  .job-head h3 { font-size: 10.5pt; color: #1a1a1a; }
  .proj-stack, .dates, .meta { color: var(--muted); }
  .meta { margin: 0 0 3px; }
  .bullets { margin-top: 2px; }
  .bullets li { margin-bottom: 2px; }
  .bullets li::marker { color: #1a1a1a; }
  .courses { margin: 4px 0 0; }

  .block h2, .job-head { break-after: avoid; }
  .job, article { break-inside: avoid; }
  .head h1, .block h2 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}