/**
 * Site header — fixed top bar hosting the wordmark logo.
 * Coexists with the burger (site-nav) which sits flush top-right.
 */

:root {
    /* Values calqued from react-src common/units: md.verticalMargin / menuHeight.
       Horizontal padding reuses the global --page-gutter so the logo aligns
       with body content. */
    --site-header-pad-y: clamp(12px, 1.84vw, 32px);
    --site-header-logo-h: clamp(24px, 2.5vw, 44px);
}

.site-header {
    position: fixed;
    top: var(--site-nav-admin-bar, 0);
    left: 0;
    /* Reserve room on the right for the burger square. */
    right: var(--site-nav-burger-size, 0);
    z-index: 99;
    display: flex;
    align-items: center;
    /* Pinned to the burger button's height so the logo's baseline ends at
     * exactly the same Y as the burger's bottom edge. The logo (height
     * --site-header-logo-h, smaller than the burger) is centred vertically
     * by the flex container. Horizontal padding stays on --page-gutter. */
    height: var(--site-nav-burger-size);
    padding: 0 var(--page-gutter);
    pointer-events: none;
}

.site-header > * {
    pointer-events: auto;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    height: var(--site-header-logo-h);
    color: #000;
    text-decoration: none;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.site-header__logo:hover,
.site-header__logo:focus-visible {
    transform: scale(1.02);
}

.site-header__logo svg {
    height: 100%;
    width: auto;
    display: block;
}

/* When the full-screen menu is open, tint the logo white so it stays visible
 * on top of the dark overlay. */
body.site-menu-open .site-header__logo {
    color: #fff;
}

/* WP's custom logo wrapper fallback. */
.site-header__logo .custom-logo-link {
    display: inline-flex;
    height: 100%;
}
.site-header__logo .custom-logo {
    height: 100%;
    width: auto;
    display: block;
}

/* Plain-text fallback when no logo. */
.site-header__text {
    font-family: var(--wp--preset--font-family--sharp-grotesk-expanded, "sharp-grotesk-expanded", Arial, Helvetica, sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    :root {
        /* Calqued on react-src sm.margin (6.03vw) and sm.menuHeight (7.72vw). */
        --site-header-pad-y: clamp(18px, 6.03vw, 36px);
        --site-header-logo-h: clamp(26px, 7.72vw, 48px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header__logo {
        transition-duration: 0.01ms !important;
    }
}