/* Shared site chrome: the same glass header and footer on every Citifyer page. */
#site-nav {
    background-color: transparent;
    transition:
        background-color 500ms ease,
        border-color 500ms ease,
        box-shadow 500ms ease,
        padding 500ms ease,
        backdrop-filter 500ms ease;
}

#site-nav.citifyer-nav-scrolled {
    background-color: rgb(255 255 255 / 0.70);
    border-color: rgb(255 255 255 / 0.55);
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.04);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#site-nav.citifyer-nav-dark {
    background-color: rgb(3 7 17 / 0.72);
    border-color: rgb(255 255 255 / 0.12);
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

#site-nav.citifyer-nav-dark .citifyer-nav-link,
#site-nav.citifyer-nav-dark #mobile-menu-btn {
    color: #f8fbff;
}

#site-nav.citifyer-nav-dark .citifyer-nav-link:hover {
    background-color: rgb(255 255 255 / 0.10);
    color: #6ee7b7;
}

#site-nav.citifyer-nav-dark #desktop-menu-container {
    background-color: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.12);
}

#site-nav.citifyer-nav-dark .citifyer-burger-line {
    background-color: #f8fbff;
}

#site-nav.menu-open #mobile-menu-btn .citifyer-burger-line {
    background-color: #002735;
}

#site-nav.citifyer-nav-scrolled #desktop-menu-container {
    background-color: rgb(226 232 240 / 0.50);
    border: 1px solid rgb(203 213 225 / 0.50);
}

#site-nav.citifyer-nav-scrolled .citifyer-nav-link:hover {
    background-color: rgb(255 255 255 / 0.88);
    box-shadow: 0 2px 8px rgb(15 23 42 / 0.06);
}

#site-nav #mobile-menu-overlay {
    isolation: isolate;
}

#site-nav #mobile-menu-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.07;
    background-image: radial-gradient(rgb(0 39 53 / 0.25) 0.7px, transparent 0.7px);
    background-size: 12px 12px;
}

@media (prefers-reduced-motion: reduce) {
    #site-nav,
    #mobile-menu-overlay,
    #mobile-menu-overlay .citifyer-mobile-link,
    #mobile-actions,
    .citifyer-burger-line {
        transition-duration: 0.01ms !important;
    }
}