/* site-nav.css - the public site's fixed navigation bar (partials/site_nav.php).
 *
 * Its own small file because it is shared by two layouts with different
 * stylesheets: layouts/marketing (marketing.css, no core.css, no Bootstrap)
 * and layouts/auth (core.css + Bootstrap). So nothing here leans on either -
 * every rule is prefixed .sn- and colours are literal brand values.
 *
 * The bar is FIXED, so a page using it reserves --sn-h at its top: the
 * marketing heroes already pad for it, the auth layout pads body.has-site-nav.
 */
:root { --sn-h: 68px; }

.sn-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1030;
    background: rgba(0, 28, 71, .88);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 18px rgba(0, 15, 40, .22);
    transition: box-shadow .25s ease, background-color .25s ease;
    font-size: 15px;
    line-height: 1.4;
}
/* A hairline of the accent under the bar - the one flourish. */
.sn-bar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, .55) 30%, rgba(0, 200, 255, .55) 70%, transparent);
    opacity: .6;
}
.sn-bar.is-scrolled {
    background: rgba(0, 24, 62, .95);
    box-shadow: 0 10px 32px rgba(0, 15, 40, .38);
}

/* Full width: logo hard left, actions hard right - never aligned to a page's
   content column, because the pages under it do not share one. */
.sn-inner {
    padding: 0 clamp(1rem, 2.5vw, 2.5rem);
    height: var(--sn-h);
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: height .25s ease;
}
.sn-bar.is-scrolled .sn-inner { height: 58px; }

.sn-brand { display: flex; align-items: center; flex: none; }
.sn-brand img { height: 34px; width: auto; display: block; transition: height .25s ease; }
.sn-bar.is-scrolled .sn-brand img { height: 30px; }

.sn-menu { display: flex; align-items: center; flex: 1; gap: 1.5rem; }
.sn-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .35rem;
    flex: 1;
}
.sn-links a,
.sn-signin {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .8rem;
    color: #dbeafe;
    text-decoration: none;
    font-weight: 500;
    border-radius: .5rem;
    transition: color .18s ease, background-color .18s ease;
}
.sn-links a:hover,
.sn-signin:hover { color: #ffffff; background: rgba(255, 255, 255, .07); }
/* Underline grows from the centre on hover; the current page keeps it. */
.sn-links a::after {
    content: "";
    position: absolute;
    left: .8rem; right: .8rem; bottom: .25rem;
    height: 2px;
    border-radius: 2px;
    background: #00c8ff;
    transform: scaleX(0);
    transition: transform .22s ease;
}
.sn-links a:hover::after,
.sn-links a[aria-current="page"]::after { transform: scaleX(1); }
.sn-links a[aria-current="page"] { color: #ffffff; }

.sn-actions { display: flex; align-items: center; gap: .5rem; }
.sn-cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    background: #00c8ff;
    color: #001c47;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 200, 255, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}
.sn-cta:hover { color: #001c47; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 200, 255, .45); }
.sn-cta i { transition: transform .18s ease; }
.sn-cta:hover i { transform: translateX(3px); }

.sn-links a:focus-visible,
.sn-signin:focus-visible,
.sn-cta:focus-visible,
.sn-brand:focus-visible,
.sn-burger:focus-visible { outline: 2px solid #00c8ff; outline-offset: 2px; }

/* ---- Burger (below 900px) ------------------------------------------ */
.sn-burger {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .6rem;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    position: relative;
}
.sn-burger span {
    position: absolute;
    left: 12px; right: 12px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.sn-burger span:nth-child(1) { top: 15px; }
.sn-burger span:nth-child(2) { top: 21px; }
.sn-burger span:nth-child(3) { top: 27px; }
.sn-bar.is-open .sn-burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.sn-bar.is-open .sn-burger span:nth-child(2) { opacity: 0; }
.sn-bar.is-open .sn-burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 900px) {
    :root { --sn-h: 60px; }
    .sn-inner { padding: 0 1rem; gap: 1rem; }
    .sn-bar.is-scrolled .sn-inner { height: var(--sn-h); }
    .sn-brand img,
    .sn-bar.is-scrolled .sn-brand img { height: 30px; }
    .sn-burger { display: block; }

    /* The panel drops from under the bar, full width. Hidden by visibility as
       well as height so its links are out of the tab order while closed. */
    .sn-menu {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem 1rem 1.25rem;
        background: #00183e;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 18px 40px rgba(0, 15, 40, .45);
        max-height: calc(100dvh - var(--sn-h));
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }
    .sn-bar.is-open .sn-menu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .2s ease, transform .2s ease, visibility 0s;
    }
    .sn-links { flex-direction: column; gap: 0; }
    .sn-links li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
    .sn-links a {
        display: flex;
        padding: .95rem .25rem;
        font-size: 1.05rem;
        border-radius: 0;
    }
    .sn-links a:hover { background: none; }
    .sn-links a::after { display: none; }
    .sn-links a[aria-current="page"] { color: #00c8ff; }
    .sn-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
        margin-top: .75rem;
    }
    .sn-signin {
        justify-content: center;
        padding: .8rem;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: .65rem;
        font-size: 1rem;
    }
    .sn-cta { justify-content: center; padding: .85rem; font-size: 1rem; border-radius: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sn-bar, .sn-inner, .sn-brand img, .sn-menu, .sn-burger span,
    .sn-links a::after, .sn-cta, .sn-cta i { transition: none !important; }
}

/* ---- layouts/auth with the bar ($siteNav) ---------------------------
   The split fills the screen BELOW the bar, not behind it. */
body.has-site-nav { padding-top: var(--sn-h); }
body.has-site-nav .auth-split { min-height: calc(100vh - var(--sn-h)); min-height: calc(100dvh - var(--sn-h)); }
#sign-in { scroll-margin-top: calc(var(--sn-h) + 1rem); }
/* On a phone the bar already carries the logo; the hero's big one would be a
   second copy pushing the form further down. */
@media (max-width: 820px) {
    body.has-site-nav .auth-logo-link { display: none; }
}