/**
 * Bootstrap Dropdown Mobile Fix CSS
 * Ensures dropdowns are visible and properly positioned on mobile devices
 */

@media (max-width: 991.98px) {
    /* Ensure dropdown menus are visible and positioned correctly on mobile */
    .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        z-index: 1000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0.125rem !important;
        min-width: 10rem !important;
        padding: 0.5rem 0 !important;
        background-color: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    
    .dropdown-menu.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure dropdown items are touch-friendly */
    .dropdown-item {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 1rem !important;
        clear: both !important;
        font-weight: 400 !important;
        color: #212529 !important;
        text-align: inherit !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        background-color: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        min-height: 44px !important; /* Apple's recommended minimum touch target size */
        line-height: 32px !important;
    }
    
    .dropdown-item:hover,
    .dropdown-item:focus {
        color: #1e2125 !important;
        background-color: #e9ecef !important;
    }
    
    .dropdown-item:active {
        color: #fff !important;
        background-color: #0d6efd !important;
    }
    
    /* Ensure dropdown toggle is touch-friendly */
    .dropdown-toggle {
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Fix positioning for nav dropdowns */
    .header-nav .dropdown {
        position: relative !important;
    }
    
    .header-nav .dropdown-menu {
        position: absolute !important;
        will-change: transform !important;
    }
}