/* ==========================================================
   ws-header.css
   Site header. Every page. Owns ws-site-header prefix.
   Markup: inc/site-header.php. Scroll state: main.js.
   Pages pick a variant, never restyle the bar.
   ========================================================== */

/* === Tokens === */
:root {
    /* Bar height. Overlay pages pull hero up by this */
    --ws-header-h: 80px;
}

/* Variant colors. Light follows site theme */
.ws-site-header {
    --wshdr-bg: var(--ws-bg);
    --wshdr-bg-stuck: var(--ws-bg);
    --wshdr-fg: var(--ws-heading);
    --wshdr-link: var(--ws-muted);
    --wshdr-line: var(--ws-border);
    --wshdr-shadow: 0 2px 14px rgba(28, 28, 30, 0.05);
    /* Lime ring vanishes on white. Text color clears 3:1 both themes */
    --wshdr-focus: var(--ws-text);
}
/* Charcoal both themes. Grey on charcoal 7.6:1 */
.ws-site-header--dark,
.ws-site-header--overlay {
    --wshdr-bg: var(--ws-charcoal);
    --wshdr-bg-stuck: var(--ws-charcoal);
    --wshdr-fg: var(--ws-white);
    --wshdr-link: var(--ws-grey);
    --wshdr-line: #34343A;
    --wshdr-shadow: none;
    --wshdr-focus: var(--ws-accent);
}
/* Clear at top. Photo runs under it */
.ws-site-header--overlay { --wshdr-bg: transparent; }

/* === Bar === */
/* Shadow, not border. Border adds 1px, overlay pull-up misses it */
.ws-site-header {
    position: relative;
    z-index: 60;
    background: var(--wshdr-bg);
    color: var(--wshdr-fg);
    box-shadow: 0 1px 0 transparent;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.ws-site-header.is-stuck {
    background: var(--wshdr-bg-stuck);
    box-shadow: 0 1px 0 var(--wshdr-line), var(--wshdr-shadow);
}

/* Sticky is opt-in. Anchor offsets are the page's job:
   scroll-margin-top on targets, see main.css smooth scroll note */
.ws-site-header.is-sticky {
    position: sticky;
    top: 0;
}
/* Admin bar covers sticky top when logged in */
.admin-bar .ws-site-header.is-sticky { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .ws-site-header.is-sticky { top: 46px; }
}
/* Admin bar scrolls away under 600 */
@media (max-width: 600px) {
    .admin-bar .ws-site-header.is-sticky { top: 0; }
}

/* Fixed height. Edges match footer and content gutter */
.ws-site-header__inner {
    max-width: 1140px;
    height: var(--ws-header-h);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* === Brand === */
.ws-site-header__brand {
    display: block;
    flex: none;
    color: var(--wshdr-fg);
    border-radius: var(--ws-radius);
}
.ws-site-header__brand:focus-visible { outline: 2px solid var(--wshdr-focus); outline-offset: 4px; }

/* Full lockup desktop */
.ws-site-header__lockup { display: none; width: auto; height: 40px; max-width: none; }
.ws-site-header__mark { display: none; width: 32px; height: 32px; }
.ws-site-header__mark svg { display: block; width: 100%; height: 100%; }

/* Ink on light bar, paper on dark. Light bar flips with theme */
.ws-site-header--light .ws-site-header__lockup--ink { display: block; }
[data-theme="dark"] .ws-site-header--light .ws-site-header__lockup--ink { display: none; }
[data-theme="dark"] .ws-site-header--light .ws-site-header__lockup--paper,
.ws-site-header--dark .ws-site-header__lockup--paper,
.ws-site-header--overlay .ws-site-header__lockup--paper { display: block; }

/* === Nav === */
.ws-site-header__nav {
    display: flex;
    align-items: center;
    gap: 24px;
}
/* Tracking matches switch labels */
.ws-site-header__link {
    padding: 8px 0;
    font-family: var(--ws-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 18px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--wshdr-link);
    transition: color 0.2s ease;
}
@media (hover: hover) {
    .ws-site-header__link:hover { color: var(--wshdr-fg); }
}
/* Current page reads as current without color alone */
.ws-site-header__link[aria-current="page"] {
    color: var(--wshdr-fg);
    text-decoration: underline;
    text-decoration-color: var(--ws-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.ws-site-header__link:focus-visible {
    color: var(--wshdr-fg);
    outline: 2px solid var(--wshdr-focus);
    outline-offset: 2px;
}

/* Button keeps ws-button look. Focus ring added: base removes outline */
.ws-site-header__cta { white-space: nowrap; }
.ws-site-header__cta:focus-visible { outline: 2px solid var(--wshdr-focus); outline-offset: 3px; }
/* Phone label waits for phones */
.ws-site-header__cta-short { display: none; }

/* === Phones === */
/* Mark replaces lockup. Three nav items keep room */
@media (max-width: 600px) {
    :root { --ws-header-h: 64px; }
    .ws-site-header__inner { gap: 16px; }
    /* Three classes on purpose. Dark-theme lockup rule is (0,3,0) and
       showed the full logo on dark phones, pushing the nav off screen */
    .ws-site-header .ws-site-header__brand .ws-site-header__lockup { display: none; }
    .ws-site-header__mark { display: block; }
    .ws-site-header__nav { gap: 16px; }
    .ws-site-header__link { letter-spacing: 1px; }
    /* Long button labels swap for the short one */
    .ws-site-header__cta.has-short .ws-site-header__cta-full { display: none; }
    .ws-site-header__cta.has-short .ws-site-header__cta-short { display: inline; }
}
/* 320 class phones. Nav wrapped, page scrolled sideways */
@media (max-width: 374px) {
    .ws-site-header__inner { padding: 0 16px; gap: 12px; }
    .ws-site-header__nav { gap: 12px; }
    .ws-site-header__link { letter-spacing: 0.5px; }
    .ws-site-header__cta { padding-left: 12px; padding-right: 12px; letter-spacing: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-site-header,
    .ws-site-header__link { transition: none; }
}