/* =============================================================
   DCSI · Shared Design System
   Used by every subdomain (datacenterstress.com + national/state/
   global/frontier). Single source of truth for colors, type,
   spacing, and shared components (top bar, footer, card patterns).
   ============================================================= */

/* Webfonts are loaded via a render-blocking <link> in head.html (preceded by
   preconnect hints). The old @import here issued the SAME request a second
   time, chained after this stylesheet parsed — removed. */

/* ---------- Accessibility utilities ---------- */
/* Visually hidden but available to screen readers (WCAG 2.4.6, 1.3.1).
   Used for document-level h1 elements when the visible page leads with an
   illustration or eyebrow instead of a literal headline. */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
/* Skip-to-content link for keyboard users, visible only on focus. */
.skip-link{
  position:absolute;top:-40px;left:8px;z-index:100000;
  background:var(--forest);color:#fff;padding:10px 18px;
  font-family:Inter,sans-serif;font-size:.85rem;font-weight:600;
  border-radius:0 0 6px 6px;text-decoration:none;
  transition:top .15s;
}
.skip-link:focus{top:0;outline:2px solid var(--bronze);outline-offset:2px}

/* ---------- Global keyboard focus indicator ---------- */
/* WCAG 2.4.7. Every interactive element gets a visible ring on keyboard
   focus. :focus-visible (not :focus) so mouse clicks don't show the ring.
   Components that set outline:none must not suppress this. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:2px;
  border-radius:3px;
}

/* ---------- Reduced-motion accessibility ---------- */
/* Honor user preference for reduced motion across the entire site.
   Disables keyframe animations and shortens transitions to nearly instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Reset + tokens ---------- */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Palette */
  --forest:#1B3A2D;
  --forest-deep:#12281F;
  --forest-mid:#254A3A;
  --bronze:#A8885A;
  --bronze-light:#C4A87A;
  --bronze-deep:#7A6240;
  --stone:#F4F2ED;
  --cream:#F5F1E8;
  --white:#FFFFFF;
  --text-primary:#1A1A1A;
  --text-secondary:#4A4A4A;
  --text-muted:#7A7A7A;
  --rule-light:#D8D4CC;
  --danger:#8B2D2D;
  --rust:#7C2D12;
  --yel:#B45309;
  /* Subdomain accent (each property may override) */
  --subdomain-accent:var(--forest);
}

html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  font-family:'Source Serif 4',Georgia,serif;
  background:var(--stone);
  color:var(--text-primary);
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  min-height:100vh;
}

/* ---------- Type primitives ---------- */
.eyebrow{
  font-family:Inter,sans-serif;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--bronze);
}
.h-display{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:700;
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
.h-page{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:700;
  font-size:2.5rem;
  line-height:1.1;
  letter-spacing:-.005em;
}
.h-section{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:700;
  font-size:1.5rem;
  line-height:1.2;
}
.body-editorial{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--text-primary);
}
.italic-sub{
  font-family:'Source Serif 4',Georgia,serif;
  font-style:italic;
  font-size:1.15rem;
  line-height:1.7;
  color:var(--text-secondary);
}

