/**
 * Bright Health Alliance - Global Header & Footer Stylesheet
 * 
 * Loaded on ALL front-end pages to ensure header and footer look perfect across the entire website.
 * Scoped specifically to header and footer containers so it never interferes with other page content.
 *
 * @package BrightHealthAlliance
 */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */
:root {
  --navy: #07171B;
  --navy-surface: #0E2328;
  --navy-card: #132E35;
  --navy-border: #1C3E47;
  
  --teal: #087F83;
  --teal-dark: #066568;
  --bright-teal: #18B8B0;
  --teal-light: #E6F6F5;
  --teal-glow: rgba(24, 184, 176, 0.28);
  
  --magenta: #D61B72;
  --magenta-hover: #BD1361;
  --magenta-light: #FDEBF4;
  --magenta-glow: rgba(214, 27, 114, 0.32);
  
  --soft-bg: #F5F8F8;
  --soft-card: #FFFFFF;
  --white: #FFFFFF;
  
  --primary-text: #102126;
  --muted-text: #536A70;
  --light-text: #96ACB1;
  --border-color: #E2ECEE;
  --border-subtle: #EEF4F5;
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;
  
  --shadow-sm: 0 4px 12px rgba(7, 23, 27, 0.04);
  --shadow-md: 0 10px 28px rgba(7, 23, 27, 0.07);
  --shadow-lg: 0 20px 45px rgba(7, 23, 27, 0.11);
  --shadow-glow: 0 0 35px rgba(24, 184, 176, 0.22);
  
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-handwriting: 'Caveat', cursive;
  
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* BHA legacy & widget tokens */
  --bha-primary: #07171B;
  --bha-secondary: #087F83;
  --bha-accent: #D61B72;
  --bha-dark: #102126;
  --bha-muted: #536A70;
  --bha-soft-teal: #E6F6F5;
  --bha-soft-pink: #FDEBF4;
  --bha-white: #FFFFFF;
  --bha-border: #E2ECEE;
  --bha-font: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

/* ==========================================================================
   RESET & BOX-SIZING (STRICTLY SCOPED TO HEADER & FOOTER)
   ========================================================================== */
.site-header,
.site-header *,
.site-header *::before,
.site-header *::after,
.bha-sticky-header,
.bha-sticky-header *,
.bha-sticky-nav,
.bha-sticky-nav *,
.bha-header-section,
.bha-header-section *,
.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after,
#site-footer,
#site-footer *,
.bha-footer-section,
.bha-footer-section * {
  box-sizing: border-box;
}

/* ==========================================================================
   01. GLOBAL HEADER STYLES
   ========================================================================== */
.site-header,
.bha-sticky-header,
.bha-sticky-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: var(--transition-normal) !important;
  width: 100% !important;
}

.site-header.scrolled,
.bha-sticky-header.scrolled,
.bha-sticky-nav.scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--shadow-sm) !important;
  border-bottom-color: var(--border-color) !important;
}

.header-container,
.bha-header-inner,
.bha-header-inner > .e-con-inner,
.bha-header-section > .e-con-inner {
  display: flex !important;
  --display: flex !important;
  flex-direction: row !important;
  --flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 80px;
  min-height: 70px;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100% !important;
}

/* Logo */
.header-logo,
.bha-header-logo-box {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-right: 40px;
  width: auto !important;
  max-width: 220px !important;
}

.header-logo img,
.bha-header-logo-img img,
.bha-logo-img img,
.header-logo .elementor-widget-image img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Nav Links */
.header-nav,
.bha-header-nav-box {
  display: flex !important;
  align-items: center !important;
  gap: 24px;
  flex: 1 1 auto !important;
  justify-content: center !important;
  width: auto !important;
}

.bha-desktop-nav,
.bha-nav-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-link,
.bha-nav-link {
  font-family: var(--font-main) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--primary-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 0 !important;
  position: relative !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: var(--transition-fast) !important;
}

.nav-link:hover,
.nav-link.active,
.bha-nav-link:hover,
.bha-nav-link.active {
  color: var(--teal) !important;
}

.nav-link.has-dropdown svg {
  transition: transform var(--transition-fast);
}

.nav-link.has-dropdown:hover svg {
  transform: rotate(180deg);
}

/* Header Right Actions */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px;
  flex-shrink: 0 !important;
}

