/* Shared Header Styles for RevisitCare */

:where(:root) {
    /* Default brand colors - can be overridden in each template */
    --nav-primary: #2563eb;         /* Blue 600 */
    --nav-primary-hover: #1d4ed8;   /* Blue 700 */
}

.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    animation: nav-slide-down 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nav-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Link Interactions */
.nav-hover-text-primary {
    transition: all 0.3s ease;
}

.nav-hover-text-primary:hover {
    color: var(--nav-primary);
    transform: translateY(-1px);
}

/* Theme-aware Utility Classes */
.nav-text-primary {
    color: var(--nav-primary);
    transition: color 0.3s ease;
}

.nav-bg-primary {
    background-color: var(--nav-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-bg-primary:hover {
    background-color: var(--nav-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}

.nav-bg-primary:active {
    transform: translateY(0);
}

/* Mobile Menu Drawer */
#mobileMenu {
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobileMenu.active {
    transform: translateX(0);
}

/* Mobile Menu Stagger Effect */
.mobile-nav-item {
    opacity: 0;
    transform: translateY(20px);
}

#mobileMenu.active .mobile-nav-item {
    animation: item-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes item-fade-in {
    to { opacity: 1; transform: translateY(0); }
}

.delay-100 { animation-delay: 100ms !important; }
.delay-200 { animation-delay: 200ms !important; }
.delay-300 { animation-delay: 300ms !important; }
.delay-400 { animation-delay: 400ms !important; }

/* Ensure dropdowns are visible on hover */
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

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