/**
 * Navigation Dropdown Styles
 * Custom CSS for nested menu dropdowns
 */

/* Desktop: Ensure submenus position correctly */
#site-nav .mhs-submenu {
    /* Smooth transition for visibility */
    pointer-events: none;
}

#site-nav .group:hover > .mhs-submenu,
#site-nav .group:focus-within > .mhs-submenu {
    pointer-events: auto;
}

/* Nested submenu positioning */
#site-nav .mhs-submenu .mhs-submenu {
    left: 100%;
    top: 0;
    margin-left: 0;
}

/* Mobile: Submenu animations */
.mhs-mobile-submenu {
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

.mhs-mobile-submenu.hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.mhs-mobile-submenu:not(.hidden) {
    max-height: 500px;
    opacity: 1;
}

/* Chevron rotation transition */
.mhs-chevron {
    transition: transform 0.2s ease;
}

.mhs-chevron.rotate-180 {
    transform: rotate(180deg);
}

/* Focus styles for accessibility */
#site-nav a:focus,
#mobile-nav a:focus,
.mhs-submenu-toggle:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Dropdown shadow enhancement */
#site-nav .mhs-submenu {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
}

/* Dropdown arrow indicator (optional enhancement) */
#site-nav .group > .mhs-submenu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    border-top: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
}

/* Mobile menu item spacing */
#mobile-nav .mhs-mobile-menu-item + .mhs-mobile-menu-item {
    margin-top: 0.5rem;
}

/* Active/current menu item highlight */
#site-nav .current-menu-item > a,
#site-nav .current-menu-ancestor > a {
    color: white;
}

#mobile-nav .current-menu-item > a,
#mobile-nav .current-menu-item > div > a {
    color: white;
    font-weight: 600;
}