/* ============================================================================
   Shared site header — wordmark left, nav right, on every page.

   Markup comes from partials/site-header.html via `npm run sync:header`; this
   file is the matching style. Both are single sources of truth — edit here,
   never in a page's own <style> block.

   .hdr-brand is a flex row holding the wolf mark and the wordmark, both inside
   one link to "/".
   ========================================================================= */

.site-header{
  position:relative; z-index:2;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  height:62px; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:1100px; margin:0 auto;
}

/* ---------- brand lockup: wolf + wordmark (left) ---------- */
/* The full wolf — same asset as the hero, no crop. The bar stays 62px, and the
   mark is sized to fit inside it rather than the bar growing to suit the mark.

   The box is 56px, but the visible wolf is NOT 56px: the artwork is 654x900
   centred on a 1024x1024 transparent canvas, so a 56px box renders the wolf at
   35.8 x 49.2px, leaving ~6px of clearance top and bottom inside the bar.
   Checked by rendering it down and inspecting magnified at 50/56/62px boxes —
   cap, glasses, snout, collar and tie all still read at 56.

   The same transparent canvas puts ~10px of dead space either side of the art,
   which would otherwise read as a ~22px gap to the wordmark. The negative side
   margins absorb it so the optical gap matches .hdr-brand's 12px and the art
   lines up with the bar's 20px padding. */
.hdr-wolf{
  width:56px; height:56px; display:block; flex:none;
  margin:0 -9px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.16));
  pointer-events:none;
}
/* Archivo at 'wdth' 118 / weight 800 / 19px / .012em is the lockup spec from
   BRAND-HANDOFF 2.1. Spelled with a space — "PackPredictions" closed up is
   only ever correct inside the domain name (2.3). The .hdr-word span inherits
   these from .hdr-brand. */
.hdr-brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-variation-settings:'wdth' 118,'wght' 800;
  font-weight:800; font-size:19px; letter-spacing:.012em; line-height:1;
  color:var(--ink); text-transform:uppercase; text-decoration:none;
  white-space:nowrap;
}
.hdr-brand:hover{color:var(--ink)}

/* ---------- nav (right) — three dropdowns ---------- */
/* 15px mono uppercase at .1em tracking, per BRAND-HANDOFF 2.1 with the size
   raised from 12px. The three top levels are <button>s, not links: nothing
   sits behind "Play", so they must not look or behave like anchors. */
.hdr-nav{
  display:flex; gap:24px;
  font-family:var(--mono); font-size:15px; text-transform:uppercase;
  letter-spacing:.1em;
}
.hdr-item{position:relative}

.hdr-top{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  background:none; border:0; margin:0; padding:0 0 3px;
  display:inline-flex; align-items:center; gap:7px;
  color:var(--ink-2); cursor:pointer;
  border-bottom:1px solid transparent; white-space:nowrap;
}
.hdr-top:hover{color:var(--ink)}
.hdr-top[aria-expanded="true"]{color:var(--ink)}
.hdr-top:focus-visible{outline:2px solid var(--brick); outline-offset:3px; border-radius:1px}

.caret{
  width:0; height:0; flex:none;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .15s ease;
}
.hdr-top[aria-expanded="true"] .caret{transform:rotate(180deg)}

/* The current page lives one level down, so the parent carries the marker.
   :has() is progressive — without it the panel link still marks itself, the
   top level simply does not echo it. */
.hdr-item:has(a[aria-current]) .hdr-top{color:var(--ink); border-bottom-color:var(--brick)}

/* Visibility is driven off aria-expanded, never off :hover, so the accessible
   state and the visible state cannot disagree. /header.js sets it for click,
   hover, Escape and outside-press alike. */
.hdr-menu{
  display:none;
  position:absolute; top:100%; left:0; z-index:30;
  min-width:max-content;
  margin-top:10px;
  padding:6px;
  background:var(--surface);
  border:1px solid var(--line); border-radius:2px;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.hdr-top[aria-expanded="true"] + .hdr-menu{display:block}

/* Bridges the 10px gap between button and panel. Without it the pointer
   crosses dead space on the way down, mouseleave fires, and the panel flickers
   shut just as you reach for it. */
.hdr-menu::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
}