/* ---------- Top bar (shared across subdomains) ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(245,241,232,.94);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--rule-light);
}
.topbar-inner{
  max-width:1280px;
  margin:0 auto;
  padding:14px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--forest);
  flex-shrink:0; /* never let the nav links crush the brand block (H3 audit fix) */
}
.brand-mark{
  /* Default Pippa portrait, image already has its own dark forest-green backdrop, so no fill. */
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(168,136,90,.35); /* faint bronze ring for definition against the bar */
}
.brand-mark.brand-mark-helmet{
  /* Astronaut-helmet variant (Orbit only), image is transparent, so add cream backdrop.
     Sized to match the default 34px variant so the mark doesn't jump between subdomains. */
  width:34px;
  height:34px;
  background:#f4ecd8;
  box-shadow:0 0 0 1px rgba(31,61,46,.15);
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{
  font-family:'Source Serif 4',serif;
  font-weight:700;
  font-size:1rem;
  color:var(--forest);
}
.brand-text span{
  font-size:.7rem;
  color:var(--text-muted);
  font-family:Inter,sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.topbar-links{display:flex;gap:22px;font-family:Inter,sans-serif;font-size:.82rem;font-weight:500}
.topbar-links a{color:var(--text-secondary);text-decoration:none;transition:color .15s;white-space:nowrap}
.topbar-links a:hover{color:var(--forest)}
.topbar-links a.active{color:var(--forest);font-weight:700}

/* Mobile hamburger button, hidden on desktop, shown below 900px */
.topbar-menu-toggle{display:none;background:transparent;border:1px solid var(--rule-light);border-radius:6px;padding:8px 10px;cursor:pointer;color:var(--forest);font-family:Inter,sans-serif;font-size:.85rem;line-height:1}
.topbar-menu-toggle:hover,.topbar-menu-toggle:focus{background:var(--cream);border-color:var(--bronze)}
.topbar-menu-toggle .bars{display:inline-block;width:18px;height:14px;position:relative}
.topbar-menu-toggle .bars::before,.topbar-menu-toggle .bars::after,.topbar-menu-toggle .bars span{position:absolute;left:0;right:0;height:2px;background:var(--forest);border-radius:1px;transition:transform .2s,opacity .2s,top .2s,bottom .2s}
.topbar-menu-toggle .bars::before{content:"";top:0}
.topbar-menu-toggle .bars span{top:6px}
.topbar-menu-toggle .bars::after{content:"";bottom:0}
.topbar-menu-toggle[aria-expanded="true"] .bars::before{transform:rotate(45deg);top:6px}
.topbar-menu-toggle[aria-expanded="true"] .bars span{opacity:0}
.topbar-menu-toggle[aria-expanded="true"] .bars::after{transform:rotate(-45deg);bottom:6px}

/* ---------- Plain-English toggle (UI affordance) ---------- */
.lang-toggle{
  background:var(--white);
  border:1px solid var(--rule-light);
  border-radius:24px;
  padding:4px;
  display:inline-flex;
  gap:2px;
  font-family:Inter,sans-serif;
}
.lang-toggle button{
  padding:6px 14px;
  min-height:44px;            /* WCAG 2.5.5 touch target */
  border:none;
  background:transparent;
  color:var(--text-secondary);
  font-size:.7rem;
  font-weight:600;
  cursor:pointer;
  border-radius:20px;
  transition:all .15s;
  letter-spacing:.02em;
}
.lang-toggle button.active{background:var(--forest);color:#fff}

/* ---------- Card patterns ---------- */
.card{
  background:var(--white);
  border:1px solid var(--rule-light);
  border-radius:14px;
  padding:24px 28px;
  transition:all .2s ease;
}
.card-rule{border-left:3px solid var(--forest)}
.card-rule.bronze{border-left-color:var(--bronze)}
.card-rule.rust{border-left-color:var(--rust)}
.card-rule.danger{border-left-color:var(--danger)}
.card-tier{
  font-family:Inter,sans-serif;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:8px;
}
.card-h{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:700;
  font-size:1.2rem;
  line-height:1.2;
  margin-bottom:6px;
}
.card-p{
  font-size:.9rem;
  line-height:1.6;
  color:var(--text-secondary);
}

/* ---------- Glossary tooltip (`<dfn data-def="...">`) ---------- */
dfn{
  font-style:normal;
  border-bottom:1px dotted var(--bronze);
  cursor:help;
  position:relative;
  font-weight:500;
  background:rgba(168,136,90,.06);
  padding:0 3px;
  border-radius:2px;
  transition:background .15s;
}
dfn:hover{background:rgba(168,136,90,.18)}
dfn::after{
  content:attr(data-def);
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  background:var(--forest);
  color:#fff;
  padding:14px 18px;
  border-radius:10px;
  font-family:Inter,sans-serif;
  font-size:.84rem;
  font-weight:400;
  line-height:1.5;
  width:340px;
  max-width:90vw;
  text-align:left;
  letter-spacing:0;
  text-transform:none;
  font-style:normal;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .15s,transform .15s;
  z-index:100;
}
dfn::before{
  content:"";
  position:absolute;
  left:18px;
  top:calc(100% + 2px);
  border:6px solid transparent;
  border-bottom-color:var(--forest);
  opacity:0;
  transition:opacity .15s;
  z-index:101;
}
dfn:hover::after,dfn:focus::after{opacity:1;transform:translateY(0);pointer-events:auto}
dfn:hover::before,dfn:focus::before{opacity:1}
body.plain-english dfn::after,body.plain-english dfn::before{display:none}
body.plain-english dfn{border-bottom:none;background:transparent;padding:0;cursor:default}

/* ---------- Footer tagline (the DCSI editorial mantra) ---------- */
.footer-tagline{
  max-width:1180px;margin:0 auto 30px;padding:0 32px;text-align:center;
}
.footer-tagline p{
  font-family:'Source Serif 4',Georgia,serif;font-style:italic;
  font-size:1.5rem;line-height:1.3;font-weight:400;
  color:var(--bronze-light);margin:0;
}
@media (max-width:600px){
  .footer-tagline p{font-size:1.2rem}
}

/* ---------- Footer (shared across subdomains) ---------- */
footer.site-footer{
  background:var(--forest-deep);
  color:rgba(255,255,255,.7);
  padding:50px 32px 30px;
  font-family:Inter,sans-serif;
  font-size:.82rem;
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;
}
.footer-brand strong{
  font-family:'Source Serif 4',serif;
  font-size:1.05rem;
  color:#fff;
  font-weight:700;
  display:block;
  margin-bottom:6px;
}
.footer-brand p{
  font-size:.78rem;
  line-height:1.6;
  color:rgba(255,255,255,.72);   /* was .6 — failed WCAG AA on --forest-deep */
  max-width:280px;
}
.footer-col h4{
  font-family:Inter,sans-serif;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--bronze-light);
  margin-bottom:14px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col a{color:rgba(255,255,255,.78);text-decoration:none;font-size:.82rem;transition:color .15s;display:inline-block;padding:6px 0}
.footer-col a:hover{color:#fff}
.footer-bottom{
  max-width:1180px;
  margin:30px auto 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  font-size:.74rem;
  color:rgba(255,255,255,.68);   /* was .5 — failed WCAG AA on --forest-deep */
}

/* ---------- Sections + content widths ---------- */
.section{max-width:1180px;margin:0 auto;padding:60px 32px}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
  border-bottom:1px solid var(--rule-light);
  padding-bottom:14px;
}
.section-meta{
  font-family:Inter,sans-serif;
  font-size:.72rem;
  color:var(--text-muted);
  letter-spacing:.04em;
  text-align:right;
  flex-shrink:0;
  padding-bottom:6px;
}

/* ---------- Stat cells ---------- */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--rule-light);
  background:var(--white);
  border-radius:12px;
  overflow:hidden;
}
.stat-cell{
  padding:24px 28px;
  border-right:1px solid var(--rule-light);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stat-cell:last-child{border-right:none}
.stat-cell .tier{
  font-family:Inter,sans-serif;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--bronze);
}
.stat-cell .num{
  font-family:'Source Serif 4',serif;
  font-weight:700;
  font-size:2.6rem;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--forest);
}
.stat-cell .num em{
  font-style:normal;
  color:var(--bronze);
  font-weight:400;
  font-size:1.1rem;
  letter-spacing:0;
  margin-left:6px;
}
.stat-cell .line{
  font-family:'Source Serif 4',serif;
  font-size:.92rem;
  color:var(--text-secondary);
  line-height:1.5;
}

