/* ===========================================================================
   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: #c4933f !important; border-color: #c4933f !important; }

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

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

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

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

a:focus-visible, button:focus-visible {
  outline: 3px solid #4a90d9; 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; }
}

/* --- 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; }
}