/* =============================================================================
 * Navigation — top navigation bar + sport tab row, mapped to design tokens.
 * Design source: Assets/Navigation.png
 * Requires: design-tokens.css. Composes with typography.css, pill.css,
 *           button.css and the icon partial.
 *
 * Layout (views/partials/navigation.ejs):
 *   <header class="nav">
 *     <div class="nav__bar">
 *       <a class="nav__brand">…mark + SLTE…</a>
 *       <form class="nav__search">…</form>
 *       <div class="nav__actions">…icon buttons / Log in…</div>
 *     </div>
 *     <nav class="sport-nav">…scrollable pills…</nav>
 *   </header>
 *
 * Responsive (switch breakpoints 600 / 1280):
 *   <600px  : brand + actions on row 1, search wraps full-width to row 2.
 *   >=600px : brand | search (flex) | actions on a single row.
 *   >=1280px: bar centered with a max content width and roomier search.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Shared page transition state. The navigation partial owns the markup, so all
 * SLTE-system screens get the same feedback while the next document loads.
 * -------------------------------------------------------------------------- */
.page-loader[hidden] { display: none; }
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(22, 22, 22, 0.96);
  color: var(--color-content-primary);
  font-family: 'DM Sans', var(--font-sans);
  opacity: 0;
  transition: opacity 140ms ease;
}
.page-loader.is-visible { opacity: 1; }
.page-loader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(220px, calc(100vw - 48px));
}
.page-loader__mark {
  width: 28px;
  height: 38px;
  border-radius: 6px;
  background: linear-gradient(310.14deg, #b7af69 12.98%, #cdb140 92.6%, #cdb664 131.58%);
  box-shadow: 0 8px 28px rgba(205, 177, 64, 0.18);
  animation: page-loader-pulse 1.1s ease-in-out infinite;
}
.page-loader__wordmark {
  margin-top: 12px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.page-loader__bar {
  width: 100%;
  height: 2px;
  margin-top: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.page-loader__bar span {
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, #96855a, #cdb140);
  animation: page-loader-progress 1.2s ease-in-out infinite;
}
.page-loader__label {
  margin-top: 12px;
  color: var(--color-content-tertiary);
  font-size: 12px;
  font-weight: 500;
}
@keyframes page-loader-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes page-loader-progress {
  from { transform: translateX(-110%); }
  to { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader { transition: none; }
  .page-loader__mark, .page-loader__bar span { animation: none; }
  .page-loader__mark { opacity: 1; transform: none; }
  .page-loader__bar span { width: 100%; }
}

.nav {
  position: relative;
  z-index: 1500; /* above page content/stickies (<=1000), below modals (2000+) */
  background-color: #161616;
  color: var(--color-content-primary);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: 'DM Sans', var(--font-sans);
}

/* Mobile: pin the nav to the top of the screen on every page. */
@media (max-width: 1279px) {
  .nav {
    position: sticky;
    top: 0;
    z-index: 1500;
  }
}

.nav__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

@media (min-width: 1280px) {
  .nav__bar {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
    gap: var(--space-5);
  }
}

/* -----------------------------------------------------------------------------
 * Brand — gold monogram mark + SLTE wordmark.
 * -------------------------------------------------------------------------- */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-content-primary);
  flex-shrink: 0;
}
.nav__mark {
  display: none;
  width: 18px;
  height: 24px;
  border-radius: 4px;
  background-image: linear-gradient(310.14deg, #b7af69 12.98%, #cdb140 92.6%, #cdb664 131.58%);
  flex-shrink: 0;
}
.nav__wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: 'DM Sans', var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}
.nav__beta {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.45;
}

/* -----------------------------------------------------------------------------
 * Search — pill input. Full-width on its own row for mobile, flexible inline
 * from the 600px switch upward.
 * -------------------------------------------------------------------------- */
.nav__search {
  order: 3; /* mobile: drop to the next line */
  flex: 1 1 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.18s ease;
}

/* Global search typeahead dropdown (public/js/nav-search.js). */
.nav-search__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: #1c1c1c;
  border: 1px solid #2e2e2e;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.nav-search__section + .nav-search__section {
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-search__label {
  padding: 8px 10px 4px;
  font-family: 'DM Sans', var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #717171;
}
.nav-search__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #ffffff;
  font-family: 'DM Sans', var(--font-sans);
  font-size: 14px;
  line-height: 18px;
}
.nav-search__item:hover,
.nav-search__item.is-active {
  background: rgba(255, 255, 255, 0.07);
}
.nav-search__ic {
  display: inline-flex;
  flex-shrink: 0;
  color: #b8b8b8;
}
.nav-search__team-logo {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  object-fit: contain;
}
.nav-search__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.nav-search__chip {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(193, 176, 87, 0.16);
  color: #c1b057;
  font-size: 11px;
  font-weight: 600;
}
.nav-search__handle {
  flex-shrink: 0;
  color: #717171;
  font-size: 12px;
}
.nav-search__avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: #2e2e2e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b8b8b8;
  font-size: 11px;
  font-weight: 600;
}
.nav-search__empty {
  padding: 14px 12px;
  color: #717171;
  font-size: 13px;
  text-align: center;
}
.nav__search:focus-within {
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.nav__search-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #ffffff;
}
.nav__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font-family: 'DM Sans', var(--font-sans);
  font-size: 14px;
  line-height: 20px;
}
.nav__search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
/* Touch devices auto-zoom when a focused input is under 16px — bump it so
   focusing the search never triggers a zoom on mobile. */
@media (pointer: coarse) {
  .nav__search-input { font-size: 16px; }
}
.nav__search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 0.18s ease;
}
.nav__search-clear:hover {
  color: #ffffff;
}

@media (min-width: 600px) {
  .nav__search {
    order: 0; /* back inline between brand and actions */
    flex: 1 1 auto;
    max-width: 500px;
  }
}

/* -----------------------------------------------------------------------------
 * Actions — circular icon buttons (message / bell / profile) or Log in button.
 * Icons inherit currentColor so hover recolors them cleanly.
 * -------------------------------------------------------------------------- */
.nav__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto; /* push to the right edge on the first row */
  flex-shrink: 0;
}
.nav__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: none;
  background: rgba(23, 23, 23, 0.51);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.nav__action:hover {
  background: rgba(40, 40, 40, 0.6);
}
.nav__action:focus-visible {
  outline: 2px solid var(--color-content-accent);
  outline-offset: 2px;
}

/* Unread count badge over an action icon (e.g. notifications bell). */
.nav__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9999px;
  background: #ef4444;
  border: 2px solid #161616;
  color: #ffffff;
  font-family: 'DM Sans', var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav__badge[hidden] { display: none; }

/* Log in - dark-glass rounded button (logged-out). */
.nav__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(23, 23, 23, 0.51);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  text-decoration: none;
  font-family: 'DM Sans', var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav__login:hover { background: rgba(40, 40, 40, 0.6); }

/* =============================================================================
 * Sport tab row — horizontally scrollable pills (reuses the Pill component).
 * ========================================================================== */
.sport-nav {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--color-surface-border);
}
.sport-nav__scroll {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.sport-nav__scroll::-webkit-scrollbar {
  display: none; /* WebKit */
}
.sport-nav__scroll .pill {
  flex: 0 0 auto; /* never shrink; let the row scroll */
}

@media (min-width: 1280px) {
  .sport-nav__scroll {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-6);
  }
}

/* Sport tabs use the Pill component's `sport` variant (gold default,
 * white glass selected) per Figma — no re-skinning needed here. */