/* ===== FORCE MOBILE MENU CLOSED BY DEFAULT (works with Elementor, HFE, ElementsKit, JetMenu) ===== */
@media (max-width: 1024px){

  /* Hide any mobile menu containers by default */
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown,
  .elementor-widget-nav-menu .elementor-nav-menu__container,
  .hfe-nav-menu__container,
  .jet-mobile-menu__container,
  .ekit-wid-con nav.ekit-navbar,
  .elementskit-menu-container,
  .ekit-menu-container,
  .hb-mobile-menu,
  .hb-offcanvas,
  .site-header .mobile-menu,
  .site-header .nav-menu--dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Show ONLY when the toggle says it's open (aria-expanded="true") */
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu__container,
  .elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu__container,
  .hfe-nav-menu__toggle[aria-expanded="true"] + .hfe-nav-menu__container,
  .jet-mobile-menu__toggle[aria-expanded="true"] + .jet-mobile-menu__container,
  .ekit-navbar-toggle[aria-expanded="true"] + nav.ekit-navbar,
  .ekit-menu-toggle[aria-expanded="true"] + .elementskit-menu-container,
  .ekit-menu-toggle[aria-expanded="true"] + .ekit-menu-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: auto !important;
    position: relative;
    z-index: 9999;
    background: #fff; /* make sure it’s visible */
  }

  /* Make sure the hamburger is visible on mobile */
  .elementor-widget-nav-menu .elementor-menu-toggle,
  .hfe-nav-menu__toggle,
  .jet-mobile-menu__toggle,
  .ekit-navbar-toggle,
  .ekit-menu-toggle {
    display: flex !important;
    z-index: 10000;
  }

  /* Hide the horizontal/desktop menu on mobile so only hamburger shows */
  .elementor-widget-nav-menu .elementor-nav-menu--main,
  .hfe-nav-menu,
  .jet-desktop-menu,
  .ekit-nav-menu--desktop {
    display: none !important;
  }
}