/* =============================================================================
   Globals — reset, base elements, typography scale, layout primitives,
   scroll-reveal, accessibility and the one global reduced-motion rule.
   Tokens come from css/variables.css.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Light theme, matching the Next.js apps. */
:root {
  color-scheme: light;
}

html {
  font-size: 16px;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-near-white);
  color: var(--color-primary);
  font-weight: 500;
  line-height: 160%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
   Base elements — typography.md § Base Styles.
   Un-classed headings (the blog articles) pick up the matching scale.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-primary);
}

h1 { font-size: 4.5rem;   line-height: 110%; }
h2 { font-size: 3rem;     line-height: 115%; }
h3 { font-size: 2rem;     line-height: 120%; }
h4 { font-size: 1.5rem;   line-height: 130%; }
h5 { font-size: 1.125rem; line-height: 140%; }
h6 { font-size: 1rem;     line-height: 140%; }

@media only screen and (max-width: 1200px) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.5rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.375rem; }
}

@media only screen and (max-width: 600px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.375rem; }
  h4 { font-size: 1.125rem; }
  h5 { font-size: 1rem; }
}

p {
  margin-bottom: var(--space-4);
  color: var(--color-text-gray);
}

a {
  text-decoration: none;
  color: currentColor;
  text-decoration-skip-ink: auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  font: inherit;
  border: none;
  background: none;
}

/* Form controls do not inherit the page family on their own. The `font`
   shorthand is used because css/variables.css is the only file allowed to
   carry a `font-family` declaration (contracts.md §1). */
input,
select,
textarea {
  font: inherit;
}

ul, ol {
  list-style: none;
}

/* ---------------------------------------------------------------------------
   Typography classes — typography.md § CSS Equivalents
   --------------------------------------------------------------------------- */
.h1, .h2, .h3, .h4, .h5, .kicker {
  font-weight: 700;
  color: var(--color-primary);
}
.body-large, .body-regular, .body-medium, .body-small {
  font-weight: 500;
  line-height: 160%;
  color: var(--color-primary);
}
.tagline, .tagline-small {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

/* Desktop */
.h1 { font-size: 4.5rem; line-height: 110%; }
.h2 { font-size: 3rem; line-height: 115%; }
.h3 { font-size: 2rem; line-height: 120%; }
.h4 { font-size: 1.5rem; line-height: 130%; }
.h5 { font-size: 1.125rem; line-height: 140%; }
.kicker { font-size: 0.875rem; line-height: 140%; text-transform: uppercase; letter-spacing: 0.05em; }
.tagline { font-size: 2rem; line-height: 130%; letter-spacing: -0.005em; }
.tagline-small { font-size: 1.125rem; line-height: 150%; }
.body-large { font-size: 1.125rem; }
.body-regular { font-size: 1rem; }
.body-medium { font-size: 0.9375rem; }
.body-small { font-size: 0.875rem; }

/* Tablet */
@media only screen and (max-width: 1200px) {
  .h1 { font-size: 3.5rem; }
  .h2 { font-size: 2.5rem; }
  .h3 { font-size: 1.75rem; }
  .h4 { font-size: 1.375rem; }
  .kicker { font-size: 0.8125rem; }
  .tagline { font-size: 1.5rem; letter-spacing: 0; }
  .tagline-small { font-size: 1rem; }
  .body-large { font-size: 1rem; }
  .body-regular { font-size: 0.9375rem; }
  .body-medium { font-size: 0.875rem; }
  .body-small { font-size: 0.8125rem; }
}

/* Mobile */
@media only screen and (max-width: 600px) {
  .h1 { font-size: 2.5rem; }
  .h2 { font-size: 2rem; }
  .h3 { font-size: 1.375rem; }
  .h4 { font-size: 1.125rem; }
  .h5 { font-size: 1rem; }
  .tagline-small { font-size: 1.125rem; }
  .body-large { font-size: 0.9375rem; }
  .body-regular { font-size: 0.875rem; }
  .body-medium { font-size: 0.8125rem; }
  .body-small { font-size: 0.875rem; }
}

/* ---------------------------------------------------------------------------
   Layout primitives — static-app-scaffolding.md + CR-001 full-bleed rule.
   A section is always as wide as the viewport; only its content is capped.
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.section {
  width: 100%;
  padding-block: var(--section-padding-y);
  overflow-x: hidden;
}

.section--lg {
  padding-block: var(--space-30);
}

/* ---------------------------------------------------------------------------
   Focus, selection
   --------------------------------------------------------------------------- */
:focus {
  outline: none;
}

/* Tone-aware — the colour comes from the section.css tone switch, so the ring
   is --color-primary on light grounds and --color-accent-cyan on dark ones.
   See CR-006. */
:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-primary));
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--color-primary-pale);
  color: var(--color-primary-darkest);
}

