/* CRITICAL: Mobile Navigation Fix for Paper Kit CSS Conflicts */
/* This file must be loaded AFTER paper-kit.css to override its problematic rules */

@media (max-width: 767px) {
    /* Override Paper Kit's white color rule that's causing the issue */
    [class*="navbar-"] .navbar-nav > li > a, 
    [class*="navbar-"] .navbar-nav > li > a:hover, 
    [class*="navbar-"] .navbar-nav > li > a:focus, 
    [class*="navbar-"] .navbar-nav .active > a, 
    [class*="navbar-"] .navbar-nav .active > a:hover, 
    [class*="navbar-"] .navbar-nav .active > a:focus, 
    [class*="navbar-"] .navbar-nav .open .dropdown-menu > li > a, 
    [class*="navbar-"] .navbar-nav .open .dropdown-menu > li > a:hover, 
    [class*="navbar-"] .navbar-nav .open .dropdown-menu > li > a:focus, 
    [class*="navbar-"] .navbar-nav .navbar-nav .open .dropdown-menu > li > a:active {
        color: #0f2a3a !important;
        background-color: #ffffff !important;
        border: 2px solid #0f2a3a !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Force all navigation elements to be visible and properly styled */
    .navbar-light .navbar-nav .nav-item .nav-link,
    .navbar-light .navbar-nav .nav-item .btn,
    .navbar-light .navbar-nav .dropdown-item,
    .navbar-light .navbar-nav .nav-link,
    .navbar-light .navbar-nav .btn,
    .navbar-nav .nav-link,
    .navbar-nav .btn,
    .navbar-nav .dropdown-item {
        color: #0f2a3a !important;
        background-color: #ffffff !important;
        border: 2px solid #0f2a3a !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        font-weight: 600 !important;
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
        width: 100% !important;
        transition: all 0.25s ease !important;
    }
    
    /* Hover effects for mobile navigation */
    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .btn:hover,
    .navbar-nav .nav-link:hover,
    .navbar-nav .btn:hover {
        color: #ffffff !important;
        background: #0f2a3a !important;
        border-color: #0f2a3a !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(15, 42, 58, 0.3) !important;
    }
    
    /* Ensure hamburger menu is visible */
    .navbar-toggler {
        border: 2px solid #0f2a3a !important;
        background-color: #ffffff !important;
        color: #0f2a3a !important;
        visibility: visible !important;
        display: block !important;
        border-radius: 6px !important;
        padding: 0.5rem 0.75rem !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15, 42, 58, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        visibility: visible !important;
    }
    
    /* Mobile menu container styling */
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 12px !important;
        margin-top: 1rem !important;
        padding: 1rem !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* CTA button special styling */
    .navbar-nav .btn-cta {
        background: #0f2a3a !important;
        color: #ffffff !important;
        border: 2px solid #0f2a3a !important;
        font-weight: 600 !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 8px !important;
        margin-top: 0.5rem !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        transition: all 0.3s ease !important;
    }
    
    .navbar-nav .btn-cta:hover {
        background: #0b1f2b !important;
        color: #ffffff !important;
        border-color: #0b1f2b !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 12px rgba(15, 42, 58, 0.4) !important;
    }
}