/* Site header: frosted bar that tucks away on scroll down, a gliding hover pill, a mobile sheet.
   Shares the ink/grey tokens of the ft2/hw2 redesign pages. */

:root {
    --nav-h: 64px;
    --nav-ink: #1d1d1f;
    --nav-body: #424245;
    --nav-muted: #6e6e73;
    --nav-hair: rgba(29, 29, 31, 0.1);
    --nav-blue: #0f69ff;
    --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-padding-top: calc(var(--nav-h) + 16px); }
html.site-nav-locked, html.site-nav-locked body { overflow: hidden; }

.site-nav {
    position: sticky; top: 0; z-index: 1030;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Lato, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: transform 0.45s var(--nav-ease);
}
.site-nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(255, 255, 255, 0);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 transparent;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.site-nav.is-scrolled::before { background: rgba(255, 255, 255, 0.72); box-shadow: 0 1px 0 var(--nav-hair); }
.site-nav.is-tucked { transform: translateY(-100%); }

.site-nav__bar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
    max-width: 1120px; height: var(--nav-h); margin: 0 auto; padding: 0 24px;
}
.site-nav__logo { justify-self: start; display: flex; align-items: center; margin-left: -6px; border-radius: 10px; }
.site-nav__logo img { display: block; width: 80px; height: 50px; }

/* Links, centred between logo and actions */
.site-nav__links { position: relative; display: flex; align-items: center; gap: 2px; }
.site-nav__links a {
    position: relative; z-index: 1;
    padding: 8px 14px; border-radius: 980px;
    font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.2;
    color: var(--nav-body); text-decoration: none; white-space: nowrap;
    transition: color 0.2s ease;
}
.site-nav__links a:hover, .site-nav__links a:focus-visible { color: var(--nav-ink); text-decoration: none; }
.site-nav__links a[aria-current="page"] { color: var(--nav-ink); }
.site-nav__links a[aria-current="page"]::after {
    content: ""; position: absolute; left: 50%; bottom: 1px;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--nav-ink);
}
.site-nav__glide {
    position: absolute; top: 0; left: 0; height: 100%; width: 0;
    border-radius: 980px; background: rgba(29, 29, 31, 0.06);
    opacity: 0; transform: translateX(0);
    transition: transform 0.4s var(--nav-ease), width 0.4s var(--nav-ease), opacity 0.25s ease;
    pointer-events: none;
}
.site-nav__links.is-gliding .site-nav__glide { opacity: 1; }

/* Actions */
.site-nav__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.site-nav__login {
    padding: 8px 12px; border-radius: 980px;
    font-size: 14.5px; font-weight: 500; color: var(--nav-body); text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.site-nav__login:hover { color: var(--nav-ink); background: rgba(29, 29, 31, 0.06); text-decoration: none; }

.site-nav__demo {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px 9px 18px; border-radius: 980px;
    font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; white-space: nowrap;
    color: #ffffff; background: var(--nav-ink); text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--nav-ease);
}
.site-nav__demo svg { transition: transform 0.35s var(--nav-ease); }
.site-nav__demo:hover, .site-nav__demo:focus-visible {
    color: #ffffff; text-decoration: none; background: var(--nav-blue);
    box-shadow: 0 6px 16px -6px rgba(15, 105, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.site-nav__demo:hover svg { transform: translateX(3px); }
.site-nav__demo:active { transform: scale(0.97); }

/* Focus ring shared by everything in the bar */
.site-nav a:focus-visible, .site-nav button:focus-visible { outline: 2px solid var(--nav-blue); outline-offset: 2px; }

/* Menu button: two bars that fold into an X */
.site-nav__toggle {
    display: none; position: relative;
    width: 40px; height: 40px; margin-right: -8px; padding: 0;
    border: 0; border-radius: 12px; background: transparent; cursor: pointer;
}
.site-nav__toggle span {
    position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px; background: var(--nav-ink);
    transition: transform 0.4s var(--nav-ease), top 0.4s var(--nav-ease);
}
.site-nav__toggle span:first-child { top: 16px; }
.site-nav__toggle span:last-child  { top: 22px; }
.site-nav.is-open .site-nav__toggle span:first-child { top: 19px; transform: rotate(45deg); }
.site-nav.is-open .site-nav__toggle span:last-child  { top: 19px; transform: rotate(-45deg); }

/* Mobile sheet */
.site-nav__sheet {
    position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0;
    display: flex; flex-direction: column; gap: 28px;
    padding: 16px 24px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
    opacity: 0; transition: opacity 0.3s ease;
}
.site-nav.is-open .site-nav__sheet { opacity: 1; }
.site-nav__sheet-links { display: flex; flex-direction: column; }
.site-nav__sheet-links a {
    padding: 10px 0; border-bottom: 1px solid var(--nav-hair);
    font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
    color: var(--nav-ink); text-decoration: none;
}
.site-nav__sheet-links a[aria-current="page"] { color: var(--nav-blue); }
.site-nav__sheet-links a, .site-nav__sheet-actions {
    opacity: 0; transform: translateY(-8px);
    transition: opacity 0.4s ease, transform 0.5s var(--nav-ease);
    transition-delay: calc(var(--i, 0) * 35ms);
}
.site-nav.is-open .site-nav__sheet-links a, .site-nav.is-open .site-nav__sheet-actions { opacity: 1; transform: none; }
.site-nav__sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.site-nav__demo--block, .site-nav__login--block { justify-content: center; padding: 15px 20px; font-size: 17px; text-align: center; }
.site-nav__login--block { background: rgba(29, 29, 31, 0.06); color: var(--nav-ink); font-weight: 600; }

@media (max-width: 1100px) {
    .site-nav__links a { padding: 8px 10px; }
}
@media (max-width: 991.98px) {
    .site-nav__links, .site-nav__actions > .site-nav__login { display: none; }
    .site-nav__toggle { display: block; }
    .site-nav.is-open::before { background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 0 var(--nav-hair); }
}
@media (max-width: 400px) {
    .site-nav__bar { padding: 0 16px; }
    .site-nav__actions .site-nav__demo { padding: 8px 14px; }
    .site-nav__actions .site-nav__demo svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav, .site-nav *, .site-nav::before { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
    .site-nav.is-tucked { transform: none; }
}