/* =====================================================================================================
   Section: header — styles for the block between "BEGIN SECTION: header" and "END SECTION: header" in index.html.
   Sticky translucent bar: wordmark on the left, section links on the right. Below 64em the links move into a
   drop-down panel opened by a menu button (js/sections/header.js adds .site-header--enhanced; without JavaScript
   the links stay visible as a scrollable row).
   ===================================================================================================== */

.site-header {
    --header-bg: rgba(240, 239, 244, 0.72);          /* light grey with a lavender hint, as in the design */
    --header-bg-solid: rgba(244, 243, 247, 0.96);    /* fallback without backdrop-filter, and the mobile panel */
    --header-blur: blur(16px) saturate(1.3);
    --nav-font-size: clamp(1rem, 0.55rem + 0.75vw, 1.25rem);   /* 16px at 960 → 20px at 1440 */
    --nav-gap: clamp(1.25rem, 6.4vw - 1.75rem, 4rem);           /* ~64px between links at 1440 */
    --nav-duration: 0.3s;

    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--header-height);
    font-family: var(--font-body);
}

/* The translucent background lives on a pseudo-element so the header itself is not a "backdrop root": that way
   the mobile panel can blur what is behind it too. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--header-bg-solid);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header::before {
        background: var(--header-bg);
        -webkit-backdrop-filter: var(--header-blur);
        backdrop-filter: var(--header-blur);
    }
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-height);
}

/* ----- Wordmark -------------------------------------------------------------------------------------- */

.site-header__brand {
    flex: none;
    display: block;
    border-radius: var(--radius-sm);
}

.site-header__brand img {
    width: clamp(8.75rem, 7.9rem + 3.7vw, 11.25rem);   /* 140px at 360 → 180px at 1440 */
    height: auto;
}

/* ----- Links ----------------------------------------------------------------------------------------- */

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    position: relative;
    display: inline-block;
    padding-block: 0.35em;
    font-size: var(--nav-font-size);
    font-weight: 400;
    line-height: 1.3;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Brand gradient underline: grows from the left on hover/focus, stays on the active link. */
.site-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--nav-duration) var(--ease-out);
}

.site-nav__link:hover { color: var(--text-strong); }

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

/* Active link (section in view): gradient text. */
.site-nav__link[aria-current] {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ----- Skip link ------------------------------------------------------------------------------------- */

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 110;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transform: translateY(calc(-100% - 2.5rem));   /* far enough up that nothing (not even a shadow) peeks in */
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* The skip link target: not hidden under the sticky header, and no focus ring on the whole page region
   (js/sections/header.js gives it tabindex="-1" only when the skip link is used). */
#main { scroll-margin-top: var(--header-height); }
#main:focus { outline: none; }

/* ----- Menu button (mobile) -------------------------------------------------------------------------- */

.site-header__toggle {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;          /* optical alignment of the bars with the gutter */
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-strong);
}

.site-header__toggle[hidden] { display: none !important; }

.site-header__toggle-bars {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1rem;
}

.site-header__toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--nav-duration) var(--ease-out), opacity 0.2s ease;
}

.site-header__toggle-bars span:nth-child(1) { top: 0; }
.site-header__toggle-bars span:nth-child(2) { top: calc(50% - 1px); }
.site-header__toggle-bars span:nth-child(3) { bottom: 0; }

/* Open: the bars turn into an X. */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(1) {
    transform: translateY(calc(0.5rem - 1px)) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(3) {
    transform: translateY(calc(-0.5rem + 1px)) rotate(-45deg);
}

/* ----- Narrow screens (< 64em = 1024px) -------------------------------------------------------------- */

@media (max-width: 63.999em) {
    .site-header { --nav-font-size: 1.125rem; }

    /* Without JavaScript: the links stay in the bar, in a row that scrolls sideways. */
    .site-header:not(.site-header--enhanced) .site-header__inner { flex-wrap: wrap; row-gap: 0; padding-block: 0.5rem; }
    .site-header:not(.site-header--enhanced) .site-nav { width: 100%; overflow-x: auto; }
    .site-header:not(.site-header--enhanced) .site-nav__list { gap: 1.5rem; padding-bottom: 0.25rem; }
    .site-header:not(.site-header--enhanced) .site-nav__link { font-size: var(--text-base); }

    /* With JavaScript: menu button + drop-down panel under the bar. */
    .site-header--enhanced .site-header__toggle { display: inline-flex; }

    .site-header--enhanced .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.5rem var(--gutter) 1.5rem;
        background: var(--header-bg-solid);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
        opacity: 0;
        visibility: hidden;          /* also keeps the closed links out of the tab order */
        transform: translateY(-0.5rem);
        transition:
            opacity var(--nav-duration) var(--ease-out),
            transform var(--nav-duration) var(--ease-out),
            visibility 0s linear var(--nav-duration);
    }

    .site-header--enhanced.is-open .site-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition:
            opacity var(--nav-duration) var(--ease-out),
            transform var(--nav-duration) var(--ease-out),
            visibility 0s linear 0s;
    }

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

    .site-header--enhanced .site-nav__list li + li { border-top: 1px solid var(--line); }

    .site-header--enhanced .site-nav__link {
        display: block;
        padding-block: 0.9rem;
    }

    /* In the panel the underline would span the whole row: keep only the gradient text for the active link. */
    .site-header--enhanced .site-nav__link::after { display: none; }
}

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

@media (prefers-reduced-motion: reduce) {
    .site-header { --nav-duration: 0s; }
    .site-nav__link { transition: none; }
    .site-header--enhanced .site-nav { transform: none !important; }
}