/**
 * Header & Navigation Styles
 */

#header {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#header.bg-white {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.logo-white {
    filter: brightness(0) invert(1);
}

.logo-dark {
    filter: none;
    background-color: black;
}

/* Nav Link Hover Effects */
.nav-menu a:not(.bg-brand-blue) {
    position: relative;
}

.nav-menu a:not(.bg-brand-blue)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: currentColor;
    transition: width 0.3s ease;
}

.nav-menu a:not(.bg-brand-blue):hover::after {
    width: 100%;
}

/* Mobile Nav Links Animation */
.mobile-nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.mobile-nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #00AEEF;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.mobile-nav-link:hover::after {
    width: 100%;
}

/* Mobile Menu Toggle Animation */
#mobileMenu {
    z-index: 90;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
}

#menuToggle {
    cursor: pointer;
    z-index: 100;
}

#menuToggle .line-1,
#menuToggle .line-2,
#menuToggle .line-3 {
    transition: all 0.3s ease;
}

#menuToggle.active .line-1 {
    transform: translateY(8px) rotate(45deg);
}

#menuToggle.active .line-2 {
    opacity: 0;
}

#menuToggle.active .line-3 {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mega Menu Customizations */
.nav-menu .group:hover > a {
    color: white !important;
}

#header.bg-white .nav-menu .group:hover > a {
    color: #0060AE !important;
}

/* Ensure mega menu links are ALWAYS visible against their white background */
.nav-menu .absolute ul li a {
    color: #374151 !important; /* Dark gray text */
    font-weight: 500;
}

.nav-menu .absolute ul li a:hover {
    color: #0060AE !important; /* Brand blue on hover */
}

.nav-menu .absolute h4 {
    color: #9CA3AF !important; /* Light gray for headers */
}

.nav-menu .group i {
    transition: transform 0.3s ease;
}