/* ============================================================
   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:var(--card-raised);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-ink);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-surface);
  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 user links baseline-align along with everything else. A flex container
   that is itself a flex item takes its baseline from its FIRST
   BASELINE-ALIGNED child, so taking the first link out of that calculation
   (align-self:center) hands .forum-userlinks the next one's baseline and
   shifts the whole strip. Guests once lost about 12px that way, when Log in
   was a filled pill. Each link's icon is centred inside the link instead;
   see .user-link. */
.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-divider{color:var(--ink-4);font-size:11px}
.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-ink)}

/* Log in and Register, or Mail, Replies and Account: an icon, a word, and a
   count when there is one.
   Placed after .user-more-btn so the Account button takes these rules.
   Baseline-aligned like the rest of the strip, with the icon and the count
   centred out of the baseline calculation: a flex box takes its baseline from
   its first baseline-aligned child, and an icon has none, so an icon left in
   would hand the link its bottom edge and lift the word above the crumbs.
   Phones hide the word; see the 640px block. */
.user-link{
  display:inline-flex;align-items:baseline;gap:5px;
  color:var(--ink-2);font-weight:500;white-space:nowrap;
}
.user-link.has-badge,.user-more-btn.user-link{font-weight:600}
.user-link:hover{color:var(--nd-navy-ink);text-decoration:none}
.user-icon{width:14px;height:14px;flex:none;align-self:center}
.user-link .mail-badge{align-self:center}
.user-more-menu{
  display:none;position:absolute;right:0;top:100%;z-index:200;
  background:var(--card-raised);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-ink);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:var(--card-raised);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-surface);border:0;border-radius:var(--r-input);cursor:pointer;
  transition:background .12s ease;
}
.quick-login-submit:hover{background:var(--nd-navy-surface-hover)}

/* ── 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-ink));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-surface);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:60) 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-surface) 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-surface) 18%, transparent);
}
.primary-drawer:not([hidden]) .primary-drawer__panel{transform:translateX(0)}

.primary-drawer__header{
  background:var(--nd-navy-surface);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-ink);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}

}
@media (max-width:840px){
  /* Icons only, for guests and members, so the strip stays on the crumbs'
     line with Replies in it. Below 840px rather than at the 640px phone breakpoint: above 640
     the crumbs are shown in full ("Ticket and Commodities Board · View All"),
     and with words, two "99+" counts and that trail the strip wrapped up to
     833px. Tablets in portrait get icons too.
     The words stay in the page for screen readers (and in each link's
     aria-label with its count). Each icon gets a 40x36 tap target, and the
     count sits on the icon's top-right corner, ringed in the page colour so it
     reads as a separate mark. Centred rather than baseline-aligned: with no
     word showing there is no text line to share. The 36px tap targets are
     taller than the crumbs' row; the negative margin lets them overhang it
     instead of making the strip 4.5px taller than it is on desktop, and leaves the icons centred on the crumbs' capitals (measured
     within 0.5px). */
  .forum-userlinks{gap:4px;align-self:center;margin-block:-8px}
  .forum-userlinks .user-divider{display:none}
  .user-link{align-items:center;justify-content:center;min-width:40px;height:36px;gap:1px;position:relative}
  .user-link-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .user-icon{width:20px;height:20px}
  .user-link .mail-badge{
    position:absolute;top:2px;left:calc(50% + 1px);
    min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;
    display:flex;align-items:center;justify-content:center;line-height:1;
    box-shadow:0 0 0 2px var(--bg);
  }
  /* The Account button's own vertical padding would make it taller than the
     two links beside it. */
  .user-more-btn.user-link{padding:0}
}
/* Between the phone breakpoint and 840px the crumbs keep their desktop
   padding, 8px above and 4px below, so the row's middle is 2.5px above the
   middle of their capitals. Drop the icons to match (phones balance the
   padding, so they need nothing). */
@media (min-width:641px) and (max-width:840px){
  .forum-userlinks{position:relative;top:2.5px}
}
/* The narrowest phones (320px, the first iPhone SE): 40px targets still wrap
   the strip, 32px keeps it on one line. */
@media (max-width:359px){
  .forum-userlinks{gap:2px}
  .user-link{min-width:32px}
}