/* ============================================================================
 * statum-header.css: THE header for every Statum page. One file; pages link it.
 * ----------------------------------------------------------------------------
 * Shirish, 30 Sep 2026: "we moved the logo to the right in Acuity but most of the
 * dashboards have the logo on the left... check all of them for consistency".
 *
 * Two shells, one file:
 *   A. DASHBOARDS  (body.stx-shell, set by /statum-header.js)
 *      The Statum KPI logo TOP RIGHT, Acuity's exact chip (/one-storm, logo ruling
 *      2026-09-04): absolute, 10px from the top, 14px from the right, a 35px logo,
 *      18px on a phone. It scrolls away with the masthead and never floats over
 *      the reading column. The navy bar and the Fraunces title below are the house
 *      header most dashboards already carried in their own copies (chrome.css .hdr);
 *      those copies are removed from the pages that now link this file.
 *   B. WEBSITE PAGES  (header.sx-nav, written by /statum-nav.js)
 *      About, How it works, Catalog, Pricing, Usage. The same logo file and chip, on
 *      the LEFT (ruled OK for website pages, 30 Sep 2026: they are not dashboards).
 *
 * NOT loaded by the SouthState (-ssb) pages, /, or /console. /statum-home.js, which
 * the SSB pages load, is untouched and still draws its own top-left chip there.
 *
 * Exceptions, on purpose: Statum Atlas and Statum Analyst keep the cream/Inter Astra
 * shell by earlier ruling; they use part A for the logo only (body.stx-shell-logo).
 * Bank Market Analysis's header sits inside its map sidebar, not across the page,
 * so it does not reserve the logo's width (body.stx-hdr-inset).
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&display=swap');

/* ---- A. dashboards: the logo ------------------------------------------------ */
#statumHome{position:absolute;top:10px;right:14px;left:auto;z-index:9500;display:inline-flex;align-items:center;
  padding:6px 12px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:10px;
  box-shadow:0 1px 6px rgba(0,0,0,.18);text-decoration:none}
#statumHome img{height:35px;width:auto;display:block}
#statumHome:focus-visible{outline:2px solid #0b3d91;outline-offset:2px}
@media(max-width:640px){
  #statumHome{top:8px;right:10px;padding:4px 8px}
  #statumHome img{height:18px}
}

/* ---- A. dashboards: the bar, the title, one background ---------------------- */
body.stx-shell{background:#fdfcf8}
body.stx-shell .hdr{background:linear-gradient(135deg,#0b3d91,#1565C0);border-bottom:3px solid #FEC71E;color:#fff;
  padding:20px 170px 20px 28px;margin:0;box-sizing:border-box;text-align:left;border-radius:0;box-shadow:none}
/* layout at the lowest weight, so a page that lays its header out on purpose (Deposit Intelligence's grid) keeps it */
.hdr{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
body.stx-shell .hdr .tt,body.stx-shell .hdr h1{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-size:23px;
  font-weight:600;letter-spacing:.2px;line-height:1.2;color:#fff;margin:0;text-transform:none}
body.stx-shell .hdr .sub,body.stx-shell .hdr > div > p,body.stx-shell .hdr > p{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:12px;font-weight:500;line-height:1.45;color:#fff;opacity:.8;margin:5px 0 0;max-width:none}
body.stx-shell .hdr .sub a,body.stx-shell .hdr p a{color:#FEC71E}
/* the three gold dots sat in the corner the logo now occupies (Acuity took them off first) */
body.stx-shell .hdr .dots{display:none}
@media(max-width:640px){
  body.stx-shell .hdr{padding:16px 88px 16px 16px}
}
/* Bank Market Analysis: the header is the top of a 380px map sidebar; the logo floats over the map */
body.stx-shell.stx-hdr-inset .hdr{padding-right:20px;display:block}
@media(max-width:640px){body.stx-shell.stx-hdr-inset .hdr{padding:16px 88px 16px 16px}}

/* ---- B. website pages: one nav, logo LEFT ----------------------------------- */
header.sx-nav{background:#FDF8EC;border-bottom:1px solid #eadfc6;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
header.sx-nav .sx-top{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;row-gap:8px;column-gap:24px}
header.sx-nav .sx-logo{display:inline-flex;align-items:center;padding:6px 12px;background:#fff;border:1px solid rgba(0,0,0,.12);
  border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,.12);text-decoration:none}
header.sx-nav .sx-logo img{height:35px;width:auto;display:block}
header.sx-nav .sx-logo:focus-visible,header.sx-nav .sx-links a:focus-visible{outline:2px solid #0b3d91;outline-offset:2px}
/* pages style a bare nav{} for their own use (Pricing, Usage); none of it reaches this one */
header.sx-nav nav.sx-links{position:static;margin:0;padding:0;border:0;background:none;box-shadow:none;height:auto;width:auto;max-width:none}
header.sx-nav .sx-links{display:flex;align-items:center;flex-wrap:wrap;gap:6px 26px;font-size:14px}
header.sx-nav .sx-links a{color:#6b6152;text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
header.sx-nav .sx-links a:hover{color:#1c2430}
header.sx-nav .sx-links a[aria-current="page"]{color:#8a6d00;font-weight:600;border-bottom-color:#FEC71E}
header.sx-nav #signinBtn{padding:7px 15px;border-radius:999px;border:1px solid #d9cfa8;background:#fff;font-family:inherit;
  font-size:13px;font-weight:600;color:#1c2430;cursor:pointer}
@media(max-width:640px){
  header.sx-nav .sx-top{padding:10px 16px}
  header.sx-nav .sx-logo{padding:4px 8px}
  header.sx-nav .sx-logo img{height:18px}
  header.sx-nav .sx-links{gap:6px 14px;font-size:13px}
}