/* ============================================================
   Forum Design System — CHROME
   Site furniture shared by every page: above-masthead ad, sticky
   utility strip, navy masthead nav, breadcrumbs,
   footer. Depends on tokens.css. Nav labels are static markup
   mirroring the live www.uhnd.com menu; wiring the WP menu is a
   later pass.
   ============================================================ */

/* ── ABOVE-MASTHEAD AD ─────────────────────────────────── */
.top-ad-band{
  background:var(--bg-sunk);
  border-bottom:1px solid var(--line-soft);
  padding:8px 0 14px;
}
.top-ad-band .ad-label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ad-label-ink);text-align:center;margin:0 0 6px;font-weight:500;
}
.top-ad-band .ad-frame{
  width:728px;max-width:100%;min-height:90px;margin:0 auto;
  border:1px solid var(--ad-frame);background:var(--bg);
  display:grid;place-items:center;
}

/* ── STICKY CHROME WRAPPER ─────────────────────────────── */
.chrome{position:sticky;top:0;z-index:50;background:var(--bg-sunk);box-shadow:0 1px 0 var(--line-soft)}

/* ── UTILITY STRIP ─────────────────────────────────────── */
.utility-strip{
  background:var(--bg-sunk);
  height:var(--utility-h);
  border-bottom:1px solid var(--line-soft);
  color:var(--ink-2);
}
.utility-inner{
  max-width:var(--page-max);margin:0 auto;height:100%;
  padding:0 var(--page-pad);
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
}
.utility-search{
  display:flex;align-items:center;gap:8px;
  height:22px;padding:0 10px;
  background:#fff;border:1px solid var(--line-soft);border-radius:3px;
  color:var(--ink-3);
  font-family:var(--font-sans);font-size:12px;
  min-width:200px;
}
.utility-search:hover{border-color:var(--line-strong);color:var(--ink-2);text-decoration:none}
.utility-search svg{flex-shrink:0;color:var(--ink-3)}
.utility-search .placeholder{color:var(--ink-4)}
.utility-social{display:flex;align-items:center;gap:0;height:100%}
.utility-social a{
  width:28px;height:28px;display:grid;place-items:center;
  color:var(--ink-3);border-radius:3px;
}
.utility-social a:hover{color:var(--nd-navy);background:var(--accent-tint);text-decoration:none}
.utility-divider{width:1px;height:14px;background:var(--line);margin:0 6px}

/* ── NAVY MASTHEAD ─────────────────────────────────────── */
.masthead{
  height:var(--masthead-h);
  background:var(--nd-navy);
  color:#fff;
  border-bottom:1px solid color-mix(in srgb, var(--nd-gold) 25%, transparent);
}
.masthead-inner{
  max-width:var(--page-max);margin:0 auto;height:100%;
  padding:0 var(--page-pad);
  display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.brand{display:flex;align-items:center;gap:18px;height:100%}
/* The hamburger REPLACES .nav-primary below 980px — the two are never
   visible at once. Hidden here, switched on in the mobile masthead
   block at the bottom of this file, which is the same breakpoint that
   hides the strip. */
.hamburger{
  display:none;
  width:36px;height:36px;border-radius:4px;
  place-items:center;color:rgba(255,255,255,.78);
}
.hamburger:hover{background:rgba(255,255,255,.08);color:#fff}
/* Shared by the masthead and the footer brand — both use .logo. */
.logo{display:flex;align-items:center;text-decoration:none}
.logo:hover{text-decoration:none}
/* Masthead only: fill the bar so the wordmark centres against .brand's
   full height. Unscoped, this leaked into .footer-brand .logo, which is a
   stretched grid item — the link grew to the row height and pushed the
   brand blurb out of the footer and over the copyright line. */
.masthead .logo{height:100%}
.masthead .logo img{height:56px;width:auto;display:block}

.nav-primary{display:flex;align-items:stretch;gap:0;height:100%}
.nav-primary a{
  font-family:var(--font-sans);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.85);
  padding:0 22px;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;text-decoration:none;
  border-left:1px solid rgba(255,255,255,.12);
  transition:color .15s ease, background .15s ease;
}
.nav-primary a:last-child{border-right:1px solid rgba(255,255,255,.12)}
.nav-primary a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.nav-primary a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.04)}
.nav-primary a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--nd-gold);
}

