/**
 * Site navigation — big square burger + full-screen slide-in overlay.
 *
 * Entrance: easeOutExpo — sharp attack, long gentle landing (editorial-grade).
 * Exit: easeInExpo (mirror) — efficient.
 * Items translate on Y with a 90ms stagger.
 */

:root {
    --site-nav-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --site-nav-ease-in: cubic-bezier(0.7, 0, 0.84, 0);

    --site-nav-duration-open: 1100ms;
    --site-nav-duration-close: 700ms;
    --site-nav-item-duration: 1000ms;
    --site-nav-item-exit-duration: 420ms;
    --site-nav-item-start-delay: 480ms;
    --site-nav-stagger: 90ms;

    --site-nav-burger-size: clamp(72px, 6vw, 108px);
    --site-nav-burger-bg: #000;
    --site-nav-burger-fg: #fff;
    --site-nav-panel-bg: #0F0F0F;
    --site-nav-panel-fg: #fff;
    --site-nav-panel-muted: #969696;

    /* Admin bar offset — WP adds body.admin-bar when showing. */
    --site-nav-admin-bar: 0px;
}

body.admin-bar {
    --site-nav-admin-bar: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --site-nav-admin-bar: 46px;
    }
}

/* Lock page scroll while the panel is open. */
body.site-menu-open {
    overflow: hidden;
}

/* Screen-reader-only text (WP standard). */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Burger ---------- */

.site-burger {
    position: fixed;
    top: var(--site-nav-admin-bar);
    right: 0;
    z-index: 1001;
    width: var(--site-nav-burger-size);
    height: var(--site-nav-burger-size);
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--site-nav-burger-bg);
    color: var(--site-nav-burger-fg);
    cursor: pointer;
    appearance: none;
    transition: transform 600ms var(--site-nav-ease);
    will-change: transform;
}

.site-burger:hover {
    transform: scale(1.03);
}

.site-burger:active {
    transform: scale(0.98);
}

.site-burger:focus-visible {
    outline: 1px solid #fff;
    outline-offset: -6px;
}

/*
 * Icon area inside the button — proportions taken from react-src's
 * bars-icon.svg (viewBox 44×36, three rects at y=0/15/30 with height 6).
 * The .__box is sized to 50% of the button width with the icon's native
 * 44:36 aspect, then centered. Bars sit at 0%/41.7%/83.3% of this box
 * with height 16.7% — those numbers are 0/15/30 ÷ 36 and 6 ÷ 36.
 */
.site-burger__box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    aspect-ratio: 44 / 36;
    transform: translate(-50%, -50%);
}

/*
 * Bars are scaled to 75% of the __box (was 100%) so the icon reads smaller
 * inside the burger button without changing the button itself or the black
 * gap. The 75% scale is applied uniformly:
 *   width  100% → 75% (with left 12.5% to recentre)
 *   height 16.7% → 12.5%
 *   top positions also shifted to keep the icon centred at 50% of __box
 *   (so the rotation pivot still lands at the diamond's centre).
 */
.site-burger__line {
    position: absolute;
    left: 12.5%;
    width: 75%;
    height: 12.5%;
    background: currentColor;
    transform-origin: center;
    /* Top staggered so the morph reads in two beats: bars converge first,
       then rotate. Mid bar fades out over the first beat. */
    transition:
        top 500ms var(--site-nav-ease) 100ms,
        transform 600ms var(--site-nav-ease),
        opacity 250ms var(--site-nav-ease);
    will-change: transform, top, opacity;
}

.site-burger__line--top { top: 12.5%; }
.site-burger__line--mid { top: 43.75%; }
.site-burger__line--bot { top: 75%; }

/* ---- Morph to X ---- */

/* Top + bot collapse to the mid line, then rotate ±45° around their own
   center to form a clean X. Mid bar evaporates with a quick scale-X. */
body.site-menu-open .site-burger__line--top {
    top: 43.75%;
    transform: rotate(45deg);
}

body.site-menu-open .site-burger__line--bot {
    top: 43.75%;
    transform: rotate(-45deg);
}

body.site-menu-open .site-burger__line--mid {
    opacity: 0;
    transform: scaleX(0);
    /* Faster on the way out so it's gone before the X locks in. */
    transition:
        opacity 200ms var(--site-nav-ease),
        transform 250ms var(--site-nav-ease);
}

