/* Mobile Menu Fix V2 - Clear and simple rules */

/* For screens 1100px and wider - show normal horizontal menu */
@media (min-width: 1100px) {
    /* Hide mobile menu button */
    .mobile-menu-btn {
        display: none !important;
    }

    /* Show navigation menu horizontally */
    .nav-menu {
        display: flex !important;
        position: relative !important;
        flex-direction: row !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        top: auto !important;
        right: auto !important;
        z-index: auto !important;
        overflow: visible !important;
    }

    .nav-menu li {
        border: none !important;
        width: auto !important;
    }

    .nav-menu a {
        padding: 15px 20px !important;
        white-space: nowrap !important;
    }

    /* No overlay needed */
    .menu-overlay,
    body::after {
        display: none !important;
    }
}

/* For screens smaller than 1100px - mobile menu */
@media (max-width: 1099px) {
    /* Show mobile menu button */
    .mobile-menu-btn {
        display: block !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    /* Hide menu by default */
    .nav-menu {
        display: none !important;
    }

    /* Show and position menu when active */
    .nav-menu.active {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        background: white !important;
        box-shadow: -2px 0 20px rgba(0,0,0,0.3) !important;
        flex-direction: column !important;
        padding: 80px 0 20px 0 !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        margin: 0 !important;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }

    .nav-menu li {
        width: 100% !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .nav-menu a {
        display: block !important;
        padding: 18px 25px !important;
        font-size: 1em !important;
        width: 100% !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* No overlay - just the menu with shadow */
    /* Shadow creates visual separation without blocking */

    /* Ensure nav doesn't interfere */
    nav {
        height: auto !important;
    }

    nav .container {
        padding: 0 !important;
    }

    /* Hide old overlay */
    .menu-overlay {
        display: none !important;
    }
}

/* Mobile adjustments for small screens */
@media (max-width: 480px) {
    .nav-menu.active {
        width: 260px !important;
        padding: 70px 0 20px 0 !important;
    }

    .nav-menu a {
        padding: 15px 20px !important;
        font-size: 0.95em !important;
    }

    .mobile-menu-btn {
        padding: 8px 10px !important;
        font-size: 18px !important;
    }
}

/* Smallest screens (375px) */
@media (max-width: 375px) {
    .nav-menu.active {
        width: 240px !important;
        padding: 80px 0 15px 0 !important;
    }

    .nav-menu a {
        padding: 12px 15px !important;
        font-size: 0.9em !important;
    }

    .nav-menu li {
        border-bottom: 1px solid #e5e7eb !important;
    }

    .mobile-menu-btn {
        padding: 6px 8px !important;
        font-size: 16px !important;
        border-radius: 4px;
        min-width: 40px;
        min-height: 40px;
    }

    /* Ensure menu doesn't overflow on very small screens */
    @keyframes slideIn {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }
}