/* ===== HEADER.CSS - REFACTORED AND ORGANIZED ===== */

/* ===== 1. BASE HEADER STRUCTURE ===== */

#trueHeader {
  background-color: #FFF;
  z-index: 9999;
  padding: 20px 96px;
}

#trueHeader .blog-flex {
  align-items: anchor-center;
  gap: 0;
}

#mega-navigation {
  z-index: 9998;
}

#mega-navigation .container,
#trueHeader .container {
  margin: 0;
  width: 100%;
  display: flex;
  max-width: 100% !important;
  justify-content: center;
}

.wrapper-nav {
  border-top: none;
  box-shadow: none;
}

#scroll-logo {
  height: 32px;
  width: 208px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.container-fluid, 
.navbar, 
.site-header {
  position: relative;
  align-content: center;
  padding: 0;
}

/* ===== 2. NAVIGATION BASE STRUCTURE ===== */
ul.nav.navbar-nav {
  display: flex;
  width: 100%;
}

.navbar-nav > li {
  margin-right: 0px;
  position: relative;
  display: flex;
  gap: 3px;
}

.nav.navbar-nav > li {
  position: relative;
}

/* Ensure first menu item is clickable */
.nav.navbar-nav > li:first-child > a {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 3;
}

/* Ensure all main navigation items are clickable */
.nav.navbar-nav > li > a {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 3;
}

/* ===== 3. NAVIGATION LINKS STYLING ===== */
#menu-mega-menu-images.navbar-nav {
  gap: 12px;
  align-items: center;
}


#menu-mega-menu-images.navbar-nav>li>.dropdown-menu,
#menu-new-home-menu.navbar-nav>li>.dropdown-menu {
  overflow: scroll;
  max-height: 80vh;
  margin: 18px 0;
}

#menu-mega-menu-images.navbar-nav>li,
#menu-new-home-menu.navbar-nav>li { 
  margin: 0 !important;
  align-items: anchor-center;
  height: fit-content;
}

#menu-mega-menu-images.navbar-nav > li > a,
#menu-new-home-menu.navbar-nav > li > a {
  font-size: 14px;
}


.container .navbar-default .navbar-nav > li > a,
#site-navigation .current-menu-item > a,
.dropdown-menu > li > a {
  display: flex;
  text-transform: none;
  white-space: nowrap;
  letter-spacing: normal;
  color: var(--Colors-neutrals-950, #313035);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  transition: color 0.2s ease;
}

#site-navigation .current-menu-item > a {
  border-bottom: none;
}

.nav > li > a:hover {
  border-bottom: none;
}

/* ===== 4. MENU TOGGLE ICONS ===== */
.button-cta .menu-toggle-icon {
  position: absolute;
  left: 20px
}

.menu-toggle-icon {
  display: flex;
  align-items: center;
}

.nav.navbar-nav > li > .menu-toggle-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
}

.nav.navbar-nav > li > .menu-toggle-icon:hover,
.nav.navbar-nav > li > .menu-toggle-icon:focus {
  background: transparent !important;
  outline: none;
}

/* ===== 5. MEGA MENU STRUCTURE ===== */
.nav.navbar-nav > li.is-mega-parent > a {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  border-bottom: 0;
}

.nav.navbar-nav > li.is-mega-parent > .mega-panel {
  position: absolute;
  top: 100%;
  left: 200%;
  transform: translateX(-50%);
  width: min(100vw, 1156px);
  background: #fff;
  padding: 24px 96px;
  box-shadow: none;
  border-radius: 0;
  gap: 28px;
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 999;
}

/* Mega menu column variations */
.nav.navbar-nav > li.is-mega-parent > .mega-panel.cols-1 { --cols: 1; }
.nav.navbar-nav > li.is-mega-parent > .mega-panel.cols-2 { --cols: 2; }
.nav.navbar-nav > li.is-mega-parent > .mega-panel.cols-3 { --cols: 3; }

/* ===== 6. MEGA MENU VISIBILITY & HOVER STATES ===== */
.nav.navbar-nav > li.is-mega-parent:not(.open) > .mega-panel {
  display: none !important;
}

.nav.navbar-nav > li.is-mega-parent:hover > .mega-panel,
.nav.navbar-nav > li.is-mega-parent.open > .mega-panel,
.nav.navbar-nav > li.is-mega-parent:focus-within > .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Anti-gap hover bridge for mega menu */
.nav.navbar-nav > li.is-mega-parent > .mega-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 20px;
  pointer-events: none;
}