/* ---------- Provenance marker for modeled estimates ---------- */
/* Wrap any number that can't be directly verified in <span class="stat-est">.
   Adds an italic "est." prefix and a subtle dotted underline + tooltip
   explaining the methodology. Verified DCSI counts (counties, facility lists,
   moratoriums, named projects) should NOT use this marker. */
.stat-est{
  border-bottom:1px dotted var(--bronze);
  cursor:help;
}
.stat-est::before{
  content:"est. ";
  font-style:italic;
  font-weight:400;
  font-size:.78em;
  color:var(--bronze);
  letter-spacing:.04em;
  margin-right:2px;
}
/* The hover/focus tooltip is no longer a CSS pseudo-element (pseudo-elements
   can't escape their parent's bounds inside a card). It is now rendered by JS
   as a div parented to <html> so it floats above the entire page. See the
   .stat-est-tooltip rules below. */
.stat-est:hover,.stat-est:focus{background:rgba(168,136,90,.08);border-radius:3px}

/* JS-rendered, document-positioned tooltip that escapes any card/stack context. */
.stat-est-tooltip{
  position:absolute !important;
  z-index:2147483647 !important;
  isolation:isolate;
  background:var(--forest-deep);color:#fff;
  font-family:Inter,sans-serif;font-size:.78rem;font-weight:400;
  line-height:1.5;letter-spacing:.02em;
  padding:11px 14px 10px;border-radius:8px;
  border-left:3px solid var(--bronze);
  max-width:320px;text-align:left;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  display:none;pointer-events:none;
}
.stat-est-tooltip.open{display:block}
/* Methodology callout shown beneath the stat strip */
.stats-method-note{
  max-width:1180px;margin:20px auto 0;padding:0 32px;
  font-family:Inter,sans-serif;font-size:.74rem;
  line-height:1.6;color:var(--text-muted);
  display:flex;gap:14px;align-items:flex-start;
}
.stats-method-note::before{
  content:"\2139";
  display:inline-flex;width:18px;height:18px;flex-shrink:0;
  align-items:center;justify-content:center;
  background:var(--cream);color:var(--bronze-deep);
  border:1px solid var(--rule-light);border-radius:50%;
  font-family:'Source Serif 4',serif;font-style:italic;font-weight:700;font-size:.78rem;
}
.stats-method-note strong{color:var(--forest);font-weight:600}
.stats-method-note .stat-est{cursor:default;border-bottom:none}
.stats-method-note .stat-est::before{font-weight:600}

