/* === DESKTOP DROPDOWN FIXED HOVER === */
header .menu-item-has-children {
  position: relative !important;
}

/* --- Level 1 submenu --- */
header .menu-item-has-children > .sub-menu {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  width: 240px !important;
  background: #fff !important;
  border: 1px solid rgba(255,0,255,0.15) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(255,0,255,0.12) !important;
  padding: 10px 0 !important;
  z-index: 9999 !important;

  /* Hide visually but keep active zone alive */
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
  pointer-events: none !important;
}

/* Keep submenu visible when hovering on parent or submenu itself */
header .menu-item-has-children:hover > .sub-menu,
header .menu-item-has-children > .sub-menu:hover {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* --- Hover bridge: invisible area between parent and submenu --- */
header .menu-item-has-children::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  height: 14px !important; /* invisible hover area */
  background: transparent !important;
  pointer-events: auto !important;
}

/* --- Level 2 submenu (shows to left) --- */
header .sub-menu .menu-item-has-children {
  position: relative !important;
}

header .sub-menu .menu-item-has-children > .sub-menu {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 100% !important;
  left: auto !important;
  width: 220px !important;
  background: #fff !important;
  border: 1px solid rgba(255,0,255,0.15) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(255,0,255,0.12) !important;
  padding: 10px 0 !important;
  z-index: 10000 !important;

  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateX(-10px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
  pointer-events: none !important;
}

/* Keep 2nd level visible on hover of parent or submenu */
header .sub-menu .menu-item-has-children:hover > .sub-menu,
header .sub-menu .menu-item-has-children > .sub-menu:hover {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Hover bridge for sub-submenus */
header .sub-menu .menu-item-has-children::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 100% !important;
  width: 12px !important;
  height: 100% !important;
  background: transparent !important;
  pointer-events: auto !important;
}

/* --- Link styles --- */
header .sub-menu .menu-item a {
  display: block !important;
  color: #333 !important;
  padding: 10px 16px !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  z-index: 10 !important;
}

header .sub-menu .menu-item a:hover {
  background: rgba(255,0,255,0.06) !important;
  color: #ff00ff !important;
  padding-left: 22px !important;
}

/* --- Arrow indicators --- */
header .menu-item-has-children > a::after {
  content: "▼" !important;
  font-size: 10px !important;
  margin-left: 6px !important;
  opacity: 0.6 !important;
}

header .sub-menu .menu-item-has-children > a::after {
  content: "◀" !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 10px !important;
  opacity: 0.6 !important;
}

/* --- MOBILE --- */
@media screen and (max-width: 768px) {
  header .menu-item-has-children > .sub-menu,
  header .sub-menu .menu-item-has-children > .sub-menu {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: none !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(255,0,255,0.03) !important;
  }
  header .menu-item-has-children.active > .sub-menu {
    display: block !important;
  }
}