/*
 * Site chrome shared by every page that uses partials/header.php and partials/footer.php:
 * the homepage family (.home-redesign: home, apps) and the editorial pages (.settings-page, .legal-page:
 * settings, legal pages, 404). Load after styles.css and before the family stylesheet, which keeps only
 * its own differences (editorial-pages.css overrides a few footer tones; home-redesign.css adds the
 * in-page section markers).
 */

/* Header */
:is(.home-redesign, .settings-page, .legal-page) #header {
    background: var(--k-paper-clean);
    border-bottom: 0;
    outline: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:is(.home-redesign, .settings-page, .legal-page) #header .container {
    height: 4.75rem;
}

:is(.home-redesign, .settings-page, .legal-page) .desktop-nav button,
:is(.home-redesign, .settings-page, .legal-page) .desktop-nav .nav-link {
    font-family: var(--k-font-display);
    font-size: 1.0625rem;
    font-weight: 475;
    line-height: 1;
    letter-spacing: -0.012em;
    font-synthesis: none;
    padding: 0.65rem 0.8rem;
    border-radius: var(--k-radius-sm);
    color: var(--k-ink);
}

:is(.home-redesign, .settings-page, .legal-page) .desktop-nav button:hover,
:is(.home-redesign, .settings-page, .legal-page) .desktop-nav .nav-link:hover {
    background: transparent;
    color: var(--primary);
}

:is(.home-redesign, .settings-page, .legal-page) .desktop-nav .nav-login-btn {
    margin-left: 0.75rem;
    border-color: rgba(17, 20, 25, 0.28);
    color: var(--k-ink);
}

:is(.home-redesign, .settings-page, .legal-page) .desktop-nav .nav-login-btn:hover {
    background: var(--k-ink);
    border-color: var(--k-ink);
    color: #fff;
    transform: none;
}

/*
 * Sign-in slot while auth-ui.js resolves the session: the login button holds its exact size,
 * its label hides and the brand spinner turns in its place. If the state never arrives
 * (script blocked, network down), the plain button returns after 8 seconds.
 */
.nav-login-btn .nav-auth-progress {
    display: none;
}

:is(.home-redesign, .settings-page, .legal-page) :is(.nav-auth-slot, .mobile-auth-slot)[data-auth="pending"] .nav-login-btn {
    position: relative;
    pointer-events: none;
    animation: k-auth-fallback-click 0s 8s forwards;
}

:is(.home-redesign, .settings-page, .legal-page) :is(.nav-auth-slot, .mobile-auth-slot)[data-auth="pending"] .nav-login-btn > :not(.nav-auth-progress) {
    visibility: hidden;
    animation: k-auth-fallback-show 0s 8s forwards;
}

:is(.home-redesign, .settings-page, .legal-page) :is(.nav-auth-slot, .mobile-auth-slot)[data-auth="pending"] .nav-auth-progress {
    display: inline-flex;
    position: absolute;
    inset: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin: auto;
    background: var(--k-ink);
    animation: k-auth-fallback-hide 0s 8s forwards;
}

:is(.nav-auth-slot, .mobile-auth-slot) .nav-auth-progress .klogsoft-progress-glyph {
    width: 0.62rem;
    height: 0.62rem;
}

@keyframes k-auth-fallback-click {
    to {
        pointer-events: auto;
    }
}

@keyframes k-auth-fallback-show {
    to {
        visibility: visible;
    }
}

@keyframes k-auth-fallback-hide {
    to {
        visibility: hidden;
    }
}

/* Mobile menu */
:is(.home-redesign, .settings-page, .legal-page) .mobile-menu button,
:is(.home-redesign, .settings-page, .legal-page) .mobile-menu .nav-link {
    font-family: var(--k-font-display);
    font-size: 1.0625rem;
    font-weight: 475;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-synthesis: none;
}

:is(.home-redesign, .settings-page, .legal-page) .mobile-menu {
    top: 4.75rem; /* match the 4.75rem header so no strip of the page shows through */
    border-bottom: 0;
}

:is(.home-redesign, .settings-page, .legal-page) .mobile-menu.active {
    border-bottom: 1px solid var(--k-line);
}

@media (min-width: 768px) {
    :is(.home-redesign, .settings-page, .legal-page) .mobile-menu {
        display: none;
    }
}

/* Footer */
:is(.home-redesign, .settings-page, .legal-page) .footer {
    padding: clamp(4rem, 7vw, 6.5rem) 0 1.5rem;
    border-top: 0;
    background: #232325;
    color: #f6f5ef;
}

:is(.home-redesign, .settings-page, .legal-page) .footer-content {
    align-items: flex-start;
    margin-bottom: 3.5rem;
}

:is(.home-redesign, .settings-page, .legal-page) .footer-title {
    max-width: 18ch;
    color: #f6f5ef;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 470;
    line-height: 1;
    letter-spacing: -0.055em;
}

:is(.home-redesign, .settings-page, .legal-page) .footer-tagline,
:is(.home-redesign, .settings-page, .legal-page) .footer-bottom p {
    color: #8f96a1;
}

:is(.home-redesign, .settings-page, .legal-page) .footer-legal-links a {
    color: #a8aeb7;
}

:is(.home-redesign, .settings-page, .legal-page) .footer-legal-links a:hover {
    color: var(--k-accent-soft);
    text-decoration: none;
}

:is(.home-redesign, .settings-page, .legal-page) .footer-social a {
    border-color: var(--k-line-dark);
    border-radius: var(--k-radius-sm);
    background: rgba(255, 255, 255, 0.035);
    color: #c4c8ce;
}

:is(.home-redesign, .settings-page, .legal-page) .footer-social a::before {
    display: none;
}

:is(.home-redesign, .settings-page, .legal-page) .footer-social a:hover {
    border-color: var(--k-accent-soft);
    color: var(--k-accent-soft);
    transform: none;
}

:is(.home-redesign, .settings-page, .legal-page) .payment-methods,
:is(.home-redesign, .settings-page, .legal-page) .footer-bottom {
    border-color: var(--k-line-dark);
}

:is(.home-redesign, .settings-page, .legal-page) .payment-card-logos {
    filter: grayscale(1) brightness(1.7);
    opacity: 0.72;
}