/* Sundog Aerial · base styles
   Reset + type roles from the type scale. Needs tokens.css first. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }

a { color: var(--color-text); }
a:hover { color: var(--color-accent); }

:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--color-accent-fill); color: var(--color-on-accent);
  padding: var(--space-12) var(--space-20);
  font-weight: var(--weight-bold); font-size: var(--text-button);
  text-transform: uppercase; letter-spacing: var(--tracking-button);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-12); }

/* ---- Type roles (style guide 02 / 03) ---- */
.t-display {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); text-transform: uppercase;
}
.t-h1 {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--text-h1); line-height: var(--leading-h1);
  letter-spacing: var(--tracking-display); text-transform: uppercase;
}
.t-h2 {
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-h2); line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}
.t-h3 {
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-h3); line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}
.t-eyebrow {
  font-family: var(--font-heading); font-weight: var(--weight-medium);
  font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--color-accent);
}
.t-lead { font-size: var(--text-lead); line-height: var(--leading-lead); letter-spacing: var(--tracking-body); }
.t-body { font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.t-meta {
  font-weight: var(--weight-medium); font-size: var(--text-meta);
  line-height: var(--leading-meta); letter-spacing: var(--tracking-meta); color: var(--color-meta);
}
.t-micro { font-size: var(--text-micro); line-height: var(--leading-micro); color: var(--color-meta); }

/* ---- Layout helpers ---- */
.section {
  padding: var(--section-pad) var(--gutter);
  background: var(--color-page);
}
.section--well {
  padding: var(--section-pad) var(--gutter);
  background: var(--color-well);
  border-top: var(--line) solid var(--color-line-well);
  border-bottom: var(--line) solid var(--color-line-well);
}
/* Section rules. Well bands always carry their own top and bottom rules.
   A Navy section that needs a divider adds a rule on its bottom edge. */
.section--rule-bottom { border-bottom: var(--line) solid var(--color-line-well); }
/* CHANGE (Oct 5): spacing modifiers. --page-top = first section on an inner
   page (96 top, like the Page Header; 64 on phones). --flush-top = no top
   padding, for a section that continues the one above it. */
.section--page-top { padding-top: var(--space-96); }
@media (max-width: 640px) { .section--page-top { padding-top: var(--section-pad); } }
.section--flush-top { padding-top: 0; }
/* Home I is drawn at 1440 with 64 gutters (1312 of content). On wider
   screens the content stops at 1312 and centers. Text blocks stay at 62ch. */
.section__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--section-head-gap);
}

/* Page container (content pages): 1200 max, page gutters */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-96) var(--gutter) var(--space-96); /* Sep 30: top 96 to match Page Header (was 64) */
}
@media (max-width: 640px) { .container { padding-top: var(--space-64); } } /* Sep 30: 64 on phones (was 48) */

/* Main column + sticky side panel (Build a Quote). Stacks at 900 and below */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-48); align-items: start; }
.with-aside__main { min-width: 0; }
.with-aside__aside { position: sticky; top: calc(var(--header-h) + var(--space-24)); display: flex; flex-direction: column; gap: var(--space-16); } /* offset by the sticky header so it never hides under it */
@media (max-width: 900px) {
  .with-aside { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .with-aside__aside { position: static; }
}

/* Vertical stack of steps or blocks: 48 apart (40 on mobile) */
.stack { display: flex; flex-direction: column; gap: var(--space-48); min-width: 0; }
@media (max-width: 640px) { .stack { gap: var(--space-40); } }

[hidden] { display: none !important; }

/* ---- Text helpers (CHANGE Oct 5) ---- */
/* Copy waiting on the client: shown in [brackets], meta color */
.placeholder-copy { color: var(--color-meta); }
/* Line break on tablet and desktop only; phones wrap naturally */
@media (max-width: 640px) { .br-desktop { display: none; } }