/* chq-nav.css - the shared CollectHQ marketing header.
   Added 2026-08-17 so every public page carries the same top chrome.

   DELIBERATELY SCOPED. Every selector is under .gov-band or .site-head, and the
   custom properties are declared on those elements instead of :root, because
   landing.css declares :root vars with the same names (--ink, --ink-2). A global
   block here would silently restyle the page body. Do not "tidy" this into :root.

   Buttons are .site-head .btn rather than .btn for the same reason - landing.css
   already owns .btn, and so does collecthq-home.css. */

.gov-band, .site-head {
  --navy:#112e51; --navy-2:#0c2340; --blue:#205493; --blue-soft:rgba(32,84,147,.09);
  --line:#d9dee5; --gold:#d6a419; --ink-2:#3d4551; --muted:#6b7385;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.gov-band{background:var(--navy-2);color:rgba(255,255,255,.72);font-size:.76rem}
.gov-band .wrap{max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:7px 24px}
.gov-band .star{color:var(--gold)}

.site-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-head .wrap{max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px}
.site-head .brandmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.site-head .seal{width:42px;height:42px;flex:none;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;letter-spacing:.04em;border:2px solid var(--gold);box-shadow:inset 0 0 0 3px var(--navy)}
.site-head .brand-t1{font-weight:800;font-size:1.2rem;line-height:1.1;letter-spacing:-.01em;color:var(--navy);display:block}
.site-head .brand-t2{font-size:.74rem;color:var(--muted);display:block}
.site-head .beta{display:inline-block;font:800 8.5px/1.4 var(--mono);letter-spacing:.12em;color:#7c2d12;background:#fde68a;border:1px solid #f59e0b;padding:1px 5px;border-radius:3px;vertical-align:middle;margin-left:6px}

.site-head .nav{display:flex;align-items:center;gap:22px}
.site-head .nav a.n{color:var(--ink-2);font-weight:600;font-size:.92rem;text-decoration:none}
.site-head .nav a.n:hover{color:var(--navy)}

.site-head .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;padding:11px 20px;border-radius:5px;border:2px solid var(--blue);cursor:pointer;white-space:nowrap;transition:.15s;text-decoration:none}
.site-head .btn.solid{background:var(--blue);color:#fff}
.site-head .btn.solid:hover{background:var(--navy);border-color:var(--navy)}
.site-head .btn.ghost{border-color:transparent;color:var(--ink-2);padding:11px 14px}
.site-head .btn.ghost:hover{color:var(--navy)}
.site-head .btn:focus-visible,.site-head a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

@media (max-width:820px){
  .site-head .wrap{flex-wrap:wrap;gap:10px}
  .site-head .nav{gap:14px;flex-wrap:wrap}
  .site-head .nav a.n{font-size:.88rem}
  .gov-band .wrap{font-size:.72rem}
}