/* Mobile Menu Fix */
@media only screen and (max-width: 993px) {

    /* Hide desktop menu by default */
    #mainmenu {
        display: none;
    }

    /* Make header relative on mobile to prevent slider overlap */
    header,
    header.autoshow,
    header.scrollOn,
    header.scrollOff {
        position: relative !important;
        background-color: #fff !important;
        height: auto !important;
    }

    /* When menu is open, make it fixed overlay */
    header.menu-open {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh !important;
        background-color: #fff !important;
        overflow-y: auto !important;
        z-index: 9999;
    }

    header.menu-open #mainmenu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 20px;
        /* Space for header top */
        padding-bottom: 50px;
    }

    header.menu-open #mainmenu li {
        display: block;
        float: none;
        margin: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    header.menu-open #mainmenu li a {
        color: #333 !important;
        padding: 15px 0;
        display: block;
        text-align: center;
        font-size: 18px;
    }

    /* Ensure logo is visible */
    header.menu-open #logo .logo-main,
    header.menu-open #logo .logo-mobile {
        display: none;
    }

    header.menu-open #logo .logo-mobile {
        display: inline-block !important;
        /* Show mobile logo if available */
    }

    /* Fallback if no mobile logo defined or visible */
    header.menu-open #logo img {
        filter: invert(0) !important;
        /* Ensure generic standard logo visibility if needed */
    }

    /* Adjust menu button color when menu is open (on white bg) */
    header.menu-open #menu-btn {
        color: #333 !important;
    }

    header.menu-open #menu-btn:before {
        color: #333 !important;
    }
}