/* ===============================================
   GLASSMORPHISM MENU STYLES
   Modern glassy effect for header and dropdowns
   =============================================== */

/* Glassmorphism CSS Variables */
:root {
  --header-glass-bg: hsla(215, 60%, 18%, 0.55);
  --header-glass-bg-sticky: hsla(215, 60%, 18%, 0.85);
  --header-border: hsla(0, 0%, 100%, 0.25);
  --header-shadow: 0 8px 24px hsla(215, 60%, 18%, 0.25);
  --dropdown-glass-bg: hsla(215, 60%, 18%, 0.92);
  --dropdown-border: hsla(0, 0%, 100%, 0.2);
  --dropdown-shadow: 0 12px 32px hsla(215, 60%, 18%, 0.35);
}

/* =======================
   STICKY HEADER - ORIGINAL STYLE RESTORED
   ======================= */

/* Glassmorphism effect removed - using original header color */

/* =======================
   DROPDOWN GLASS EFFECT
   ======================= */

.main-menu ul li .submenu {
  background: var(--dropdown-glass-bg) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--dropdown-border) !important;
  box-shadow: var(--dropdown-shadow) !important;
  border-radius: 12px;
  overflow: visible !important; /* CHANGED: Must be visible for nested flyouts */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* NO max-height - show all items at once */
  max-height: none !important;
}

/* Scrollbar styling removed - no scrollbars on any menus */

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
  .main-menu ul li .submenu {
    background: rgba(16, 32, 57, 0.95) !important;
  }
}

/* Subtle inner highlight for glass depth */
.main-menu ul li .submenu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.4), transparent);
  pointer-events: none;
}

/* =======================
   DROPDOWN MENU ITEMS
   ======================= */

.main-menu ul li .submenu li a {
  color: #ffffff !important;
  font-weight: 600;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.main-menu ul li .submenu li:last-child a {
  border-bottom: none !important;
}

/* Hover Effect with Red Glow */
.main-menu ul li .submenu li:hover > a {
  background: hsla(349, 84%, 52%, 0.15) !important;
  color: #ffffff !important;
  padding-left: 30px;
  box-shadow: inset 4px 0 0 0 #EA1826, 0 0 12px rgba(234, 24, 38, 0.3);
}

/* Active Menu Item */
.main-menu ul li .submenu li a.active {
  background: hsla(349, 84%, 52%, 0.2) !important;
  color: #EA1826 !important;
  box-shadow: inset 4px 0 0 0 #EA1826;
}

/* =======================
   FOCUS STATES (Accessibility)
   ======================= */

.main-menu ul li .submenu li a:focus {
  outline: 2px solid rgba(234, 24, 38, 0.7);
  outline-offset: -2px;
}

.header-style-two .main-menu ul li a:focus {
  outline: 2px solid rgba(234, 24, 38, 0.7);
  outline-offset: 4px;
  border-radius: 4px;
}

/* =======================
   MEGA MENU GLASS EFFECT
   ======================= */

.main-menu ul li .mega-menu {
  background: var(--dropdown-glass-bg) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--dropdown-border) !important;
  box-shadow: var(--dropdown-shadow) !important;
  border-radius: 16px;
  overflow: visible !important;
  display: flex !important;
  gap: 40px;
  padding: 40px !important;
  max-height: none !important;
}

/* Mega menu scrollbar styling removed - no scrollbars */

/* Mega menu columns - DEFAULT for Services menu */
.main-menu ul li .mega-menu > li {
  flex: 1;
  min-width: 200px;
}

/* =======================
   COMPACT LOCATIONS MEGA MENU - MULTI-COLUMN LAYOUT
   ======================= */

/* Locations menu - full width but compact height */
.main-menu ul li:has(> a[href="/locations"]) .mega-menu {
  max-width: 100% !important;
  width: 100% !important;
  padding: 30px 40px !important;
  gap: 30px !important;
}

/* Locations columns - each region takes equal space */
.main-menu ul li:has(> a[href="/locations"]) .mega-menu > li {
  flex: 1;
  min-width: 0;
}

/* Locations mega menu title - smaller, compact */
.main-menu ul li:has(> a[href="/locations"]) .mega-menu .mega-menu-title {
  font-size: 15px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  white-space: nowrap;
}

/* MULTI-COLUMN LAYOUT - Cities displayed side-by-side within each region */
.main-menu ul li:has(> a[href="/locations"]) .mega-menu li ul {
  margin-top: 10px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3 columns per region */
  gap: 2px 15px !important;
  column-gap: 15px !important;
}

