/* ============================================================
   HearingHealth.pro — hh-nav.css
   Multi-parent Mega Menu & Double-accordion Mobile Drawer
   ============================================================ */

:root {
  --hh-v: #4F46E5;
  --hh-v-d: #4338CA;
  --hh-v-l: #EEF2FF;
  --hh-v-ll: #F5F3FF;
  --hh-ink: #111827;
  --hh-ink2: #374151;
  --hh-muted: #6B7280;
  --hh-border: rgba(79, 70, 229, 0.1);
  --hh-h: 68px;
  --hh-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hh-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ── 1. STICKY HEADER ─────────────────────────────────────── */
header.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--hh-border) !important;
  transition: box-shadow 0.3s ease;
}

header.site-header.hh-scrolled {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.inside-header {
  padding-inline: 1.875rem !important;
}


/* ── 2. DESKTOP MEGA MENU ─────────────────────────────────── */
@media (min-width: 1025px) {
  #site-navigation,
  #site-navigation .inside-navigation,
  #site-navigation .main-nav,
  #site-navigation ul#menu-main {
    overflow: visible !important;
  }

  #site-navigation ul#menu-main>li {
    position: relative !important;
    /* Anchored to list item */
  }

  /* FIX #1 (FOUC): Hide the raw GP sub-menu before JS runs so users never see
     the default dropdown flash during the DOMContentLoaded build phase.
     The mega div is injected synchronously, so this guard is only needed for
     the brief window between first paint and script execution. */
  #site-navigation ul#menu-main>li.menu-item-has-children>ul.sub-menu {
    display: none !important;
  }



  .hh-mega {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    right: auto;
    width: min(1100px, calc(100vw - 32px));
    background: #ffffff;
    border: 1px solid var(--hh-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(22,35,63,0.14);
    z-index: 1000;

    padding: 10px 0 0 10px;
    overflow-x: hidden;
  }

  li.hh-mega-open .hh-mega {
    display: flex !important;
    gap: 0px;
    justify-content: center;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: hhFadeIn 0.2s ease forwards;
  }

  .hh-mega-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    flex: 1;
    max-width: 1000px;
    /* Move scrollbar strictly to links */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 40px;
    /* Prevent scrollbar overlapping content */
  }

  .hh-mega-group.is-large .hh-group-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
  }

  .hh-mega-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hh-v);
    margin-bottom: 12px;
    border-bottom: 2px solid var(--hh-v-l);
    padding-bottom: 4px;
  }

  .hh-group-list a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 1rem;
    color: var(--hh-ink2);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
  }

  .hh-group-list a:nth-child(odd) {
    background-color: #F9FAFB;
  }

  .hh-group-list a:hover {
    color: var(--hh-v);
    background-color: var(--hh-v-l);
  }

  .hh-arrow {
    display: none;
  }

  /* Editorial Column */
  .hh-mega-image {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 24px;
    background: #F9FAFB;
    border-left: 1px solid var(--hh-border);
    flex-shrink: 0;
  }

  .hh-mega-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    text-decoration: none;
    color: #ffffff !important;
    transition: transform 0.2s var(--hh-ease), box-shadow 0.2s ease;
  }

  .hh-mega-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .hh-mega-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 70%);
    z-index: 1;
  }

  .hh-mega-card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-inline: 10px;
  }

  .hh-mega-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #ffffff;
    color: #1a1a1a;
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .hh-mega-editorial-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
    display: block;
  }

  .hh-mega-editorial-link {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .hh-mega-editorial-link:hover {
    opacity: 1;
    text-decoration: underline;
  }
}

@keyframes hhFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ── 2b. SEARCH ICON FIX ─────────────────────────────────── */
.menu-bar-item.search-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: #f3f4f6 !important;
  border-radius: 10px !important;
  color: var(--hh-muted) !important;
  transition: all 0.2s ease !important;
}

.menu-bar-item.search-item a:hover {
  background: var(--hh-v-l) !important;
  color: var(--hh-v) !important;
}