.search-toggle-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--primary-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  transition: var(--transition-fast) !important;
}

.search-toggle-btn:hover {
  background-color: var(--soft-bg) !important;
  color: var(--teal) !important;
}

.btn-client-login,
.bha-btn-header .elementor-button,
.elementor-widget-button.bha-btn-header .elementor-button {
  padding: 9px 20px !important;
  font-family: var(--font-main) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--border-color) !important;
  background: transparent !important;
  border-radius: var(--radius-pill) !important;
  color: var(--primary-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: var(--transition-fast) !important;
  cursor: pointer !important;
}

.btn-client-login:hover,
.bha-btn-header .elementor-button:hover,
.elementor-widget-button.bha-btn-header .elementor-button:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  background-color: var(--teal-light) !important;
}

.hamburger-btn {
  display: none;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  color: var(--primary-text) !important;
}

.hamburger-btn svg {
  display: block;
}

/* ==========================================================================
   02. GLOBAL FOOTER STYLES
   ========================================================================== */
.site-footer,
#site-footer,
.bha-footer-section {
  background-color: var(--navy) !important;
  color: #B2C9CE !important;
  padding: 80px 24px 36px 24px !important;
  border-top: 1px solid var(--navy-border) !important;
  font-family: var(--font-body) !important;
  width: 100% !important;
}

.footer-top-grid,
.bha-footer-grid,
.bha-footer-grid > .e-con-inner {
  display: grid !important;
  --display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
  gap: 40px !important;
  margin: 0 auto 60px auto !important;
  max-width: 1280px !important;
  width: 100% !important;
}

.footer-brand-col img {
  height: 50px !important;
  width: auto !important;
  margin-bottom: 18px !important;
  filter: brightness(0) invert(1) !important;
  display: block !important;
}

.footer-brand-line {
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: #A0BAC0 !important;
  margin: 0 0 24px 0 !important;
  font-family: var(--font-body) !important;
}

.footer-col h4,
.bha-footer-col h4 {
  color: var(--white) !important;
  font-family: var(--font-main) !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 18px 0 !important;
}

.footer-col ul,
.bha-footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-col ul li,
.bha-footer-links li {
  margin-bottom: 10px !important;
}

.footer-col ul li a,
.bha-footer-links a {
  color: #A0BAC0 !important;
  font-size: 0.9rem !important;
  font-family: var(--font-body) !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: var(--transition-fast) !important;
}

.footer-col ul li a:hover,
.bha-footer-links a:hover {
  color: var(--bright-teal) !important;
  padding-left: 4px !important;
}

.footer-social-row {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.social-icon-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: var(--transition-fast) !important;
}

.social-icon-btn:hover {
  background: var(--bright-teal) !important;
  color: var(--navy) !important;
  transform: translateY(-2px) !important;
}

.social-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Newsletter Box */
.bha-newsletter-box {
  display: flex !important;
  margin-top: 14px !important;
}

.bha-newsletter-input {
  flex: 1 !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px 0 0 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  font-size: 0.88rem !important;
  outline: none !important;
}

.bha-newsletter-btn {
  background: #DB3D87 !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 0 16px !important;
  border-radius: 0 6px 6px 0 !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: var(--transition-fast) !important;
}

.bha-newsletter-btn:hover {
  background: #BD1361 !important;
}

/* Footer Bottom Bar */
.footer-bottom-bar {
  padding-top: 30px !important;
  border-top: 1px solid var(--navy-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.85rem !important;
  color: #7D9B9F !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.footer-legal-links {
  display: flex !important;
  gap: 20px !important;
}

.footer-legal-links a {
  color: #7D9B9F !important;
  text-decoration: none !important;
  transition: var(--transition-fast) !important;
}

.footer-legal-links a:hover {
  color: var(--white) !important;
}

/* ==========================================================================
   03. RESPONSIVE MEDIA QUERIES FOR HEADER & FOOTER
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-top-grid,
  .bha-footer-grid,
  .bha-footer-grid > .e-con-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
}

@media (max-width: 768px) {
  .header-nav,
  .bha-header-nav-box,
  .btn-client-login {
    display: none !important;
  }

  .hamburger-btn {
    display: block !important;
  }

  .footer-top-grid,
  .bha-footer-grid,
  .bha-footer-grid > .e-con-inner {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .footer-bottom-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}