/*
  Base element styles and shared utilities — resets and defaults that
  reference tokens.css exclusively (no hard-coded colors, spacing, or
  font sizes below). Load AFTER tokens.css and BEFORE components/*.css.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 0;
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: clip;
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-base);
  line-height: var(--line-height-body);
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* ------------------------------------------------------------------
   Keyboard focus — do not remove or make conditional on hover support.
   The source audit this package was extracted from found links and
   buttons sitewide with a hover state but NO visible keyboard-focus
   indicator at all — a real accessibility gap, not a style nitpick.
   See README lessons-learned checklist.
   ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

h1 {
  font-size: var(--font-h1);
}

h2 {
  font-size: var(--font-h2);
}

h3 {
  font-size: var(--font-h3);
}

/* Fixed, per-breakpoint heading sizes instead of fluid clamp()/vw type.
   See tokens.css's typography section and the README for why: fluid
   headline sizing can wrap mid-word at viewport widths nobody checked
   during design/QA. Add more steps here if a project needs finer
   control (e.g. a distinct tablet size), but keep every step a fixed,
   named value you can point at and test — not an open-ended formula. */
@media (max-width: 900px) {
  h1 {
    font-size: 2.5rem; /* 40px */
  }
}

@media (max-width: 640px) {
  h1 {
    font-size: 2.25rem; /* 36px */
  }

  h2 {
    font-size: 1.75rem; /* 28px */
  }
}

ul {
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------
   .container — demonstrates the required fallback pattern for
   min()/max()/clamp(): write a plain fixed value FIRST, then the
   modern function as a SECOND declaration of the same property.
   Browsers that don't understand min()/max()/clamp() (pre-2020
   Safari, old Android WebView) treat that second declaration as an
   invalid value and discard it, silently keeping the first, fixed
   rule instead of rendering something broken or extreme. Browsers
   that DO understand it just apply the later declaration as normal
   cascade order. Use this two-line pattern for every min()/max()/
   clamp() usage you add anywhere in a project — see README
   lessons-learned checklist.
   ------------------------------------------------------------------ */
.container {
  width: calc(100% - 32px);                        /* fallback */
  width: min(var(--container-max), calc(100% - 32px));
  margin-inline: auto;
}

.container--standard {
  max-width: var(--container-standard);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--space-8) 0;
}

.section-heading {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  margin-bottom: var(--space-6);
  text-align: center;
}

.section-heading::after {
  width: 52px;
  height: 3px;
  background: var(--color-brand-primary);
  content: "";
}

.eyebrow {
  color: var(--color-brand-primary);
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Surfaces that flip text color for anything nested inside them —
   apply to hero sections, CTA bands, dark headers/footers, etc. so
   headings/paragraphs/buttons placed inside automatically get
   readable colors instead of re-declaring color per element. */
.dark-surface {
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.dark-surface h1,
.dark-surface h2,
.dark-surface h3,
.dark-surface p {
  color: var(--color-text-inverse);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}