/**
 * Guidee Mega Menu – Desktop Full-Width + Mobile Slide Panel
 * Version: 1.2.1
 * Last modified: 2026-03-26
 * Extracted from original header.css. All mega rules preserved exactly.
 */
/* NEW SLIDE-IN MEGA MENU PANEL – GPU-accelerated translateX + overscroll lock */
#guidee-mega-slide-panel {
  position: fixed !important;
  top: 0 !important;
  transform: translateX(-100%) !important;
  width: 100vw !important;
  height: 100vh !important;
  background: var(--guidee-white) !important;
  z-index: 9999999 !important;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease !important;
  overflow-y: auto !important;
  padding: 90px 20px 20px !important;
  box-sizing: border-box !important;
  font-family: sans-serif !important;
  color: var(--cosmo-text) !important;
  will-change: transform, opacity !important;
  opacity: 0 !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
#guidee-mega-slide-panel.open {
  transform: translateX(0) !important;
  opacity: 1 !important;
}
body.guidee-mobile-menu-open {
  overscroll-behavior: none !important;
}
/* X close button – always absolute */
#guidee-mega-slide-panel .guidee-mega-close {
  position: absolute !important;
  top: 20px !important;
  right: 35px !important;
  font-size: 30px !important;
  font-weight: bold !important;
  color: var(--guidee-charcoal) !important;
  cursor: pointer !important;
  z-index: 100003 !important;
}
#guidee-mega-slide-panel .guidee-mega-close:hover {
  color: var(--guidee-spring-green) !important;
}
/* LOGO AREA – always absolute from start */
#guidee-mega-slide-panel .guidee-cosmo-logo {
  position: absolute !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: block !important;
  max-height: 48px !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 100002 !important;
}
/* MOBILE / TABLET MEGAMENU – PERFECT ALIGNMENT */
#guidee-mega-slide-panel .mega-menu,
#guidee-mega-slide-panel .mega-menu.max-mega-menu.mega-menu-horizontal {
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}
#guidee-mega-slide-panel .mega-menu-link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 16px 50px 16px 20px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  text-decoration: none !important;
  min-height: 56px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  text-align: left !important;
  justify-content: flex-start !important;
  cursor: pointer !important;
}
#guidee-mega-slide-panel .mega-menu-link-text {
  flex: 1 !important;
  padding-left: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}
/* Cumulative indentation */
#guidee-mega-slide-panel .mega-sub-menu .mega-menu-link-text { padding-left: 32px !important; }
#guidee-mega-slide-panel .mega-sub-menu .mega-sub-menu .mega-menu-link-text { padding-left: 64px !important; }
#guidee-mega-slide-panel .mega-sub-menu .mega-sub-menu .mega-sub-menu .mega-menu-link-text { padding-left: 96px !important; }
#guidee-mega-slide-panel .mega-sub-menu .mega-sub-menu .mega-sub-menu .mega-sub-menu .mega-menu-link-text { padding-left: 128px !important; }
/* Chevron */
#guidee-mega-slide-panel .mega-indicator {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-90deg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  background-image: url('https://guidee.co.uk/wp-content/uploads/2026/03/chevron-left-light.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.3s ease !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  z-index: 1 !important;
  cursor: pointer !important;
}
#guidee-mega-slide-panel .mega-menu-item-has-children.mega-toggle-on .mega-indicator,
#guidee-mega-slide-panel .mega-menu-item-has-children.mega-open .mega-indicator,
#guidee-mega-slide-panel .mega-menu-item-has-children.open .mega-indicator {
  transform: translateY(-50%) rotate(90deg) !important;
}
#guidee-mega-slide-panel .mega-menu-item:not(.mega-menu-item-has-children) .mega-indicator {
  display: none !important;
}
/* Force every level full width */
#guidee-mega-slide-panel .mega-sub-menu,
#guidee-mega-slide-panel .mega-menu-column,
#guidee-mega-slide-panel .mega-menu-item[class*="mega-menu-columns-"],
#guidee-mega-slide-panel .mega-sub-menu .mega-sub-menu .mega-menu-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
/* Toggle visibility */
#guidee-mega-slide-panel .mega-menu-item-has-children.mega-toggle-on > .mega-sub-menu,
#guidee-mega-slide-panel .mega-menu-item-has-children.mega-toggle-on .mega-sub-menu,
#guidee-mega-slide-panel .mega-menu-item-has-children.mega-open > .mega-sub-menu,
#guidee-mega-slide-panel .mega-menu-item-has-children.open > .mega-sub-menu {
  display: block !important;
}
/* Hide search overlay when slide panel is open */
body.guidee-mobile-menu-open #guidee-mobile-search-overlay,
body.guidee-mobile-menu-open .guidee-search-overlay {
  display: none !important;
}
/* Hide original MMM toggle on mobile */
@media (max-width: 1023px) {
  .mega-menu-toggle {
    display: none !important;
  }
}
/* Hide desktop mega artifacts on mobile/tablet */
@media (max-width: 1023px) {
  body.mega-open::before,
  .guidee-blue-stripe,
  .guidee-full-mega-wrapper {
    display: none !important;
  }
}
/* MOBILE/TABLET MEGAMENU TEXT & BULLET FIX */
#guidee-mega-slide-panel .mega-menu,
#guidee-mega-slide-panel .mega-sub-menu,
#guidee-mega-slide-panel .mega-menu-item,
#guidee-mega-slide-panel .mega-menu-link,
#guidee-mega-slide-panel .mega-menu-link-text,
#guidee-mega-slide-panel a.mega-menu-link {
  color: var(--cosmo-text) !important;
  list-style: none !important;
  text-decoration: none !important;
}
#guidee-mega-slide-panel ul,
#guidee-mega-slide-panel .mega-sub-menu ul,
#guidee-mega-slide-panel .mega-sub-menu li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}