/* Dropdown menu fix for both desktop and mobile */

/* Common styles for dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer !important;
    position: relative;
    z-index: 1;
}

.dropdown-menu {
    display: none; /* Hidden by default */
    z-index: 999;
}

/* Desktop styles (hover behavior handled by JS) */
@media only screen and (min-width: 768px) {
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background-color: #fff;
        border: 1px solid #ddd;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding: 5px 0;
    }
    
    .dropdown-menu li {
        display: block;
        margin: 0;
        padding: 0;
    }
    
    .dropdown-menu li a {
        padding: 8px 15px !important;
        display: block;
        color: #1d5681;
        font-size: 14px;
        white-space: nowrap;
    }
    
    .dropdown-menu li a:hover {
        color: #f6c92d !important;
        background-color: #f8f8f8;
    }
    
    /* Down arrow indicator for desktop */
    .dropdown-toggle .dropdown-arrow {
        display: inline-block;
        margin-left: 5px;
        font-size: 10px;
    }
}

/* Mobile styles */
@media only screen and (max-width: 767px) {
    /* Style the dropdown menu for mobile */
    .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        background-color: #f8f8f8 !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 20px !important;
        margin-top: 0 !important;
    }
    
    /* Style the dropdown menu items */
    .dropdown-menu li {
        margin-left: 0 !important;
        padding: 5px 0 !important;
        display: block !important;
        border-bottom: 1px solid #eee;
    }
    
    .dropdown-menu li:last-child {
        border-bottom: none;
    }
    
    .dropdown-menu li a {
        padding: 8px 0 !important;
        display: block !important;
        color: #1d5681 !important;
        font-size: 14px !important;
    }
    
    /* Highlight the dropdown menu items on hover */
    .dropdown-menu li a:hover {
        color: #f6c92d !important;
        background-color: transparent !important;
    }
    
    /* Ensure dropdown parent is block level on mobile */
    .dropdown {
        display: block !important;
    }
    
    /* Make the dropdown toggle more obvious */
    .dropdown-toggle {
        display: block !important;
        width: 100% !important;
    }
    
    /* Down arrow indicator for mobile */
    .dropdown-toggle .dropdown-arrow {
        display: inline-block;
        margin-left: 5px;
        font-size: 12px;
        color: #f6c92d;
    }
    
    /* Add a background to the dropdown toggle when active */
    .dropdown.active .dropdown-toggle {
        color: #f6c92d !important;
    }
}