/* =========================================================================
   Site enhancements — Tier 1
   Loaded AFTER the inline <style> in homepage.html so these rules win.
   Everything here is progressive: the scroll-reveal "hidden" state is only
   applied by enhancements.js, so with JS disabled all content stays visible.
   ========================================================================= */

/* --- Frosted-glass navigation bar -------------------------------------- */
/* Keep it consistently dark (white logo/links stay legible) but translucent +
   blurred so page content shows through with a frosted effect. The opacity is
   the same at the top and when scrolled — only a subtle shadow is added on
   scroll — so the bar never looks washed-out at the top of the page. */
.site-nav-bar {
  background: rgba(10, 10, 12, 0.80);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transition: box-shadow 0.3s ease;
}
/* Add only a shadow once the page is scrolled (toggled by JS); same tint. */
.site-nav-bar.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}
/* Browsers without backdrop-filter (rare) fall back to a solid bar. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-nav-bar { background: #000000; }
}

/* --- Scroll-spy: highlight the current section in the nav -------------- */
.site-nav-links a {
  position: relative;
  transition: color 0.2s ease;
}
.site-nav-links a.active {
  color: #ffb81c; /* Purdue gold */
}
/* Underline indicator on desktop; absolute so it never shifts layout. */
@media (min-width: 901px) {
  .site-nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: #ffb81c;
    border-radius: 2px;
  }
}
/* On the mobile dropdown, mark the active row with a gold left accent. */
@media (max-width: 900px) {
  .site-nav-bar .site-nav-links {
    background: rgba(10, 10, 12, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
  .site-nav-links a.active {
    box-shadow: inset 3px 0 0 #ffb81c;
  }
}

/* --- Scroll-reveal: fade/slide content in as it enters the viewport ----- */
/* .reveal is added by JS only; .revealed is added when the element scrolls in. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* --- Publication rows: a calm, subtle hover ---------------------------- */
/* No row lift, no image zoom — just a faint background wash, a gentle lift of
   the teaser image's shadow, and the title warming to the theme color. */
.pub-row {
  border-radius: 10px;
  padding: 6px 8px;
  margin-left: -8px;
  margin-right: -8px;
  transition: background-color 0.25s ease;
}
.pub-row:hover {
  background-color: rgba(0, 45, 114, 0.04); /* Purdue-blue tint, barely there */
}
.publications ol.bibliography li .teaser {
  transition: box-shadow 0.3s ease;
}
.pub-row:hover .teaser {
  box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.22);
}
@media (prefers-color-scheme: dark) {
  .pub-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pub-row,
  .publications ol.bibliography li .teaser {
    transition: none;
  }
}

/* --- Year-jump nav (full publications page) ---------------------------- */
/* A static row of year buttons that jump to each year separator. The large
   top margin clears the page heading + subtitle, whose negative bottom margins
   would otherwise overlap this bar. */
.year-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 38px 0 24px;
}
.year-jump-btn {
  display: inline-block;
  padding: 3px 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  /* Use the site theme variables so the pills track the gold/bronze palette
     (and its dark-mode variants) automatically. */
  color: var(--site-theme-color, #8e6f3e);
  border: 1px solid var(--site-theme-color, #8e6f3e);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.year-jump-btn:hover,
.year-jump-btn:focus {
  background: var(--site-theme-color, #8e6f3e);
  border-color: var(--site-theme-color, #8e6f3e);
  color: #ffffff; /* white on the bronze pill (light mode) */
  text-decoration: none;
}
/* In dark mode the theme color is a light gold, so hover text must be dark. */
@media (prefers-color-scheme: dark) {
  .year-jump-btn:hover,
  .year-jump-btn:focus {
    color: #1c1c1c;
  }
}

/* --- Section heading accent: subtle bottom hairline -------------------- */
/* A thin full-width rule under each section title for visual rhythm. */
.wrapper section h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(142, 111, 62, 0.35);
}
/* The two Publications headings carry an inline `margin-bottom: -15px` that
   would pull the following subtitle up onto the hairline; give them a small
   positive bottom margin so the rule has clearance (override the inline). */
.wrapper section h2#publications,
.wrapper section h2#publications-full {
  margin-bottom: 6px !important;
}
@media (prefers-color-scheme: dark) {
  .wrapper section h2 {
    border-bottom-color: rgba(235, 217, 159, 0.3);
  }
}

/* --- News as a vertical timeline --------------------------------------- */
/* Pure-CSS restyle keyed off .news-list: a vertical rail with a dot per item
   and theme-colored dates. Works with the existing markup, the festival-strip
   insertion, and the "Show more" toggle (the #newsmore items are descendants,
   so the same rules reach them). */
.news-list {
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 26px;
}
/* The continuous rail. Spans the list's height (incl. expanded #newsmore).
   Centered at x=6px to match the dots (see .news-list li::before below). */
.news-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(0, 0, 0, 0.12);
}
/* #newsmore is a child of .news-list with no padding, so its <li>s line up. */
.news-list #newsmore {
  margin: 0;
  padding: 0;
}
.news-list li {
  list-style: none;
  position: relative;
  margin: 0 0 16px 0;
  line-height: 1.5;
}
/* Dot on the rail for each news item. With content-box + 2px border the dot's
   total width is 8+2+2 = 12px; the list padding is 26px, so left:-26px puts the
   dot's left edge at x=0 and its center at x=6px — matching the rail. */
.news-list li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  margin-top: -1px;
  background: var(--site-theme-color, #8e6f3e);
  border: 2px solid var(--global-bg-color, #ffffff);
  border-radius: 50%;
  box-sizing: content-box;
}
/* The leading date, e.g. "[May. 2026]" — first <strong> in each item. */
.news-list li > strong:first-child {
  display: inline-block;
  margin-right: 8px;
  color: var(--site-theme-color, #8e6f3e);
  font-variant-numeric: tabular-nums;
}
/* "Show more" toggle sits on the rail too; nudge it inline with item text. */
.news-list > a[href^="javascript:"] {
  display: inline-block;
  margin: 4px 0 12px;
}
/* Keep the festival greeting readable on the timeline (it has its own bg). */
.news-list li.festival-news-item {
  padding-left: 8px;
}
.news-list li.festival-news-item::before {
  top: 0.6em;
}
@media (prefers-color-scheme: dark) {
  .news-list::before {
    background: rgba(255, 255, 255, 0.18);
  }
}

/* --- Back-to-top button ------------------------------------------------ */
/* Injected by enhancements.js. Hidden until the page is scrolled down a bit,
   then fades in at the bottom-right; clicking smooth-scrolls to the top. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--site-theme-color, #8e6f3e);
  border-radius: 50%;
  background: var(--global-bg-color, #ffffff);
  color: var(--site-theme-color, #8e6f3e);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
    background-color 0.2s ease, color 0.2s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top:hover,
.back-to-top:focus {
  background: var(--site-theme-color, #8e6f3e);
  color: #ffffff;
  outline: none;
}
@media (prefers-color-scheme: dark) {
  .back-to-top {
    background: #20212b;
  }
  .back-to-top:hover,
  .back-to-top:focus {
    background: var(--site-theme-color, #ebd99f);
    color: #1c1c1c;
  }
}
/* On small screens, tuck it in a little. */
@media (max-width: 600px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 38px;
    height: 38px;
  }
}

/* --- Respect users who prefer reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .year-jump-btn {
    transition: none;
  }
  .back-to-top {
    transition: opacity 0.25s ease, visibility 0.25s ease;
    transform: none;
  }
}