/* ============================================================
   natestpierre.me — DEMO FRAME  (injected bar over the sample hub)

   A fixed, two-line "you're viewing a sample" bar stamped on top of the
   client deliverable hub. This is *website chrome*, NOT part of the
   deliverable — it exists only in the served `sample/` copy, never in the
   pristine `client-example-merrick/` source. The bar markup is injected
   per page by tools/stamp-demo-frame.py; all styling lives here.

   Self-contained: every class is .demo-* . The only reach into the hub's
   own styles is the seating block that pushes .hub-nav / .hub-sidebar /
   the rich-page section nav below the bar. System fonts on purpose — the
   hub ships no external fonts, and we don't add a Google Fonts request.
   ============================================================ */

:root{
  --demo-h:        90px;
  --demo-green:    #00471B;   /* NSP brand green — distinct from the hub's olive */
  --demo-cream:    #EEF3EA;
  --demo-tint:     #9CC6A4;
  --demo-accent:   #F4EAD0;
  --demo-accent-ink:#16301E;
}

/* --- seat the whole hub below the fixed bar --------------------------- */
body{ padding-top: var(--demo-h) !important; }
.hub-nav{ top: var(--demo-h) !important; }                  /* sticky hub nav sticks under the bar */
.hub-sidebar{ top: calc(88px + var(--demo-h)) !important; } /* deep-page sidebar clears both */

/* Rich pages (Map, Company Profile, Learn) have their own sticky section sub-nav +
   label column + anchor offsets, measured from the top nav — they must clear the
   demo bar too. Uses var(--demo-h) so it tracks the bar height. (Heights are
   re-verified against the live render after rollout.) */
.section-nav{ top: calc(var(--nav-height) + var(--demo-h)) !important; }
.section-label-col{ top: calc(var(--nav-height) + var(--snav-height) + 32px + var(--demo-h)) !important; }
.doc-section{ scroll-margin-top: calc(var(--nav-height) + var(--snav-height) + var(--demo-h)) !important; }

/* --- the bar: three zones (identity · copy · actions) ---------------- */
.demo-bar{
  position:fixed; top:0; left:0; right:0; height:var(--demo-h); z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 clamp(14px,3vw,28px);
  /* faint vertical pinstripes over the brand green */
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 16px),
    var(--demo-green);
  border-top:1px solid rgba(156,198,164,.40);                 /* mint hairline, top + bottom */
  box-shadow:inset 0 -1px 0 rgba(156,198,164,.22), 0 2px 14px rgba(0,0,0,.22);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--demo-cream);
}

/* LEFT — identity, stacked */
.demo-left{ flex:1 1 0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; min-width:0; }
.demo-mark{ font-weight:800; font-size:20px; letter-spacing:-.01em; color:var(--demo-tint); white-space:nowrap; text-decoration:none; }
.demo-mark:hover{ color:#fff; }
.demo-pill{ font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--demo-green); background:var(--demo-tint); padding:4px 8px; border-radius:999px; white-space:nowrap; }

/* MIDDLE — copy, left-aligned, centered between the zones */
.demo-center{ flex:0 1 auto; text-align:left; min-width:0; }
.demo-line1{ margin:0; font-size:15.5px; font-weight:600; line-height:1.25; color:var(--demo-cream); }
.demo-line2{ margin:.18em 0 0; font-size:12.5px; line-height:1.3; color:var(--demo-tint); max-width:72ch; }
.demo-line2 b{ color:var(--demo-cream); font-weight:600; }

/* RIGHT — actions */
.demo-right{ flex:1 1 0; display:flex; align-items:center; justify-content:flex-end; gap:10px; white-space:nowrap; }
.demo-btn{ font-size:13px; font-weight:600; text-decoration:none; padding:.5em 1em; border-radius:5px; background:var(--demo-accent); color:var(--demo-accent-ink); }
.demo-btn:hover{ background:#fff; }
.demo-exit{ font-size:13px; font-weight:600; text-decoration:none; color:var(--demo-cream); padding:.5em .8em; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); }
.demo-exit:hover{ background:rgba(255,255,255,.08); }
.demo-exit span{ opacity:.65; margin-left:.4em; }

/* --- NARROW SCREENS — stack the three zones; the bar flows in normal order --- */
@media (max-width:820px){
  :root{ --demo-h:0px; }                /* bar is static now → zero out every seating offset */
  .demo-bar{ position:static; flex-direction:column; align-items:stretch; height:auto; gap:10px; padding:12px clamp(14px,4vw,20px); }
  .demo-left{ flex:none; }
  .demo-center{ flex:none; max-width:none; }
  .demo-line2{ max-width:none; }
  .demo-right{ flex:none; flex-direction:column; align-items:stretch; gap:8px; }
  .demo-btn, .demo-exit{ text-align:center; }
}