/* ================================
   SS HORIZONTAL MENU
   ================================ */

/* Base layout */
.td-ss-horizontal-menu-block {
  width: 100%;
  overflow: visible; /* Allow sub-menus to extend beyond block */
}

.ss-horizontal-menu-wrapper {
  width: 100%;
  position: relative;
  overflow: visible; /* Allow sub-menus to extend beyond wrapper */
}
.td-ss-horizontal-menu-block .ss-menu-item-normal ul.sub-menu{
  width: 100% !important;
}
.td-ss-horizontal-menu-block .ss-menu-item-mega ul.sub-menu{
  width: 100% !important;
  border: none;
  box-shadow: none;
}
.td-ss-horizontal-menu-block ul.sub-menu .ss-menu-link, .td-ss-horizontal-menu-block ul.sub-menu .ss-menu-text{
  font-weight: normal;
}

.td-ss-horizontal-menu-block .ss-menu-item-mega .td-pb-span12{
  padding-left: 0px;
  padding-right: 0px;
}
.td_ss_horizontal_menu_block {
  margin-bottom: 0px !important;
}
.ss-horizontal-menu-wrapper .largeMenuWrap{
  padding-top: 0px;
}

.ss-horizontal-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.ss-horizontal-menu-list > li {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  margin-left: 0;
}

.ss-menu-item-normal .sub-menu{
	box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);
}
.ss-horizontal-menu-wrapper .sub-menu{
	box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);
}
.ss-horizontal-menu-list > li.ss-menu-item-mega > .sub-menu{
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
clip-path: inset(0px -10px 0px -10px);
}

.current-menu-ancestor a{
  color: #92e3da;
}

.ss-horizontal-menu-list > li .ss-menu-link{
  font-weight: bold;
}


