/* The one menu on every marketing page, written by scripts/build-header.mjs:
   the floating pill that docks into a full-width bar on scroll, its links,
   the "Who it's for" menu, the language switcher, the buttons, and the mobile
   menu. Moved here from marketing-layout.css and marketing-ui.css so the legal
   pages, which load neither, get the same menu. js/site-header.js runs it. */

/* Nav — a frosted pill that docks into a full-width bar once the page scrolls */
.site-nav-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 0.875rem 1rem 0.75rem;
    pointer-events: none;
    overflow: visible;
    background: transparent;
    isolation: isolate;
    transition: padding 0.38s ease;
}

/* Scrolled: the pill docks — it grows to the full width and meets the top edge,
   leaving one hairline under it. The links keep their place: the padding grows
   by exactly what the frame gains on each side. */
.site-nav-shell.is-scrolled {
    padding: 0;
}

.site-nav-shell .floating-nav {
    pointer-events: auto;
}

.floating-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem 0.5rem 1.25rem !important;
    max-width: min(88rem, calc(100vw - 2rem));
    margin: 0 auto;
    width: 100%;
    overflow: visible;
    /* A backing of its own, so the links read over footage and bright imagery. */
    background: rgba(9, 20, 28, 0.66) !important;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Not rounded-full's 9999px: a radius just past half the height still reads
       as a pill, and shrinks to square evenly instead of snapping at the end. */
    border-radius: 2rem;
    box-shadow: none;
    transition:
        max-width 0.38s ease,
        padding 0.38s ease,
        border-radius 0.38s ease,
        background 0.38s ease,
        backdrop-filter 0.38s ease,
        border-color 0.38s ease,
        box-shadow 0.38s ease;
}

@media (min-width: 1024px) {
    .floating-nav {
        gap: 1rem;
    }
}

.site-nav-shell.is-scrolled .floating-nav {
    max-width: 100%;
    padding-left: calc(max(1rem, (100% - 88rem) / 2) + 1.25rem) !important;
    padding-right: calc(max(1rem, (100% - 88rem) / 2) + 0.875rem) !important;
    border-radius: 0;
    background: rgba(9, 20, 28, 0.82) !important;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-color: transparent transparent rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-shell,
    .floating-nav {
        transition: none;
    }
}

.floating-nav a.text-base,
.floating-nav button.text-base {
    font-size: 0.9375rem;
}

/* The links are keys, not loose text: a pill hit area that matches the bar and
   the buttons, a soft fill on hover, and the same size as the button labels. */
.floating-nav .nav-links > a,
.floating-nav .nav-links > button,
.floating-nav .nav-links .nav-for-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.66);
    background: transparent;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.floating-nav .nav-links > a:hover,
.floating-nav .nav-links > a:focus-visible,
.floating-nav .nav-links > button:hover,
.floating-nav .nav-links > button:focus-visible,
.floating-nav .nav-for:hover .nav-for-btn,
.floating-nav .nav-for:focus-within .nav-for-btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.floating-nav .nav-links > a:focus-visible,
.floating-nav .nav-links > button:focus-visible,
.floating-nav .nav-for-btn:focus-visible {
    outline: 2px solid rgba(5, 199, 187, 0.7);
    outline-offset: 2px;
}

/* Nav layout — do not rely on Tailwind gap/shrink utilities (gap-5,
   flex-shrink-0 are not in the marketing Tailwind build). */
.floating-nav .nav-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* The bar while it arrives on page load (js/logo-intro.js): its backing moves
   to a layer of its own, which the script blends in and grows from the logo to
   the right. The colours come from the bar's own (top of the page or docked). */
.floating-nav.is-arriving {
    position: relative;
    background: transparent !important;
    border-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
    transition: none;
}
.floating-nav.is-arriving::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1px solid var(--arrive-edge);
    border-bottom-color: var(--arrive-edge-bottom);
    border-radius: inherit;
    background: var(--arrive-bg);
    backdrop-filter: var(--arrive-blur);
    -webkit-backdrop-filter: var(--arrive-blur);
    pointer-events: none;
}

/* The logo while it arrives on page load (js/logo-intro.js): the same
   lockup inline, as tall as the image it stands in for. */
.floating-nav .nav-brand .logo-intro {
    display: block;
    width: auto;
    overflow: visible;
}

