/* ===========================================================================
   STEMsaic Research Impacts - shared site CSS.
   Base styling carried by inline styles on each page (faithful to the design
   handoff); this file adds the reset, hover/focus states, responsive nav, and
   small-screen type overrides that the prototype handled in React.
   =========================================================================== */

* { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; display: block; }

/* --- Buttons / link hovers (was inline JS in the prototype) --- */
/* Render every button as a self-contained box so long labels + the arrow
   stay inside the fill and don't wrap raggedly on narrow screens. */
.btn-gold, .btn-outline, .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.btn-gold { transition: background-color .15s, border-color .15s; }
.btn-gold:hover { background: #c47a20 !important; border-color: #c47a20 !important; }

.btn-outline { transition: background-color .15s, color .15s; }
.btn-outline:hover { background: #1e2a42 !important; color: #ffffff !important; }

.btn-dark { transition: background-color .15s, border-color .15s; }
.btn-dark:hover { background: #0f1a2e !important; border-color: #0f1a2e !important; }

.link-arrow { transition: color .15s; }
.link-arrow:hover { color: #c47a20 !important; }

.card-lift { transition: transform .18s ease, box-shadow .18s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(30,42,66,0.16); }

a:focus-visible, button:focus-visible {
  outline: 3px solid #c47a20; outline-offset: 2px;
}

/* --- Responsive navigation (CSS replaces the React isMobile/menuOpen state) --- */
.nav-desktop { display: flex; }
.nav-mobile-btn { display: none; }
.nav-mobile-panel { display: none; }
.nav-mobile-panel.open { display: block; }

@media (max-width: 819px) {
  .nav-desktop { display: none; }
  .nav-mobile-btn { display: inline-flex; }
}

/* --- Project-tile badge (shared, legible across every data-ramp palette) ---
   A frosted dark-glass chip over the colored mosaic so white text always reads.
   The ramp color shows through the glass to differentiate tiles; the colon is a
   light-gold accent matching the Design:Build mark. Used on /work tiles and the
   home work teasers so the treatment is identical everywhere. */
.wbadge {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: inline-block; border-radius: 9px; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.92);
  box-shadow: 0 6px 18px rgba(30,42,66,0.45);
}
.wbadge > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.wbadge::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(23,34,54,0.46); }
.wbadge > span {
  position: relative; z-index: 2; display: block; padding: 8px 15px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.09em; text-transform: uppercase; color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.62); white-space: nowrap;
}
.wbadge > span > i { font-style: normal; color: #f1cd76; }

/* Product logo chip — white pill carrying the real product mark + name, for tiles
   whose project has its own logo (microPlastics DJ, Portal, SciBuilder). White so the
   colorful/navy marks read on the dark mosaic tile. Sits in the same top-left slot. */
.wlogo {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  background: #ffffff; border-radius: 9px; padding: 7px 14px 7px 10px;
  box-shadow: 0 6px 18px rgba(30,42,66,0.45);
}
.wlogo img { display: block; height: 26px; width: auto; }
.wlogo span {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.01em; color: #1e2a42; white-space: nowrap;
}

/* Product logo MARK — the transparent square logo in the OPPOSITE (top-right) corner
   of a tile, paired with the text badge top-left. Large enough to read; drop-shadow
   lifts it off the busy mosaic. Marks: *-mark.png (flood-filled transparent) + the SB svg. */
.wmark {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 124px; height: 124px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #ffffff 0%, #ffffff 58%, #eef2f7 100%);
  box-shadow: 0 0 0 6px #e8a840, 0 8px 22px rgba(30,42,66,0.55);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.wmark img { width: 82%; height: 82%; object-fit: contain; display: block; }
@media (max-width: 760px) { .wmark { width: 100px; height: 100px; } }

/* --- Small-screen type / spacing overrides (prototype used fixed px) --- */
@media (max-width: 640px) {
  .h-display { font-size: 40px !important; }
  .h-hero { font-size: 38px !important; }
  .h-section { font-size: 28px !important; }
  .h-statement { font-size: 25px !important; }
  .proof-num { font-size: 34px !important; }
  .pad-block { padding-left: 20px !important; padding-right: 20px !important; }
  .stack-sm { flex-direction: column !important; align-items: flex-start !important; }
}

/* Footer columns: brand + Explore + Connect side by side on desktop, stacked on phones */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}