/* Reverse on close: mid reappears AFTER the bars have spread back. */
.site-burger__line--mid {
    transition:
        opacity 250ms var(--site-nav-ease) 350ms,
        transform 300ms var(--site-nav-ease) 300ms;
}

/*
 * Center "gap" — the X in react-src's close-icon.svg is built from 4 separate
 * arms with an empty diamond at their meeting point, not 2 crossing lines.
 * We reproduce that signature by overlaying a small button-coloured square
 * (rotated 45°) right where the two bars cross. It blends with the burger's
 * background, visually erasing the X knot and leaving 4 arm-pieces with a
 * clean negative space in the middle — same character as react-src.
 *
 * Size = bar thickness (6 in 44×36 viewBox terms) → 13.636% of the __box
 * width, with aspect-ratio:1 ensuring the square is square in __box pixel
 * space (since __box width:height = 44:36, % of width is the right reference
 * to match the bar's height which is % of height — both resolve to 6 units).
 */
.site-burger__box::after {
    content: "";
    position: absolute;
    /* Centre on the X intersection (= rotation pivot of both bars). */
    top: 50%;
    left: 50%;
    /* Sized as a % of .__box (which itself is 50% of the burger button),
       so the gap scales naturally with the button. The bars within .__box
       are now 75% of its width, so this 27% diamond reads as ~36% of the
       visible icon — same proportion as before the bars were shrunk. */
    width: 27%;
    aspect-ratio: 1;
    background: var(--site-nav-burger-bg);
    /* Closed state: scaled to 0 — the diamond is "tucked" at the rotation
       pivot. It grows OUT from there as the X opens, so the gap reads
       as a natural by-product of the morph, not an element popping in. */
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: transform 250ms var(--site-nav-ease);
    pointer-events: none;
}

body.site-menu-open .site-burger__box::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    /* Opening: a beat behind the rotation start so the bars are clearly
       crossing before the gap blossoms. */
    transition: transform 400ms var(--site-nav-ease) 150ms;
}

/* Mobile: the burger button is transparent, so the "gap" must blend with
   the dark panel that sits behind it (z-1000) when the menu is open. */
@media (max-width: 768px) {
    body.site-menu-open .site-burger__box::after {
        background: var(--site-nav-panel-bg);
    }
}

/* ---------- Panel ---------- */

.site-nav-panel {
    position: fixed;
    inset: 0;
    top: var(--site-nav-admin-bar);
    /* Above .site-rail (100) and any site content. Stays below the page
       transition curtain (99998) and the WP admin bar so those still cover
       the menu when relevant. */
    z-index: 1000;
    background-color: var(--site-nav-panel-bg);
    color: var(--site-nav-panel-fg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    /* Rule applied during close. */
    transition:
        transform var(--site-nav-duration-close) var(--site-nav-ease-in),
        visibility 0s linear var(--site-nav-duration-close);
    will-change: transform;
}

body.site-menu-open .site-nav-panel {
    transform: translateX(0);
    visibility: visible;
    /* Rule applied during open. */
    transition:
        transform var(--site-nav-duration-open) var(--site-nav-ease),
        visibility 0s linear 0s;
}

.site-nav-panel__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.site-nav-panel__inner {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 3.02vw;
    /* react-src padding: 3.02vw on @md (≥768). Mobile is overridden below. */
    padding: 3.02vw;
    padding-right: calc(3.02vw + var(--site-nav-burger-size));
}

/* Header row — socials on the left, burger sits top-right outside this grid. */
.site-nav-panel__header {
    align-self: start;
}

.site-nav-panel__socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 2vw, 32px);
}

.site-nav-panel__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-nav-panel-fg);
    font-family: var(--wp--preset--font-family--sharp-grotesk-expanded, "sharp-grotesk-expanded", Arial, Helvetica, sans-serif);
    font-size: clamp(10px, 0.8vw, 13px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 0;
    transition: opacity 500ms var(--site-nav-ease);
}

/* SVG icon — same width as the floating widget on desktop (2.02vw, matches
 * react-src `unit.md.horizontalMargin - 1`). On mobile, scaled up to
 * `unit.sm.margin` so the icons stay tappable on a 375 viewport.
 * Inherits white via currentColor from the parent link. */
.site-nav-panel__socials a > svg {
    display: block;
    width: 6.03vw;
    height: auto;
}

