/**
 * Header Navigation Styles
 * Enhances your existing CSS with dropdown functionality
 */

/* Dropdown Menus */
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.group:hover .group-hover\:visible {
    visibility: visible;
}

/* Fix dropdown hover - create invisible bridge */
.relative.group:hover > .absolute {
    pointer-events: auto !important;
}

/* Mobile Menu Dropdowns */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

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

/* Chevron rotation on hover */
.group:hover .group-hover\:rotate-180 {
    transform: rotate(180deg);
}

/* Ensure dropdowns appear above other content */
.relative.group {
    z-index: 100;
}

/* Add pseudo-element bridge to prevent dropdown from closing */
.relative.group > .absolute::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

/* Active menu item styling */
.current-menu-item a,
.current_page_item a {
    color: hsl(var(--accent)) !important;
}

.current-menu-item span.bg-accent {
    transform: scaleX(1);
}

/* Improve dropdown hover reliability */
.group:hover .group-hover\:-translate-y-1 {
    transform: translateY(0);
}

/* Ensure dropdown and its container maintain hover state */
.relative.group:hover > button {
    pointer-events: auto;
}

.relative.group:hover > .absolute {
    pointer-events: auto;
}

/* Make dropdown menu item hover states more reliable */
.group .absolute a {
    position: relative;
    z-index: 1;
}

/* Navbar Scrolled State */
#main-nav {
    transition: all 0.3s ease;
}

#main-nav.nav-scrolled {
    background-color: hsl(var(--background));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

#main-nav.nav-scrolled .nav-logo-text,
#main-nav.nav-scrolled .nav-mobile-toggle {
    color: hsl(var(--foreground)) !important;
}

#main-nav.nav-scrolled .main_menu_item {
    color: hsl(var(--secondary) / 0.7) !important;
}

#main-nav.nav-scrolled .main_menu_item:hover {
    color: hsl(var(--accent)) !important;
}