/* ==========================================================================
   Site header — oversized transparent bar over the hero that condenses into
   a solid sticky bar once the page scrolls.
   ========================================================================== */

/*
 * The bar itself carries no background or backdrop-filter: either would make
 * it a containing block, which would trap the position:fixed drawer inside the
 * header's own box. Both backgrounds live on pseudo-element layers instead.
 */
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--bb-header-z);
}

.site-header::before,
.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity var(--bb-dur) var(--bb-ease);
}

/* Layer 1 — scrim keeping the white nav copy readable over a bright hero. */
.site-header::before {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.6) 45%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* Layer 2 — the solid bar, faded in once the page scrolls. */
.site-header::after {
    background-color: rgba(5, 4, 3, 0.94);
    border-bottom: 1px solid var(--bb-hairline);
    box-shadow: var(--bb-shadow-lg);
    opacity: 0;
}

@supports (backdrop-filter: blur(1px)) {
    .site-header::after {
        background-color: rgba(5, 4, 3, 0.82);
        backdrop-filter: blur(14px) saturate(1.2);
    }
}

.site-header.is-scrolled::before {
    opacity: 0;
}

.site-header.is-scrolled::after {
    opacity: 1;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 2.4vw, 3.5rem);
    width: 100%;
    max-width: var(--bb-shell);
    margin-inline: auto;
    padding: var(--bb-header-pad) var(--bb-gutter);
}

/* --- Brand --------------------------------------------------------------- */

.site-header__brand {
    flex: none;
    display: block;
    line-height: 0;
}

.site-header__logo {
    width: auto;
    height: var(--bb-logo-h);
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.75));
    transition: height var(--bb-dur) var(--bb-ease);
}

.site-header.is-scrolled .site-header__logo {
    height: var(--bb-logo-h-compact);
}

/* --- Primary navigation -------------------------------------------------- */

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.55vw, 2.1rem);
}

.site-nav__link {
    position: relative;
    display: block;
    padding-block: 0.4rem;
    color: var(--bb-text-warm);
    font-size: clamp(0.75rem, 0.66rem + 0.2vw, 0.9375rem);
    font-weight: 500;
    letter-spacing: var(--bb-tracking-nav);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--bb-dur) var(--bb-ease);
}

.site-nav__link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--bb-gold-700), var(--bb-gold-200), var(--bb-gold-700));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--bb-dur) var(--bb-ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    color: var(--bb-gold-300);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
    transform: scaleX(1);
}

.site-nav__link.is-active {
    color: var(--bb-gold-400);
}

.site-nav__link.is-active::after {
    transform: scaleX(1);
}

/* --- Header actions ------------------------------------------------------ */

.site-header__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.site-header__cta {
    /* Matches the ~51px button height in the template. */
    padding-block: 1.15em;
    padding-inline: clamp(1rem, 1.5vw, 1.85rem);
}

.site-header__cta .btn__label--short {
    display: none;
}

/* --- Hamburger ----------------------------------------------------------- */

.nav-toggle {
    display: none;
    place-items: center;
    width: 2.875rem;
    height: 2.875rem;
    border: 1px solid var(--bb-hairline);
    border-radius: var(--bb-radius);
    background-color: rgba(0, 0, 0, 0.35);
    color: var(--bb-gold-300);
    transition: border-color var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}

.nav-toggle:hover {
    border-color: var(--bb-gold-400);
    color: var(--bb-gold-100);
}

.nav-toggle__bars {
    position: relative;
    display: block;
    width: 1.25rem;
    height: 2px;
    background-color: currentColor;
    transition: background-color var(--bb-dur) var(--bb-ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transition: transform var(--bb-dur) var(--bb-ease);
}

.nav-toggle__bars::before {
    top: -6px;
}

.nav-toggle__bars::after {
    top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- Drawer backdrop ----------------------------------------------------- */

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--bb-header-z) - 1);
    background-color: rgba(0, 0, 0, 0.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--bb-dur) var(--bb-ease), visibility 0s linear var(--bb-dur);
}

.nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--bb-dur) var(--bb-ease), visibility 0s;
}

/* The drawer aside is desktop-only noise; the footer already carries it. */
.site-nav__aside {
    display: none;
}

/* ==========================================================================
   Compact layout — seven labels plus the logo and the CTA stop fitting here
   ========================================================================== */

@media (max-width: 1260px) {
    .nav-toggle {
        display: grid;
    }

    .site-header__cta .btn__label--full {
        display: none;
    }

    .site-header__cta .btn__label--short {
        display: inline;
    }

    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--bb-header-z) + 1);
        display: flex;
        flex-direction: column;
        width: min(24rem, 86vw);
        /* Top padding clears the bar; flex-start so a long list never clips. */
        padding: calc(var(--bb-logo-h-compact) + var(--bb-header-pad) * 2 + 1.5rem)
            var(--bb-gutter) 2.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-left: 1px solid var(--bb-hairline);
        background-color: var(--bb-ink);
        background-image: radial-gradient(
            120% 80% at 100% 0%,
            rgba(192, 141, 48, 0.14),
            transparent 60%
        );
        box-shadow: var(--bb-shadow-lg);
        transform: translateX(100%);
        visibility: hidden;
        /* Hiding waits for the slide-out; showing is immediate so the drawer
           is focusable on the very next frame. */
        transition: transform var(--bb-dur) var(--bb-ease),
            visibility 0s linear var(--bb-dur);
    }

    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--bb-dur) var(--bb-ease), visibility 0s;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav__item + .site-nav__item {
        border-top: 1px solid var(--bb-hairline-soft);
    }

    .site-nav__link {
        padding-block: 1.05rem;
        font-size: 0.9375rem;
        letter-spacing: var(--bb-tracking-wider);
    }

    .site-nav__link::after {
        bottom: 0.75rem;
        width: 1.75rem;
    }

    .site-nav__aside {
        display: grid;
        gap: 0.85rem;
        margin-top: 2.25rem;
        color: var(--bb-text-dim);
        font-size: 0.8125rem;
        letter-spacing: 0.04em;
    }

    .site-nav__aside a:hover {
        color: var(--bb-gold-300);
    }

    .site-nav__tagline {
        color: var(--bb-gold-500);
        font-size: 0.6875rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
    }
}

@media (max-width: 480px) {
    .site-header__cta {
        padding-inline: 0.9rem;
    }
}

/* ==========================================================================
   Solid variant — interior pages that have no hero behind the bar
   ========================================================================== */

.site-header--solid::before {
    opacity: 0;
}

.site-header--solid::after {
    opacity: 1;
}

.site-header--solid .site-header__logo {
    height: var(--bb-logo-h-compact);
}

/* ==========================================================================
   Laptop band — full nav on show, but no room to spare
   ========================================================================== */

/*
 * The logo is already condensed here (see tokens.css), which is most of the
 * fix. What is left is still a tight row: at 1280 it clears by 11px, which is
 * no margin at all. Pulling the two gaps in gives it about 25px more without
 * touching the page gutter, which would move every other section with it.
 */
@media (min-width: 1261px) and (max-width: 1899px) {
    .site-header__inner {
        gap: clamp(1rem, 1.8vw, 2.5rem);
    }

    .site-nav__list {
        gap: clamp(0.75rem, 1.25vw, 1.6rem);
    }
}