/* ===========================================================
   site.css — the one stylesheet every page loads.

   HOW THIS FILE IS ORGANIZED
     1. Fonts, colors, and base defaults
     2. Layout chrome — the sidebar and the mobile top bar
     3. Shared identity — titles, the bronze bar, eyebrow
        labels, intro lines (these make every page match)
     4. Course pages — the lecture-slide list
     5. Photo album pages — the big viewer + thumbnail strip
     6. Mobile — overrides that kick in on narrow screens

   Anything used by only ONE page (the homepage hero, the CV
   entry rows, the photography cover grid) is NOT in here — it
   lives in that page's own <style> block.

   ABOUT THE COLORS/FONTS IN :root BELOW
     Those are "variables." You set a value once there, then
     reuse it anywhere with var(--name). Change it once in
     :root and it updates every place that uses it.
   =========================================================== */


/* =====================  1. FONTS + COLORS + BASE  ===================== */

/* Loads your two web fonts from Google, once, for the whole site.
   To switch fonts: change the family names here (and the weights
   listed after :wght@), then point --name-font / --sans below at
   the new names. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&family=Libre+Franklin:wght@400;500;600&display=swap');

:root{
  /* --- brand colors (used everywhere via var(--name)) --- */
  --royal:#003594;    /* sidebar background, links, primary buttons */
  --navy:#00205B;     /* page titles and headings */
  --gold:#FFB81C;     /* the "you are here" nav highlight + active thumbnail border */
  --bronze:#B87333;   /* accents: eyebrow labels, the bronze bar, small dates/links */
  --sky:#DBEEFF;      /* pale blue: the term pill, the CV section underline */
  --gray:#C8C9C7;     /* light borders (e.g. around your homepage photo) */
  --ink:#23262b;      /* default body-text color */
  --paper:#ffffff;    /* page background */

  /* --- fonts (first name is the web font; the rest are fallbacks) --- */
  --sans:"Libre Franklin",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;  /* body text */
  --name-font:"Plus Jakarta Sans",system-ui,sans-serif;                          /* your name + all headings */
}

/* Include padding and borders inside an element's width/height (saner math). */
*{box-sizing:border-box}

/* Remove the browser's default margin around the page. */
html,body{margin:0;padding:0}

/* Site-wide text defaults: body font, ink color, and smoother text edges. */
body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}

/* Links use the surrounding text color instead of the default browser blue. */
a{color:inherit}

/* The whole-page frame: sidebar and main area sit side by side.
   (display:flex = lay children out in a row; min-height:100vh = at least full screen tall.) */
.layout{display:flex;min-height:100vh}

/* The main content column, to the right of the sidebar.
   flex:1 = grow to fill the leftover width; min-width:0 = allow it to shrink
   properly; padding = the space between content and the window edges.
   Individual pages can override this padding (the homepage does). */
.main{flex:1;min-width:0;padding:56px 64px}

/* Caps how wide the content gets so text lines don't run too long.
   840px is the default; the photography landing overrides it to 1000px. */
.content{max-width:840px}


/* =====================  2. LAYOUT CHROME (sidebar + top bar)  =====================
   These pieces are injected into every page by sidebar.js. */

/* The royal top bar. Hidden on desktop (display:none); the mobile section
   at the bottom turns it on for narrow screens.
   position:sticky + top:0 = it stays pinned to the top as you scroll;
   z-index:30 = it sits above normal page content. */
