/* ============================================================
   Tokens
   ============================================================ */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1712;
  --surface: #26201a;
  --text: #ece4d8;
  --text-muted: #a89880;
  --accent: #d79a5c;
  --border: #3d3226;
  --max-width: 900px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf9f7;
  --surface: #f2ece2;
  --text: #554d37;
  --text-muted: #7d6f56;
  --accent: #9a5b2c;
  --border: #ddd0bd;
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  line-height: 1.6;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a { color: var(--accent); }

img, video { max-width: 100%; height: auto; }

/* ============================================================
   Accessibility
   ============================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--bg);
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Header / Nav  (mobile first)
   ============================================================ */

.site-header {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-rule {
  max-width: var(--max-width);
  margin: 0 auto;
}

.header-rule span {
  display: block;
  margin: 0 1rem;
  border-bottom: 1px solid var(--border);
}

.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nav-brand {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--text);
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav-links a.is-active {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.icon-btn .icon { width: 16px; height: 16px; }

.theme-toggle { font-size: 1rem; }

.mail-control { position: relative; }

.mail-flyout {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 60;
}

.mail-control.is-open .mail-flyout,
.mail-control:focus-within .mail-flyout {
  opacity: 1;
  pointer-events: auto;
}

.mail-flyout-address {
  color: var(--text);
  font-size: 0.85rem;
}

/* ============================================================
   Layout
   ============================================================ */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

section {
  margin-bottom: 3rem;
  scroll-margin-top: 6rem;
}

h1 { font-size: 2rem; margin-bottom: 0.25rem; }

h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}

p { max-width: 70ch; }

main section p { text-align: justify; }

.tagline { color: var(--text-muted); margin: 0.25rem 0; }

.hero-actions { margin-top: 1.5rem; }

.btn {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  font-size: 0.95rem;
}

.btn:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Skills & Tooling
   ============================================================ */

.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.skill-group h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.skill-group ul {
  margin: 0;
  padding-left: 1.2rem;
}

.skill-group li {
  margin-bottom: 0.3rem;
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.project { text-align: left; }

.project-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.project-desc.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.project-desc-toggle {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
  cursor: pointer;
}

.project-desc-toggle:hover { color: var(--text); }

.show-more-wrap {
  text-align: center;
  margin-top: 1.5rem;
}

.show-more-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.show-more-btn:hover { color: var(--text); }

.show-more-arrow { width: 16px; height: 16px; }

.show-more-btn[aria-expanded="true"] { flex-direction: column-reverse; }

.show-more-btn[aria-expanded="true"] .show-more-arrow { transform: rotate(180deg); }

.project-meta {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 0;
}

/* ============================================================
   Certifications
   ============================================================ */

.certs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.cert-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.cert-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cert-title {
  font-size: 1.05rem;
  margin: 0.75rem 1rem 0.25rem;
}

.cert-verify {
  margin: 0 1rem 1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-muted);
}

.copy-email-btn .icon {
  position: absolute;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.copy-email-btn .icon-copy {
  opacity: 1;
  transform: scale(1);
}

.copy-email-btn .icon-check {
  opacity: 0;
  transform: scale(0.5);
  color: var(--accent);
}

.copy-email-btn.is-copied .icon-copy {
  opacity: 0;
  transform: scale(0.5);
}

.copy-email-btn.is-copied .icon-check {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   Back to top
   ============================================================ */

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 50;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Demo video
   ============================================================ */

.scroll-sentinel { height: 1px; }

.demo { margin: 1.5rem 0; }

.demo-video {
  width: 100%;
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #000;
}

.demo figcaption {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   404
   ============================================================ */

.notfound {
  text-align: center;
  padding: 4rem 1rem;
}

/* ============================================================
   Tablet and up
   ============================================================ */

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  main { padding: 3rem 2rem; }

  h1 { font-size: 3rem; }

  /* main's horizontal padding (2rem) is wider than .nav's (1rem) at this
     breakpoint, so the hero name and section titles would otherwise sit
     1rem to the right of the header's left edge. Pull them back left by
     the difference so they line up with "Cesar Vaca" in the header, while
     the body content (tagline, paragraphs, grids) keeps main's normal
     padding and reads as indented relative to its own heading. */
  h1, h2 { margin-left: -1rem; }

  /* h2's border-bottom is a full-width line under a block box, so it needs
     the box itself to be 1rem wider on the right too, not just shifted
     left — otherwise the line stops 1rem short of the header's right edge
     (main's narrower padding vs .nav's). margin-left already made the box
     wider by extending its right edge... except CSS's auto-width solving
     keeps that right edge anchored where it originally was, so it has to
     be pushed out explicitly with a matching negative margin-right. */
  h2 { margin-right: -1rem; }

  .skills-grid,
  .projects-grid,
  .certs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Print
   ============================================================ */

@media print {
  .skip-link,
  .nav-links,
  .theme-toggle,
  .mail-flyout,
  .hero-actions,
  .demo,
  .back-to-top,
  .show-more-wrap,
  .project-desc-toggle {
    display: none !important;
  }

  /* Header holds contact info now, so keep it (minus the pieces above)
     instead of hiding the whole thing like before. */
  .site-header { position: static; }

  /* "Show more" is a JS interaction with nothing to click on paper —
     print every project/cert card, not just the first 4, and print each
     description in full rather than clamped to 3 lines. */
  .project[hidden],
  .cert-card[hidden] {
    display: block !important;
  }

  .project-desc {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }

  body {
    background: #fff;
    color: #000;
  }

  main {
    max-width: none;
    padding: 0;
  }

  a { color: #000; text-decoration: underline; }

  /* Show destinations of links, since a printed page can't be clicked.
     The mail trigger is a <button> with no href (email is plain text,
     not a mailto link), so its address is carried in data-email instead
     and surfaced the same way. */
  main a[href^="http"]::after,
  .nav-controls a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  #mail-trigger::after {
    content: " (" attr(data-email) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  section { page-break-inside: avoid; margin-bottom: 1.5rem; }
}