/*
 * header-clean-1586846.css — Task #1586846
 *
 * Owns: ALL header/nav styling for both desktop and mobile.
 * Does NOT own: Page content, footer, popups, mobile menu accordion content.
 *
 * This is the SINGLE SOURCE OF TRUTH for header layout.
 * Previous tasks (#1583129, #1584802, #1585361, #1586215) each added
 * conflicting CSS files that fought each other. This file replaces ALL of them.
 *
 * Specificity strategy: html body header#hnHeader (0,1,3 + ID = very high)
 * plus !important on display/visibility props to beat async-loaded design-system.
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. DESKTOP HEADER (≥1024px) — All nav items visible, horizontal layout
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Header container */
  html body header#hnHeader {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Inner flex container */
  html body header#hnHeader .hn-inner {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 1.25rem !important;
    gap: 0.5rem !important;
    height: 100% !important;
    overflow: visible !important;
  }

  /* Nav container — flex, visible, takes remaining space */
  html body header#hnHeader nav#hnNav,
  html body header#hnHeader .hn-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 !important;
    align-items: center !important;
    gap: 0 !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* Individual nav items */
  html body header#hnHeader .hn-nav-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    height: 100% !important;
    position: relative !important;
  }

  /* Nav buttons and links */
  html body header#hnHeader .hn-nav-btn,
  html body header#hnHeader .hn-nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.3rem !important;
    padding: 0 0.75rem !important;
    height: 100% !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
  }

  /* Pricing link — emerald green */
  html body header#hnHeader .hn-nav-link--pricing {
    color: #00875A !important;
    -webkit-text-fill-color: #00875A !important;
    font-weight: 700 !important;
  }

  /* Nav button hover */
  html body header#hnHeader .hn-nav-btn:hover,
  html body header#hnHeader .hn-nav-link:hover {
    color: #00875A !important;
    -webkit-text-fill-color: #00875A !important;
  }

  /* Chevron icons */
  html body header#hnHeader .hn-nav-chevron {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* Right section (search, login, CTA) */
  html body header#hnHeader .hn-right {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
  }

  /* Search */
  html body header#hnHeader .hn-search {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Login link */
  html body header#hnHeader .hn-login {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    pointer-events: auto !important;
  }

  /* CTA button */
  html body header#hnHeader .hn-cta {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: #00875A !important;
    pointer-events: auto !important;
  }

  /* Logo */
  html body header#hnHeader .hn-logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  html body header#hnHeader .hn-logo-name {
    color: #0A0F1E !important;
    -webkit-text-fill-color: #0A0F1E !important;
  }

  /* Hide mobile-only elements */
  html body header#hnHeader .hn-hamburger,
  html body header#hnHeader #hnHamburger,
  html body header#hnHeader .hn-mobile-pricing {
    display: none !important;
  }

  /* Mega menu panels — hidden by default, shown on .open */
  html body .hn-mega {
    display: none;
  }
  html body .hn-mega.open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. NARROW DESKTOP (1024px–1440px) — Compressed spacing
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1440px) {
  html body header#hnHeader .hn-inner {
    gap: 0.375rem !important;
  }
  html body header#hnHeader .hn-nav-btn,
  html body header#hnHeader .hn-nav-link {
    padding: 0 0.5rem !important;
    font-size: 0.8125rem !important;
  }
  html body header#hnHeader .hn-right {
    gap: 0.375rem !important;
    flex-shrink: 1 !important;
  }
  html body header#hnHeader .hn-search {
    width: 140px !important;
    min-width: 100px !important;
  }
  html body header#hnHeader .hn-login {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 0.8125rem !important;
  }
  html body header#hnHeader .hn-cta {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 0.8125rem !important;
  }
}

/* Even tighter at 1024–1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body header#hnHeader .hn-nav-btn,
  html body header#hnHeader .hn-nav-link {
    padding: 0 0.375rem !important;
    font-size: 0.75rem !important;
  }
  html body header#hnHeader .hn-right {
    gap: 0.25rem !important;
  }
  html body header#hnHeader .hn-search {
    width: 120px !important;
    min-width: 80px !important;
  }
  html body header#hnHeader .hn-login {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.75rem !important;
  }
  html body header#hnHeader .hn-cta {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 0.75rem !important;
  }
  html body header#hnHeader .hn-logo {
    margin-right: 0.5rem !important;
  }
  html body header#hnHeader .hn-inner {
    padding: 0 1rem !important;
  }
  html body header#hnHeader nav#hnNav {
    gap: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. MOBILE (<1024px) — Hamburger menu, hide desktop nav
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Hide desktop nav elements */
  html body header#hnHeader nav#hnNav,
  html body header#hnHeader .hn-nav,
  html body header#hnHeader .hn-right,
  html body .hn-mega {
    display: none !important;
  }

  /* Show hamburger */
  html body header#hnHeader .hn-hamburger,
  html body header#hnHeader #hnHamburger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Mobile pricing link */
  html body header#hnHeader .hn-mobile-pricing {
    display: flex !important;
    visibility: visible !important;
  }

  /* Header height on mobile */
  html body header#hnHeader {
    height: 60px !important;
    position: sticky !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. FOOTER LIVE TICKER — proper text spacing
   ══════════════════════════════════════════════════════════════════════════ */
/* Enforce normal word/letter spacing in ticker messages —
   CSS reset rules elsewhere collapse whitespace in the ticker bar */
#sr-live-ticker,
#sr-live-ticker * {
  word-spacing: normal !important;
  letter-spacing: normal !important;
}
#sr-live-ticker #sr-ticker-msg {
  letter-spacing: 0.01em !important;
  word-spacing: 0.15em !important;
  padding: 0 20px !important;
}
/* Ensure icon emoji has right margin */
#sr-live-ticker #sr-ticker-msg > span:first-child {
  margin-right: 6px !important;
}
/* Strong text inside ticker gets slight extra spacing for readability */
#sr-live-ticker strong {
  margin: 0 2px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. RESUME YOUR CLAIM POPUP — ensure dismiss button is clickable
   ══════════════════════════════════════════════════════════════════════════ */
#srResumeBanner {
  z-index: 9200 !important;
}
#srResumeDismiss {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 9201 !important;
  min-width: 36px !important;
  min-height: 36px !important;
}