.hdr-menu a{
  display:block; padding:9px 14px; border-radius:2px;
  color:var(--ink-2); text-decoration:none; white-space:nowrap;
}
.hdr-menu a:hover{color:var(--ink); background:var(--surface-2)}
.hdr-menu a:focus-visible{outline:2px solid var(--brick); outline-offset:-2px}
.hdr-menu a[aria-current]{
  color:var(--ink); background:var(--surface-2);
  box-shadow:inset 2px 0 0 var(--brick);
}

@media (max-width:860px){
  .site-header .bar{height:56px}
  .hdr-wolf{width:50px; height:50px; margin:0 -8px}   /* art 32 x 44 */
}

/* Below ~660px the lockup and three nav items cannot share one row: the mark
   plus wordmark runs ~242px and the nav ~340px against a 620px content box.
   The threshold moved up from 620px when the wolf was added — it is 52px wider
   than the bare wordmark it replaced. The nav wraps to a second centred row;
   the wordmark is never hidden (handoff 2.2). */
@media (max-width:660px){
  .site-header .bar{
    height:auto; flex-wrap:wrap; justify-content:center;
    padding:10px 16px 0; gap:6px;
  }
  .hdr-brand{font-size:17px; gap:10px; flex:1 1 100%; justify-content:center}
  .hdr-wolf{width:48px; height:48px; margin:0 -8px}   /* art 31 x 42 */
  .hdr-nav{
    flex:1 1 auto; justify-content:center; gap:20px; font-size:13.5px;
    padding:4px 0 11px;
    position:relative;          /* panels anchor to the row, see below */
  }

  /* In the wrapped layout the panels hang off the NAV ROW, not off their own
     button. Anchored to the button, the leftmost and rightmost panels run off
     the side of a narrow screen; centred on the full-width row they cannot.
     .hdr-item goes position:static so the absolute panel resolves against
     .hdr-nav instead. */
  .hdr-item{position:static}
  .hdr-menu{
    left:50%; right:auto; transform:translateX(-50%);
    margin-top:2px;
    min-width:180px; max-width:calc(100vw - 32px);
  }
  .hdr-menu::before{display:none}    /* no hover to bridge on touch */
  .hdr-menu a{padding:11px 14px}     /* taller tap targets */
}
@media (max-width:420px){
  .hdr-nav{gap:14px; font-size:12.5px}
}

/* ============================================================================
   Account control (far right)

   Rendered by /header-auth.js once Clerk resolves, so this styles markup that
   does not exist at first paint. .hdr-auth therefore has NO fixed width: an
   empty box that later fills is a smaller layout shift than a reserved box
   that sometimes stays empty, and Clerk being unreachable must not leave a
   permanent gap in the bar.

   Pill radius here, against the 2px the rest of the site uses, is deliberate:
   the chip wraps a circular avatar, and a square container around a round mark
   reads as a mistake. It also separates "this is your account" from "this is a
   thing to click on the page". Change both radii together if that is wrong.
   ========================================================================= */
.hdr-auth{display:flex; align-items:center; flex:none; position:relative}

/* ---------- signed out ---------- */
.hdr-login{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:600; line-height:1;
  color:#fff; background:var(--red); border:1px solid var(--red);
  border-radius:999px; padding:10px 18px; cursor:pointer; white-space:nowrap;
}
.hdr-login:hover{background:var(--brick); border-color:var(--brick)}
.hdr-login:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ---------- signed in ---------- */
.hdr-acct{position:relative}
.hdr-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 12px 4px 4px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.hdr-chip:hover{border-color:var(--ink-3); color:var(--ink)}
.hdr-chip[aria-expanded="true"]{border-color:var(--ink-3); color:var(--ink)}
.hdr-chip:focus-visible{outline:2px solid var(--brick); outline-offset:2px}
/* The chip is not nav type: a username is lower-case and user-chosen, and
   forcing it uppercase misrepresents somebody's name. */
