/* ─────────────────────────────────────────────────────────
   Shared Setup site navigation.
   Mounted on every public page except the singles portal.
   All selectors are prefixed `.site-nav` so they don't
   collide with per-page styles, and use class specificity
   (which beats the bare `nav { ... }` rules embedded on
   the legacy pages).
   ───────────────────────────────────────────────────────── */

.site-nav {
    /* `sticky` keeps the nav at the top while scrolling but also
       lets it occupy space in the document flow when first painted —
       so legal pages whose content starts immediately after the nav
       don't sit under it. Index's hero accounts for nav height too. */
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1.25rem 2rem 1.25rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(100, 157, 208, 0.15);
    font-family: 'Outfit', sans-serif;
}

.site-nav-logo {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: #111E2A;
}

.site-nav-mark {
    width: 56px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.site-nav-wordmark {
    height: 40px;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.site-nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav-links a {
    text-decoration: none;
    color: #595959;
    font-size: 0.95rem;
    font-weight: 400;
    transition: color 0.2s;
    letter-spacing: 0.01em;
}

.site-nav-links a:hover {
    color: #3C648F;
}

.site-nav-links a.site-nav-active {
    color: #3C648F;
    font-weight: 500;
}

.site-nav-cta {
    background: #3C648F;
    color: #FFFFFF !important;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.2s, transform 0.2s !important;
}

.site-nav-cta:hover {
    background: #111E2A !important;
    transform: translateY(-1px);
}

.site-nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #111E2A;
}

.site-nav-mobile {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(253, 251, 254, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    z-index: 101;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    font-family: 'Outfit', sans-serif;
}

.site-nav-mobile[hidden] {
    display: none !important;
}

.site-nav-mobile a {
    text-decoration: none;
    font-size: 1.25rem;
    color: #595959;
    font-weight: 400;
    transition: color 0.2s;
}

.site-nav-mobile a:hover {
    color: #3C648F;
}

.site-nav-mobile a.site-nav-active {
    color: #3C648F;
    font-weight: 500;
}

.site-nav-mobile-cta {
    background: #3C648F;
    color: #FFFFFF !important;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    font-weight: 500;
}

.site-nav-mobile-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #111E2A;
    padding: 0.25rem;
}

/* Reserve vertical space for the fixed nav before it injects,
   so the page doesn't visibly jump when the nav arrives. The
   legal pages have no hero, so their first content starts at
   the top of the viewport. */
#site-nav {
    display: block;
    min-height: 78px;
}

@media (max-width: 768px) {
    .site-nav {
        padding: 1rem 1rem;
    }
    .site-nav-links {
        gap: 1rem;
    }
    .site-nav-links li {
        display: none;
    }
    .site-nav-hamburger {
        display: flex;
    }
    #site-nav {
        min-height: 70px;
    }
}