/* ---------- Buttons + links ---------- */
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--forest);
  color:#fff;
  padding:12px 24px;
  border-radius:8px;
  border:none;
  font-family:Inter,sans-serif;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  text-decoration:none;
  transition:all .15s;
}
.btn-primary:hover{background:var(--forest-deep);transform:translateY(-1px)}
.btn-bronze{background:var(--bronze);color:var(--forest-deep)}
.btn-bronze:hover{background:var(--bronze-light)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .topbar-menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .topbar-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--rule-light);
    flex-direction:column;gap:0;padding:8px 0;
    box-shadow:0 8px 24px rgba(31,61,46,.12);
  }
  .topbar-links.menu-open{display:flex}
  .topbar-links a{padding:12px 24px;font-size:.95rem;border-bottom:1px solid var(--rule-light)}
  .topbar-links a:last-child{border-bottom:none}
  .topbar-inner{padding:12px 20px;position:relative}
  .footer-inner{grid-template-columns:1fr 1fr}
  .stat-strip{grid-template-columns:1fr}
  .stat-cell{border-right:none;border-bottom:1px solid var(--rule-light)}
  .stat-cell:last-child{border-bottom:none}
  .section{padding:40px 22px}
}
@media (max-width:560px){
  .footer-inner{grid-template-columns:1fr}
}