/* ============================================================
   Site header — one bar, every page.

   Namespaced (.site-header / .sh-*) on purpose: style.css still carries
   the old .navbar rules and the home page does not load style.css at
   all. With its own class names this file is the only thing that styles
   the header, so it renders identically on all pages.

   Fixed and 64px tall, the same as the header it replaced, because the
   older pages already compensate for a 64px fixed bar.
   ============================================================ */

html { scroll-padding-top: 76px; }

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(7, 18, 36, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.site-header .sh-inner {
    max-width: 1280px;
    height: 64px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.site-header .sh-logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.site-header .sh-logo svg { height: 34px; width: auto; display: block; }
/* style.css has a global  svg { stroke: currentColor; stroke-width: 2 }  and inside
   a link currentColor is orange, so on every page that loads it the logo text
   inherited an orange outline. The home page does not load style.css and
   showed clean white. Pin both so the logo is identical everywhere. The
   polyline keeps its own stroke attribute, which beats inheritance. */
.site-header { color: #ffffff; }
.site-header .sh-logo { color: #ffffff; }
.site-header .sh-logo svg { fill: none; stroke: none; }
.site-header .sh-logo text { stroke: none; }

.site-header .sh-links { display: flex; align-items: center; gap: 28px; }
.site-header .sh-links a {
    color: #ffffff;
    opacity: 0.86;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.site-header .sh-links a:hover,
.site-header .sh-links a[aria-current="page"] { opacity: 1; color: #f59a1a; }

.site-header .sh-links a.sh-cta {
    opacity: 1;
    color: #14202f;
    background: #f59a1a;
    padding: 11px 18px;
    border-radius: 7px;
    font-weight: 700;
}
.site-header .sh-links a.sh-cta:hover { color: #14202f; background: #fbbf24; }

.site-header .sh-toggle { display: none; }

@media (max-width: 900px) {
    .site-header .sh-inner { padding: 0 16px; }
    .site-header .sh-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px; height: 40px;
        padding: 8px;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .site-header .sh-toggle span {
        display: block; width: 24px; height: 2px;
        background: #ffffff; border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .site-header .sh-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header .sh-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .site-header .sh-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-header .sh-links {
        display: none;
        position: absolute;
        top: 64px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 16px 18px;
        background: #071224;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .site-header .sh-links.open { display: flex; }
    .site-header .sh-links a {
        padding: 15px 6px;
        font-size: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .site-header .sh-links a.sh-cta { margin-top: 14px; text-align: center; border-bottom: 0; }
}