/**
 * South End Pickleball — the site nav band (`<nav data-se-hub-nav>`).
 *
 * WHY THIS FILE EXISTS
 * live/pickleball-hub-nav.js builds the nav's markup and injects only *modifier*
 * styles (the hub icon, the Admin pill, the gold --active tint, the <=768px
 * collapse). It has always assumed some page-local stylesheet already defined the
 * base `.se-site-nav` / `.se-site-nav-link` rules. Twenty-two pages each carry
 * their own copy of that base in a local <style> block and no shared sheet had
 * one — so any new page that mounted the nav without remembering to paste the
 * block got run-together underlined links and a bare orange square on the active
 * item. That is exactly what shipped on /events.
 *
 * TWO THEMES, ONE BAND
 * The 22 copies are not one style; they are two families that differ only in
 * palette and typeface:
 *   light  cream pages — Bebas Neue, --green hover, --gold active, white band
 *   dark   admin pages — Oswald, --neon hover, near-black translucent band
 * pickleball-hub-nav.js already branches on this via isAdminThemedPage(): on a
 * cream page it appends quieter pill overrides on top of the base below; on an
 * admin page it appends nothing and the base is what you see. So the light rules
 * here are the *foundation* those overrides sit on, not the finished look.
 *
 * ADOPTION IS OPT-IN AND INCOMPLETE ON PURPOSE
 * Only the three Events pages link this sheet today. The other 22 keep their
 * inline copies: their container geometry genuinely differs (boxed card pages set
 * max-width + side rules; band pages do not), and collapsing them is a site-wide
 * sweep that has to be looked at page by page rather than smuggled in behind an
 * events fix. `--boxed` and `--dark` below are the two shapes that sweep will
 * need. A page that links this sheet AND keeps a local block is safe — the local
 * block is later in the cascade and still wins.
 *
 * Depends on south-end-tokens.css for --rule/--muted/--green/--gold/--ink, with
 * literal fallbacks so an admin page that skips the token sheet still renders.
 */

/* —— The band —— */
.se-site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  padding: 10px 24px 12px;
  background: #fff;
  border-bottom: 1px solid var(--rule, #dde5d9);
}

/* Pages whose content sits in a centred card (message board, friends, social)
   run the band to the same width and close it with side rules. */
.se-site-nav--boxed {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  border-left: 1px solid var(--rule, #dde5d9);
  border-right: 1px solid var(--rule, #dde5d9);
}

/* —— The links (light / cream) —— */
.se-site-nav-link {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #5a6357);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--rule, #dde5d9);
  background: #fff;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

/* Hover guarded to mouse pointers only: an unguarded :hover on a tappable link
   makes iOS Safari spend the first tap applying the hover state and require a
   second tap to activate (the mobile "double-tap" bug). */
@media (hover: hover) and (pointer: fine) {
  .se-site-nav-link:hover {
    color: var(--green, #1a6b3a);
    border-color: var(--green-lt, #2d9458);
    background: rgba(26, 107, 58, 0.06);
  }
}

.se-site-nav-link--active {
  color: var(--ink, #111810);
  background: var(--gold, #e8a020);
  border-color: var(--gold, #e8a020);
  box-shadow: 0 4px 14px rgba(232, 160, 32, 0.22);
}

/* —— Dark admin variant —— */
.se-site-nav--dark {
  padding: 10px 28px 12px;
  background: rgba(5, 12, 28, 0.85);
  border-bottom: 1px solid rgba(0, 255, 136, 0.22);
}

.se-site-nav--dark .se-site-nav-link {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid transparent;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .se-site-nav--dark .se-site-nav-link:hover {
    color: var(--neon, #00ff88);
    border-color: transparent;
    background: rgba(0, 255, 136, 0.08);
  }
}

.se-site-nav--dark .se-site-nav-link--active {
  color: var(--ink, #0d1117);
  background: var(--neon, #00ff88);
  border-color: rgba(0, 255, 136, 0.45);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}

/* Keyboard focus was never styled in any of the 22 copies. The nav script adds a
   focus ring for cream pages only; this covers the dark band too. */
.se-site-nav-link:focus-visible {
  outline: 2px solid var(--green, #1a6b3a);
  outline-offset: 2px;
}

.se-site-nav--dark .se-site-nav-link:focus-visible {
  outline-color: var(--neon, #00ff88);
}

@media (max-width: 520px) {
  .se-site-nav {
    padding-left: 16px;
    padding-right: 16px;
  }
}