/**
 * sticky-header-fixes-1318545.css — Task #1318545
 * P0 bugs: sticky header contrast + search button covering icon + nav blocked
 *
 * ROOT CAUSE: Previous version used class names that don't exist in HTML
 * (.mega-panel, .mega-btn, .nav-nav-row, .nav-logo-name, .nav-cta-go-pro)
 * These selectors DON'T MATCH → CSS applies nothing → bugs persist.
 *
 * ACTUAL class/ID names from the codebase:
 * - .sr-header — main sticky header element (layout-head.ejs critical CSS)
 * - header[role='banner'] — semantic header (same style grouping in layout-head)
 * - nav#mainNav — the nav element (nav.js line 264 uses getElementById('mainNav'))
 * - .announce-bar, #announceBar — announcement bar (nav.js line 264)
 * - .nav-inline-search — search container (header-search-1315987.css)
 * - .nav-inline-search-icon — search icon (header-search-1315987.css)
 * - .nav-inline-search-input — search input (header-search-1315987.css)
 * - .mobile-nav-drawer, #mobileNavPanel — mobile navigation
 * - .sr-cta-primary, .sr-cta-gopro, .nav-cta-pro — CTA buttons
 *
 * MUST load LAST — overrides all prior CSS including premium-v2.css
 */

/* ═══════════════════════════════════════════════════════════
   BUG #3: NAVIGATION BLOCKED BY STICKY HEADER
   Mobile nav and mega dropdown must be ABOVE sticky header (z:1000)
   nav.js already sets mega panel z-index:10000 inline — reinforce here
   ═══════════════════════════════════════════════════════════ */

/* Mega panel / mega dropdown — above sticky header */
.mega-panel,
.mega-menu,
.mega-dropdown,
.nav-mega,
.nav-mega-dropdown,
[class*='mega'][class*='panel'],
[class*='mega'][class*='menu'] {
  z-index: 10001 !important;
  position: fixed !important;
}

/* Mobile navigation drawer — full z-index coverage */
.mobile-nav-drawer,
#mobileNavPanel,
.mobile-menu,
.nav-mobile-menu,
.mobile-nav-panel,
.mobile-nav {
  z-index: 9999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Mobile menu backdrop */
.mobile-nav-backdrop,
.mobile-menu-backdrop,
.nav-mobile-backdrop,
#mobileNavBackdrop {
  z-index: 9998 !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
}

/* Hamburger button — must be above sticky header on mobile */
.nav-hamburger,
.hamburger-btn,
.mobile-menu-btn,
.nav-mobile-hamburger,
button[class*='hamburger'],
button[class*='menu-toggle'],
[class*='hamburger'] {
  z-index: 10000 !important;
  position: relative !important;
}

/* ═══════════════════════════════════════════════════════════
   BUG #2: SEARCH BUTTON COVERING MAGNIFYING GLASS ICON
   Ensure search icon is visible, z-index properly layered
   ═══════════════════════════════════════════════════════════ */

/* Search container — above other elements in header */
.nav-inline-search,
.nav-header-search,
.search-container,
.nav-search {
  z-index: 200 !important;
  position: relative !important;
  flex: 1 1 0 !important;
  max-width: 340px !important;
  min-width: 180px !important;
  margin: 0 12px !important;
}

/* Search input wrapper */
.nav-inline-search-wrap,
.nav-search-wrap,
.search-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  z-index: 1 !important;
}

/* Search icon — MUST have higher z-index than input so it's visible */
.nav-inline-search-icon,
.nav-search-icon,
.search-icon,
.nav-header-search-icon,
.nav-inline-search-wrap .search-icon,
[class*='nav-inline-search'] [class*='icon'],
[class*='search'][class*='icon'] {
  z-index: 2 !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #9ca3af !important;
  flex-shrink: 0 !important;
}

/* Search input — z-index below icon so icon stays visible */
.nav-inline-search-input,
.nav-search-input,
.search-input,
.nav-header-search-input,
input[class*='search'],
input#headerSearchInput,
input[class*='header-search'] {
  z-index: 1 !important;
  position: relative !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0 36px 0 38px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 24px !important;
  font-size: 0.875rem !important;
  color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
  /* ICON SPACE: 38px left padding ensures icon (16px wide) + 12px gap + 10px buffer */
}