/* ---------------------------------------------------------------------------
   Scroll reveal — motion.md § Scroll reveal
   --------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity var(--duration-reveal) var(--ease-standard),
              transform var(--duration-reveal) var(--ease-standard);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity var(--duration-reveal-item) var(--ease-standard),
              transform var(--duration-reveal-item) var(--ease-standard);
}
/* The base delay is the capped step, not 0 — children past the 6th must hold the last
   step, or they land *before* the staggered ones. (motion.md § Scroll reveal) */
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); transition-delay: 0.30s; }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.10s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.15s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.20s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.25s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.30s; }

/* Long groups (more than six children) keep stepping to the 24th child at half the
   step, so the tail of the list is not revealed all at once. */
[data-reveal-group="long"].is-visible > * { transition-delay: 0.600s; }
[data-reveal-group="long"].is-visible > *:nth-child(1) { transition-delay: 0.025s; }
[data-reveal-group="long"].is-visible > *:nth-child(2) { transition-delay: 0.050s; }
[data-reveal-group="long"].is-visible > *:nth-child(3) { transition-delay: 0.075s; }
[data-reveal-group="long"].is-visible > *:nth-child(4) { transition-delay: 0.100s; }
[data-reveal-group="long"].is-visible > *:nth-child(5) { transition-delay: 0.125s; }
[data-reveal-group="long"].is-visible > *:nth-child(6) { transition-delay: 0.150s; }
[data-reveal-group="long"].is-visible > *:nth-child(7) { transition-delay: 0.175s; }
[data-reveal-group="long"].is-visible > *:nth-child(8) { transition-delay: 0.200s; }
[data-reveal-group="long"].is-visible > *:nth-child(9) { transition-delay: 0.225s; }
[data-reveal-group="long"].is-visible > *:nth-child(10) { transition-delay: 0.250s; }
[data-reveal-group="long"].is-visible > *:nth-child(11) { transition-delay: 0.275s; }
[data-reveal-group="long"].is-visible > *:nth-child(12) { transition-delay: 0.300s; }
[data-reveal-group="long"].is-visible > *:nth-child(13) { transition-delay: 0.325s; }
[data-reveal-group="long"].is-visible > *:nth-child(14) { transition-delay: 0.350s; }
[data-reveal-group="long"].is-visible > *:nth-child(15) { transition-delay: 0.375s; }
[data-reveal-group="long"].is-visible > *:nth-child(16) { transition-delay: 0.400s; }
[data-reveal-group="long"].is-visible > *:nth-child(17) { transition-delay: 0.425s; }
[data-reveal-group="long"].is-visible > *:nth-child(18) { transition-delay: 0.450s; }
[data-reveal-group="long"].is-visible > *:nth-child(19) { transition-delay: 0.475s; }
[data-reveal-group="long"].is-visible > *:nth-child(20) { transition-delay: 0.500s; }
[data-reveal-group="long"].is-visible > *:nth-child(21) { transition-delay: 0.525s; }
[data-reveal-group="long"].is-visible > *:nth-child(22) { transition-delay: 0.550s; }
[data-reveal-group="long"].is-visible > *:nth-child(23) { transition-delay: 0.575s; }
[data-reveal-group="long"].is-visible > *:nth-child(24) { transition-delay: 0.600s; }

/* ---------------------------------------------------------------------------
   Accessibility — absorbed from css/responsive.css
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .btn--primary {
    border: 2px solid currentColor;
  }

  .card--border {
    border-width: 2px;
  }
}

/* Make sure interactive elements are large enough for touch */
@media (pointer: coarse) {
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  .nav__link {
    padding: var(--space-3) var(--space-2);
  }

  .form__input,
  .form__select,
  .form__textarea {
    min-height: 48px;
  }
}

/* ---------------------------------------------------------------------------
   Print — absorbed from css/responsive.css
   --------------------------------------------------------------------------- */
@media print {
  .nav,
  .footer,
  .cta-section,
  .nav__toggle,
  .btn {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: var(--color-black);
    background: var(--color-white);
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    color: var(--color-black);
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  .section {
    padding: 1rem 0;
  }

  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--color-text-gray);
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion — motion.md § Reduced Motion.
   The ONLY reduced-motion block the app is allowed to add globally.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-parallax] { transform: none !important; }
  [data-reveal],
  [data-reveal-group] > * { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}