.floating-nav .nav-links {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: visible;
}

@media (min-width: 1024px) {
    .floating-nav .nav-links {
        display: flex;
    }
}

.floating-nav .nav-links > a,
.floating-nav .nav-links > button {
    flex-shrink: 0;
}

/* The page you are on: white, with a short teal mark inside the key. "Who it's
   for" counts as current when one of its pages is. */
.floating-nav .nav-links > a[aria-current="page"],
.floating-nav .nav-for:has(.nav-for-item[aria-current="page"]) .nav-for-btn {
    color: #fff;
}

.floating-nav .nav-links > a[aria-current="page"]::after,
.floating-nav .nav-for:has(.nav-for-item[aria-current="page"]) .nav-for-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.25rem;
    width: 1rem;
    height: 2px;
    border-radius: 2px;
    background: #05c7bb;
    transform: translateX(-50%);
}

#mobileMenu a[aria-current="page"] { color: #05c7bb; }

/* "Who it's for" — the four audience pages in one menu. Opens on hover and on
   keyboard focus (focus-within), so it needs no script; tabbing from the
   button walks straight into the links. */
.floating-nav .nav-for {
    position: relative;
    flex-shrink: 0;
}

.floating-nav .nav-for-btn {
    border: 0;
    cursor: pointer;
}

.floating-nav .nav-for-btn i {
    font-size: 0.5625rem;
    opacity: 0.6;
    transition: transform 0.2s, opacity 0.2s;
}

.floating-nav .nav-for-menu {
    position: absolute;
    top: calc(100% + 1.15rem);
    left: 50%;
    width: 19rem;
    padding: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9rem;
    background: #0b1d28;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -4px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 70;
}

/* Keeps the menu open while the pointer crosses the gap below the button. */
.floating-nav .nav-for-menu::before {
    content: '';
    position: absolute;
    inset: -1.15rem 0 100%;
}

.floating-nav .nav-for:hover .nav-for-menu,
.floating-nav .nav-for:focus-within .nav-for-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.floating-nav .nav-for:hover .nav-for-btn,
.floating-nav .nav-for:focus-within .nav-for-btn {
    color: #fff;
}

.floating-nav .nav-for:hover .nav-for-btn i,
.floating-nav .nav-for:focus-within .nav-for-btn i {
    opacity: 1;
    transform: rotate(180deg);
}

.floating-nav .nav-for-item {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: 0.6rem;
    text-decoration: none;
}

.floating-nav .nav-for-item:hover,
.floating-nav .nav-for-item:focus-visible,
.floating-nav .nav-for-item[aria-current="page"] {
    background: rgba(0, 192, 180, 0.1);
    outline: none;
}

.floating-nav .nav-for-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f3f4f6;
}

.floating-nav .nav-for-item[aria-current="page"] .nav-for-title {
    color: #00c0b4;
}

.floating-nav .nav-for-line {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(209, 213, 219, 0.78);
}

/* Mobile menu: a solid sheet under the floating header. The links run down
   from the top, left-aligned with hairlines between them; the language switch,
   Log in and Sign up sit at the bottom. It scrolls when a short phone can't fit
   it. Own rules, not Tailwind classes, because vendor/tailwind.css is a fixed
   build. */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #0b1d28;
}

.mobile-menu.translate-x-full {
    transform: translateX(100%);
}

/* Closed, it is hidden too, so keyboard focus never lands on its links. */
.mobile-menu:not(.open) {
    visibility: hidden;
}

/* On short phones the list scrolls: links fade out under the floating header. */
.mobile-menu::before {
    content: '';
    position: fixed;
    inset: 0 0 auto;
    z-index: 1;
    height: 5.75rem;
    background: linear-gradient(180deg, #0b1d28 72%, rgba(11, 29, 40, 0));
    pointer-events: none;
}

.mobile-menu__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding: 6.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.mobile-menu__links {
    display: flex;
    flex-direction: column;
}

.mobile-menu__link {
    display: block;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
}

.mobile-for {
    display: flex;
    flex-direction: column;
    padding-top: 0.875rem;
}

.mobile-for > :last-child {
    padding-bottom: 1.0625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-for-label {
    margin-bottom: 0.25rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9ca3af;
}

.mobile-menu__sub {
    display: block;
    padding: 0.4375rem 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: #d1d5db;
    text-decoration: none;
}

.mobile-menu__link:hover,
.mobile-menu__sub:hover {
    color: #05c7bb;
}

.mobile-menu__foot {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto;
    padding-top: 2rem;
}

/* The mobile language list opens upwards, from the bottom of the sheet. */
#langSwitcherMobile {
    align-self: flex-start;
}

#langSwitcherMobile .lang-switcher-menu {
    top: auto;
    right: auto;
    left: 0;
    bottom: calc(100% + 6px);
}

