/* Dropdown Menu Styles */
/* Container for the dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: 220px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 8px;
    overflow: hidden;
    top: 100%;
    /* Position below the parent */
    left: 0;
    margin-top: 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--bg-color);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    padding-left: 20px;
    /* Slight movement effect */
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Add an arrow indicator to the main link */
.dropdown>a::after {
    content: "\f107";
    /* FontAwesome down arrow */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 6px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.dropdown:hover>a::after {
    transform: rotate(180deg);
}

/* Mobile Adjustments for Dropdown */
@media screen and (max-width: 768px) {
    .dropdown {
        display: block;
        width: 100%;
        text-align: center;
    }

    .dropdown-content {
        position: static;
        /* Relative positioning on mobile */
        display: none;
        /* Keep hidden until interaction (or change to always show if prefer) */
        box-shadow: none;
        width: 100%;
        background-color: var(--bg-color);
        margin-top: 0;
        border: none;
    }

    /* On mobile, maybe we want it to be collapsible or just always visible? 
       Using hover on mobile is tricky. 
       Let's make it so it appears when hovering (touch) or just stack them.
       For simplicity without JS, we can make it display block on active state or just use hover which acts as tap.
    */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown-content a {
        padding-left: 2rem;
        /* Indent sub-menus */
        text-align: left;
        background-color: #f9f9f9;
    }
}