/* ── 3. MOBILE DRAWER ─────────────────────────────────────── */
#hh-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  z-index: 100000;
  transform: translateX(100%);
  /* FIX #6: will-change promotes the drawer to its own compositor layer before
     the first open, preventing a jank frame on the initial slide-in animation. */
  will-change: transform;
  transition: transform 0.3s var(--hh-ease);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

#hh-drawer.open {
  transform: translateX(0);
}

#hh-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#hh-drawer-overlay.open {
  display: block;
  opacity: 1;
}

.hh-drawer-header {
  padding: 20px;
  border-bottom: 1px solid var(--hh-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hh-drawer-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.hh-drawer-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--hh-muted);
}

.hh-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0;
}

.hh-drawer-search form {
  margin-bottom: 20px;
}

.hh-drawer-search input {
  display: block;
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--hh-border);
  border-radius: 8px !important;
  background: var(--hh-v-ll);
  font-size: 0.95rem;
}

/* Mobile Accordion Styles */
.hh-nav-wrap {
  border-top: 1px solid var(--hh-border);
}

.hh-drawer-home-link a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  text-decoration: none;
  font-weight: 600;
  color: var(--hh-ink);
  border-bottom: 1px solid var(--hh-border);
}

.hh-nav-parent {
  border-bottom: 1px solid var(--hh-border);
}

.hh-nav-parent-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--hh-ink);
}

.hh-nav-parent-trigger:hover {
  background: var(--hh-v-l);
}

.hh-nav-groups-wrap {
  display: none;
  background: var(--hh-v-ll);
}

.hh-nav-parent.is-open>.hh-nav-groups-wrap {
  display: block;
}

.hh-nav-parent.is-open>.hh-nav-parent-trigger .toggle-icon {
  transform: rotate(180deg);
}

.hh-nav-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hh-nav-group-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 12px 35px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hh-muted);
  cursor: pointer;
}

.hh-nav-group.is-open>.hh-nav-items-wrap {
  display: flex;
  flex-direction: column;
}

.hh-nav-group.is-open>.hh-nav-group-trigger .toggle-icon {
  transform: rotate(180deg);
}

.hh-nav-items-wrap {
  display: none;
  padding-bottom: 10px;
}

.hh-nav-item-link {
  padding: 8px 20px 8px 50px;
  text-decoration: none;
  font-size: 1rem;
  color: var(--hh-ink2);
}

.hh-nav-item-link:hover {
  color: var(--hh-v);
}

.hh-drawer-footer {
  padding: 20px;
  border-top: 1px solid var(--hh-border);
}

.hh-drawer-cta {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--hh-v);
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}

/* ── 4. RESPONSIVE UTILITIES ──────────────────────────────── */
/* Mobile + tablet drawer: ≤ 1024px */
@media (max-width: 1024px) {

  /* Hide search icon in header */
  .menu-bar-item a[aria-label="Open search"] {
    display: none !important;
  }

  /* Hide GP desktop nav — we use the drawer instead */
  #site-navigation .main-nav {
    display: none !important;
  }

  /* Ensure hamburger is visible but prevent duplicates when GP adds extra toggles */
  .menu-toggle {
    display: block !important;
  }

  .has-menu-bar-items>.inside-navigation>.menu-toggle {
    display: none !important;
  }

  /* hide the plain anchor link that appears in the drawer for simple items */
  div.hh-nav-parent > a.hh-nav-parent-trigger {
    display: none !important;
  }
}

/* Hide drawer on true desktop only */
@media (min-width: 1025px) {

  #hh-drawer,
  #hh-drawer-overlay {
    display: none !important;
  }
}

/* ── 5. CTA BUTTON (Desktop Header) ───────────────────────── */
.hh-cta-btn {
  display: inline-block;
  padding: 8px 20px;
  background: var(--hh-v);
  color: #ffffff;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  margin-left: 15px;
  transition: background 0.2s;
}

.hh-cta-btn:hover {
  background: var(--hh-v-d);
}