/* 
 * Dropdown Fix for Team CREW Basketball Website
 * This file fixes dropdown menu behavior on the navbar
 */

/* Override hover styles for dropdown triggers */
.dropdown-container .dropdown-trigger:hover,
.dropdown-container .dropdown-trigger.active {
    background-color: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    color: #E63946 !important; /* Change text color to red for feedback */
    transition: color 0.3s ease !important;
}

/* Ensure dropdown content appears on hover */
.dropdown-container:hover .dropdown-content,
.dropdown-content.visible {
    display: block !important;
}

/* Force dropdown to display when hovering over dropdown content */
.dropdown-content:hover {
    display: block !important;
}

/* Ensure z-index for dropdown content is higher than other elements */
.dropdown-content {
    z-index: 2000 !important;
    /* Add box-shadow for better visual separation */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    /* Add slight margin for better hover detection */
    margin-top: 1px !important;
}

/* Better dropdown item styles for clearer hierarchy */
.dropdown-item {
    transition: all 0.2s ease !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dropdown-item:last-child {
    border-bottom: none !important;
}

/* Mobile tweaks */
@media (max-width: 991px) {
    /* Wider area for tapping dropdown on mobile */
    .dropdown-trigger {
        padding: 10px !important;
    }
    
    /* Larger dropdown area for easier mobile interaction */
    .dropdown-content {
        min-width: 200px !important;
        right: 0 !important; /* Align to right on mobile to prevent overflow */
    }
    
    /* Larger tap targets on dropdown items */
    .dropdown-item {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
}