/* ===== Shared Header Styles ===== */

/* Header glass-morphism */
#tpn-header {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

.dark #tpn-header {
    background: rgba(24, 24, 27, 0.82);
    border-bottom-color: rgba(63, 63, 70, 0.5);
}

/* Spacer to push content below fixed header */
.header-spacer {
    height: 56px;
}

@media (min-width: 768px) {
    .header-spacer {
        height: 64px;
    }
}

/* Desktop dropdown animation */
.nav-dropdown {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-dropdown.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Mobile menu animation */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease;
    opacity: 0;
}

.mobile-menu.open {
    max-height: 100vh;
    opacity: 1;
}

/* Mobile accordion children */
.mobile-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.mobile-children.open {
    max-height: 300px;
}

/* Active nav link */
.nav-active {
    color: #059669;
}

.dark .nav-active {
    color: #34d399;
}