/**
 * TU Mobile Menu Styles - Working implementation from homepage
 * This CSS fixes the mobile hamburger menu to properly show menu options
 */

/* Mobile menu toggle icon switching - only applies when button exists */
.elementor-menu-toggle {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open {
  display: inline-block !important;
}
.elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--close {
  display: none !important;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open {
  display: none !important;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
  display: inline-block !important;
}

/* Mobile breakpoint: toggle is visible, horizontal nav hidden, dropdown controlled by JS */
@media (max-width: 1024px) {
  /* Hide the horizontal desktop nav on mobile */
  .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main,
  .elementor-nav-menu--dropdown-mobile .elementor-nav-menu--main {
    display: none !important;
  }

  /* Show hamburger toggle on mobile */
  .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle,
  .elementor-nav-menu--dropdown-mobile .elementor-menu-toggle,
  .elementor-nav-menu--toggle .elementor-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10001 !important;
  }

  /* Mobile dropdown: hidden by default, shown when elementor-active added by JS */
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #000000 !important;
    background-color: #000000 !important;
    z-index: 999999 !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.9) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container.elementor-active,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  nav.elementor-nav-menu--dropdown ul.elementor-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 8px 0 16px 0 !important;
    list-style: none !important;
    width: 100% !important;
    background: transparent !important;
  }

  nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li:last-child {
    border-bottom: none !important;
  }

  nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s !important;
  }

  nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a:hover,
  nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a.elementor-item-active {
    color: #ff9800 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  nav.elementor-nav-menu--dropdown .sub-menu {
    display: none;
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 10px 0 !important;
    background-color: #121212 !important;
  }

  nav.elementor-nav-menu--dropdown .sub-menu.elementor-active,
  nav.elementor-nav-menu--dropdown .sub-menu.is-active {
    display: block !important;
    visibility: visible !important;
  }

  nav.elementor-nav-menu--dropdown .sub-menu li a {
    display: block !important;
    padding: 10px 20px 10px 36px !important;
    color: #cccccc !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
  }

  nav.elementor-nav-menu--dropdown .sub-menu li a:hover {
    color: #ff9800 !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
  }

  nav.elementor-nav-menu--dropdown .sub-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
  }

  nav.elementor-nav-menu--dropdown .sub-arrow svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
    transition: transform 0.25s ease !important;
  }

  nav.elementor-nav-menu--dropdown .menu-item-has-children.sub-menu-open > a .sub-arrow svg {
    transform: rotate(180deg) !important;
  }
}

/* Desktop (>1024px): make sure mobile dropdown nav is properly hidden */
@media (min-width: 1025px) {
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none !important;
  }
  .elementor-menu-toggle {
    display: none !important;
  }
}