/* ============================================================
   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;
}
.forum-subnav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 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:center;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 ───────────────────────────────────────── */
.breadcrumbs{padding:24px 0 12px}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;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}
}