/* Emergency Mobile Navigation Fix */
/* This file should override any conflicting styles */

@media (max-width: 991.98px) {
    /* Ensure navbar toggler is visible and functional */
    .navbar-toggler {
        display: block !important;
        position: absolute !important;
        right: 15px !important;
        top: 15px !important;
        z-index: 1051 !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 0.375rem !important;
        margin: 0 !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
        outline: none !important;
    }
    
    .navbar-toggler:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.7) !important;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        width: 1.5em !important;
        height: 1.5em !important;
    }
    
    /* Fix Bootstrap collapse functionality */
    .navbar-collapse {
        position: relative !important;
        width: 100% !important;
        margin-top: 1rem !important;
        padding: 1rem !important;
        background-color: rgba(25, 135, 84, 0.95) !important;
        border-radius: 0.375rem !important;
    }
    
    /* Critical: Ensure proper display behavior */
    .navbar-collapse:not(.show) {
        display: none !important;
    }
    
    .navbar-collapse.show {
        display: block !important;
    }
    
    .navbar-collapse.collapsing {
        display: block !important;
        height: auto !important;
        transition: none !important;
    }
    
    /* Ensure nav items are properly styled */
    .navbar-nav {
        width: 100% !important;
        flex-direction: column !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: block !important;
        width: 100% !important;
    }
    
    .navbar-nav .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }
    
    /* Dropdown menu styling for mobile */
    .navbar-nav .dropdown-menu {
        position: static !important;
        display: none !important;
        border: none !important;
        box-shadow: none !important;
        background-color: rgba(25, 135, 84, 0.2) !important;
        padding-left: 1.5rem !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    .navbar-nav .nav-item.dropdown.show > .dropdown-menu {
        display: block !important;
    }
    
    .dropdown-item {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 0.5rem 1rem !important;
    }
    
    .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }
    
    /* Fix navbar container layout */
    .navbar .container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 70px !important;
        padding: 0.5rem 1rem !important;
    }
    
    .main-nav {
        position: relative !important;
        min-height: 80px !important;
    }
    
    /* Ensure navbar brand takes most space but leaves room for toggler */
    .navbar-brand {
        flex: 1 !important;
        max-width: calc(100% - 60px) !important;
        justify-content: center !important;
    }
}