/* =============================================================================
   SITE HEADER — slim, sticky, sitewide (not on the standalone splash). Brand
   left, Primary menu right, hamburger on phones. On the image-led front page it
   starts transparent over the hero (white text) and turns solid on scroll; on
   pages without a photo hero (/map/, /blog/, posts) it's solid from the start.
   Palette pink #FF00CC; nothing hovers blue. Honours reduced-motion.
   ============================================================================= */

.sj-header {
    position: sticky; top: 0; z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid #eadfe7;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sj-hdr-in {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 0 clamp(16px, 4vw, 40px); min-height: 58px;
}
.sj-hdr-brand {
    font-family: var(--font-heading); font-weight: 900;
    font-size: clamp(15px, 2.2vw, 18px); letter-spacing: -.01em;
    color: #111010; text-decoration: none; line-height: 1.1; white-space: nowrap;
    transition: color .25s ease;
}
.sj-hdr-brand:hover, .sj-hdr-brand:focus-visible { color: #FF00CC; }

.sj-hdr-nav { display: flex; }
.sj-hdr-menu {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px);
}
.sj-hdr-menu a {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
    color: #17150f; text-decoration: none; transition: color .18s ease;
    display: inline-block; padding: 6px 0;
}
.sj-hdr-menu a:hover, .sj-hdr-menu a:focus-visible,
.sj-hdr-menu .current-menu-item > a { color: #FF00CC; }

/* hamburger — hidden on desktop */
.sj-hdr-toggle {
    display: none; width: 44px; height: 44px; margin-right: -8px;
    background: none; border: 0; cursor: pointer; padding: 0;
    align-items: center; justify-content: center;
}
.sj-hdr-bars { display: inline-block; width: 24px; height: 16px; position: relative; }
.sj-hdr-bars span {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: #111010; transition: transform .2s ease, opacity .2s ease, background-color .25s ease;
}
.sj-hdr-bars span:nth-child(1) { top: 0; }
.sj-hdr-bars span:nth-child(2) { top: 7px; }
.sj-hdr-bars span:nth-child(3) { top: 14px; }

/* ---- Transparent-over-hero (front page only, before scroll) ---- */
body.sj-hdr-over .sj-header {
    background: transparent; border-bottom-color: transparent;
    position: fixed; left: 0; right: 0;
}
body.sj-hdr-over .sj-header .sj-hdr-brand,
body.sj-hdr-over .sj-header .sj-hdr-menu a { color: #ffffff; }
body.sj-hdr-over .sj-header .sj-hdr-brand:hover,
body.sj-hdr-over .sj-header .sj-hdr-menu a:hover { color: #FF00CC; }
body.sj-hdr-over .sj-header .sj-hdr-bars span { background: #ffffff; }
/* once scrolled past the hero, JS adds .is-solid → back to the solid treatment */
body.sj-hdr-over .sj-header.is-solid {
    background: #ffffff; border-bottom-color: #eadfe7;
    box-shadow: 0 2px 14px rgba(17,16,16,.06);
}
body.sj-hdr-over .sj-header.is-solid .sj-hdr-brand,
body.sj-hdr-over .sj-header.is-solid .sj-hdr-menu a { color: #17150f; }
body.sj-hdr-over .sj-header.is-solid .sj-hdr-brand:hover,
body.sj-hdr-over .sj-header.is-solid .sj-hdr-menu a:hover { color: #FF00CC; }
body.sj-hdr-over .sj-header.is-solid .sj-hdr-bars span { background: #111010; }
/* fixed header would sit on top of the hero content; the hero's own top padding
   already clears it, so no body offset needed here. */

/* ---- Mobile ---- */
@media (max-width: 782px) {
    .sj-hdr-toggle { display: inline-flex; }
    .sj-hdr-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        background: #ffffff; border-bottom: 1px solid #eadfe7;
        box-shadow: 0 12px 24px rgba(17,16,16,.10);
        display: none; padding: 6px 0 10px;
    }
    .sj-header.is-open .sj-hdr-nav { display: block; }
    .sj-hdr-menu { flex-direction: column; align-items: stretch; gap: 0; }
    .sj-hdr-menu a { padding: 13px clamp(16px, 4vw, 40px); font-size: 13px; }
    .sj-hdr-menu li + li { border-top: 1px solid #f2e9ef; }
    /* the mobile dropdown is always solid/white, even in transparent-over mode */
    body.sj-hdr-over .sj-header.is-open .sj-hdr-menu a { color: #17150f; }
    /* hamburger → X when open */
    .sj-header.is-open .sj-hdr-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .sj-header.is-open .sj-hdr-bars span:nth-child(2) { opacity: 0; }
    .sj-header.is-open .sj-hdr-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    body.sj-hdr-over .sj-header.is-open .sj-hdr-bars span { background: #111010; }
}

@media (prefers-reduced-motion: reduce) {
    .sj-header, .sj-hdr-brand, .sj-hdr-menu a, .sj-hdr-bars span { transition: none !important; }
}