/* Menu links */
.ss-menu-link {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
  position: relative;
  /* iOS: Ensure touch events work */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ss-menu-link:hover {
  color: #92e3da;
}

.ss-menu-item-mega ul.sub-menu {
  position: absolute;
  height: auto;
  left: 50% !important;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  display: none;
  border: 1px solid #eaeaea;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Desktop: Ensure parent items have proper z-index on hover */
@media (min-width: 768px) {
  .ss-horizontal-menu-list > li.menu-item-has-children:hover,
  .ss-horizontal-menu-list > li.ss-menu-item-has-children:hover {
    position: relative;
    z-index: 1001;
  }
  
  /* Debug: Test hover detection (remove after testing) */
  /* .ss-horizontal-menu-list > li.menu-item-has-children:hover > a,
  .ss-horizontal-menu-list > li.ss-menu-item-has-children:hover > a {
    background-color: rgba(255, 0, 0, 0.1);
  } */
}

.ss-menu-text {
  display: inline-block;
}

.ss-menu-icon {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.ss-menu-icon i {
  font-size: 0.8em;
}


/* Dropdown icon rotation when menu is open */
/* .ss-menu-item-has-children.menu-item-open .ss-menu-icon {
  transform: rotate(180deg);
} */

/* Sub-menu base styles - hidden by default */
.ss-horizontal-menu-list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: #fff;
  z-index: 1000;
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none; /* Prevent sub-menu from blocking hover on parent */
  overflow: visible; /* Allow content to be fully visible */
  max-height: none; /* Remove any height restrictions */
}

/* For mega menu items, show sub-menu first, then mega menu below it */
.ss-horizontal-menu-list > li.ss-menu-item-mega > .sub-menu {
  /* Sub-menu appears first (above mega menu) */
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1002; /* Above mega menu */
}

/* Desktop: Sub-menu visibility and hover behavior */
@media (min-width: 768px) {
  /* CRITICAL: Show sub-menu when hovering over parent item */
  /* Use wrapper class for higher specificity */
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.menu-item-has-children:hover > .sub-menu,
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.ss-menu-item-has-children:hover > .sub-menu,
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li:hover > .sub-menu,
  .ss-horizontal-menu-list > li.menu-item-has-children:hover > .sub-menu,
  .ss-horizontal-menu-list > li.ss-menu-item-has-children:hover > .sub-menu,
  .ss-horizontal-menu-list > li:hover > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Keep sub-menu visible when hovering over the sub-menu itself */
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.menu-item-has-children .sub-menu:hover,
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.ss-menu-item-has-children .sub-menu:hover,
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li .sub-menu:hover,
  .ss-horizontal-menu-list > li.menu-item-has-children .sub-menu:hover,
  .ss-horizontal-menu-list > li.ss-menu-item-has-children .sub-menu:hover,
  .ss-horizontal-menu-list > li .sub-menu:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Also show when parent li is hovered (even if hovering sub-menu) */
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.menu-item-has-children:hover .sub-menu,
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.ss-menu-item-has-children:hover .sub-menu,
  .ss-horizontal-menu-list > li.menu-item-has-children:hover .sub-menu,
  .ss-horizontal-menu-list > li.ss-menu-item-has-children:hover .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Keep sub-menu visible when moving from parent to sub-menu (bridge the gap) */
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.menu-item-has-children:hover,
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.ss-menu-item-has-children:hover,
  .ss-horizontal-menu-list > li.menu-item-has-children:hover,
  .ss-horizontal-menu-list > li.ss-menu-item-has-children:hover {
    position: relative;
    z-index: 1001;
  }
  
  /* Ensure sub-menu stays visible when hovering over it or its parent */
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.menu-item-has-children .sub-menu,
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.ss-menu-item-has-children .sub-menu,
  .ss-horizontal-menu-list > li.menu-item-has-children .sub-menu,
  .ss-horizontal-menu-list > li.ss-menu-item-has-children .sub-menu {
    pointer-events: auto;
  }
  
  /* Support menu-item-open class for JavaScript-controlled menus */
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.menu-item-has-children.menu-item-open > .sub-menu,
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.ss-menu-item-has-children.menu-item-open > .sub-menu,
  .ss-horizontal-menu-wrapper .ss-horizontal-menu-list > li.menu-item-open > .sub-menu,
  .ss-horizontal-menu-list > li.menu-item-has-children.menu-item-open > .sub-menu,
  .ss-horizontal-menu-list > li.ss-menu-item-has-children.menu-item-open > .sub-menu,
  .ss-horizontal-menu-list > li.menu-item-open > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Mega menu styles */
.ss-mega-menu-content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 1200px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1001; /* Below sub-menu (1002) so sub-menu appears first */
  display: none; /* Hidden by default, shown on hover */
  padding: 0px 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* For mega menu items, position mega menu content below the sub-menu */
/* JavaScript will calculate the exact position based on sub-menu height */
.ss-horizontal-menu-list > li.ss-menu-item-mega > .ss-mega-menu-content {
  /* Position will be adjusted by JavaScript to appear below sub-menu */
  top: 100%;
}

/* Desktop: Show mega menu on hover */
@media (min-width: 768px) {
  /* Show sub-menu first for mega menu items */
  .ss-horizontal-menu-list > li.ss-menu-item-mega:hover > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Show mega menu content below sub-menu */
  .ss-horizontal-menu-list > li.ss-menu-item-mega:hover > .ss-mega-menu-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Position will be set by JavaScript to appear below sub-menu */
  }
  
}

/* Show mega menu when JS adds .menu-item-open class (mobile) */
.ss-horizontal-menu-list > li.ss-menu-item-mega.menu-item-open > .ss-mega-menu-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ss-horizontal-menu-list .sub-menu li {
  display: block;
  width: 100%;
  margin: 0px;
}

.ss-horizontal-menu-list .sub-menu li a {
  display: block;
  padding: 7px 40px;
  text-decoration: none;
  color: inherit;
  font-size: 12px;
}

.ss-horizontal-menu-list .sub-menu li:last-child a {
  border-bottom: none;
}

.ss-horizontal-menu-list .sub-menu li a:hover {
  /* background-color: #f5f5f5; */
  color: #189ab4;
}

/* Sub-menu items */
.ss-menu-item-sub {
  display: block;
  width: 100%;
}

.ss-menu-item-sub .ss-menu-link {
  display: block;
  padding: 7px 30px;
}

.ss-menu-item-sub:last-child .ss-menu-link {
  border-bottom: none;
}

.ss-menu-item-sub .ss-menu-link:hover {
  /* background-color: #f5f5f5; */
  color: #189ab4;

}

/* Desktop: Horizontal scrolling when needed */
@media (min-width: 768px) {
  /* Ensure all parent containers allow overflow */
  .td_block_wrap.td-ss-horizontal-menu-block,
  .td-ss-horizontal-menu-block {
    overflow: visible !important; /* Ensure sub-menus can extend */
    height: auto !important; /* Remove any height restrictions */
    max-height: none !important;
  }
  
  .td_block_wrap.td-ss-horizontal-menu-block .td_block_inner,
  .td-ss-horizontal-menu-block .td_block_inner {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  
  .ss-horizontal-menu-wrapper {
    overflow-x: auto;
    overflow-y: visible !important; /* Allow vertical overflow for sub-menus */
    overflow: visible; /* Fallback for older browsers */
    height: auto !important;
    max-height: none !important;
  }

  .ss-horizontal-menu-list {
    width: 100%;
    overflow: visible; /* Allow sub-menus to extend */
    height: auto !important;
    max-height: none !important;
  }
  
  .ss-horizontal-menu-list > li {
    overflow: visible !important; /* Allow sub-menus to extend beyond li */
    height: auto !important;
    max-height: none !important;
  }
}

/* Mobile: Horizontal scrolling and touch behavior */
@media (max-width: 767px) {
  /* Hide sub-menu by default on mobile, but allow JavaScript to show it */
  /* Only hide if parent doesn't have menu-item-open class */
  .ss-horizontal-menu-list > li:not(.menu-item-open) > .sub-menu,
  .ss-horizontal-menu-list > li:not(.menu-item-open) > .ss-mega-menu-content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .ss-horizontal-menu-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    touch-action: pan-x;
  }

  .ss-horizontal-menu-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: max-content;
    width: auto;
  }

  .ss-horizontal-menu-list > li {
    flex: 0 0 auto;
    flex-shrink: 0;
  }

  /* Webkit scrollbar styling */
  .ss-horizontal-menu-wrapper::-webkit-scrollbar {
    height: 6px;
  }

  .ss-horizontal-menu-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }

  .ss-horizontal-menu-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }

  /* Sub-menu positioning on mobile */
  .ss-horizontal-menu-list .sub-menu,
  .ss-horizontal-menu-list .ss-mega-menu-content {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    top: 100%; /* Position below parent li */
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(-100%); /* Start hidden above */
    transition: transform 0.3s ease;
  }

  .ss-horizontal-menu-list > li.menu-item-open > .sub-menu,
  .ss-horizontal-menu-list > li.menu-item-open > .ss-mega-menu-content {
    transform: translateY(0) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Prevent hover from auto-revealing submenus on touch */
  .ss-horizontal-menu-list > li:hover > .sub-menu,
  .ss-horizontal-menu-list > li:hover > .ss-mega-menu-content {
    transform: translateY(100%) !important;
    display: block !important; /* Keep display block for transform */
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* Custom breakpoint support (via data attribute) */
.ss-horizontal-menu-wrapper[data-mobile-breakpoint] {
  /* Breakpoint will be handled by JavaScript */
}


.ss-horizontal-menu-wrapper{
  /* border: 2px solid red; */
}

.ss-horizontal-menu-wrapper .sub-menu{
  padding: 0;
  margin: 0;
  & li{
    padding: 30px 0 0 30px;
    margin: 0;
    & a{
      padding: 0;
      font-size:14px;
      color:#189AB4;
      &:hover{
        color:#05445e;
      }
    }
  }
}

.ss-horizontal-menu-wrapper .ss-mega-menu-content{
  padding: 0;
}
.ss-horizontal-menu-wrapper .ss-mega-menu-content >p.no-content-display{
  padding: 20px 30px;
  font-size:14px;
  color:rgb(192, 19, 19);
}
.ss-horizontal-menu-wrapper .ss-mega-menu-content .td_block_wrap{
  margin: 0;
}
.ss-horizontal-menu-wrapper .largeMenuWrap{
  padding-bottom:30px;
}
.ss-horizontal-menu-wrapper .largeMenuWrap .wrap{
  padding:30px 0 0 30px;
}
.ss-horizontal-menu-wrapper .largeMenuWrap h2{
  margin: 0;
}

.ss-menu-item-normal .sub-menu{
  padding-bottom:30px;
  padding-top:30px;  
}

.ss-menu-item-normal .sub-menu li{
  padding:0 30px 10px 30px;
}

.ss-menu-item-normal,.ss-menu-item-mega {position: static !important;} 


@media (max-width: 767px) {
  .ss-horizontal-menu-wrapper .largeMenuWrap .innerLargeMenuWrap .wrap{
    max-width: 100%;
    padding-left:9px;
  }
  .ss-mega-menu-content{
    margin-top:-5px;
  }
}