.nav.navbar-nav > li.is-mega-parent > .mega-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 30px;
  pointer-events: none;
}

/* ===== 7. MEGA MENU CONTENT STYLING ===== */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li {
  position: static;
}

.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu {
  display: block !important;
  position: static !important;
  width: auto;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Parent menu items with children */
.nav.navbar-nav > li:not(.about-us).is-mega-parent > .mega-panel > li.menu-item-has-children > a {
  border-bottom: 1px solid #C9CCD4;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: capitalize;
  padding: 8px 0 12px 0;
  color: var(--Colors-neutrals-950, #313035);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  transition: color 0.2s ease;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 2;
}

.megamenu-item-image {
  margin-bottom: 10px;
}

.megamenu-item-img {
  width: 100%;
  height: 176px;
  object-fit: cover;
  border-radius: 8px;
}
.nav.navbar-nav li.is-mega-parent.health-library .mega-panel {
  width: 960px;
}

.health-library .cols-2 li {
  width: 368px;
}

.cols-2.success-stories .megamenu-item-img {
  height: 391px;
}

.cols-2.health-library .megamenu-item-img {
  width: 368px;
}

.single-column-menu .cols-1 {
  max-width: 593px;
}


.cols-2.success-stories .menu-item a:hover,
.cols-2.success-stories .menu-item a {
  display: flex;
  flex-direction: column;
  padding: 0;
  color: var(--Colors-neutrals-950, #313035);
  font-family: Outfit;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
}

.cols-2.health-library .menu-item a:hover,
.cols-2.health-library .menu-item a {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.cols-2.success-stories .megamenu-arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/wp-content/themes/twentysixteen-child/assets/images/arrow-bold.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 8px;
}

.cols-2 .megamenu-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel {
  padding: 4px;
}

.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel li > a {
  display: flex;
  padding: 8px 8px;
  align-items: center;
  align-self: stretch;
}

.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > .megamenu-item-title {
  color: var(--Colors-neutrals-950, #313035);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

/* Override existing about-us submenu styling for dropdown functionality */


.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel li > .sub-menu > li  {
  padding: 8px 8px 8px 12px;
}

.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel li > .sub-menu > li > a {
  padding: 0;
}

.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel {
  gap: 0;
}

/* ===== ABOUT-US DROPDOWN FUNCTIONALITY ===== */
/* Enable dropdown behavior ONLY for first level submenus in about-us mega menu */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li > .sub-menu {
  position: relative !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s ease !important;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  z-index: 1000;
}

/* Disable dropdown functionality for nested submenus (sub-submenus) */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel .sub-menu .sub-menu {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-width: auto !important;
  z-index: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Fix positioning for nested submenu items */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel .sub-menu .sub-menu > li {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Fix positioning for nested submenu links */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel .sub-menu .sub-menu > li > a {
  position: static !important;
  margin: 0 !important;
  padding: 4px 0 4px 20px !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  color: var(--Colors-neutrals-950, #313035) !important;
  font-family: Inter !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}


/* Show submenu on hover/focus for about-us - ONLY first level */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children:hover > .sub-menu,
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children:focus-within > .sub-menu,
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children.open > .sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Position submenu correctly for about-us - ONLY first level */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children {
  position: relative;
}

/* Style the parent menu items in about-us to show they have dropdowns - ONLY first level */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children > a {
  position: relative;
  padding-right: 32px; /* Make space for toggle icon */
}

/* Hover effect for about-us parent items - ONLY first level */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children.open > a,
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children > a:hover {
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* Style submenu items in about-us */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel .sub-menu > li > a {
  display: block;
  padding: 8px 16px;
  color: var(--Colors-neutrals-950, #313035);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 4px;
}

/* Hover effect for about-us submenu items */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel .sub-menu > li > a:hover {
  background-color: #fff;
  color: #2D3EC8;
}

/* Ensure toggle icons are visible and functional for about-us - ONLY first level */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children > a .menu-toggle-icon {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 3 !important;
  color: #313035 !important;
}

/* Hide toggle icons for nested levels in about-us */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel .sub-menu .menu-toggle-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Override any conflicting toggle icon styles for about-us first level */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children .menu-toggle-icon {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 10 !important;
  color: #313035 !important;
}

/* Toggle icon states - NO ROTATION */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children.open > a.menu-toggle-icon,
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel > li.menu-item-has-children:hover > a.menu-toggle-icon {
  position: absolute !important;
  right: 8px !important;
  top: 0 !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent arrow from moving when dropdown opens */
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel > li.menu-item-has-children.open > a.menu-toggle-icon {
  position: absolute !important;
  right: 8px !important;
  top: 0 !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 20px !important;
  height: 21px !important;
}

/* Additional stability for all states */
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel > li.menu-item-has-children > a.menu-toggle-icon,
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel > li.menu-item-has-children:hover > a.menu-toggle-icon,
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel > li.menu-item-has-children:focus > a.menu-toggle-icon {
  position: absolute !important;
  right: 8px !important;
  top: 0 !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 20px !important;
  height: 21px !important;
}

.nav.navbar-nav > li.is-mega-parent .mega-panel.cols-2 a:hover {
  color: #313035 !important;
}


/* Child menu items */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li > a {
  display: block;
  padding: 4px 0;
  color: var(--Colors-neutrals-950, #313035);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* ===== 8. MEGA MENU NESTED LEVELS WITH INDENTATION ===== */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li.menu-item-has-children > .sub-menu {
  display: block !important;
  position: relative !important;
  width: auto;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Level 2 nested items */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li.menu-item-has-children > .sub-menu > li > a {
  display: block;
  padding: 4px 0 4px 10px;
  color: var(--Colors-neutrals-950, #313035);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  transition: color 0.2s ease;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 3;
}

/* Level 3 nested items */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li > a {
  padding-left: 40px;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 3;
}

/* Level 4 nested items */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li > a {
  padding-left: 60px;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 3;
}

/* Level 5 nested items */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li > a {
  padding-left: 80px;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 3;
}

/* Level 6 nested items */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > .sub-menu > li > a {
  padding-left: 100px;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 3;
}

/* Force all nested submenus in mega menu to be visible */
.nav.navbar-nav > li.is-mega-parent > .mega-panel .sub-menu .sub-menu,
.nav.navbar-nav > li.is-mega-parent > .mega-panel .sub-menu .sub-menu .sub-menu,
.nav.navbar-nav > li.is-mega-parent > .mega-panel .sub-menu .sub-menu .sub-menu .sub-menu,
.nav.navbar-nav > li.is-mega-parent > .mega-panel .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu,
.nav.navbar-nav > li.is-mega-parent > .mega-panel .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu {
  display: block !important;
  position: static !important;
  width: auto;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
}

/* ===== 9. MEGA MENU CLICKABILITY & INTERACTION ===== */
/* Ensure all mega menu links are clickable */
.nav.navbar-nav > li.is-mega-parent > a,
.nav.navbar-nav > li.is-mega-parent .sub-menu > li > a,
.nav.navbar-nav > li.is-mega-parent .sub-menu .sub-menu > li > a {
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none;
  user-select: auto !important;
}

/* Force all mega menu links to behave as regular links */
.nav.navbar-nav > li.is-mega-parent a[href]:not([href="#"]) {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure ALL children in mega menu are clickable */
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu li a {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure parent menu items in mega menu are clickable */
.nav.navbar-nav > li.is-mega-parent .mega-panel > li > a {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 3;
}

/* Ensure ALL links in mega menu are clickable regardless of nesting level */
.nav.navbar-nav > li.is-mega-parent .mega-panel a[href] {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 3;
}

/* Specific fix for nested menu items with children */
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu .sub-menu li.menu-item-has-children > a {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 4;
}

/* Override nth-child limitation for clickability */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li:nth-child(n) > a {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure parent menu items with children in mega menu are clickable */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li.menu-item-has-children {
  position: relative;
}

.nav.navbar-nav > li.is-mega-parent > .mega-panel > li.menu-item-has-children > a {
  position: relative;
  z-index: 3;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Prevent toggle icons from blocking clicks in mega menu */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li.menu-item-has-children > .menu-toggle-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none !important;
  opacity: 0;
}

/* Ensure parent menu items with children are fully clickable in mega menu */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li.menu-item-has-children {
  position: relative;
}

.nav.navbar-nav > li.is-mega-parent > .mega-panel > li.menu-item-has-children > a {
  display: block;
  width: 100%;
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Make sure the entire area of parent menu items is clickable */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li.menu-item-has-children > a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: auto;
}

/* Hide menu toggle icons in mega menu, except for about-us */
.nav.navbar-nav > li.is-mega-parent:not(.about-us) > .mega-panel .menu-toggle-icon,
.nav.navbar-nav > li.is-mega-parent:not(.about-us) > .mega-panel .sub-menu .sub-menu .menu-toggle-icon {
  display: none !important;
  pointer-events: none !important;
  z-index: 1;
}

/* Enable menu toggle icons for about-us mega menu */
.nav.navbar-nav > li.about-us.is-mega-parent > .mega-panel .menu-toggle-icon {
  display: inline-block !important;
  pointer-events: auto !important;
  z-index: 2;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Completely disable menu toggle icons in mega menu context, except for about-us */
.nav.navbar-nav > li.is-mega-parent:not(.about-us) .mega-panel .menu-toggle-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Force toggle icons to be visible for about-us first level ONLY */
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel > li.menu-item-has-children > a.menu-toggle-icon {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  right: 8px !important;
  top: 0 !important;
  transform: none !important;

}

/* Ensure parent items maintain stable layout */
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel > li.menu-item-has-children {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Ensure parent links maintain stable layout */
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel > li.menu-item-has-children > a {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
  line-height: 40px !important;
  overflow: visible !important;
  height: 32px !important;
}

/* Ensure nested toggle icons are hidden - ALL nested levels */
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel .sub-menu a.menu-toggle-icon,
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel .sub-menu .sub-menu a.menu-toggle-icon,
.nav.navbar-nav > li.about-us.is-mega-parent .mega-panel .sub-menu .sub-menu .sub-menu a.menu-toggle-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Disable Bootstrap dropdown behavior for mega menu */
.nav.navbar-nav > li.is-mega-parent .mega-panel .dropdown-toggle,
.nav.navbar-nav > li.is-mega-parent .mega-panel [data-toggle="dropdown"] {
  pointer-events: none !important;
}

/* Force all mega menu links to behave as regular links */
.nav.navbar-nav > li.is-mega-parent .mega-panel a[href]:not([href="#"]) {
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* Override any Bootstrap dropdown styling */
.nav.navbar-nav > li.is-mega-parent .mega-panel .dropdown-menu {
  position: static !important;
  float: none !important;
  display: block !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* ===== 10. REGULAR DROPDOWN MENUS (NON-MEGA) ===== */
.navbar-nav li.menu-item-has-children:not(.is-mega-parent) > .sub-menu {
  position: absolute;
  top: calc(100% - 3px);
  left: 0;
  min-width: 220px;
  border: 0;
  box-shadow: none;
  z-index: 999;
  display: block;
  opacity: 0;
  pointer-events: none;
  margin-top: 0;
}

.nav.navbar-nav > li.about-us.is-mega-parent .dropdown-menu .dropdown-menu {
  top: auto !important;
}

.navbar-nav li.menu-item-has-children:not(.is-mega-parent):hover > .sub-menu,
.navbar-nav li.menu-item-has-children:not(.is-mega-parent):focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
}

.navbar-nav li.menu-item-has-children:not(.is-mega-parent) > .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 30px;
  pointer-events: none;
}

.navbar-nav li.menu-item-has-children:not(.is-mega-parent) > .sub-menu > li > a {
  display: block;
  padding: 4px 12px;
  white-space: nowrap;
}

/* ===== 11. UNIVERSAL HOVER EFFECTS ===== */
/* Main hover color for all navigation elements */
.navbar-nav > li > a:hover,
.navbar-nav > li > .sub-menu > li > a:hover,
.navbar-nav > li > .sub-menu > li > .sub-menu > li > a:hover,
#site-navigation a:hover,
#site-navigation .sub-menu a:hover,
#site-navigation .sub-menu .sub-menu a:hover,
.nav a:hover,
.nav .sub-menu a:hover,
.nav .sub-menu .sub-menu a:hover,
.navbar a:hover,
.navbar .sub-menu a:hover,
.navbar .sub-menu .sub-menu a:hover,
.dropdown-menu > li > a:hover,
.dropdown-menu .sub-menu > li > a:hover,
.menu a:hover,
.menu .sub-menu a:hover,
.menu .sub-menu .sub-menu a:hover,
.main-navigation a:hover,
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu .sub-menu a:hover {
  color: #2D3EC8 !important;
}

/* Mega menu specific hover effects */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li.menu-item-has-children > a:hover,
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li.menu-item-has-children > a:active,
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li > a:hover,
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li.menu-item-has-children > .sub-menu > li > a:hover,
.nav.navbar-nav > li.is-mega-parent .mega-panel:not(.cols-2) a:hover,
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu a:hover,
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu .sub-menu a:hover,
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu .sub-menu .sub-menu a:hover,
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu .sub-menu .sub-menu .sub-menu a:hover,
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu a:hover {
  color: #2D3EC8 !important;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  color: #2D3EC8 !important;
  background-color: #DEE6FB !important;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
  color: #2D3EC8 !important;
  background-color: transparent !important;
}

.nav.navbar-nav >li.is-mega-parent.health-library > .mega-panel,
.nav.navbar-nav > li.is-mega-parent.success-stories > .mega-panel {
  left: 50%;
}

.nav.navbar-nav > li.is-mega-parent.about-us > .mega-panel {
  left: 140%;
}

.nav.navbar-nav > li.is-mega-parent.about-us > .mega-panel > li.menu-item-has-children.open > a {
  color: #2D3EC8 !important;
}

.nav.navbar-nav > li.is-mega-parent.about-us > .mega-panel > li.menu-item-has-children.open > a,
.nav.navbar-nav > li.is-mega-parent.about-us > .mega-panel > li.menu-item-has-children > a:hover {
  background-color: #DEE6FB !important;
}

.nav.navbar-nav > li.is-mega-parent.about-us > .mega-panel {
  width: 259px;
}

/* Visited state for mega menu parent items */
.nav.navbar-nav > li.is-mega-parent > .mega-panel > li.menu-item-has-children > a:visited {
  color: var(--Colors-neutrals-950, #313035);
}

/* ===== 12. BUTTONS & CTA ELEMENTS ===== */
#menu-mega-menu-images .button-cta {
  margin: 0 !important;
  padding: 11px 16px;
}

.button-cta {
  display: flex;
  padding: 0 !important;
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-general-2x, 8px);
  border-radius: var(--Border-border-radius-20xxl, 200px);
  border: 1px solid var(--Colors-neutrals-black, #000);
  margin: 6px 0;
  text-align: center;
}

.button-cta a {
  color: var(--Colors-neutrals-950, #313035);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  padding: 12px 16px 12px 46px !important;
}

.button-cta.black {
  background: var(--Colors-neutrals-black, #000);
}

.button-cta.black a {
  color: var(--Colors-neutrals-white, #FFF);
}

.button-cta a:hover {
  text-decoration: none;
}

/* ===== 13. LAYOUT & POSITIONING ===== */
#myNavbar {
  position: absolute;
  padding: 0;
  width: 100%;
}

#sidebar-wrapper1 {
  display: block;
  position: relative;
  z-index: 100;
  background-color: #fff;
}

.dropdown-menu {
  box-shadow: none;
}

.nav.navbar-nav .sub-menu .sub-menu > li > a {
  padding: 4px 0;
}

/* ===== 14. LEGACY MENU WRAPPER SYSTEM ===== */
.navbar-nav > li > div > .dropdown-menu {
  margin: 19px 0;
  border: none;
}

a.menu-item-has-children:has(.menus-wrapper) {
  overflow: visible;
  height: auto;
}

.menus-wrapper {
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 0;
  top: 20px;
}

.menus-wrapper:has(.sub-menu-level-3) {
  left: -200%;
}

.menus-wrapper:has(.sub-menu-level-3) ul li:first-child a {
  text-transform: uppercase;
}

.menus-wrapper:has(.sub-menu-level-3) ul li:nth-child(-n+3) a {
  font-weight: 600;
}

.menus-wrapper > ul {
  display: none;
  position: relative;
  box-shadow: none;
}

.menus-wrapper .dropdown .menu-toggle-icon {
  display: none;
}

/* ===== 15. TYPOGRAPHY & STYLING OVERRIDES ===== */
.home-hero-section h1, 
h2 {
  color: var(--Colors-neutrals-950, #313035);
  text-align: center;
  font-family: Outfit;
  font-style: normal;
}

/* Remove list styling from mega menu */
.nav.navbar-nav > li.is-mega-parent .mega-panel li,
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu li,
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu .sub-menu li,
.nav.navbar-nav > li.is-mega-parent .mega-panel ul,
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu ul,
.nav.navbar-nav > li.is-mega-parent .mega-panel .sub-menu .sub-menu ul {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  list-style-position: outside !important;
}

/* ===== 16. THEME OVERRIDE & COMPATIBILITY ===== */
/* Disable theme's dropdown system for mega menu */
.nav.navbar-nav > li.is-mega-parent,
.nav.navbar-nav > li.is-mega-parent * {
  --twentysixteen-dropdown: disabled !important;
}

/* Override JavaScript-added classes */
.nav.navbar-nav > li.is-mega-parent.toggled-on,
.nav.navbar-nav > li.is-mega-parent .toggled-on,
.nav.navbar-nav > li.is-mega-parent .sub-menu.toggled-on {
  pointer-events: auto !important;
}

/* ===== 17. TOP TABS STYLING ===== */
#topTabs ul {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}

/* ===== 18. RESPONSIVE DESIGN ===== */

@media (max-width: 2560px) {
  .nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li > a {
    padding: 8px 0;
  }

  .nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu > li.menu-item-has-children > .sub-menu > li > a {
    padding: 8px 0 8px 20px;
  }
}

@media (max-width: 992px) {
  .nav.navbar-nav > li.is-mega-parent > .mega-panel {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    display: none;
    padding: 12px 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .nav.navbar-nav > li.is-mega-parent.open > .mega-panel {
    display: block;
  }
  
  .nav.navbar-nav > li.is-mega-parent > .mega-panel > li > .sub-menu {
    padding: 0 0 10px;
  }
}

/* ===== 19. PERFORMANCE OPTIMIZATIONS ===== */
/* Disable transitions for better performance */
.navbar-nav *,
.nav.navbar-nav *,
.mega-panel *,
.sub-menu * {
  transition: none !important;
  transition-delay: 0s !important;
  transition-duration: 0s !important;
  transition-property: none !important;
}

/* Re-enable color transitions for hover effects */
.navbar-nav a,
.nav.navbar-nav a,
.mega-panel a,
.sub-menu a {
  transition: color 0.2s ease !important;
}

.shop-suplements {
  margin: 0 !important;
  margin-right: 8px !important;
}

/* ===== 20. BUTTONS STYLING ===== */
.button-cta-blue:hover {
  color: #fff !important;
}

.button-cta-blue {
  margin: 6px 8px 6px 0 !important;
}

.navbar-nav > li.button-cta-blue > a:hover {
  color: #fff !important;
}

.navbar-nav > li.button-cta-blue > a {
  color: #fff !important;
}


#mega-navigation {
  min-height: auto;
  border-top: 0.5px solid #B3B5C1;
  border-bottom: 0.5px solid #B3B5C1;
}

#mega-menu-wrap-genemedics_mega_navigation {
  padding: 8px;
}

#mega-menu-wrap-genemedics_mega_navigation #mega-menu-genemedics_mega_navigation > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, 
#mega-menu-wrap-genemedics_mega_navigation #mega-menu-genemedics_mega_navigation > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, 
#mega-menu-wrap-genemedics_mega_navigation #mega-menu-genemedics_mega_navigation > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
#mega-menu-wrap-genemedics_mega_navigation #mega-menu-genemedics_mega_navigation > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:hover,
#mega-menu-wrap-genemedics_mega_navigation #mega-menu-genemedics_mega_navigation > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link:hover {
  color: #2D3EC8 !important;
  border-radius: 8px;
  background: #DEE6FB;
}

#mega-menu-wrap-genemedics_mega_navigation #mega-menu-genemedics_mega_navigation > li.mega-menu-item > a.mega-menu-link {
  line-height: 36px;
  height: auto;
  color: #1B1B28;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400 !important;
}

#mega-menu-wrap-genemedics_mega_navigation #mega-menu-genemedics_mega_navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-genemedics_mega_navigation #mega-menu-genemedics_mega_navigation > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-genemedics_mega_navigation #mega-menu-genemedics_mega_navigation > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  font-family: Inter !important;
}