@media (min-width: 769px) {
    .site-nav-panel__socials a > svg {
        width: 2.02vw;
    }
}

.site-nav-panel__socials a:hover,
.site-nav-panel__socials a:focus-visible {
    opacity: 0.7;
}

/* Main row — nav + address. Mobile-first column, switches to row on wide
   landscape (matches react-src `min-aspect-ratio: 16/9`). */
.site-nav-panel__main {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
    .site-nav-panel__main {
        flex-direction: row;
        /* align-items: stretch (default) — matches react-src MobileNavContent. */
    }
    .site-nav-panel__nav {
        flex: 1;
        display: flex;
        align-items: center;
    }
    .site-nav-panel__contact {
        flex: 1;
        margin-top: 25vh;
    }
}

.site-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    /* No gap — vertical rhythm comes from line-height (matches react-src). */
}

.site-nav-list a {
    display: inline-block;
    color: var(--site-nav-panel-fg);
    font-family: var(--wp--preset--font-family--sharp-grotesk, "sharp-grotesk", Arial, Helvetica, sans-serif);
    font-weight: 500;
    text-transform: uppercase;
    /* react-src MenuLink: 12.5vw / 15.5vw mobile portrait. */
    font-size: 12.5vw;
    line-height: 15.5vw;
    text-decoration: none;
    transform-origin: left center;
    transition:
        transform 700ms var(--site-nav-ease),
        color 500ms var(--site-nav-ease);
    will-change: transform;
}

@media (orientation: landscape) {
    .site-nav-list a {
        font-size: 7.5vw;
        line-height: 7.5vw;
    }
}

@media (min-width: 768px) {
    .site-nav-list a {
        font-size: 4.1vw;
        line-height: 1.27;
    }
}

.site-nav-list a:hover,
.site-nav-list a:focus-visible {
    color: var(--site-nav-panel-muted);
    transform: translateX(0.5vw);
}

.site-nav-list .current-menu-item > a,
.site-nav-list .current_page_item > a {
    color: var(--site-nav-panel-muted);
}

/* Address block — sits below the nav on portrait, alongside it on landscape.
   Sizing matches react-src MenuAddressContainer (4.3vw / 5.5vw lh on mobile,
   0.93vw / 1.27 lh on @md). */
.site-nav-panel__contact {
    font-style: normal;
    color: var(--site-nav-panel-muted);
    font-family: var(--wp--preset--font-family--sharp-grotesk, "sharp-grotesk", Arial, Helvetica, sans-serif);
    font-size: 4.3vw;
    line-height: 5.5vw;
    max-width: 44ch;
}

@media (min-width: 768px) {
    .site-nav-panel__contact {
        font-size: 0.93vw;
        line-height: 1.27;
    }
}

.site-nav-panel__contact p {
    margin: 0 0 0.2em;
    /* site-blocks.css forces `p { font-size: 5.4vw }` on mobile for content
     * paragraphs — override here so the burger panel address inherits the
     * container's 4.3vw (react-src MenuAddressContainer). */
    font-size: inherit;
    line-height: inherit;
}

.site-nav-panel__contact a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 500ms var(--site-nav-ease);
}

.site-nav-panel__contact a:hover,
.site-nav-panel__contact a:focus-visible {
    color: var(--site-nav-panel-fg);
}

/* ---------- Stagger entrance ---------- */

/*
 * Base (closed) state — applies during CLOSE: fast synchronous fade-out
 * using easeIn. The open-state block below overrides with longer durations
 * and per-item delays for the luxurious entrance.
 */
.site-nav-list > li,
.site-nav-panel__social,
.site-nav-panel__contact {
    opacity: 0;
    transform: translateY(28px);
    transition:
        transform var(--site-nav-item-exit-duration) var(--site-nav-ease-in),
        opacity var(--site-nav-item-exit-duration) var(--site-nav-ease-in);
}

body.site-menu-open .site-nav-list > li,
body.site-menu-open .site-nav-panel__social,
body.site-menu-open .site-nav-panel__contact {
    opacity: 1;
    transform: translateY(0);
    transition:
        transform var(--site-nav-item-duration) var(--site-nav-ease),
        opacity var(--site-nav-item-duration) var(--site-nav-ease);
}

