/* ==========================================================================
   Shared site header / navigation / mobile menu
   ==========================================================================
   Included on every public page via <link rel="stylesheet" href="/header.css">
   (see header.js for the matching shared behavior). This is the ONE
   implementation of the header -- no page should carry its own copy of
   these rules. Relies on the design-token custom properties (--bg, --panel,
   --panel-border, --rust, --moss, --bone, --muted, --container-wide) that
   every page already defines on :root in its own inline <style>.

   One shared scroll-state behavior on every page, driven entirely by
   header.js (a plain window.scrollY check, see that file) toggling
   .is-scrolled -- no page ever hardcodes that class, and no page needs
   any special markup for it to work. <header> starts in a light,
   translucent resting state (works whether what's behind it is the
   homepage's full-screen hero image or another page's shorter banner --
   see .page-hero-banner's own gradient overlay, which already darkens
   toward the top the same way the homepage hero does) and switches to
   the fully solid .is-scrolled background once the page scrolls past
   the threshold in header.js. Scrolling back to the top removes it
   again, everywhere, the same way. */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(16, 38, 42, 0.25);
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
header.is-scrolled {
  background: rgba(16, 38, 42, 0.92);
  border-bottom-color: var(--panel-border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 40px;
  max-width: var(--container-wide);
  margin: 0 auto;
}

header, nav a, .brand {
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--bone);
  flex-shrink: 0;
}

.brand img {
  height: 48px;
  width: auto;
  display: block;
}

.brand span { color: var(--rust); }

nav {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--bone);
  padding: 7px 14px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}

nav a:hover { color: var(--rust); }

/* Active-page pill -- set via aria-current="page" by the shared
   detection script in header.js, never hardcoded per page, never
   distinct from :hover (restrained tint + text color, not a solid
   CTA-style button -- that treatment is reserved for .btn-discord-nav). */
nav a[aria-current="page"] {
  background: rgba(232, 162, 39, 0.14);
  color: var(--rust);
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.btn-discord-nav {
  background: rgba(232, 162, 39, 0.14);
  border: 1px solid var(--rust);
  color: var(--rust);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-discord-nav:hover { background: var(--rust); color: #14180F; }

/* ---------- Auth-aware nav (public website Discord login) ---------- */
/* Sibling of .nav-actions inside .nav-panel, not a child of it -- on
   desktop that means it lays out as its own flex item of .header-inner
   (same display:contents mechanism as nav/.nav-actions), so it never
   competes with .btn-discord-nav's own width:100% styling. Exactly one
   of #auth-login-btn / #user-menu is ever visible at a time; header.js
   toggles `hidden` on them based on auth.js's session state, never both,
   never neither, so there's no layout jump between the two. */
.auth-actions { display: flex; align-items: center; flex-shrink: 0; }

.user-menu { position: relative; }

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  color: var(--bone);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.user-menu-trigger:hover { border-color: var(--rust); }

.user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
  background: var(--panel-border);
  object-fit: cover;
}

.user-menu-caret { font-size: 10px; color: var(--muted); }

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0B1518;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
  padding: 6px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  z-index: 60;
}
/* display:flex above otherwise beats the browser's own [hidden] {
   display: none } UA-stylesheet rule -- author styles always win over
   UA styles on the same property, hidden attribute or not, so without
   this the dropdown would stay visibly rendered (just empty of layout
   meaning) even while `hidden` is set. */
.user-menu-dropdown[hidden] { display: none; }
.user-menu-dropdown a,
.user-menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--bone);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover { background: rgba(241, 233, 220, 0.06); }

/* ---------- Mobile nav toggle (hamburger) ---------- */
/* Hidden entirely above the mobile breakpoint -- desktop keeps the
   original inline nav + Join Discord button in .header-inner exactly as
   before. This button and the overlay panel it opens only ever appear at
   <=640px (see that media query below). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--bone);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
header.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
header.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* display:contents on desktop -- the wrapper never renders as a box of its
   own, so #site-nav and .nav-actions keep laying out as direct flex items
   of .header-inner exactly as they did before this wrapper existed. Only
   the mobile media query below turns it into an actual positioned dropdown
   panel. */
.nav-panel { display: contents; }

/* Non-home pages' banner (.page-hero-banner, never used on the homepage --
   that's .hero-banner) used to have the header as a normal in-flow child
   at its top, which reserved this space naturally. Now that header is
   position:fixed and out of flow on every page, that space has to be
   added back here instead. */
.page-hero-banner { padding-top: 100px; }

@media (max-width: 640px) {
  /* justify-content is what actually pins the toggle to the far right:
     .nav-panel is positioned out of flow (see below), so .header-inner's
     only two flex children in normal flow are .brand and .nav-toggle,
     and without this they just sit together at the row's start
     (flex-start is the default), leaving the toggle immediately beside
     the logo instead of pushed to the opposite edge. */
  .header-inner { padding: 14px 20px; justify-content: space-between; }
  .nav-toggle { display: flex; }
  /* A compact dropdown attached to the header, not a full-screen modal --
     it only ever occupies its own content height, leaves the rest of the
     page visible underneath, and never locks page scroll (see header.js).
     position:absolute with top:100% anchors it to header's own rendered
     bottom edge (header is its containing block via position:fixed on
     .header-inner's ancestor) regardless of the header's exact height, so
     no hardcoded pixel offset is needed. Kept in the layout at all times
     (no display:none/flex toggle) so opacity/transform can transition it
     open and closed instead of popping abruptly. */
  .nav-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 20px;
    background: #0B1518;
    border: 1px solid var(--panel-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
    padding: 6px 16px 16px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  header.nav-open .nav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Header still reads as a solid dark bar whenever the dropdown is open,
     on every page, regardless of its own scroll-based .is-scrolled state
     -- the dropdown itself is always a solid dark surface (see .nav-panel
     above), so the header directly above it should never look
     unfinished/half-transparent while it's open. */
  header.nav-open {
    background: rgba(16, 38, 42, 0.96);
    border-bottom-color: var(--panel-border);
  }
  #site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    padding-top: 8px;
  }
  #site-nav a {
    padding: 14px 12px;
    font-size: 16px;
    border-radius: 8px;
  }
  /* Subtle separator between the nav links and the Join Discord action,
     rather than the links stretching edge to edge with nothing marking
     where the list ends. */
  .nav-actions {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-border);
  }
  .btn-discord-nav { flex: none; width: 100%; padding: 14px 24px; font-size: 15px; text-align: center; border-radius: 6px; }
  /* Auth row sits below the Join Discord row as its own block, not
     crammed into the same flex row -- .nav-actions already claims
     width:100% for Join Discord, so a second full-width button belongs
     in a separate row rather than fighting it for space. */
  .auth-actions { width: 100%; justify-content: center; margin-top: 10px; }
  #auth-login-btn { width: 100%; }
  .user-menu { width: 100%; }
  .user-menu-trigger { width: 100%; justify-content: center; padding: 10px 16px; }
  /* The dropdown becomes an inline block instead of a floating popover
     here -- it's already inside one dropdown (the mobile nav panel);
     stacking a second floating layer on top of that would be confusing
     and risks getting clipped by the panel's own overflow-y:auto. */
  .user-menu-dropdown {
    position: static;
    margin-top: 6px;
    box-shadow: none;
    border-color: transparent;
    background: transparent;
    padding: 0;
  }
  /* Shorter than the desktop compensation above -- the mobile header is a
     single compact row (logo + hamburger only), not the wider desktop
     bar. */
  .page-hero-banner { padding-top: 84px; }
}