/* 1. Position the parent item */
.nav-links li {
    position: relative; 
    display: flex;
    align-items: center;
    height: 100%;
}

/* 2. Dropdown Container Styling */
.dropdown-content {
    display: none;             /* Keep hidden by default */
    position: absolute;
    top: var(--nav-height);    
    left: 0;
    background: rgba(10, 10, 10, 0.95); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    min-width: 200px;
    border: 1px solid var(--glass-border);
    border-top: none;          
    border-radius: 0 0 12px 12px;
    list-style: none;
    padding: 10px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1100;
    
    /* Animation setup */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 3. Individual Dropdown Links */
.dropdown-content li {
    width: 100%;
}

.dropdown-content a {
    padding: 12px 20px;
    display: block;
    font-size: 0.75rem;
    color: #bbb;
    transition: 0.2s;
}

/* 4. CLICK TRIGGER (Replaces Hover) */
/* This class is added/removed via JavaScript */
.dropdown-content.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-content a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary-orange);
    padding-left: 25px; 
}

/* 5. Add a small arrow indicator */
.dropbtn::after {
    content: ' ▾';
    font-size: 0.6rem;
    vertical-align: middle;
    opacity: 0.5;
}