/* Socials lead the choreography by a beat. */
body.site-menu-open .site-nav-panel__social:nth-child(1) { transition-delay: calc(var(--site-nav-item-start-delay) - 180ms); }
body.site-menu-open .site-nav-panel__social:nth-child(2) { transition-delay: calc(var(--site-nav-item-start-delay) - 120ms); }
body.site-menu-open .site-nav-panel__social:nth-child(3) { transition-delay: calc(var(--site-nav-item-start-delay) -  60ms); }

/* Nav items — 90ms stagger starting at --site-nav-item-start-delay. */
body.site-menu-open .site-nav-list > li:nth-child(1) { transition-delay: calc(var(--site-nav-item-start-delay) + 0 * var(--site-nav-stagger)); }
body.site-menu-open .site-nav-list > li:nth-child(2) { transition-delay: calc(var(--site-nav-item-start-delay) + 1 * var(--site-nav-stagger)); }
body.site-menu-open .site-nav-list > li:nth-child(3) { transition-delay: calc(var(--site-nav-item-start-delay) + 2 * var(--site-nav-stagger)); }
body.site-menu-open .site-nav-list > li:nth-child(4) { transition-delay: calc(var(--site-nav-item-start-delay) + 3 * var(--site-nav-stagger)); }
body.site-menu-open .site-nav-list > li:nth-child(5) { transition-delay: calc(var(--site-nav-item-start-delay) + 4 * var(--site-nav-stagger)); }
body.site-menu-open .site-nav-list > li:nth-child(6) { transition-delay: calc(var(--site-nav-item-start-delay) + 5 * var(--site-nav-stagger)); }
body.site-menu-open .site-nav-list > li:nth-child(7) { transition-delay: calc(var(--site-nav-item-start-delay) + 6 * var(--site-nav-stagger)); }
body.site-menu-open .site-nav-list > li:nth-child(8) { transition-delay: calc(var(--site-nav-item-start-delay) + 7 * var(--site-nav-stagger)); }

/* Contact settles last. */
body.site-menu-open .site-nav-panel__contact { transition-delay: 720ms; }

/* ---------- Marquee (bottom white bar) ---------- */

.site-nav-panel__marquee {
    flex: 0 0 auto;
    width: 100%;
    background: #fff;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    /* react-src ScrollingMessage @md: 3.02vw height/line-height, 1.25vw font-size. */
    height: 3.02vw;
    line-height: 3.02vw;
    font-family: var(--wp--preset--font-family--sharp-grotesk-expanded, "sharp-grotesk-expanded", Arial, Helvetica, sans-serif);
    font-size: 1.25vw;
    font-weight: 500;
    /* Fade-in synced with the rest of the panel choreography. */
    opacity: 0;
    transition: opacity var(--site-nav-item-exit-duration) var(--site-nav-ease-in);
}

body.site-menu-open .site-nav-panel__marquee {
    opacity: 1;
    transition: opacity var(--site-nav-item-duration) var(--site-nav-ease) 600ms;
}

.site-nav-panel__marquee-track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    /* Two identical sets side by side, translated -50% over the loop. */
    animation: site-nav-marquee 20s linear infinite;
    animation-play-state: paused;
}

body.site-menu-open .site-nav-panel__marquee-track {
    animation-play-state: running;
}

.site-nav-panel__marquee-set {
    display: inline-block;
}

@keyframes site-nav-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Small screens ----------
 *
 * The burger button itself stays identical to desktop (same black square
 * top-right with the morphing 3-bars → X). Only the panel's interior
 * proportions and the marquee scale up to react-src's mobile units. */

@media (max-width: 768px) {
    .site-nav-panel__inner {
        grid-template-rows: auto 1fr;
        /* react-src padding: 6.03vw all sides on mobile. */
        padding: 6.03vw;
        padding-right: calc(6.03vw + var(--site-nav-burger-size) + 8px);
        gap: 6.03vw;
    }

    .site-nav-panel__marquee {
        /* react-src: 12.06vw height/line-height, 7vw font-size on mobile. */
        height: 12.06vw;
        line-height: 12.06vw;
        font-size: 7vw;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .site-burger,
    .site-burger__line,
    .site-nav-panel,
    .site-nav-panel__marquee,
    .site-nav-list > li,
    .site-nav-panel__social,
    .site-nav-panel__contact,
    .site-nav-list a,
    .site-nav-panel__socials a {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .site-nav-panel__marquee-track {
        animation: none !important;
    }
}