/* Mobile Navigation Fix - Override all conflicts */

@media (max-width: 768px) {
    /* Force show nav toggle button */
    .nav-toggle {
        display: block !important;
        position: relative !important;
        z-index: 1000 !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        color: var(--light-color) !important;
        background: none !important;
        border: none !important;
        padding: 5px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .scrolled .nav-toggle {
        color: var(--dark-color) !important;
    }
    
    /* Mobile menu styling */
    .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 70px !important;
        right: -300px !important;
        width: 250px !important;
        height: calc(100vh - 70px) !important;
        background: linear-gradient(135deg, #2c5282 0%, #3182ce 100%) !important;
        padding: 20px 0 !important;
        transition: all 0.3s ease !important;
        z-index: 999 !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2) !important;
        overflow-y: auto !important;
    }
    
    .nav-menu.active {
        right: 0 !important;
    }
    
    .nav-menu li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    .nav-menu li a {
        display: block !important;
        padding: 15px 25px !important;
        color: white !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        transition: all 0.3s ease !important;
        text-shadow: none !important;
    }
    
    .nav-menu li a:hover,
    .nav-menu li a.active {
        background-color: rgba(255,255,255,0.1) !important;
        color: #ffd700 !important;
        transform: translateX(10px) !important;
    }
    
    /* Hide desktop menu completely on mobile */
    .nav-menu:not(.active) {
        display: flex !important;
        right: -300px !important;
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 992px) {
    .nav-toggle {
        display: block !important;
    }
    
    .nav-menu {
        position: fixed !important;
        top: 70px !important;
        right: -350px !important;
        width: 300px !important;
    }
    
    .nav-menu.active {
        right: 0 !important;
    }
}

/* Desktop - hide toggle */
@media (min-width: 993px) {
    .nav-toggle {
        display: none !important;
    }
    
    .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        position: relative !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    
    .nav-menu li {
        margin: 0 0.5rem !important;
    }
    
    .nav-menu li a {
        padding: 0.5rem 1rem !important;
        border-bottom: none !important;
    }
}