.topbar{display:none;align-items:center;justify-content:space-between;background:var(--royal);color:#fff;padding:14px 20px;position:sticky;top:0;z-index:30}

/* Your name shown in that top bar. */
.topbar-name{font-family:var(--name-font);font-size:18px;font-weight:600}

/* The ☰ menu button (only appears on mobile). */
.hamburger{background:none;border:1px solid rgba(255,255,255,.5);border-radius:8px;color:#fff;cursor:pointer;padding:6px 9px;display:flex}
.hamburger svg{width:26px;height:26px}

/* The left sidebar itself.
   width = its fixed width; flex:none = never shrink; flex-direction:column
   = stack the brand, nav, and footer icons top to bottom. */
.sidebar{width:264px;flex:none;background:var(--royal);color:#fff;display:flex;flex-direction:column;padding:34px 28px}

/* The name + subtitle block at the top of the sidebar. */
.brand{display:flex;flex-direction:column;gap:3px;margin-bottom:40px}
.brand-name{font-family:var(--name-font);font-size:21px;font-weight:600;letter-spacing:.2px}  /* your name */
.brand-sub{font-size:12px;color:var(--sky);letter-spacing:.04em}                               /* "University of Pittsburgh" */

/* The nav container: stacks the links vertically. */
nav{display:flex;flex-direction:column;gap:2px}

/* Shared look for every nav link AND the Teaching button.
   The transparent 3px left border is an invisible placeholder that turns
   gold on the current page (see nav a.active). */
nav a,.navbtn{font-family:var(--sans);font-size:15px;color:rgba(255,255,255,.82);text-decoration:none;padding:8px 0 8px 14px;border-left:3px solid transparent;transition:color .15s,border-color .15s}
nav a{display:block}                              /* links fill the full row width */
nav a:hover,.navbtn:hover{color:#fff}             /* brighten to white on hover */

/* The current page's link: gold text with the gold left bar showing. */
nav a.active{color:var(--gold);border-left-color:var(--gold);font-weight:500}

/* The little ↗ arrow on external links (Retro Stat Sports). */
nav a.ext .arr{font-size:12px;opacity:.85;margin-left:2px}

/* The "Teaching" button. Looks like a link but is a real button (for the
   expand/collapse). justify-content:space-between pushes the chevron to the right. */
.navbtn{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;border-left:3px solid transparent;cursor:pointer}

/* The › chevron next to "Teaching"; transition makes its rotation smooth. */
.navbtn .chev{transition:transform .18s;font-size:17px;line-height:1}
/* When Teaching is open, rotate the chevron 90° so it points down. */
.navbtn.open .chev{transform:rotate(90deg)}

/* The course list under Teaching.
   max-height:0 + overflow:hidden = collapsed (hidden); the transition
   animates it sliding open/closed. */
.submenu{max-height:0;overflow:hidden;transition:max-height .22s ease;display:flex;flex-direction:column}
/* When the button right before it has "open", expand the submenu.
   ("+" means "the element immediately after".) */
.navbtn.open + .submenu{max-height:240px}
.submenu a{font-size:13.5px;color:rgba(255,255,255,.72);padding:6px 0 6px 28px;text-decoration:none}  /* indented course links */
.submenu a:hover{color:#fff}
.submenu a.active{color:var(--gold);font-weight:500}   /* the current course, highlighted */

/* The email/GitHub icons pinned to the bottom of the sidebar.
   margin-top:auto pushes this block down to the very bottom. */
.side-foot{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);display:flex;gap:14px;color:var(--sky)}
.side-foot a{display:inline-flex}
.side-foot a:hover{color:#fff}

/* The dark screen behind the mobile menu drawer. Hidden on desktop;
   the mobile section turns it on. */
.overlay{display:none}


/* =====================  3. SHARED IDENTITY (matches on every page)  ===================== */

/* The big page title (e.g. "Photography", "Curriculum Vitae"). */
.title{font-family:var(--name-font);font-size:38px;line-height:1.08;font-weight:600;color:var(--navy);margin:0}

/* The small uppercase bronze "eyebrow" line (e.g. "STAT 1341",
   "University of Pittsburgh") that sits under a title. */
.kicker{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--bronze);margin-top:10px}

/* The short bronze bar under titles. width = its length, height = its
   thickness; the margin controls the space above/below it. */
.rule{width:64px;height:3px;background:var(--bronze);border-radius:2px;margin:22px 0 30px}

/* The grey intro sentence under a title (the photography blurb, and the
   optional album description). */
.lead{font-size:16px;color:#5f6670;margin:12px 0 0;max-width:60ch}


/* =====================  4. COURSE PAGES (lecture list)  ===================== */

/* The title + term-pill row at the top of a course page. flex-wrap lets
   the pill drop below the title if the window is narrow. */
.course-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* The pale-blue rounded "Fall 2026" pill. border-radius:999px = fully rounded ends. */
.term{font-size:12px;font-weight:600;background:var(--sky);color:var(--royal);padding:4px 11px;border-radius:999px}

/* The course description paragraphs. */
.desc p{font-size:16px;line-height:1.72;margin:0 0 14px;max-width:64ch}

/* The "Syllabus" link, with a subtle bronze underline that darkens on hover. */
.syllabus{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--bronze);text-decoration:none;border-bottom:1px solid rgba(184,115,51,.4);padding-bottom:1px;margin-top:6px}
.syllabus:hover{border-bottom-color:var(--bronze)}

/* The "Lecture slides" subheading above the list. */
.slides-head{font-size:19px;font-weight:600;color:var(--navy);margin:42px 0 18px}

/* A bronze unit heading in the lecture list (Baseball, Hockey, etc.). */
.unit-label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze);margin-bottom:6px}
/* Extra space above a unit heading when it follows a lecture row, so the
   units are visually separated. ("+" = immediately after.) */
.ed-item + .unit-label{margin-top:26px}

/* One lecture row — a clickable link.
   border-bottom = the thin divider line between rows;
   transition + the :hover rule below = smooth background change on hover. */
.ed-item{display:flex;align-items:center;gap:18px;padding:15px 6px;border-bottom:1px solid #efeeea;text-decoration:none;color:var(--ink);transition:background .15s}
.ed-item:hover{background:#f6f9ff}   /* pale blue wash on hover */

/* The big lecture number on the left. Steel-blue normally; turns royal on hover. */
.ed-num{font-family:var(--name-font);font-size:26px;font-weight:700;color:#aebfd9;width:40px;text-align:center;flex:none;display:flex;justify-content:center;transition:color .15s}
.ed-item:hover .ed-num{color:var(--royal)}
/* A "flagged" number instead — turns gold. (Used with the flag icon for
   milestones, e.g. a project due date.) */
.ed-num.flag{color:var(--gold)}

/* The middle column of a lecture row: stacks the date over the title. */
.ed-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ed-meta{font-size:12px;color:var(--bronze);font-weight:600}   /* the small bronze date */
.ed-title{font-size:16px;font-weight:500}                      /* the lecture title */

/* The download arrow on the right. Grey normally; turns bronze on hover. */
.ed-dl{color:#cdcec9;flex:none;display:flex;transition:color .15s}
.ed-item:hover .ed-dl{color:var(--bronze)}


/* =====================  5. PHOTO ALBUM PAGES (viewer + thumbnails)  ===================== */

/* The title + date row at the top of an album. */
.album-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}

/* The small bronze date beside the album title (e.g. "June 2025"). */
.count{font-size:13px;color:var(--bronze);font-weight:600}

/* The big photo "stage."
   aspect-ratio:3/2 = it always keeps a 3:2 shape (so the frame never jumps);
   overflow:hidden = clip anything past the rounded corners;
   the flex/center lines keep the photo centered; the background is the
   neutral color you see behind portrait shots. */
.viewer{position:relative;width:100%;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:#ebeae6;display:flex;align-items:center;justify-content:center}

/* The big photo itself.
   object-fit:contain = show the WHOLE photo, scaled to fit, never cropped
   (portrait/odd shapes get neutral bars beside them instead of being cut). */
.photo{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* The round prev/next buttons that float over the photo.
   position:absolute + top:50% + translateY(-50%) = vertically centered on
   the photo; z-index:2 = above the photo; the box-shadow gives them lift. */
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18);transition:background .15s;z-index:2}
.nav-arrow:hover{background:#fff}
.nav-arrow.prev{left:14px}    /* pin the previous button to the left edge */
.nav-arrow.next{right:14px}   /* pin the next button to the right edge */

/* The caption under the big photo (the album photo caption).
   Tune this separately from .lead if you ever want it different from the
   intro-line style. min-height reserves space so the layout doesn't jump
   between photos with and without captions. */
.caption{font-size:13.5px;color:#5f6670;margin:12px 2px 0;min-height:18px}

/* The horizontal thumbnail row.
   overflow-x:auto = if there are more thumbnails than fit, it scrolls
   sideways instead of wrapping. */
.strip{display:flex;gap:9px;overflow-x:auto;padding:18px 0 6px}
/* Styles the little scrollbar under the strip (Chrome/Safari only). */
.strip::-webkit-scrollbar{height:7px}
.strip::-webkit-scrollbar-thumb{background:#d8d5cd;border-radius:6px}

/* One thumbnail button.
   aspect-ratio:3/2 = uniform thumbnail shape; opacity:.62 = dimmed until
   you hover or it's the active one; the transparent border is the
   placeholder for the gold "active" border below. */
.thumb{flex:none;width:88px;aspect-ratio:3/2;border-radius:7px;border:2px solid transparent;cursor:pointer;opacity:.62;padding:0;background:none;overflow:hidden;transition:opacity .15s,border-color .15s}
/* The image inside a thumbnail.
   object-fit:cover = fill the thumbnail, cropping to fit (fine at this small size). */
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{opacity:1}                              /* full brightness on hover */
.thumb.active{opacity:1;border-color:var(--gold)}    /* the currently-shown photo: bright + gold border */


/* =====================  6. MOBILE (narrow screens)  =====================
   Everything in here applies ONLY when the window is 1024px wide or less
   (phones and most tablets). It overrides the desktop rules above. */
@media(max-width:1024px){
  .layout{display:block}     /* stack instead of side-by-side */
  .topbar{display:flex}      /* show the top bar (hidden on desktop) */

  /* Turn the sidebar into a slide-in drawer:
     position:fixed = float over the page; translateX(-100%) = parked
     off-screen to the left; the transition animates it sliding in/out. */
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:280px;transform:translateX(-100%);transition:transform .25s ease;z-index:50;overflow-y:auto}
  /* When the ☰ button adds "nav-open" to the page, slide the drawer in. */
  body.nav-open .sidebar{transform:none}

  /* The dark screen behind the open drawer: hidden until "nav-open",
     then fades in. Tapping it closes the menu (handled in sidebar.js). */
  .overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:40}
  body.nav-open .overlay{opacity:1;pointer-events:auto}

  .main{padding:32px 22px}           /* tighter page padding on small screens */
  .title{font-size:30px}             /* smaller page title */
  .ed-num{font-size:22px;width:32px} /* smaller lecture numbers */
}