/* Search input focus state */
.nav-inline-search-input:focus {
  border-color: #2563eb !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}

/* Clear button — always to the right, icon to the left (never overlap) */
.nav-inline-search-clear,
.nav-search-clear,
.search-clear,
.clear-search {
  z-index: 3 !important;
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
  background: none !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  color: #9ca3af !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

/* Hero section search — icon must be visible in the hero */
.rs-hero .nav-inline-search-icon,
.rs-hero .nav-search-icon,
.hero-search-bar .search-icon,
[class*='hero'] [class*='search-icon'] {
  z-index: 11 !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #9ca3af !important;
}

.rs-hero .nav-inline-search-input,
.hero-search-bar input {
  padding-left: 40px !important;
  z-index: 10 !important;
}

/* Ensure no button overlaps the search icon area */
.nav-inline-search button,
.nav-header-search button,
.search-container button {
  z-index: 3 !important;
  position: relative !important;
}

/* ═══════════════════════════════════════════════════════════
   BUG #1: STICKY HEADER CONTRAST
   Header has white background from critical CSS.
   Nav links must be dark text for contrast (4.5:1 minimum).
   ═══════════════════════════════════════════════════════════ */

/* Sticky header — ensure it has proper z-index and doesn't get pushed behind content */
.sr-header,
header[role='banner'],
header.sticky,
header.fixed,
#mainNav,
nav#mainNav,
.sr-sticky-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  /* White frosted glass — pass context from critical CSS in layout-head */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* When announcement bar is present, header is pushed down */
.has-announce-bar .sr-header,
.has-announce-bar header[role='banner'],
.has-announce-bar #mainNav,
.has-announce-bar nav#mainNav {
  top: 40px !important;
}

/* Nav links in sticky header — dark text on white (high contrast) */
.sr-header a,
header[role='banner'] a,
#mainNav a,
nav#mainNav a,
.sr-header .nav-link,
header[role='banner'] .nav-link,
#mainNav .nav-link {
  color: #1e293b !important; /* slate-800 — 11.5:1 on white, passes WCAG AAA */
  font-weight: 500 !important;
  text-decoration: none !important;
}

.sr-header a:hover,
header[role='banner'] a:hover,
#mainNav a:hover,
nav#mainNav a:hover {
  color: #0f172a !important; /* slate-900 — 19.5:1 on white */
}

/* Active nav link */
.sr-header a[aria-current='page'],
header[role='banner'] a[aria-current='page'],
#mainNav a[aria-current='page'] {
  color: #2563eb !important; /* blue-600 — 4.6:1 on white */
  font-weight: 700 !important;
}

/* Logo text — dark on white */
.sr-header .logo-text,
.sr-header .logo-name,
.sr-header .site-logo,
.sr-header [class*='logo'][class*='text'],
header[role='banner'] .logo-text,
header[role='banner'] .logo-name {
  color: #0f172a !important; /* slate-900 — 19.5:1 on white */
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.02em !important;
}

/* CTA buttons in header — must have high contrast */
.sr-header .sr-cta-primary,
.sr-header .sr-cta-gopro,
.sr-header .nav-cta-pro,
.sr-header [class*='cta'][class*='primary'],
header[role='banner'] .sr-cta-primary,
header[role='banner'] .nav-cta-pro {
  background: #2563eb !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
}

.sr-header .sr-cta-primary:hover,
.sr-header .nav-cta-pro:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

/* Sign in / Login link */
.sr-header .sign-in-link,
.sr-header .nav-signin,
#mainNav .sign-in-link {
  color: #374151 !important; /* slate-700 — 7.2:1 on white, passes WCAG AA */
  font-weight: 500 !important;
}

/* Announcement bar — dark text on light background */
.announce-bar,
#announceBar,
.announcement-bar,
.sr-announce-bar {
  background: #ffffff !important;
  color: #1e293b !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.announce-bar a,
#announceBar a {
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE 375px — all header elements must be readable
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 375px) {
  .sr-header,
  header[role='banner'],
  nav#mainNav {
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: 48px !important;
  }

  /* Hamburger — 44px touch target */
  .nav-hamburger,
  button[class*='hamburger'] {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 10000 !important;
  }

  /* Search input on mobile — 16px font prevents iOS zoom */
  .nav-inline-search-input {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SEARCH DROPDOWN — must be above sticky header
   ═══════════════════════════════════════════════════════════ */

.nav-inline-search-dropdown,
.nav-header-search-panel,
.search-dropdown,
[class*='search'][class*='dropdown'] {
  z-index: 1005 !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* ═══════════════════════════════════════════════════════════
   WCAG AA FOCUS STATES — keyboard navigation must be visible
   ═══════════════════════════════════════════════════════════ */

.sr-header a:focus-visible,
header[role='banner'] a:focus-visible,
#mainNav a:focus-visible,
.sr-header button:focus-visible,
header[role='banner'] button:focus-visible,
#mainNav button:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}