/**
 * Dropdown override styles - Higher specificity CSS to force dropdown behavior
 */

/* Force submenu display on hover with !important */
.header-one .nav-area-main > nav > ul > li.has-dropdown:hover > .submenu {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

/* Force sub-submenu display on hover with !important */
.header-one .nav-area-main > nav > ul > li .submenu li.has-child:hover > .sub-submenu {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  left: 100% !important;
  top: 0 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  z-index: 10000 !important;
}

/* Ensure menus are absolutely positioned */
.header-one .nav-area-main > nav > ul > li.has-dropdown > .submenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: auto !important;
  min-width: 220px !important;
}

.header-one .nav-area-main > nav > ul > li .submenu li.has-child > .sub-submenu {
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  width: auto !important;
  min-width: 220px !important;
}

/* Improve arrow indicators */
.header-one .nav-area-main > nav > ul > li .submenu li.has-child > a i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Add visual cue for hoverable items */
.header-one .nav-area-main > nav > ul > li.has-dropdown > a,
.header-one .nav-area-main > nav > ul > li .submenu li.has-child > a {
  position: relative;
  cursor: pointer;
}

.header-one .nav-area-main > nav > ul > li.has-dropdown > a:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: all 0.3s ease;
}

.header-one .nav-area-main > nav > ul > li.has-dropdown:hover > a:after {
  width: 100%;
}

/* Remove display:none that might be overriding our styles */
.header-one .nav-area-main ul li .submenu,
.header-one .nav-area-main ul li .sub-submenu {
  display: block !important;
}

/* Fix z-index stacking context */
.header-one .nav-area-main {
  position: relative;
  z-index: 100;
}

.header-one .nav-area-main > nav > ul > li {
  position: relative;
  z-index: 100;
}

.header-one .nav-area-main > nav > ul > li:hover {
  z-index: 101;
}

/* --- Critical fix: allow sub-submenus to overflow the first-level panel --- */
/* The base styles set `overflow: hidden` on .submenu which clips the flyout panel.
   Force it to visible so right-side submenus are not cut off. */
.header-one .nav-area-main ul li .submenu {
  overflow: visible !important;
}

/* Ensure each submenu item can show its absolutely positioned child panel */
.header-one .nav-area-main ul li .submenu li {
  overflow: visible !important;
}

/* Extra safety: keep sub-submenu above other content */
.header-one .nav-area-main ul li .submenu li .sub-submenu {
  z-index: 10000 !important;
}