.hdr-chip-name{
  font-family:var(--mono); font-size:13px; letter-spacing:.01em;
  text-transform:none; font-weight:500; line-height:1;
  max-width:13ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hdr-chip .caret{border-top-color:currentColor}

/* The avatar box. Same 26px circle whether it holds an initial or, later, an
   uploaded picture — so switching to real images is a change of contents, not
   of layout. */
.hdr-av{
  width:26px; height:26px; flex:none; border-radius:50%; overflow:hidden;
  background:var(--red); display:grid; place-items:center;
}
.hdr-av img{width:100%; height:100%; object-fit:cover; display:block}
.hdr-av-i{
  font-family:var(--mono); font-size:12px; font-weight:600; line-height:1;
  color:#fff; text-transform:uppercase;
}

/* ---------- the account panel ---------- */
/* Right-aligned: it hangs off the last element in the bar, so a left-anchored
   panel would run off the edge of the viewport. */
.hdr-acct-menu{left:auto; right:0; min-width:190px}
.hdr-menu-btn{
  display:block; width:100%; text-align:left; font:inherit;
  font-family:var(--mono); font-size:15px; text-transform:uppercase;
  letter-spacing:.1em; background:none; border:0; cursor:pointer;
  padding:9px 14px; border-radius:2px; color:var(--ink-2); white-space:nowrap;
}
.hdr-menu-btn:hover{color:var(--ink); background:var(--surface-2)}
.hdr-menu-btn:focus-visible{outline:2px solid var(--brick); outline-offset:-2px}
/* A row that is present but not yet a destination. Not a link, so it is not
   focusable and cannot be clicked into a 404. */
.hdr-menu-off{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:9px 14px; border-radius:2px; color:var(--ink-3); cursor:default;
  white-space:nowrap;
}
.hdr-menu-off .soon{
  font-size:9.5px; letter-spacing:.14em; border:1px solid var(--line);
  border-radius:2px; padding:2px 5px; color:var(--ink-3);
}
.hdr-acct-menu a{font-size:15px}

@media (max-width:860px){
  .hdr-chip-name{max-width:10ch}
}

/* In the wrapped layout the bar centres the brand on row one and drops the nav
   to row two. The account control is pinned to the top-right of row one rather
   than joining either: it is the one element a thumb reaches for without
   reading, and burying it in a centred row of nav items loses that. */
/* In the wrapped layout the control rides the NAV ROW, right of "About".
   It was previously pinned to the top-right of row one, which put it on top of
   the wordmark and clipped the final S of PREDICTIONS — the wordmark is never
   abbreviated or hidden (BRAND-HANDOFF 2.2), so the control moves rather than
   the name. Row two has room: three nav items and a chip run ~200px of a
   360px screen.

   The brand takes the full first row, so nav and auth wrap together onto the
   second and share it. */
@media (max-width:660px){
  .hdr-auth{position:relative; flex:0 0 auto; align-self:center; margin-left:10px}
  .hdr-login{font-size:11.5px; padding:8px 14px; letter-spacing:.07em}
  .hdr-chip{padding:3px 4px 3px 3px; gap:5px}
  .hdr-av{width:24px; height:24px}
  .hdr-av-i{font-size:11px}
  /* Avatar and caret only. A username is the widest and least necessary part
     of the chip on a phone: the picture already says who is signed in, and the
     menu it opens names them again. */
  .hdr-chip-name{display:none}
  /* The generic ≤660 rule centres panels on the nav row; this one belongs to
     the chip that opened it and must stay pinned under it. */
  .hdr-acct{position:relative}
  .hdr-acct-menu{
    left:auto; right:0; transform:none;
    margin-top:8px; min-width:186px; max-width:calc(100vw - 28px);
  }
}