/* ── FORUM SUBNAV BAR (breadcrumbs + user state) ──────── */
.forum-subnav{
  border-bottom:1px solid var(--line-soft);
  margin-bottom:0;
}
/* Everything in this strip is text on one visual line, so it aligns on the
   baseline rather than on box centres. Centring was giving three separate
   misalignments, all of them small enough to read as sloppy rather than as
   anything deliberate:

     * "Home" sat above "Forums" and "Football". The crumb separator is a 13px
       ::before inside an 11px <li> (see .breadcrumbs li + li::before), which
       makes every li after the first taller. Centred, a taller box and a
       shorter one share a centre, not a baseline — so the one crumb with no
       separator sat off the line.
     * "Mail" and "Account" sat above the crumbs. .breadcrumbs carries
       asymmetric padding, which pushes its text below its own box centre while
       the user links have no padding and sit on theirs.
     * The two sides are different faces at different sizes (11px mono
       uppercase against 12.5px sans), and centring two unequal line boxes
       leaves their baselines apart by half the difference.

   Baseline alignment answers all three at once and keeps answering them if the
   sizes change later.

   The "Log in" pill baseline-aligns along with everything else, and has to.
   A flex container that is itself a flex item takes its baseline from its
   FIRST BASELINE-ALIGNED child — so giving the pill align-self:center (the
   obvious move, on the grounds that a filled pill is not a line of text) took
   it out of that calculation and handed .forum-userlinks the baseline of
   "Register" instead. Register then sat at the top of the block while the
   taller pill centred itself around it, and the whole guest strip dropped
   about 12px, nearly onto the rule below. The pill's own text is what belongs
   on the line; its padding hanging a few px either side is the correct
   result, and .breadcrumbs' padding absorbs it. */
.forum-subnav-inner{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:6px 0 0;flex-wrap:wrap;
}

/* User links (right side) */
/* margin-left:auto keeps this block flush right even after
   .forum-subnav-inner wraps it onto its own line. Without it, a wrapped
   line starts at the left edge, and .user-more-menu (absolute, right:0)
   then opens leftward off-screen from a button sitting ~115px in.
   On one line this is a no-op: the auto margin absorbs the free space
   that justify-content:space-between would have distributed. */
