/* ================================================================
   Premier Sports Academy — Shared responsive header overrides
   Loaded on every page AFTER its inline <style> so these rules win.
   ================================================================ */

/* ============================================================
   MAXIMUM-SPECIFICITY NAV TYPOGRAPHY LOCK
   Uses body + tag + class + :not() chains to beat any page-level
   inline CSS, including rules that already had !important.
   Applies to:
     - Top-level nav links (Home, Academy, Commitments, etc.)
     - Dropdown menu items (Staff, Partners, Join a Team, etc.)
     - The dropdown parent text (Academy, Join Premier)
   ============================================================ */
body nav.nav .nav-links li a,
body nav.nav .nav-links li.has-dropdown > a,
body nav.nav .nav-links li.has-dropdown .dropdown li a,
body nav#navbar .nav-links li a,
body nav#navbar .nav-links li.has-dropdown > a,
body nav#navbar .nav-links li.has-dropdown .dropdown li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-style: normal !important;
}

/* Hide the ▾ arrow glyph on dropdown parents (it renders in a different font) */
body nav .nav-links .has-dropdown > a::after,
body nav .nav-links .has-dropdown > a::before {
  content: '' !important;
  display: none !important;
}

/* Preserve baby-blue active highlight set via inline style="color:..." */
body nav .nav-links a[style*="baby-blue"] {
  color: var(--baby-blue, #4da8da) !important;
}

/* ----- Pulse animation for dual-logo (baseball/softball crossfade) ----- */
@keyframes pulseBase {
  0%, 45% { opacity: 1; }
  55%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pulseSoft {
  0%, 45% { opacity: 0; }
  55%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

/* ----- Baseline: force horizontal nav layout across every page ----- */
nav,
.nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  padding: 1rem 2rem !important;
  gap: 1.25rem !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

nav > *,
.nav > * {
  flex-shrink: 1;
  min-width: 0;
}

.nav-logo {
  flex-shrink: 0 !important;
}

.nav-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

nav .nav-logo,
.nav .nav-logo,
nav a.nav-logo,
.nav a.nav-logo {
  font-family: 'Oswald', sans-serif !important;
  /* One notch up from the CTA-matched size so the brand keeps a bit
     more presence. Fluid range: ~0.82rem on smaller desktops up to
     0.92rem on very wide screens. Mobile overrides below still apply. */
  font-size: clamp(0.82rem, 0.25vw + 0.68rem, 0.92rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  min-width: 0;
  gap: 0.55rem !important;
}

.nav-logo .nav-logo-pulse,
.nav-logo .nav-logo-pulse img {
  /* Matched to the bumped-up logo text so icon and wordmark stay in
     proportion. */
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
}

/* Baseball/softball pages use a plain <img> inside the logo anchor
   (no pulse wrapper). Normalize those to the same height so every
   header in the site matches the home page scale. width:auto keeps
   the intrinsic aspect ratio. */
nav .nav-logo > img,
.nav .nav-logo > img {
  height: 24px !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

/* Belt-and-suspenders: kill any underline pseudo-element that page-
   level CSS might paint under the CTA button (baseball/softball pages
   have a .nav-links a::after hover underline rule that can creep onto
   the button in some states). The CTA should never carry that line. */
nav .nav-cta::after,
nav .nav-cta::before,
.nav .nav-cta::after,
.nav .nav-cta::before,
nav .nav-cta-wrap .nav-cta::after,
nav .nav-cta-wrap .nav-cta::before {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

.nav-links {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: clamp(0.75rem, 1.4vw, 2rem) !important;
}

.nav-links > li {
  white-space: nowrap;
}

nav .nav-links a,
.nav .nav-links a,
nav ul.nav-links li a,
.nav ul.nav-links li a {
  font-family: 'Inter', sans-serif !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
}

/* Preserve baby-blue active highlight set via inline style attribute */
nav .nav-links a[style*="baby-blue"],
.nav .nav-links a[style*="baby-blue"] {
  color: var(--baby-blue, #4da8da) !important;
}

.nav-links a:hover {
  color: var(--baby-blue, #4da8da) !important;
}

/* Standardized outlined "Choose Your Sport" button — matches home page styling
   (transparent background + white border, blue on hover). Overrides any
   page-level red-filled versions defined in inline <style> blocks. */
nav .nav-cta,
.nav .nav-cta,
nav a.nav-cta,
.nav a.nav-cta,
nav .nav-cta-wrap .nav-cta,
.nav .nav-cta-wrap .nav-cta {
  white-space: nowrap !important;
  font-size: clamp(0.65rem, 0.6vw + 0.4rem, 0.78rem) !important;
  padding: 0.55rem 0.95rem !important;
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: border-color 0.25s, color 0.25s, transform 0.25s !important;
  flex-shrink: 0;
}
nav .nav-cta:hover,
.nav .nav-cta:hover {
  border-color: var(--baby-blue, #4da8da) !important;
  color: var(--baby-blue, #4da8da) !important;
  transform: translateY(-1px);
}
/* Wrapper used on home page to push the CTA flush right; replicate on
   sub-pages by wrapping the desktop CTA in <div class="nav-cta-wrap">. */
.nav-cta-wrap {
  display: flex !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

/* Visually center the nav-links between the logo and the CTA.
   Without this, the logo sits flush-left and the nav-cta-wrap (flex:1)
   absorbs all extra space on the right, which leaves the links crowded
   next to the logo. Giving both outer children equal flex basis balances
   the layout so the links end up at the horizontal center. Only applies
   on desktop — mobile uses the slide-down menu and doesn't care. */
@media (min-width: 1025px) {
  nav.nav > .nav-logo,
  .nav > .nav-logo {
    flex: 1 1 0 !important;
    min-width: 0;
  }
  nav.nav > .nav-cta-wrap,
  .nav > .nav-cta-wrap {
    flex: 1 1 0 !important;
  }
  nav.nav > .nav-links,
  .nav > .nav-links {
    flex: 0 0 auto !important;
    justify-content: center !important;
  }
}

/* Hide any mobile-only items while desktop nav is visible */
.mobile-only-cta { display: none !important; }

/* ----- Desktop dropdown menus (Academy / Join Premier) ----- */
.nav-links .has-dropdown { position: relative; }
/* Force every top-level nav anchor to share the same box model so items
   like "Academy" (which sits inside a has-dropdown <li>) align on the
   exact same baseline as Home / 2026 Tryouts / Member Login. */
nav .nav-links > li > a,
.nav .nav-links > li > a,
.nav-links .has-dropdown > a { display: inline-block !important; line-height: 1.2 !important; vertical-align: middle !important; }
/* No arrow glyph — it renders in a different font and looks inconsistent. */
.nav-links .has-dropdown > a::after {
  content: none !important;
}
.nav-links .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 200px;
  background: rgba(6, 14, 26, 0.98);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(77, 168, 218, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1100;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.nav-links .has-dropdown:hover > .dropdown,
.nav-links .has-dropdown:focus-within > .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-links .dropdown li { width: 100%; }
nav .nav-links .dropdown li a,
.nav .nav-links .dropdown li a {
  display: block !important;
  padding: 0.7rem 1.1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
nav .nav-links .dropdown li a:hover,
.nav .nav-links .dropdown li a:hover {
  color: var(--baby-blue, #4da8da) !important;
  background: rgba(77, 168, 218, 0.08) !important;
}

/* ----- Hamburger breakpoint: kick in at 1024px instead of 900/960 ----- */
@media (max-width: 1024px) {
  nav,
  .nav {
    padding: 0.9rem 1.25rem !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
  }

  .nav-logo {
    font-size: 0.95rem !important;
  }

  /* Show the hamburger */
  .mobile-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    background: none;
    border: none;
    z-index: 1101;
  }
  .mobile-toggle span {
    width: 26px;
    height: 2px;
    background: #fff;
    transition: all 0.3s;
    display: block;
  }
  .mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-toggle.open span:nth-child(2) { opacity: 0; }
  .mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hide the inline desktop CTA on mobile — it's already available
     inside the slide-down hamburger menu via the .mobile-only-cta item,
     so we don't need it duplicated in the compact header. Hide both the
     wrapper used on pages that wrap the CTA and the bare-anchor case
     on any legacy pages that still have it as a direct child. */
  nav > .nav-cta,
  .nav > .nav-cta,
  nav > .nav-cta-wrap,
  .nav > .nav-cta-wrap { display: none !important; }

  /* Slide-down mobile menu */
  .nav-links {
    position: fixed !important;
    top: 60px; left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 1rem 1.5rem 2rem !important;
    background: rgba(6, 14, 26, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(77, 168, 218, 0.2);
    transform: translateY(-150%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    display: flex !important;
    white-space: normal !important;
  }

  .nav-links.show { transform: translateY(0); }

  .nav-links > li {
    width: 100%;
    list-style: none;
  }

  .nav-links a {
    display: block !important;
    padding: 1rem 0.25rem !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.15em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
  }

  .nav-links a::after { display: none !important; }

  /* Dropdowns inline in mobile menu */
  .nav-links .has-dropdown > a::before { display: none !important; }
  .nav-links .dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 0.5rem 1rem !important;
    min-width: 0 !important;
  }
  .nav-links .dropdown li a {
    padding: 0.6rem 0.25rem !important;
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.75);
  }

  /* Re-enable the mobile-only CTA if the page declared one */
  .mobile-only-cta { display: block !important; }
  .nav-links .mobile-cta {
    display: block !important;
    margin-top: 1rem !important;
    padding: 0.95rem 1rem !important;
    text-align: center !important;
    background: #e63946 !important;
    color: #fff !important;
    border-radius: 4px !important;
    border-bottom: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
  }
}

/* ----- Phone portrait: tighten paddings and logo size ----- */
@media (max-width: 560px) {
  .nav { padding: 0.75rem 1rem !important; }
  .nav-logo { font-size: 0.82rem !important; letter-spacing: 0.1em !important; }
  .nav-logo .nav-logo-pulse,
  .nav-logo .nav-logo-pulse img {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ----- Extra tiny phones ----- */
@media (max-width: 380px) {
  .nav-logo { font-size: 0.72rem !important; }
}

/* ================================================================
   Global responsive safety net — prevent horizontal scroll and
   overflow on hero/title elements that were hard-coded in px.
   ================================================================ */
html, body { max-width: 100%; overflow-x: hidden; }

img, video { max-width: 100%; height: auto; }

/* Generic hero title fluidity */
.hero-title,
.sport-card-title,
.stat-num {
  overflow-wrap: break-word;
  word-break: break-word;
}