/* ========= Theme Variables ========= */
:root {
  --header-solid-link: #1a1a1a;
  --header-solid-link-hover: #000000;
  --header-solid-icon: #1a1a1a;
  --header-accent: #b80c09; /* brand red for active parent + hover */
}

/* ========= Base / Transitions ========= */
.kb-header-container { }

/* ====== OPEN/HOVER STATE TRIGGER (header goes solid white) ======
   - Submenu hovered
   - Mega menu trigger hovered
   - Any trigger has aria-expanded="true" (clicked open)
*/
.kb-header-container:has(.sub-menu:hover),
.kb-header-container:has(.kadence-menu-mega-enabled:hover),
.kb-header-container:has([aria-expanded="true"]) {
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Kill transparent styles: force link colors like the solid header while open */
.kb-header-container:has(.sub-menu:hover) .menu a,
.kb-header-container:has(.kadence-menu-mega-enabled:hover) .menu a,
.kb-header-container:has([aria-expanded="true"]) .menu a {
  color: var(--header-solid-link) !important;
}
.kb-header-container:has(.sub-menu:hover) .menu a:hover,
.kb-header-container:has(.kadence-menu-mega-enabled:hover) .menu a:hover,
.kb-header-container:has([aria-expanded="true"]) .menu a:hover {
  color: var(--header-accent) !important;
}

/* Icons/toggles (search, cart, hamburger, arrows) go solid color while header is open */
.kb-header-container:has(.sub-menu:hover) .kadence-svg-icon,
.kb-header-container:has(.kadence-menu-mega-enabled:hover) .kadence-svg-icon,
.kb-header-container:has([aria-expanded="true"]) .kadence-svg-icon,
.kb-header-container:has(.sub-menu:hover) .header-search-toggle,
.kb-header-container:has(.kadence-menu-mega-enabled:hover) .header-search-toggle,
.kb-header-container:has([aria-expanded="true"]) .header-search-toggle,
.kb-header-container:has(.sub-menu:hover) .menu-toggle,
.kb-header-container:has(.kadence-menu-mega-enabled:hover) .menu-toggle,
.kb-header-container:has([aria-expanded="true"]) .menu-toggle,
.kb-header-container:has(.sub-menu:hover) .header-cart-btn,
.kb-header-container:has(.kadence-menu-mega-enabled:hover) .header-cart-btn,
.kb-header-container:has([aria-expanded="true"]) .header-cart-btn {
  color: var(--header-solid-icon) !important;
  fill: var(--header-solid-icon) !important;
}

/* Header buttons (if you have any) */
.kb-header-container:has(.sub-menu:hover) .header-button a,
.kb-header-container:has(.kadence-menu-mega-enabled:hover) .header-button a,
.kb-header-container:has([aria-expanded="true"]) .header-button a {
  color: var(--header-solid-link) !important;
  border-color: rgba(0,0,0,.15) !important;
  background: transparent !important;
}

/* If using a transparent header, also flip styles while open */
.transparent-header .kb-header-container:has(.sub-menu:hover),
.transparent-header .kb-header-container:has(.kadence-menu-mega-enabled:hover),
.transparent-header .kb-header-container:has([aria-expanded="true"]) {
  background: #fff !important;
}

/* Optional logo swap while open (adjust selectors to your logo classes) */
.transparent-header .kb-header-container:has(.sub-menu:hover) .default-logo,
.transparent-header .kb-header-container:has(.kadence-menu-mega-enabled:hover) .default-logo,
.transparent-header .kb-header-container:has([aria-expanded="true"]) .default-logo { display: inline-block !important; }
.transparent-header .kb-header-container:has(.sub-menu:hover) .transparent-logo,
.transparent-header .kb-header-container:has(.kadence-menu-mega-enabled:hover) .transparent-logo,
.transparent-header .kb-header-container:has([aria-expanded="true"]) .transparent-logo { display: none !important; }

/* Optional utility (from your snippet) */
.white-link .kb-nav-link-content,
.white-link a { color: white !important; }
.white-link .kb-nav-link-content:hover,
.white-link a:hover { text-decoration: underline; }

/* ========= Keep the PARENT link highlighted while its mega/submenu is active ========= */
/* Parent top-level link stays red while its submenu/mega is hovered or open */
.kb-header-container .menu > li:where(.menu-item-has-children, .kadence-menu-mega-enabled)
:is(:hover, :focus-within, :has(.sub-menu:hover), :has(.kb-adv-nav__submenu:hover), :has(.kb-adv-nav__submenu--expanded), :has([aria-expanded="true"])) > a,
.kb-header-container .menu > li:where(.menu-item-has-children, .kadence-menu-mega-enabled)
:is(:hover, :focus-within, :has(.sub-menu:hover), :has(.kb-adv-nav__submenu:hover), :has(.kb-adv-nav__submenu--expanded), :has([aria-expanded="true"])) > a .kb-nav-link-content {
  color: var(--header-accent) !important;
}

/* Parent arrow icon also red while active */
.kb-header-container .menu > li:where(.menu-item-has-children, .kadence-menu-mega-enabled)
:is(:hover, :focus-within, :has(.sub-menu:hover), :has(.kb-adv-nav__submenu:hover), :has(.kb-adv-nav__submenu--expanded), :has([aria-expanded="true"]))
  :is(> a .kadence-svg-icon,
      > .dropdown-nav-toggle .kadence-svg-icon,
      > .nav-drop-toggle .kadence-svg-icon,
      > a .kb-nav-arrow) {
  color: var(--header-accent) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ========= Mega/Submenu link behavior ========= */
/* Inner mega/submenu links: neutral by default */
.kb-header-container :is(.sub-menu, .kb-adv-nav__submenu) a {
  color: var(--header-solid-link) !important;
}
/* Red only on hover/focus */
.kb-header-container :is(.sub-menu, .kb-adv-nav__submenu) a:is(:hover, :focus) {
  color: var(--header-accent) !important;
}

.sticky-timeline {
	position: sticky;
	top: 30vh;
}