/* 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;
}

.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);
}

/* Centre the mobile menu when it fits and scroll it from the top when it doesn't,
   so the first item never slides under the floating header on short phones. */
#mobileMenu {
    align-items: flex-start;
    overflow-y: auto;
}

#mobileMenu > .relative.z-10 {
    margin-block: auto;
    padding-block: 6rem 2.5rem;
}

.mobile-for {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

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

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

.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 */
#mobileMenu { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.mobile-item { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
#mobileMenu.open .mobile-item { opacity: 1; transform: translateY(0); }
.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; }