.forum-userlinks{display:flex;align-items:baseline;gap:10px;font-family:var(--font-sans);font-size:12.5px;flex-shrink:0;flex-wrap:wrap;margin-left:auto}
.user-text-link{color:var(--ink-2);font-weight:500}
.user-text-link:hover{color:var(--nd-navy);text-decoration:none}
.user-divider{color:var(--ink-4);font-size:11px}
.user-login-btn{
  display:inline-flex;align-items:center;
  font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.03em;
  color:#fff;background:var(--nd-navy);
  padding:5px 12px;border-radius:4px;text-decoration:none;
  transition:background .12s ease;
}
.user-login-btn:hover{background:var(--nd-navy-2);text-decoration:none;color:#fff}
.user-reg-link{color:var(--nd-green-ink);font-weight:600;font-size:12px}
.user-reg-link:hover{text-decoration:underline}
.user-mail-link{color:var(--ink-2);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.user-mail-link:hover{color:var(--nd-navy);text-decoration:none}
.mail-badge{
  background:var(--danger);color:#fff;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  padding:1px 5px;border-radius:9999px;letter-spacing:.03em;
}

/* Account dropdown */
.user-more-wrap{position:relative}
.user-more-btn{
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;
  color:var(--ink-2);padding:3px 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;
}
.user-more-btn:hover{color:var(--nd-navy)}
.user-more-menu{
  display:none;position:absolute;right:0;top:100%;z-index:200;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  min-width:160px;
  /* Never wider than the viewport, whatever the longest label is. */
  max-width:calc(100vw - 32px);
  padding:4px 0;
  padding-top:8px;  /* visual offset without a physical gap */
  margin-top:-2px;  /* overlap button bottom edge so hover is continuous */
}
.user-more-wrap:focus-within .user-more-menu,
.user-more-wrap:hover .user-more-menu,
.user-more-wrap.is-open .user-more-menu{display:block}
.user-more-menu a{
  display:block;padding:8px 14px;
  font-family:var(--font-sans);font-size:13px;color:var(--ink-2);
  white-space:nowrap;
}
.user-more-menu a:hover{background:var(--bg-muted);color:var(--nd-navy);text-decoration:none}

/* Inline quick-login strip */
.forum-quick-login{
  padding:12px 0;
  border-top:1px solid var(--line-soft);
  margin-top:8px;
}
.quick-login-form{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.quick-login-input{
  height:32px;padding:0 10px;
  font-family:var(--font-sans);font-size:13px;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-input);
  width:160px;
}
.quick-login-input:focus{outline:none;border-color:var(--nd-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--nd-green) 20%,transparent)}
.quick-login-remember{font-family:var(--font-sans);font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:5px;white-space:nowrap}
.quick-login-submit{
  height:32px;padding:0 14px;
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;
  color:#fff;background:var(--nd-navy);border:0;border-radius:var(--r-input);cursor:pointer;
  transition:background .12s ease;
}
.quick-login-submit:hover{background:var(--nd-navy-2)}

/* ── BREADCRUMBS ───────────────────────────────────────── */
/* 24px of lead-in above two lines of 11px mono, and 12px under it, was the
   single widest empty band on a desktop board -- 34px from the masthead to the
   first crumb once .forum-subnav-inner's own padding is counted. Halved. The
   phone overrides this again further down; both are the same shape now. */
.breadcrumbs{padding:12px 0 8px}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.breadcrumbs li{font-family:var(--font-mono);font-size:11px;color:var(--nd-gold);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.breadcrumbs li a{color:var(--nd-gold)}
.breadcrumbs li a:hover{color:color-mix(in srgb, var(--nd-gold) 70%, var(--nd-navy));text-decoration:none}
.breadcrumbs li[aria-current="page"]{color:var(--ink-2);font-weight:600}
.breadcrumbs li + li::before{content:"·";color:var(--gold-border);margin-right:6px;font-size:13px}

/* ── FOOTER ────────────────────────────────────────────── */
footer.site-footer{background:var(--nd-navy);color:rgba(255,255,255,.78);margin-top:56px}
.footer-top{padding:48px 0 36px;border-bottom:1px solid rgba(255,255,255,.10)}
.footer-inner{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.footer-brand .logo{color:#fff;display:flex;align-items:center;gap:10px}
.footer-brand .logo-word{color:#fff;font-size:24px;font-family:var(--font-serif);font-weight:700}
.footer-brand .logo-word .com{color:var(--nd-gold)}
.footer-brand .shamrock{display:inline-flex}
.footer-brand p{font-family:var(--font-serif);font-size:14px;line-height:1.55;color:rgba(255,255,255,.70);max-width:36ch;margin:14px 0 0}
.footer-col h3{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--nd-gold);font-weight:700;text-transform:uppercase;margin:0 0 14px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:rgba(255,255,255,.85);font-family:var(--font-sans);font-size:13.5px}
.footer-col a:hover{color:var(--nd-gold);text-decoration:none}
.footer-utility{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:18px 0;font-family:var(--font-sans);font-size:11.5px;color:rgba(255,255,255,.55)}
.footer-utility a{color:inherit;margin-left:18px}
.footer-utility a:hover{color:rgba(255,255,255,.85)}

/* ── RESPONSIVE ────────────────────────────────────────── */
/* ── Hamburger drawer ───────────────────────────────────────
   The mobile nav. .hamburger above was styled but never rendered until
   now, which left every viewport under 980px with no navigation at all
   once .nav-primary hides. Reachable only under that breakpoint, where
   the trigger is visible; the desktop strip is the nav above it.

   Sibling of #chrome so it isn't capped by that element's z-index:50
   stacking context, and above #chat-app (z-index:2) on the chat page.
   `hidden` is the JS-controlled state; the UA's [hidden]{display:none}
   is overridden so the panel stays renderable and can transition. */
.primary-drawer{position:fixed;inset:0;z-index:100;visibility:visible;pointer-events:auto}
.primary-drawer[hidden]{display:block;visibility:hidden;pointer-events:none}

.primary-drawer__backdrop{
  position:absolute;inset:0;
  background:color-mix(in srgb, var(--nd-navy) 55%, transparent);
  opacity:0;transition:opacity .22s ease;
}
.primary-drawer:not([hidden]) .primary-drawer__backdrop{opacity:1}

.primary-drawer__panel{
  position:absolute;top:0;left:0;height:100%;
  width:320px;max-width:85vw;
  background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .25s ease;
  overflow-y:auto;
  box-shadow:0 0 24px color-mix(in srgb, var(--nd-navy) 18%, transparent);
}
.primary-drawer:not([hidden]) .primary-drawer__panel{transform:translateX(0)}

.primary-drawer__header{
  background:var(--nd-navy);color:#fff;
  padding:0 18px;height:var(--masthead-h);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  border-bottom:1px solid var(--gold-border);
}
.primary-drawer__title{
  font-family:var(--font-mono);font-size:var(--type-mono-label-size);font-weight:600;
  letter-spacing:var(--type-mono-label-tracking);text-transform:uppercase;color:var(--nd-gold);
}
.primary-drawer__close{
  width:36px;height:36px;border-radius:4px;
  display:grid;place-items:center;color:rgba(255,255,255,.78);
}
.primary-drawer__close:hover,
.primary-drawer__close:focus-visible{background:rgba(255,255,255,.08);color:#fff}

.primary-drawer__nav{flex:1 1 auto;padding:8px 0 24px}
.primary-drawer__menu{list-style:none;margin:0;padding:0}
.primary-drawer__menu li{border-bottom:1px solid var(--line-soft)}
.primary-drawer__menu li:last-child{border-bottom:0}
.primary-drawer__menu a{
  display:block;padding:14px 22px;
  font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:.02em;
  color:var(--nd-navy);text-decoration:none;line-height:1.3;
}
.primary-drawer__menu a:hover,
.primary-drawer__menu a:focus-visible{background:var(--bg-sunk);text-decoration:none}
.primary-drawer__menu a[aria-current="page"]{
  background:color-mix(in srgb, var(--nd-gold) 14%, transparent);
}

/* Scroll lock while the drawer is open. */
body.primary-drawer-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .primary-drawer__backdrop,.primary-drawer__panel{transition:none}
}

@media (max-width:980px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:28px}
  .nav-primary{display:none}
  /* With the nav strip gone, centre the wordmark and pin the hamburger
     left. display:contents promotes both to direct grid children; the
     trailing 44px track keeps the logo optically centred. */
  .masthead-inner{display:grid;grid-template-columns:44px 1fr 44px;gap:0}
  .brand{display:contents}
  .hamburger{display:grid;grid-column:1;justify-self:start}
  .masthead .logo{grid-column:2;justify-self:center}
}
@media (max-width:640px){
  .utility-search{min-width:0;flex:1}

  /* Phone: the subnav wraps onto two lines here (crumbs, then user links),
     so the desktop breathing room stacks into a tall empty band. Cut the
     lead-in above the crumbs and the row-gap below them; the column gap
     survives as the crumbs/user-links separator once the rules below get
     the two back onto one line. */
  .forum-subnav-inner{padding-top:2px;gap:6px 10px}
  /* Same 12px band, split evenly rather than 8-over-4. The asymmetry was one
     of the three things throwing the strip off a shared baseline; balanced,
     the crumbs sit where the rule above and the switcher below imply. */
  .breadcrumbs{padding:6px 0}

  /* Get the whole strip — crumbs plus user links — onto one line. Three
     things buy the width, in order of how much they save:

     1. The leaf crumb goes. It is the only crumb that never names a
        destination you can navigate to ("Thread", "View All", "Edit",
        "Mail", "Search"), and the page's own heading already says it.
        nth-child(n+4) rather than :last-child — the trail is only ever
        Home / Forums / Board / leaf, and on the pages with no leaf the
        board crumb IS the third item and has to stay.
     2. The board name drops to its identifying word via .crumb-trim
        ("The Open Forum" -> "Open"); see components/breadcrumbs.twig.
     3. Tracking and gaps come in. .14em is a lot of air across ~20
        characters of mono.

     All width-driven, so it holds on every page that renders the
     component, not just the board index. */
  .breadcrumbs ol{gap:4px}
  .breadcrumbs li{letter-spacing:.06em}
  .breadcrumbs li + li::before{margin-right:4px}
  .breadcrumbs li:nth-child(n+4){display:none}
  .crumb-trim{display:none}
  .forum-userlinks{gap:8px}
}