/*
 * nav.css — Site header and primary navigation
 * All values from tokens.css.
 */

/* ── Site header ────────────────────────────────────────────────────────────── */

/* Total header height = inner height (80px) + the feather padding-bottom (14px).
   Hero-overlay pages (About, Musicians) pull their hero up by this so the image
   fills from the top of the viewport with the sticky nav floating over it. Keep
   in sync with .site-header__inner height + .site-header padding-bottom. */
:root { --site-header-h: 94px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    padding-bottom: 14px;   /* keeps the logo/button clear of the bottom feather zone */
}

/* Translucent backdrop on a pseudo-element so its bottom edge can feather softly
   (a hard border or masking the whole header would fade the logo/button too). */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: color-mix(in srgb, var(--color-bg) 80%, transparent);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
            mask: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
    pointer-events: none;
}

.site-header__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--site-padding);
    height: 80px;   /* grew from 72 to contain the larger 15px CTA button (mobile overrides to 64) */
}

/* ── Logo ───────────────────────────────────────────────────────────────────── */

.site-header__logo {
    font-family: var(--font-display);
    font-size: var(--text-display-h5); /* 18px — compact wordmark size */
    font-weight: 700;
    letter-spacing: var(--text-display-ls);
    line-height: 1;
    color: var(--color-text-primary);
    text-decoration: none;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.site-header__logo:hover {
    color: var(--color-highlight);
    opacity: 1;
}

.site-header__logo img,
.site-header__logo svg {
    display: block;
    height: 36px;
    width: auto;
}

/* ── Nav list — desktop ─────────────────────────────────────────────────────── */

.site-nav {
    display: flex;
    align-items: center;
}

/* In-menu CTA: hidden on desktop (the CTA lives in the header bar there); shown
   inside the slide-in panel on mobile, where the bar CTA is hidden for space.
   Needs `.site-nav` (0-2-0) to beat `.btn-shaped`'s own display, which is set in
   blocks.css — loaded after this file, so a bare .site-nav__cta would lose. */
.site-nav .site-nav__cta {
    display: none;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    list-style: none;
}

.site-nav__list a {
    font-family: var(--font-body);
    font-size: var(--text-xs);     /* 14px */
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.site-nav__list a:hover {
    color: var(--color-highlight);
    opacity: 1;
}

/* Active / ancestor state — set by WordPress (and aria-current in the prototype).
   The current page is marked by the hand-drawn underline below, not a colour change. */
.site-nav__list .current-menu-item > a,
.site-nav__list .current-page-ancestor > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list a[aria-current="page"] {
    position: relative;
}

/* Hand-painted brush stroke under the current page's link (fluoro highlight). */
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current-page-ancestor > a::after,
.site-nav__list .current-menu-ancestor > a::after,
.site-nav__list a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: -0.2em;
    right: -0.2em;
    bottom: -0.5em;
    height: 0.7em;
    background-color: var(--color-highlight);
    -webkit-mask: url('../../images/ornaments/brush-underline.svg') center / 100% 100% no-repeat;
            mask: url('../../images/ornaments/brush-underline.svg') center / 100% 100% no-repeat;
    pointer-events: none;
}

/* ── Hamburger toggle button ────────────────────────────────────────────────── */

.site-nav__toggle {
    display: none; /* Shown at tablet/mobile via media query */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: var(--space-1);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.site-nav__toggle:hover {
    color: var(--color-highlight);
}

.site-nav__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

/* Animated X when open */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Responsive — tablet and below ─────────────────────────────────────────── */

@media (max-width: 768px) {
    :root { --site-header-h: 78px; }   /* inner 64px + 14px feather padding */

    .site-header__inner {
        height: 64px;
    }

    /* Drop the hand-drawn active underline in the mobile drawer — the brush ornament
       sits below the link and overlaps/obscures the adjacent stacked nav items. */
    .site-nav__list .current-menu-item > a::after,
    .site-nav__list .current-page-ancestor > a::after,
    .site-nav__list .current-menu-ancestor > a::after,
    .site-nav__list a[aria-current="page"]::after { display: none; }

    .site-nav__toggle {
        display: flex;
    }

    .site-nav {
        /* Full-height panel that slides in from the right */
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        /* When the header is a grid (e.g. .site-header--split), the nav is a grid
           item; a fixed grid item inherits justify-self and would shrink-wrap to
           its content instead of honouring left/right:0. Force it to fill. */
        justify-self: stretch;
        /* Stack the list and the in-menu CTA from the top (the base .site-nav is a
           centred flex row, which would float the items to the panel's middle). */
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-6);
        z-index: var(--z-overlay);
        background-color: var(--color-bg);
        padding: var(--space-6) var(--site-padding);
        overflow-y: auto;

        /* Hidden by default */
        visibility: hidden;
        opacity: 0;
        transform: translateX(8px);
        transition:
            opacity var(--transition-default),
            transform var(--transition-default),
            visibility 0s var(--transition-default);
        pointer-events: none;
    }

    .site-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition:
            opacity var(--transition-default),
            transform var(--transition-default),
            visibility 0s;
        pointer-events: auto;
    }

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

    .site-nav__list li {
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__list li:first-child {
        border-top: 1px solid var(--color-border);
    }

    .site-nav__list a {
        font-size: var(--text-md); /* 22px — large touch target */
        padding-block: var(--space-3);
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Reveal the in-menu CTA, centred under the links; align-self keeps the shaped
       button at its natural width (a full-width stretch would distort the SVG).
       Matches the base hide's 0-2-0 so it wins by source order when ≤768px. */
    .site-nav .site-nav__cta {
        display: inline-flex;
        align-self: center;
        margin-top: var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-nav__toggle-bar {
        transition: none;
    }

    .site-nav {
        /* Skip transform, just toggle visibility */
        transform: none;
    }
}