/* =============================================================================
   styles.css - all styling for the site.

   Look: high-contrast and minimal. Near-white page, near-black text, and ONE
   accent colour used sparingly (links, rules, the active nav item) - about the
   60-30-10 split that professional portfolios use. A two-column layout puts a
   sticky sidebar (name + nav + contact) on the left and the content on the
   right, so the page uses its horizontal space instead of running in a thin
   strip.

   To re-skin the whole site, change the variables in :root. You should not
   need to touch anything past the THEME block for a palette change. Read
   STANDARDS.md before adding new rules.
   ========================================================================== */

/* --- THEME: edit these to re-colour the site. -------------------------- */
:root {
  --bg:      #fbfbfa;   /* 60% - page background          */
  --ink:     #17191c;   /* 30% - body text                */
  --muted:   #5b6066;   /* secondary text                 */
  --faint:   #d9d9d4;   /* hairlines                      */
  --accent:  #227c4b;   /* 10% - links, rules, active nav (green) */

  --sidebar: 15rem;     /* width of the left column       */
  --page:    66rem;     /* total content width            */
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark palette. Applied when the OS is in dark mode (unless the visitor has
   explicitly picked light), and whenever the visitor explicitly picks dark via
   the toggle. Keep the two value lists below identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121316; --ink: #e8e9ea; --muted: #9aa0a6; --faint: #2c2f34; --accent: #52b788;
  }
}
:root[data-theme="dark"] {
  --bg: #121316; --ink: #e8e9ea; --muted: #9aa0a6; --faint: #2c2f34; --accent: #52b788;
}

/* --- RESET ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }

/* Accessibility focus ring */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* --- LAYOUT: sidebar + content ----------------------------------------- */
.layout {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  gap: 4rem;
  align-items: start;
  position: relative;
}

/* --- SIDEBAR (sticky) -------------------------------------------------- */
.sidebar { position: sticky; top: 0; padding: 3.5rem 0; }
.sidebar h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.sidebar .tagline { color: var(--muted); font-size: 0.92rem; margin-top: 0.5rem; }
.sidebar .location { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.9rem; }

/* In-page nav */
.nav { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.1rem; }
.nav a {
  color: var(--muted); font-size: 0.9rem; font-weight: 500;
  padding: 0.3rem 0.75rem; border-left: 2px solid transparent;
  margin-left: -0.75rem; transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  border-radius: 4px;
}
.nav a:hover { color: var(--accent); background-color: var(--faint); }
.nav a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* Contact */
.contact { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.9rem; }
.contact a { border-bottom: 1px solid var(--faint); width: fit-content; padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s; }
.contact a:hover { border-bottom-color: var(--accent); }

/* Theme toggle: a clean, minimal icon button at the top of the sidebar. */
.theme-toggle {
  margin-bottom: 1.5rem;
  background: none;
  border: 1px solid var(--faint);
  border-radius: 4px;
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--faint);
}

/* --- CONTENT ----------------------------------------------------------- */
.content { padding: 3.5rem 0 4rem; max-width: 42rem; }
.content .intro { font-size: 1.15rem; line-height: 1.55; color: var(--ink); }

section { padding: 2.5rem 0; border-top: 1px solid var(--faint); margin-top: 2.5rem; }
section:first-of-type { border-top: none; margin-top: 2.5rem; }

h2 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.6rem;
}

