/*
 * site.css — THIS CARRIER'S public site stylesheet.
 *
 * ── IT REPLACES THE PLATFORM'S ENTIRELY. IT DOES NOT EXTEND IT. ─────────────
 *
 * This is the one thing to understand before editing. `/site/site.css` is a
 * single URL, and serveSiteAsset() resolves it by searching the site-declaring
 * plugins CARRIER FIRST and returning THE FIRST FILE IT FINDS. There is no
 * concatenation and no cascade between the two files. The moment this file
 * exists, the platform's version is never served on this deployment.
 *
 * So this file must be complete on its own. That is why it repeats base rules
 * (body.site, .skip-link) that also exist in the platform copy — they are not
 * inherited, and deleting them here leaves the page genuinely unstyled.
 *
 * ── WHAT IT MAY ASSUME ──────────────────────────────────────────────────────
 *
 * sdk.css is loaded BEFORE this file, then the brand's tokens.css, then this.
 * So every var() below resolves to the ACTIVE BRAND's value and follows the
 * brand switcher for free. Name no colour of your own: there is deliberately no
 * [theme='light'] block here, because this file declares no literal colours and
 * therefore has nothing to get wrong in either theme.
 *
 * A brand may additionally ship ui/brands/<key>/site.css, which loads AFTER
 * this one and wins on source order. That is the right place for per-brand
 * layout overrides — not a fork of this file.
 *
 * ── ONE TRAP, ALREADY PAID FOR ──────────────────────────────────────────────
 *
 * The link rule at the bottom is `a:not([class])` and must stay that way.
 * Written as a bare `body.site a` it is specificity (0,1,2) and beats
 * `.skip-link` at (0,1,0) — which painted the focused skip link in
 * var(--accent) ON var(--accent): a solid chip with invisible text, findable
 * only by tabbing to it, since the element is off-canvas until focused.
 */

/* ── Base ───────────────────────────────────────────────────────────────── */

body.site {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

body.site main { flex: 1 0 auto; }

/* First thing a keyboard user reaches. Off-canvas rather than display:none,
   which would remove it from the tab order and defeat the point. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

body.site :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(4rem, 16vh, 9rem) clamp(1.25rem, 5vw, 2rem);
}

.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero .lead {
  margin: 0 0 2rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  color: var(--text-muted);
  text-wrap: pretty;
  max-width: 34rem;
}

body.site p { margin: 0 0 1rem; }

/* ── Button ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--accent);
}
.btn:hover { filter: brightness(1.08); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

/* Vertical padding only. The border-top is meant to span the full width, and
   the horizontal inset belongs on the paragraph so it can mirror .hero exactly
   — see the note on that paragraph. */
.sitefoot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding-block: 1.5rem;
}
/* `body.site` prefix REQUIRED, and this is the second time the same trap has
   bitten this file — read the header note about .skip-link, then this.

   As `.sitefoot p` this rule is specificity (0,1,1) and LOSES to the base
   `body.site p { margin: 0 0 1rem }` at (0,1,2): they tie on class count, and
   the base wins on element count. The `margin: 0 auto` was therefore discarded,
   max-width:46rem still applied, and the copyright line sat hard against the
   left edge while the hero above it was centred. Perfectly rendered, obviously
   wrong once seen side by side, and invisible in any check that does not
   compare the two x-positions.

   The general rule for this stylesheet: any component rule that sets a property
   the `body.site` base also sets must carry the `body.site` prefix too. */
/* max-width AND padding-inline must both match .hero, not just max-width.
   box-sizing is border-box, so .hero's 46rem INCLUDES its 32px inset and its
   text starts 32px inside the centred box. A footer paragraph with the same
   46rem but no padding centres its own text box instead, and lands 32px to the
   left of the heading above it — close enough to look like a rendering glitch
   rather than a stylesheet bug. Measured: h1 at x=304, footer at x=272.

   If you change the width or the inset, change it in BOTH places. */
body.site .sitefoot p {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  margin-block: 0;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ── Links ──────────────────────────────────────────────────────────────── */

/* `:not([class])` — see the trap in this file's header. Leave it. */
body.site a:not([class]) { color: var(--accent); }