/* ================================================================
   AVENGERHUB NAVIGATION v2.0
   Floating glassmorphism header, mega menu, mobile drawer
   ================================================================ */

/* ── FLOATING HEADER ─────────────────────────────────────────── */

#header,
.header-main {
  background: var(--av-glass-bg) !important;
  backdrop-filter: var(--av-glass-heavy);
  -webkit-backdrop-filter: var(--av-glass-heavy);
  border-bottom: 1px solid var(--av-color-border);
  transition: var(--av-transition);
  z-index: var(--av-z-sticky);
}

/* When scrolled / sticky */
#header.sticky-header .header-main,
#header.sticky-header .header-bottom {
  background: rgba(8, 11, 18, 0.92) !important;
  backdrop-filter: var(--av-glass-heavy);
  -webkit-backdrop-filter: var(--av-glass-heavy);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--av-color-border);
  transition: background-color 0.3s var(--av-ease-out),
              box-shadow 0.3s var(--av-ease-out);
}

/* Header bottom bar (menu bar) */
.header-bottom {
  background: transparent !important;
}

/* ── SITE LOGO ───────────────────────────────────────────────── */

.header-logo img,
#header .logo img {
  max-height: 42px;
  width: auto;
  transition: var(--av-transition);
}

.header-logo a:hover img,
#header .logo a:hover img {
  filter: brightness(1.15);
}

/* ── MAIN MENU LINKS ─────────────────────────────────────────── */

.main-menu > li > a,
.header-bottom .menu > li > a,
#header .main-menu > li > a {
  color: var(--av-color-text-soft) !important;
  font-family: var(--av-font-primary);
  font-size: var(--av-text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  transition: color var(--av-duration-fast) var(--av-ease-out);
  position: relative;
}

.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a,
.header-bottom .menu > li > a:hover {
  color: var(--av-color-heading) !important;
}

/* Active indicator — animated underline */
.main-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--av-gradient-accent);
  border-radius: var(--av-radius-full);
  transition: width 0.3s var(--av-ease-out), left 0.3s var(--av-ease-out);
}

.main-menu > li > a:hover::after,
.main-menu > li.current-menu-item > a::after {
  width: 70%;
  left: 15%;
}

/* ── MEGA DROPDOWN ───────────────────────────────────────────── */

.main-menu .wide .popup,
.mega-menu .sub-menu,
.main-menu .narrow .popup,
.sub-menu {
  background: var(--av-color-surface) !important;
  backdrop-filter: var(--av-glass-heavy);
  -webkit-backdrop-filter: var(--av-glass-heavy);
  border: 1px solid var(--av-color-border);
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-xl);
  padding: var(--av-spacing-md);
  animation: av-fadeInUp 0.2s var(--av-ease-out);
}

.main-menu .wide .popup a,
.mega-menu .sub-menu a,
.sub-menu a {
  color: var(--av-color-text-soft) !important;
  font-size: var(--av-text-sm);
  padding: 8px 12px;
  border-radius: var(--av-radius-sm);
  transition: var(--av-transition);
}

.main-menu .wide .popup a:hover,
.mega-menu .sub-menu a:hover,
.sub-menu a:hover {
  color: var(--av-color-heading) !important;
  background: var(--av-color-accent-soft);
}

/* ── HEADER ACTIONS (search, cart, account icons) ────────────── */

.header-icons a,
.header-right a,
.shopping-cart-wrap a,
.my-account-wrap a,
.search-toggle {
  color: var(--av-color-text-soft) !important;
  transition: color var(--av-duration-fast) var(--av-ease-out);
  position: relative;
}

.header-icons a:hover,
.header-right a:hover,
.shopping-cart-wrap a:hover,
.search-toggle:hover {
  color: var(--av-color-heading) !important;
}

/* Cart count badge */
.cart-count,
.shopping-cart-wrap .cart-items,
.cart-head .cart-count {
  background: var(--av-color-accent) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--av-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mini cart dropdown */
.porto_cart_dropdown,
.cart-popup {
  background: var(--av-color-surface) !important;
  border: 1px solid var(--av-color-border);
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-xl);
}

/* ── SEARCH BAR ──────────────────────────────────────────────── */

.searchform-fields input[type="search"],
.search-form input[type="search"],
.header-search input {
  background: var(--av-color-surface) !important;
  color: var(--av-color-text) !important;
  border: 1px solid var(--av-color-border) !important;
  border-radius: var(--av-radius-full) !important;
  padding: 10px 20px;
  font-family: var(--av-font-primary);
  font-size: var(--av-text-sm);
  transition: var(--av-transition);
}

.searchform-fields input[type="search"]:focus,
.search-form input[type="search"]:focus,
.header-search input:focus {
  border-color: var(--av-color-accent) !important;
  box-shadow: 0 0 0 3px var(--av-color-accent-soft) !important;
  outline: none;
}

/* ── MOBILE TOGGLE ───────────────────────────────────────────── */

.mobile-toggle,
#mobile-menu,
.menu-mobile-toggle,
.mobile-nav-toggle {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--av-color-text) !important;
}

/* ── MOBILE MENU DRAWER ──────────────────────────────────────── */

.mobile-nav-panel,
.mobile-sidebar,
#mobile-nav {
  background: var(--av-color-surface) !important;
  border-right: 1px solid var(--av-color-border);
}

.mobile-nav-panel a,
.mobile-sidebar a,
#mobile-nav a {
  color: var(--av-color-text) !important;
  padding: 12px 20px;
  border-bottom: 1px solid var(--av-color-border);
  font-size: var(--av-text-base);
}

.mobile-nav-panel a:hover,
#mobile-nav a:hover {
  background: var(--av-color-accent-soft);
  color: var(--av-color-heading) !important;
}

/* Off-canvas backdrop */
.mmenu-overlay,
.sidebar-overlay,
.mobile-nav-overlay {
  background-color: var(--av-color-overlay) !important;
}

/* ── TOP BAR ─────────────────────────────────────────────────── */

.header-top,
.top-links,
.header-top .top-links {
  font-size: var(--av-text-xs);
  color: var(--av-color-muted);
  background: var(--av-color-bg-alt) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.06);
}

.header-top a {
  color: var(--av-color-muted) !important;
}

.header-top a:hover {
  color: var(--av-color-accent) !important;
}

/* ── BREADCRUMB BAR ──────────────────────────────────────────── */

.page-top,
.page-header,
.woocommerce-breadcrumb {
  background: var(--av-color-bg-alt) !important;
  border-bottom: 1px solid var(--av-color-border);
  padding: var(--av-spacing-md) 0;
}

.woocommerce-breadcrumb,
.breadcrumbs-wrap {
  color: var(--av-color-muted);
  font-size: var(--av-text-xs);
}

.woocommerce-breadcrumb a,
.breadcrumb a {
  color: var(--av-color-text-soft) !important;
}

.woocommerce-breadcrumb a:hover,
.breadcrumb a:hover {
  color: var(--av-color-accent) !important;
}