/* ==============================================================
   AUREX SHARED PUBLIC HEADER
   One implementation for /leaderboard/ /pro-rewards/ /register/
   and the unauthenticated /portal/ gate.

   Deliberately uses its own .axnav namespace instead of reusing
   .public-header. The legacy rules in styles.css
     @media (max-width:720px) .public-header{flex-direction:column}
     @media (max-width:900px) .public-header nav{display:grid;...}
   therefore cannot apply at all — no override war, and the old
   header elements are removed outright by public-header.js.
   ============================================================== */
.axnav {
  position: sticky; top: 0; z-index: 60;
  /* no backdrop-filter/transform here: either would make .axnav the
     containing block for its own position:fixed sheet + backdrop */
  background: rgba(6, 12, 20, 0.97);
  border-bottom: 1px solid rgba(126, 168, 204, 0.16);
}
.axnav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 58px;
  max-width: 1240px; margin: 0 auto; padding: 0 16px;
}
.axnav-brand {
  font-size: 17px; font-weight: 730; letter-spacing: 0.15em;
  text-transform: uppercase; color: #f4f9fd; text-decoration: none;
  white-space: nowrap;
}
.axnav-brand:hover { color: #ffffff; }

/* ---------- desktop links ---------- */
/* links live only in the menu sheet now, at every width */
.axnav-links { display: none; }
.axnav-links a {
  position: relative;
  display: inline-flex; align-items: center; height: 40px; padding: 0 13px;
  font-size: 13.5px; font-weight: 620; letter-spacing: 0.01em;
  color: rgba(186, 212, 234, 0.86); text-decoration: none;
  border-radius: 9px; white-space: nowrap;
  transition: color 180ms ease, background 180ms ease;
}
.axnav-links a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.05); }
.axnav-links a[aria-current="page"] { color: #ffffff; }
.axnav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; border-radius: 2px; background: #8fd9f6;
}
.axnav-links a:focus-visible,
.axnav-toggle:focus-visible,
.axnav-sheet a:focus-visible {
  outline: 2px solid #8fd9f6; outline-offset: 2px;
}

/* ---------- mobile trigger ---------- */
.axnav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -6px; padding: 0;
  background: transparent; border: 1px solid rgba(126, 168, 204, 0.22);
  border-radius: 11px; color: #dceaf6; cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.axnav-toggle:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(143, 217, 246, 0.5); }
.axnav-toggle svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; }
.axnav-toggle .axnav-x { display: none; }
body.axnav-open .axnav-toggle .axnav-x { display: block; }
body.axnav-open .axnav-toggle .axnav-bars { display: none; }

/* ---------- mobile sheet ---------- */
.axnav-backdrop {
  position: fixed; inset: 58px 0 0; z-index: 55;
  background: rgba(3, 7, 12, 0.6);
  opacity: 0; transition: opacity 200ms ease;
}
body.axnav-open .axnav-backdrop { opacity: 1; }
.axnav-sheet {
  position: fixed; top: 58px; left: 0; right: 0; z-index: 58;
  padding: 8px 16px 14px;
  background: rgba(8, 15, 24, 0.99);
  border-bottom: 1px solid rgba(126, 168, 204, 0.18);
  box-shadow: 0 22px 40px -28px rgba(0, 0, 0, 0.95);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
body.axnav-open .axnav-sheet { opacity: 1; transform: none; pointer-events: auto; }
.axnav-sheet nav { display: flex; flex-direction: column; }
.axnav-sheet a {
  display: flex; align-items: center; min-height: 50px; padding: 0 12px;
  border-radius: 11px; border-left: 2px solid transparent;
  font-size: 15px; font-weight: 620; color: rgba(200, 224, 244, 0.92);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.axnav-sheet a:hover, .axnav-sheet a:active { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.axnav-sheet a[aria-current="page"] {
  color: #ffffff; border-left-color: #8fd9f6; background: rgba(74, 168, 216, 0.12);
}
body.axnav-open { overflow: hidden; }

/* ---------- §2 desktop at >=820px ---------- */
@media (min-width: 820px) {
  .axnav-in { height: 68px; padding: 0 24px; }
  .axnav-brand { font-size: 18px; }
  /* toggle + sheet stay at desktop too: one nav surface everywhere */
  .axnav-links { display: none; }
  body.axnav-open { overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .axnav-sheet, .axnav-backdrop { transition: none; }
}