/* ============================================================= *
 * Shared site chrome: nav bar, theme toggles, hamburger, slim   *
 * scrollbars, loading spinner.                                  *
 *                                                               *
 * These rules were byte-identical in styles.css and the dorm-   *
 * reviews stylesheet. Both now link this file FIRST, then their *
 * own sheet on top -- so a page-specific override (e.g. the     *
 * reviews page setting DM Sans on the nav) still wins.           *
 *                                                               *
 * The two pages run different palettes, so the scrollbar reads  *
 * its colours from --scrollbar-thumb / --scrollbar-thumb-hover; *
 * the defaults below track the site tokens and reviews.css      *
 * repoints them at its own.                                     *
 * ============================================================= */

/* Tokens the chrome needs. Owned here so neither stylesheet has to
   redeclare them; page palettes live in styles.css / reviews.css. */
:root {
  /* Warm cream ground; --field stays white so cards lift off it. */
  --bg: #f2e8dc;
  --ink: #17161a;
  --dim: #6e6c75;
  --line: #e0d6c8;
  --red: #E21833;
  --logo-gold: #d9a300;

  --scrollbar-thumb: var(--dim);
  --scrollbar-thumb-hover: var(--ink);
}

:root[data-theme="dark"] {
  --bg: #131215;
  --ink: #f2f0eb;
  --dim: #97949e;
  --line: #2c2a30;
  --logo-gold: #ffd200;
}

/* ---------------- RESET ---------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- SCROLLBARS ---------------- */
/* Slim, trackless scrollbars everywhere (Firefox + WebKit). */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; border: none; box-shadow: none; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  /* Transparent border keeps the thumb visually slim inside the gutter. */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------------- NAV ---------------- */
/* No font-family here: styles.css pages inherit DM Sans from :root, and
   reviews.css sets it on nav explicitly, so its own rule wins. */
nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 40px;
}

.logo {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--red);
  cursor: pointer;
  line-height: 1;
}

.logo span { color: var(--logo-gold); }

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.nav-links button {
  background: none;
  border: none;
  padding: 0 0 3px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
}

.nav-links button:hover { color: var(--ink); }

.nav-links button.active {
  color: var(--ink);
  border-bottom-color: var(--red);
}

/* Icon theme toggle in the top bar. Both icons stay in the DOM, stacked;
   switching themes rotates/fades one out and the other in. */
.theme-toggle {
  background: none;
  border: none;
  padding: 0;
  position: relative;
  width: 16px;
  height: 16px;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s;
}

.theme-toggle:hover { color: var(--ink); }

.theme-toggle svg {
  position: absolute;
  inset: 0;
  transition: transform 0.4s ease, opacity 0.25s ease;
}

.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: none; }

/* In-menu theme toggle (mobile only). Both icons share one grid cell so
   they rotate/fade over each other like the top-bar toggle; only the
   label swaps instantly. */
.nav-theme-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  grid-template-columns: 18px 1fr;
}
.nav-theme-toggle svg {
  grid-area: 1 / 1;
  transition: transform 0.4s ease, opacity 0.25s ease;
}
.nav-theme-toggle span { grid-area: 1 / 2; }
.nav-theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="dark"] .nav-theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-theme="dark"] .nav-theme-toggle .icon-moon { opacity: 1; transform: none; }
.nav-theme-toggle .label-dark { display: none; }
:root[data-theme="dark"] .nav-theme-toggle .label-light { display: none; }
:root[data-theme="dark"] .nav-theme-toggle .label-dark { display: inline; }

/* Hamburger. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- LOADING ---------------- */
.reviews-loading {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.reviews-loading.visible { display: flex; }
.reviews-loading-icon { width: 56px; height: 48px; }

/* ---------------- NAV: MOBILE ---------------- */
@media (max-width: 768px) {
  /* Links collapse into a fullscreen overlay, so drop the 3-zone grid back to
     a simple logo-left / hamburger-right bar. */
  .nav-inner { display: flex; justify-content: space-between; padding: 16px 20px; }

  .nav-toggle { display: flex; position: relative; z-index: 1000; }
  .nav-right { gap: 14px; }
  .nav-right > .theme-toggle { display: none; }

  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 80px 16px 32px;
    z-index: 999;
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  /* The drawer covers the viewport; the page must not scroll behind it. */
  body.nav-open { overflow: hidden; }
  .nav-links button {
    width: 100%;
    text-align: left;
    padding: 16px 20px;
    font-size: 1.1rem;
    border-bottom: none;
  }
  .nav-links button.active { border-bottom: none; color: var(--red); }
  .nav-theme-toggle { display: grid; margin-top: auto; border-top: 1px solid var(--line); padding-top: 24px; }
}