/**
 * Deep Menu Fix CSS
 * 
 * This file contains styles to fix menu depth issues in the WordPress navigation
 * Specifically for handling menu levels 4+ properly
 * 
 * This approach preserves the existing UI design for normal menu depths (0-3)
 * and only applies special handling when deeper levels exist
 */

/* Ensure proper visibility for deeper menu levels */
.navigation-menu.mega-nav-desktop .sub-menu-0:has(.sub-menu-3 .menu-item-has-children) {
  overflow: visible !important;
}

/* Preserve the existing menu structure for levels 0-3 - no changes needed */
.navigation-menu.mega-nav-desktop .sub-menu-2>li>ul.sub-menu-3>li:not(:first-child) {
  display: block;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
}

/* Style for sub items under level 3 */
.navigation-menu.mega-nav-desktop .sub-menu-2>li>ul.sub-menu-3>li:not(:first-child)>a {
  display: block;
  position: relative;
}

/* Fix for level 4 menus if they exist | PRODUCT PREVIEW */
.navigation-menu.mega-nav-desktop .sub-menu-3>li>ul.sub-menu-4 {
  display: block;
  position: absolute;
  left: 28%;
  top: 0;
  width: 70%;
  padding-left: 15px;
  margin: 5px 0 5px 15px;
}

/* Style for level 4 menu items */
.navigation-menu.mega-nav-desktop .sub-menu-3>li>ul.sub-menu-4>li>a {
  padding: 8px 15px 8px 25px;
  font-size: 0.9em;
  color: #444;
  display: block;
  /*  position: relative;*/
}

/* Style for level 5 menus - further indented */
.navigation-menu.mega-nav-desktop .sub-menu-4 .menu-item-has-children>ul.sub-menu-5 {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  margin-left: 20px;
  background: #e7e8e8;
  border-left: 2px solid #01426a;
  box-shadow: none;
  display: block;
}

/* Style for level 4 and 5 menu items to match the indented structure */
.navigation-menu.mega-nav-desktop .sub-menu-4,
.navigation-menu.mega-nav-desktop .sub-menu-5 {
  padding-left: 0;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Styling for level 4 and 5 menu items */
.navigation-menu.mega-nav-desktop .sub-menu-4 li,
.navigation-menu.mega-nav-desktop .sub-menu-5 li {
  width: 100%;
  padding: 0;
  margin: 0;
}

.navigation-menu.mega-nav-desktop .sub-menu-4 li:last-child,
.navigation-menu.mega-nav-desktop .sub-menu-5 li:last-child {
  border-bottom: none;
}

/* Ensure links in deeper menus have proper padding and styling */
.navigation-menu.mega-nav-desktop .sub-menu-4 li a,
.navigation-menu.mega-nav-desktop .sub-menu-5 li a {
  padding: 8px 15px;
  display: block;
  color: #333;
  font-size: 0.95em;
  text-decoration: none;
}

/* Fix for level 5 menus if they exist */
.navigation-menu.mega-nav-desktop .sub-menu-4>li>ul.sub-menu-5 {
  display: block;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 15px;
  border-left: 2px solid #01426a;
  margin: 5px 0 5px 15px;
}

/* Style for level 5 menu items */
.navigation-menu.mega-nav-desktop .sub-menu-4>li>ul.sub-menu-5>li>a {
  padding: 8px 15px 8px 25px;
  font-size: 0.85em;
  display: block;
  position: relative;
}

.navigation-menu.mega-nav-desktop .sub-menu-4>li>ul.sub-menu-5>li:hover>a {
  color: #01426a;
}

/* Style for the specific sub items */
.navigation-menu.mega-nav-desktop .sub-menu-2>li>ul.sub-menu-3>li:first-child+li>a,
.navigation-menu.mega-nav-desktop .sub-menu-2>li>ul.sub-menu-3>li:first-child+li+li>a {
  display: block;
  position: relative;
}

/* Fix z-index issues with deeper menus */
.navigation-menu.mega-nav-desktop .sub-menu-0 {
  z-index: 1000;
  width: 105vw;
}

.navigation-menu.mega-nav-desktop .sub-menu-1 {
  z-index: 1001;
  overflow: hidden;
}

.navigation-menu.mega-nav-desktop .sub-menu-2 {
  z-index: 1002;
  left: 20%;
  width: 95%;
  overflow: hidden;
}

.navigation-menu.mega-nav-desktop .sub-menu-3 {
  z-index: 1003;
  overflow: hidden;
  background: #eeeeee;
  left: 25%;
  width: 90%;
}

.navigation-menu.mega-nav-desktop .sub-menu-4 {
  z-index: 1004;
  overflow: hidden;
}

.navigation-menu.mega-nav-desktop .sub-menu-5 {
  z-index: 1005;
  overflow: hidden;
}

.navigation-menu.mega-nav-desktop .sub-menu-3:has(.sub-menu-4)>li:hover {
  background: #ffffff;
  border-left: 8px solid #01426a;
  width: 100%;
}

.navigation-menu.mega-nav-desktop .sub-menu-3:has(.sub-menu-4, .fourth-parent)>li {
  background: none;
  border: none;
  display: block;
  margin-left: 3px;
}

.navigation-menu.mega-nav-desktop .sub-menu-3>li>ul.sub-menu-4>.menu-item-floater {
  padding: 20px 60px 0px !important;
  z-index: 1003;
}

.mega-nav-desktop #primary-menu {
  margin-left: 4%;
}

.navigation-menu .sub-menu {
  margin-left: -5.5%;
}

.menu-item-floater-container {
  display: inline-flex;
  justify-content: start;
  width: 100%;
  gap: 0;
  flex-wrap: wrap;
}