/* Locations city links - compact styling, no boxes */
.main-menu ul li:has(> a[href="/locations"]) .mega-menu li ul li a {
  font-size: 12px !important;
  padding: 5px 10px !important;
  font-weight: 400 !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Reduce hover animation for compact feel */
.main-menu ul li:has(> a[href="/locations"]) .mega-menu li ul li a:hover {
  padding-left: 12px !important;
  transform: translateX(2px);
  overflow: visible !important;
}

/* Mega menu title styling */
.main-menu ul li .mega-menu .mega-menu-title {
  color: #EA1826 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 15px !important;
  display: block !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid rgba(234, 24, 38, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s ease;
}

.main-menu ul li .mega-menu .mega-menu-title:hover {
  color: #ffffff !important;
  border-bottom-color: #EA1826 !important;
}

/* Mega menu sub-items */
.main-menu ul li .mega-menu li ul {
  padding: 0 !important;
  margin-top: 15px !important;
}

.main-menu ul li .mega-menu li ul li {
  width: 100% !important;
  margin-bottom: 8px !important;
}

.main-menu ul li .mega-menu li ul li a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  display: block !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.main-menu ul li .mega-menu li ul li a:hover {
  background: hsla(349, 84%, 52%, 0.15) !important;
  color: #ffffff !important;
  padding-left: 16px !important;
  transform: translateX(4px);
}

.main-menu ul li .mega-menu li ul li a.active {
  background: hsla(349, 84%, 52%, 0.2) !important;
  color: #EA1826 !important;
}

@supports not (backdrop-filter: blur(20px)) {
  .main-menu ul li .mega-menu {
    background: rgba(16, 32, 57, 0.95) !important;
  }
}

/* Responsive mega menu */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu ul li .mega-menu {
    gap: 25px;
    padding: 30px !important;
  }
  
  .main-menu ul li .mega-menu > li {
    min-width: 180px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li .mega-menu {
    gap: 30px;
    padding: 35px !important;
  }
}

/* =======================
   LOCATIONS MENU - NO SCROLLBAR
   ======================= */

/* Remove scrollbar and max-height from Locations menu */
.main-menu ul li:has(> a[href="/locations"]) .submenu {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  overflow: visible !important;
}

/* CRITICAL: Parent submenu must allow overflow for flyouts to appear */
.main-menu ul li .submenu {
  overflow: visible !important;
}

/* Remove scrollbar from nested city flyout submenus in Locations */
.main-menu ul li:has(> a[href="/locations"]) .submenu .submenu {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

/* Also target Materials menu for no scrollbar */
.main-menu ul li:has(> a[href*="materials"]) .submenu {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

/* =======================
   NESTED DROPDOWN ARROWS
   ======================= */

/* Add right arrow indicator for nested dropdowns (Southern California, Northern California, Texas) */
.main-menu ul li .submenu li.has-dropdown > a::after {
  content: "\e918" !important; /* Right arrow icon from icomoon */
  font-family: 'icomoon' !important;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px;
  transition: all 0.3s ease;
}

/* Change arrow color on hover */
.main-menu ul li .submenu li.has-dropdown:hover > a::after {
  color: #EA1826 !important;
  right: 15px;
}

/* CRITICAL: Position nested submenu to the right - NO GAP */
.main-menu ul li .submenu li .submenu {
  position: absolute !important;
  left: calc(100% - 2px) !important; /* Overlap by 2px to prevent gap */
  top: -1px !important; /* Align perfectly with parent */
  margin-left: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateX(0) !important; /* No transform to avoid gaps */
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  display: block !important;
  min-width: 250px !important;
  width: auto !important;
  z-index: 99999 !important;
  /* Force visible styling */
  background: var(--dropdown-glass-bg) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  border: 1px solid var(--dropdown-border) !important;
  box-shadow: var(--dropdown-shadow) !important;
  pointer-events: auto !important; /* Ensure it can be hovered */
}

/* CRITICAL: Show nested submenu on hover of parent OR submenu itself */
.main-menu ul li .submenu li.has-dropdown:hover > .submenu,
.main-menu ul li .submenu li .submenu:hover {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* Make sure parent li allows overflow for flyout and maintains hover */
.main-menu ul li .submenu li.has-dropdown {
  position: relative !important;
}

/* Create invisible bridge to prevent gap */
.main-menu ul li .submenu li.has-dropdown::after {
  content: '' !important;
  position: absolute !important;
  right: -20px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 20px !important;
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 999 !important;
}

/* =======================
   FIX: Override main.css for nested flyouts
   ======================= */

/* CRITICAL: First-level submenus drop DOWN (override specificity) */
.main-menu > ul > li > .submenu {
  top: 100% !important;
  left: 0 !important;
  transform-origin: top center !important;
}

/* CRITICAL: Nested submenus (cities) - ZERO GAP */
.main-menu ul li .submenu li .submenu {
  top: 0 !important;
  left: 100% !important; /* Flush against parent */
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-left: -1px !important; /* Overlap border */
}

/* Show first-level on hover */
.main-menu > ul > li:hover > .submenu {
  visibility: visible !important;
  opacity: 1 !important;
}

/* CRITICAL: Keep submenu visible when hovering parent OR the submenu itself */
.main-menu ul li .submenu li.has-dropdown:hover > .submenu,
.main-menu ul li .submenu li.has-dropdown > .submenu:hover {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: auto !important;
}

/* Keep parent dropdown open when hovering nested cities */
.main-menu > ul > li:has(.submenu:hover) > .submenu {
  visibility: visible !important;
  opacity: 1 !important;
}

/* =======================
   RESPONSIVE ADJUSTMENTS
   ======================= */

@media (max-width: 991px) {
  .header-style-two.sticky {
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
  }
}

/* =======================
   ANIMATION ENHANCEMENTS
   ======================= */

.main-menu ul li:hover > .submenu {
  animation: glassSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes glassSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shimmer effect on hover (optional subtle enhancement) */
.main-menu ul li .submenu li a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.1), transparent);
  transition: left 0.5s;
}

.main-menu ul li .submenu li:hover > a::after {
  left: 100%;
}
/* Force all dropdown menu links to be WHITE - Override any conflicting styles */
.main-menu ul li .submenu li a,
.main-menu ul li .mega-menu li ul li a,
.main-menu ul li .mega-menu .mega-menu-title {
  color: #ffffff !important;
}

.main-menu ul li .submenu li:hover > a,
.main-menu ul li .mega-menu li ul li a:hover {
  color: #ffffff !important;
}

.main-menu ul li .mega-menu .mega-menu-title {
  color: #EA1826 !important;
}

.main-menu ul li .mega-menu .mega-menu-title:hover {
  color: #ffffff !important;
}