.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;
    }
}