/**
 * MENU.CSS - Dropdown Menu Styles
 * Clean, Simple, JavaScript Controlled
 */

/* Dropdown Container */
.has-dropdown {
    position: relative;
    z-index: 10001;
    overflow: visible !important;
}

.nav-item.has-dropdown {
    overflow: visible !important;
    z-index: 10001;
}

/* Ensure dropdown menu is part of hover area */
.has-dropdown .dropdown-menu {
    pointer-events: auto !important;
}

/* Dropdown Menu Base */
.dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Dropdown Arrow */
.dropdown-arrow {
    font-size: 0.625rem;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.has-dropdown:hover .dropdown-arrow,
.has-dropdown.menu-open .dropdown-arrow {
    transform: rotate(180deg);
}

/* Desktop Dropdown - Hover Effect on Nav Link */
@media screen and (min-width: 769px) {
    .has-dropdown:hover .nav-link,
    .has-dropdown.menu-open .nav-link,
    .has-dropdown.menu-clicked .nav-link {
        border-bottom-color: var(--primary);
        background: var(--bg-tertiary);
    }
}

/* Dropdown Menu Items */
.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.dropdown-menu a:hover {
    background: var(--bg-secondary);
    color: var(--primary);
    padding-left: 1.75rem;
}

.dropdown-menu a:active {
    transform: scale(0.98);
}

.dropdown-menu a i {
    width: 20px;
    text-align: center;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.dropdown-menu a:hover i {
    color: var(--primary);
}

/* Scrollbar */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Mobile Dropdown */
@media screen and (max-width: 768px) {
    .has-dropdown .dropdown-menu {
        position: static;
        box-shadow: none;
        background: var(--bg-secondary);
        margin: 0.5rem 0 0 1rem;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        width: calc(100% - 2rem);
    }
}