/* --- ENTRIES (projects, experience) ------------------------------------ */
.entry { margin-bottom: 1.9rem; }
.entry:last-child { margin-bottom: 0; }
.entry h3 { font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.entry h3 .subtitle { color: var(--muted); font-weight: 400; }
.entry h3 .subtitle::before { content: "  ·  "; color: var(--faint); }
.entry .meta { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }
.entry p { margin-top: 0.55rem; color: var(--ink); }
.entry .more { font-size: 0.85rem; margin-top: 0.5rem; }
.entry .more a { border-bottom: 1px solid var(--faint);
  transition: color 0.15s, border-color 0.15s; }
.entry .more a:hover { border-bottom-color: var(--accent); }

/* --- EDUCATION --------------------------------------------------------- */
.edu h3 { font-weight: 600; font-size: 1.15rem; }
.edu p { margin-top: 0.5rem; }
.coursework { font-size: 0.9rem; margin-top: 1.2rem; border-collapse: collapse; width: 100%; }
.coursework th, .coursework td { text-align: left; vertical-align: top;
  padding: 0.55rem 0; border-top: 1px solid var(--faint); }
.coursework th { color: var(--muted); font-weight: 600; white-space: nowrap; padding-right: 1.75rem; }
.coursework tr:first-child th, .coursework tr:first-child td { border-top: none; }

/* --- HONORS & SKILLS --------------------------------------------------- */
.plainlist { list-style: none; }
.plainlist li {
  padding-left: 1rem;
  border-left: 2px solid var(--faint);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  transition: border-color 0.15s;
}
.plainlist li:hover {
  border-left-color: var(--accent);
}

.skillset { margin-bottom: 1.5rem; }
.skillset:last-child { margin-bottom: 0; }
.skillset .label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); }

.skills-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.skill-tag {
  font-size: 0.85rem;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* "Working with" tags (active accent tint) */
.skill-tag.working {
  background-color: rgba(34, 124, 75, 0.08);
  border-color: rgba(34, 124, 75, 0.15);
  color: var(--accent);
}
.skill-tag.working:hover {
  background-color: rgba(34, 124, 75, 0.12);
  border-color: var(--accent);
}

/* "Learning" tags (neutral gray tint) */
.skill-tag.learning {
  background-color: var(--faint);
  border-color: var(--faint);
  color: var(--muted);
}
.skill-tag.learning:hover {
  border-color: var(--muted);
  color: var(--ink);
}

/* Dark theme overrides for tags */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skill-tag.working {
    background-color: rgba(82, 183, 136, 0.1);
    border-color: rgba(82, 183, 136, 0.2);
  }
  :root:not([data-theme="light"]) .skill-tag.working:hover {
    background-color: rgba(82, 183, 136, 0.15);
  }
}
:root[data-theme="dark"] .skill-tag.working {
  background-color: rgba(82, 183, 136, 0.1);
  border-color: rgba(82, 183, 136, 0.2);
}
:root[data-theme="dark"] .skill-tag.working:hover {
  background-color: rgba(82, 183, 136, 0.15);
}

/* --- FOOTER ------------------------------------------------------------ */
footer { grid-column: 1 / -1; border-top: 1px solid var(--faint);
  padding: 1.5rem 0 2.5rem; font-size: 0.8rem; color: var(--muted); }

/* --- SMALL SCREENS: collapse to one column, nav goes horizontal -------- */
@media (max-width: 50rem) {
  .layout { grid-template-columns: 1fr; gap: 0; padding: 0 1.5rem; }
  .sidebar { position: static; padding: 3rem 0 0; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 1.5rem; }
  .nav a { border-left: none; padding: 0.3rem 0.6rem; margin-left: 0; border-radius: 4px; }
  .nav a.active { border-left: none; background-color: var(--faint); font-weight: 600; }
  .contact { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .content { padding-top: 2.5rem; max-width: none; }
}

/* --- PRINT STYLES ------------------------------------------------------ */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .layout { display: block; padding: 0; position: static; }
  .sidebar { position: static; padding: 0 0 2rem; border-bottom: 1px solid var(--faint); }
  .nav, .theme-toggle { display: none; }
  .content { padding: 2rem 0 0; max-width: none; }
  section { page-break-inside: avoid; border-top: 1px solid var(--faint); padding: 1.5rem 0; margin-top: 1.5rem; }
  section:first-of-type { border-top: none; }
}