.mobile-menu__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.mobile-menu__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.mobile-menu__btn--primary {
    border-color: transparent;
    background: linear-gradient(to right, #05c7bb, #04a096);
}

.floating-nav .nav-lang {
    display: none;
    flex-shrink: 0;
    align-items: center;
}

.floating-nav .nav-divider {
    flex-shrink: 0;
}

.floating-nav .nav-cta {
    display: none;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
}

@media (min-width: 1024px) {
    .floating-nav .nav-lang {
        display: flex;
    }

    .floating-nav .nav-cta {
        display: flex;
    }

    .floating-nav .nav-divider {
        display: block;
    }
}

.floating-nav .nav-cta a,
.floating-nav .nav-cta button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
}

.floating-nav .nav-cta .nav-cta-primary {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.floating-nav a,
.floating-nav button {
    white-space: nowrap;
}

/* Between the lg breakpoint and 1280px the full link set plus both CTAs
   still exceed the pill, so tighten spacing and reduce the secondary CTA
   to its icon rather than letting the bar overflow. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .floating-nav {
        padding-left: 1rem !important;
        padding-right: 0.625rem !important;
        column-gap: 0.75rem;
    }

    .floating-nav .nav-links {
        gap: 0;
    }

    .floating-nav .nav-links > a,
    .floating-nav .nav-links > button,
    .floating-nav .nav-links .nav-for-btn {
        padding: 0 0.625rem;
    }

    .floating-nav .nav-cta .nav-cta-login span {
        display: none;
    }

    .floating-nav .nav-cta .nav-cta-login i {
        margin-right: 0;
    }

    .floating-nav .nav-cta .nav-cta-login {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .floating-nav .nav-cta .nav-cta-primary {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Language switcher */
.lang-switcher {
    position: relative;
}
.lang-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: #9ca3af;
    font-size: 11px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    cursor: pointer;
}
.lang-switcher-btn:hover {
    color: #fff;
    border-color: rgba(0,192,180,.3);
}
.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    background: #0b1d28;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 70;
}
.lang-switcher.is-open .lang-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-switcher-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: none;
    color: #d1d5db;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}
.lang-switcher-menu button:hover,
.lang-switcher-menu button.is-active {
    background: rgba(0,192,180,.1);
    color: #00C0B4;
}

/* Mobile menu and burger */
/* Closing, it stays visible until the slide-out ends; opening, at once. */
#mobileMenu { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.5s; }
#mobileMenu.open { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
/* Opening, the menu's rows rise in one after another, top to bottom (--i is
   each row's place, set in build-header.mjs), once the sheet has mostly slid
   in. Closing, they fade out together. */
.mobile-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#mobileMenu.open .mobile-item {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(140ms + var(--i, 0) * 40ms);
}
@media (prefers-reduced-motion: reduce) {
    .mobile-item,
    #mobileMenu.open .mobile-item {
        transform: none;
        transition: opacity 0.2s ease;
        transition-delay: 0s;
    }
}
.burger-wrapper { position: relative; width: 40px; height: 40px; }
.burger-line {
    position: absolute; left: 50%; top: 50%; margin-left: -12px; margin-top: -1px;
    width: 24px; height: 2px; background: #fff; border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.burger-line.top { transform: translateY(-8px); }
.burger-line.mid { transform: translateY(0); }
.burger-line.bot { transform: translateY(8px); }
.menu-open .burger-line.top { transform: translateY(0) rotate(45deg); background: #05c7bb; }
.menu-open .burger-line.mid { opacity: 0; }
.menu-open .burger-line.bot { transform: translateY(0) rotate(-45deg); background: #05c7bb; }

/* The note at the top of a translated legal page: the English version is binding
   (apps/marketing/scripts/build-locale-pages.mjs). */
.locale-notice {
    max-width: 48rem;
    margin: 6.5rem auto 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(229, 231, 235, 0.85);
}