/* ==========================================================================
   main.css — brand fonts, reset, base elements and layout primitives
   Load order (never change): variables → main → components → utilities → responsive
   ========================================================================== */

/* ---- 1. Apex New (self-hosted; brand guide p. 9 — RULES.md §10) ----------
   Each file is its own family internally, so they are joined here into one
   'Apex New' family by weight: Book 400, Medium 500, Bold 700, Heavy 800.
   Apex New has no italic. Medium is used below the fold only, so it is not
   preloaded. */
@font-face {
  font-family: 'Apex New';
  src: url('../fonts/apex-new/apex-new-book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apex New';
  src: url('../fonts/apex-new/apex-new-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apex New';
  src: url('../fonts/apex-new/apex-new-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apex New';
  src: url('../fonts/apex-new/apex-new-heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- 2. Reset ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
:where(ul[class], ol[class]) {
  margin: 0;
}

/* :where() keeps these at element-level specificity, so layout spacing such
   as `.split__content > * + *` and component margins can still apply */
:where(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

[hidden] {
  display: none !important;
}

/* ---- 3. Fonts: set once, inherited by everything ------------------------
   Body font on html; headline font on headings (and the few components in
   RULES.md §10). No faked bold or italic: only the loaded weights exist. */
html {
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  font-synthesis: none;
  /* Apex New defaults to old-style figures; prices and counts read better lining */
  font-variant-numeric: lining-nums;
}

button,
input,
select,
textarea,
optgroup,
option,
legend,
code,
kbd,
samp,
pre,
svg text,
::placeholder {
  font-family: inherit;
}

button,
input,
select,
textarea {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ---- 4. Base elements ---------------------------------------------------- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-heading);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
}
/* Section titles: the website deck's 28pt Apex New Heavy */
h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heavy);
  line-height: 1.12;
  letter-spacing: var(--letter-spacing-tight);
}
h3 {
  font-size: var(--font-size-lg);
  letter-spacing: var(--letter-spacing-tight);
}
h4 {
  font-size: var(--font-size-base);
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-primary-hover);
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

::selection {
  background: var(--color-lime-100);
  color: var(--color-text);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Dark surfaces switch focus and link colors */
.on-dark :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* ---- 5. Skip link -------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-200%);
}

/* Shadow only while shown: off-screen, its blur used to show at the top edge */
.skip-link:focus-visible {
  box-shadow: var(--shadow-md);
  transform: none;
}

/* ==========================================================================
   6. Layout primitives
   ========================================================================== */

/* Centered content width with side gutters */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

/* Page sections: the vertical rhythm of every page */
.section {
  padding: var(--section-padding) 0;
}

.section--muted {
  background: var(--color-bg-muted);
}

.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: var(--color-text-inverse);
}

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

/* Column grids — columns are added in responsive.css */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* Two-column text + media layout */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

/* Top-aligned columns, when the text should start level with the media */
.split--top {
  align-items: start;
}

.split__content > * + * {
  margin-top: var(--space-5);
}

/* Interior page hero (every page except home) */
.page-hero {
  padding: var(--space-10) 0 var(--space-9);
  background: var(--color-bg-muted);
  border-bottom: var(--border-width) solid var(--color-border);
}

.page-hero--dark {
  background: var(--color-bg-dark);
  border-bottom: 0;
  color: var(--color-text-inverse);
}

.page-hero__inner > * + * {
  margin-top: var(--space-5);
}

.page-hero__title {
  max-width: 22ch;
}

/* Headline beside a photo (platform: website deck slide 6): no measure, so
   each deck line stays whole in the half column */
.page-hero__title--split {
  max-width: none;
}

/* The deck's smaller page title, 24pt Apex New Heavy (Resources, slide 16) */
.page-hero__title--sm {
  max-width: none; /* one line, as on the slide, where it fits */
  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.4rem); /* 30→38: 24pt */
}

/* The deck's hero lead: 13.5pt Apex New Book (final deck 10/6/26);
   --md 14pt (Platform, slide 6), --lg 15pt (Who we serve, About) */
.page-hero__lead {
  font-size: var(--font-size-deck-13);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.page-hero__lead--md {
  font-size: var(--font-size-deck-14);
}

.page-hero--dark .page-hero__title {
  color: var(--color-text-inverse);
}
.page-hero--dark .page-hero__lead {
  color: var(--color-text-inverse-muted);
}

/* .page-hero--portrait: a cut-out photo of people standing on the hero's
   bottom edge (about). The hero drops its bottom padding; the text keeps
   it. Values from md are in responsive.css. */
.page-hero--portrait {
  padding-bottom: 0;
}
.page-hero--portrait .page-hero__inner {
  padding-bottom: var(--space-6);
}
.page-hero--portrait .media {
  align-self: end;
}

/* Status pages (404) */
.status-page {
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding: var(--space-11) 0;
}

.status-page__code {
  font-size: 7rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-brand);
}

.status-page__inner > * + * {
  margin-top: var(--space-5);
}

/* ---- 7. Icon sprite container (inserted by main.js; never visible) ------- */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- 8. Page transitions ------------------------------------------------- */
/* Same-site navigation crossfades from the old page to the new one instead of
   blanking and repainting (cross-document view transitions). The header has
   its own view-transition-name (components.css §5) so it stays still while
   the content fades. Unsupported browsers simply navigate. Off for reduced
   motion (responsive.css). First paint is held until the header, footer and
   icons exist — see the <link rel="expect"> in each page's <head>.          */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-base);
  animation-timing-function: var(--ease-out);
}