/* ============================================================
   BondGov — shared public chrome (ONE nav + ONE footer + shared
   affordances for EVERY public page: marketing, IR, auth, API).

   Loaded by templates/bondgov/_base.html (marketing/auth/API world,
   where ds.css is NOT loaded) AND by the standalone IR templates
   (issuer_detail, search, investor_document_lookup) BEFORE
   ds.css/public.css. The .util/.pfooter rules moved here FROM
   public.css — this file is their single source of truth.

   Self-contained: every token reference carries a literal fallback
   so the chrome renders identically with or without ds.css.
   ============================================================ */

/* ---- Utility bar (the one BondGov nav) ---------------------- */
.util { background: var(--mp-brand-deep, #0a3326); color: rgba(255,255,255,0.72); border-bottom: 1px solid rgba(255,255,255,0.06); }
.util__row { max-width: 1440px; margin: 0 auto; padding: 0 28px; height: 42px; display: flex; align-items: center; gap: 16px; }
.util__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; }
.util__wordmark { font-family: var(--mp-font-serif, 'Source Serif 4', Georgia, serif); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; color: #fff; }
.util__wordmark b { color: var(--mp-accent-soft, #ecc97a); font-weight: 600; }
.util__divider { width: 1px; height: 18px; background: rgba(255,255,255,0.16); }
.util__tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.util__spacer { flex: 1; }
.util__links { display: flex; align-items: center; gap: 4px; }
.util__link { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.66); text-decoration: none; padding: 5px 10px; border-radius: var(--r-sm, 4px); transition: color 0.12s, background 0.12s; }
.util__link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.util__claim { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--mp-brand-deep, #0a3326); background: var(--mp-accent-soft, #ecc97a); padding: 5px 12px; border-radius: var(--r-sm, 4px); text-decoration: none; border: 1px solid var(--mp-accent-soft, #ecc97a); transition: background 0.12s; }
.util__claim:hover { background: #fff; border-color: #fff; }

/* ---- Civic footer ------------------------------------------- */
.pfooter { background: var(--mp-brand-deep, #0a3326); color: rgba(255,255,255,0.66); margin-top: auto; }
.pfooter__top { max-width: 1440px; margin: 0 auto; padding: 40px 28px 30px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pfooter__brand { display: flex; flex-direction: column; gap: 12px; }
.pfooter__wm { font-family: var(--mp-font-serif, 'Source Serif 4', Georgia, serif); font-size: 21px; font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 9px; }
.pfooter__wm b { color: var(--mp-accent-soft, #ecc97a); font-weight: 600; }
.pfooter__tag { font-size: 12.5px; color: rgba(255,255,255,0.5); max-width: 300px; line-height: 1.55; }
.pfooter__col h5 { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mp-accent-soft, #ecc97a); margin: 0 0 12px; }
.pfooter__col a { display: block; font-size: 12.5px; color: rgba(255,255,255,0.66); text-decoration: none; padding: 4px 0; }
.pfooter__col a:hover { color: #fff; }
.pfooter__bottom { max-width: 1440px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: flex-start; font-size: 11.5px; color: rgba(255,255,255,0.45); }

/* ---- Keyboard focus (pages without ds.css had NO focus state) */
:focus-visible { outline: 2px solid var(--mp-primary, #176b52); outline-offset: 1px; }
.util a:focus-visible, .pfooter a:focus-visible { outline-color: var(--mp-accent-soft, #ecc97a); }

/* ---- Shared button set (mirror of ds.css .btn for pages that
        don't load ds.css; values must stay in lockstep) -------- */
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 16px; border-radius: var(--r-sm, 4px); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; border: 1px solid var(--mp-primary, #176b52); background: var(--mp-primary, #176b52); color: #fff; }
.pbtn:hover { background: var(--mp-primary-dark, #0f4a3a); border-color: var(--mp-primary-dark, #0f4a3a); }
.pbtn--ghost { background: #fff; color: var(--mp-primary-dark, #0f4a3a); border-color: var(--mp-border, #ddd6c3); }
.pbtn--ghost:hover { background: var(--mp-gray-50, #f6f4ec); border-color: #c7bfa8; }
/* Literal gold, deliberately NOT var(--mp-accent): the vite bundle's
   :root[data-brand="bondgov"] block remaps --mp-accent to the legacy
   pre-redesign green (#28a745), which turned this button green with a
   gold hover wherever the bundle loads. Public chrome is treasury-civic
   gold by definition (same convention as --mp-accent-soft above). */
.pbtn--accent { background: #d4a64a; border-color: #d4a64a; color: #1a1304; }
.pbtn--accent:hover { background: var(--mp-accent-600, #b7791f); border-color: var(--mp-accent-600, #b7791f); color: #fff; }
.pbtn--dark { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.22); }
.pbtn--dark:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.34); }

/* ---- Auth / small-card surface ------------------------------ */
.authwrap { min-height: calc(100vh - 42px); display: flex; align-items: flex-start; justify-content: center; padding: 64px 20px 90px; background: var(--mp-bg-page, #fbf7ec); }
.authcard { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--mp-border, #ddd6c3); border-radius: var(--r-md, 10px); padding: 34px 36px 36px; box-shadow: 0 1px 2px rgba(26,32,25,0.04), 0 8px 28px rgba(26,32,25,0.05); }
.authcard h1 { font-family: var(--mp-font-serif, 'Source Serif 4', Georgia, serif); font-size: 25px; font-weight: 600; color: var(--mp-primary-dark, #0f4a3a); letter-spacing: -0.01em; margin: 0 0 6px; }
.authcard__sub { font-size: 13.5px; color: var(--mp-text-muted, #6d7466); margin: 0 0 22px; line-height: 1.55; }
.authfield { margin-bottom: 16px; }
.authfield label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mp-text-muted, #6d7466); margin-bottom: 6px; }
.authfield input { width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px; color: inherit; background: #fff; border: 1px solid var(--mp-border, #ddd6c3); border-radius: var(--r-sm, 4px); transition: border-color 0.12s, box-shadow 0.12s; }
.authfield input:focus { outline: none; border-color: var(--mp-primary, #176b52); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-primary, #176b52) 14%, transparent); }
.authcard .pbtn { width: 100%; min-height: 42px; margin-top: 4px; }
.authlinks { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.authlinks a { color: var(--mp-primary, #176b52); font-weight: 600; text-decoration: none; }
.authlinks a:hover { text-decoration: underline; }
.authalert { border: 1px solid #e6b4a9; background: #fff4f1; color: #853725; border-radius: var(--r-sm, 4px); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.authalert ul.errorlist { margin: 0; padding-left: 18px; }
.authok { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #e6f4ed; color: #176b52; font-size: 20px; font-weight: 700; margin-bottom: 14px; }

/* ---- Responsive grid helpers for the marketing pages
        (their fixed multi-column grids had NO mobile fallback) - */
.pgrid { display: grid; gap: var(--pgrid-gap, 24px); }
.pgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pgrid--hero { grid-template-columns: 1.4fr 1fr; }
.pgrid--split { grid-template-columns: 1fr 2fr; }
.pgrid--side { grid-template-columns: 1fr 380px; }
@media (max-width: 900px) {
  .pgrid--3, .pgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid--hero, .pgrid--split, .pgrid--side { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pgrid--2, .pgrid--3, .pgrid--4 { grid-template-columns: 1fr; }
}

/* ---- Chrome mobile collapse --------------------------------- */
@media (max-width: 1080px) {
  .pfooter__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .util__row, .pfooter__top, .pfooter__bottom { padding-left: 16px; padding-right: 16px; }
  /* Compact nav: hide the tag + secondary links, but keep Directory —
     otherwise a phone visitor on an issuer page has no route anywhere
     else on the site (there is no hamburger). */
  .util__tag, .util__links .util__link { display: none; }
  .util__links .util__link--mobile { display: inline-flex; }
  .util__links .util__claim { display: inline-flex; }
  .pfooter__bottom { flex-direction: column; gap: 6px; align-items: flex-start; }
}
@media (max-width: 560px) {
  .pfooter__top { grid-template-columns: 1fr; }
}