.site-navigation-toggle-holder,
.elementor-menu-toggle {
    display: none;
}

@media (max-width: 1024px) {

    /* Configurable sizes for mobile menu */
    .site-navigation-dropdown {
        --header-height: 64px;
        --nav-panel-width: 320px;
    }

    /* Ensure header sits above content */
    header.site-header {
        z-index: 10001;
        position: relative;
    }

    .site-navigation {
        display: none;
        /* Hide desktop menu on mobile */
    }

    .site-navigation-toggle-holder,
    .elementor-menu-toggle {
        display: block;
        position: relative;
        padding: 1rem;
        cursor: pointer;
    }

    .site-navigation-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .site-navigation-toggle-icon {
        position: relative;
        width: 24px;
        height: 2px;
        background-color: #333;
        transition: all 0.3s ease;
    }

    .site-navigation-toggle-icon::before,
    .site-navigation-toggle-icon::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 2px;
        background-color: #333;
        transition: all 0.3s ease;
    }

    .site-navigation-toggle-icon::before {
        transform: translateY(-8px);
    }

    .site-navigation-toggle-icon::after {
        transform: translateY(8px);
    }

    .site-navigation-toggle-icon.active {
        background-color: transparent;
    }

    .site-navigation-toggle-icon.active::before {
        transform: rotate(45deg);
    }

    .site-navigation-toggle-icon.active::after {
        transform: rotate(-45deg);
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    /* Make dropdown a fixed left panel under the header */
    .site-navigation-toggle-holder+.site-navigation-dropdown {
        position: fixed !important;
        top: var(--header-height);
        left: 0;
        width: var(--nav-panel-width);
        right: auto;
        bottom: 0;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        overflow-y: auto;
        transform-origin: top;
    }

    /* Override Hello defaults that constrain inside header */
    .site-navigation-dropdown ul.menu {
        position: static !important;
        width: 100% !important;
        /* fill the left panel */
        margin: 0;
        padding: 0;
        background: #fff;
    }

    .site-navigation-dropdown ul.menu>li {
        display: block;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .site-navigation-dropdown ul.menu>li:last-child {
        border-bottom: none;
    }

    .site-navigation-dropdown ul.menu a {
        display: block;
        padding: 16px 20px;
        color: #2a2a2a;
        text-decoration: none;
        font-weight: 500;
    }

    /* Submenu presentation */
    .site-navigation-dropdown .menu-item-has-children>a::after {
        content: '▾';
        float: right;
        opacity: 0.7;
        transition: transform 0.25s ease;
    }

    .site-navigation-dropdown .submenu-open>a::after {
        transform: rotate(180deg);
    }

    /* Reset Hello desktop submenu behavior inside mobile dropdown */
    .site-navigation-dropdown ul.menu li ul {
        position: static !important;
        /* base state; overridden for open state below */
        left: auto !important;
        top: auto !important;
        min-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
        background: #fafafa;
        display: block;
        /* we'll hide via parent class below */
        margin: 0;
        padding: 0;
    }

    /* By default hide submenus */
    .site-navigation-dropdown .sub-menu {
        display: none;
    }

    .site-navigation-dropdown .submenu-open>.sub-menu {
        display: block;
    }

    /* Remove transform-based collapsing from Hello styles */
    .site-navigation-dropdown ul.menu>li li {
        max-height: none !important;
        transform: none !important;
    }

    .site-navigation-dropdown .submenu-open>ul>li {
        max-height: none !important;
        transform: none !important;
    }

    /* Flyout panel: when a submenu is open, show it as a right panel */
    .site-navigation-dropdown .submenu-open>.sub-menu {
        position: fixed !important;
        top: var(--header-height);
        left: var(--nav-panel-width);
        right: 0;
        bottom: 0;
        width: auto;
        background: #ffffff;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.10);
        overflow-y: auto;
        z-index: 10002;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-navigation-dropdown .sub-menu li {
        border-bottom: 1px solid #eee;
        padding: 0;
    }

    .site-navigation-dropdown .sub-menu a {
        padding: 16px 20px !important;
        font-weight: 400;
        background: #fff;
        display: block;
    }

    /* Elementor Mobile Menu Styles */
    .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .elementor-nav-menu--dropdown.elementor-nav-menu__container.elementor-active {
        max-height: 100vh !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: 10002 !important;
    }

    /* Ensure Elementor menu toggle is clickable */
    .elementor-menu-toggle {
        z-index: 10002;
        cursor: pointer;
    }
}