/* ==========================================================================
   Seacoast NHIC - base reset + typography
   --------------------------------------------------------------------------
   Loaded ONLY by redesigned pages (currently the homepage and /assessment/).

   EVERY rule here is scoped under `body.sn-page`. That is not a style choice -
   it is a containment guarantee. shell.css ships to all 37 pages including the
   35 that still load the 89KB legacy WordPress stylesheet, so a bare `h2` or
   `p` rule in a shared file could silently restyle legacy body content. Scoping
   under a class that only redesigned pages carry means these rules physically
   cannot reach a legacy page, even if this file is ever loaded there by
   mistake.

   Consequence to remember when adding rules: `body.sn-page h2 { … }`, never
   `h2 { … }`.
   ========================================================================== */

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

body.sn-page {
  margin: 0;
  background: var(--sn-bg);
  color: var(--sn-text);
  font-family: var(--sn-font-sans);
  font-size: var(--sn-fs-body);
  line-height: var(--sn-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Smooth scrolling only for people who have not asked otherwise. */
@media (prefers-reduced-motion: no-preference) {
  html:has(body.sn-page) {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   ELEMENT DEFAULTS - every one wrapped in :where(), on purpose.
   --------------------------------------------------------------------------
   :where() contributes ZERO specificity, so all of these land at (0,0,0) and
   ANY component class overrides them without a fight.

   Written the obvious way, `body.sn-page ul` scores (0,1,2) and silently beats
   single-class component rules like `.sn-trustrow { margin-block-start: 3rem }`
   (0,1,0). That is not hypothetical - it shipped two visible bugs in one pass:
   the primary CTA rendered as green-on-green invisible text, and the hero trust
   row's top border collapsed flush against the last bullet.

   A reset should be a floor, not a competitor. Keep :where() on everything in
   this block, and put anything that genuinely needs to win in a component file.
   ========================================================================== */

:where(body.sn-page) :where(img, svg, video) {
  display: block;
  max-width: 100%;
}
:where(body.sn-page) :where(img) {
  height: auto;
}

:where(body.sn-page) :where(h1, h2, h3, h4) {
  font-family: var(--sn-font-serif);
  font-weight: 600;
  color: var(--sn-ink);
  margin: 0;
  text-wrap: balance; /* progressive: keeps headings from orphaning a last word */
}
:where(body.sn-page) :where(h1) {
  font-size: var(--sn-fs-h1);
  line-height: var(--sn-lh-tight);
  letter-spacing: var(--sn-ls-tight);
}
:where(body.sn-page) :where(h2) {
  font-size: var(--sn-fs-h2);
  line-height: var(--sn-lh-snug);
  letter-spacing: var(--sn-ls-tight);
}
:where(body.sn-page) :where(h3) {
  font-size: var(--sn-fs-h3);
  line-height: var(--sn-lh-snug);
}
:where(body.sn-page) :where(h4) {
  font-size: var(--sn-fs-h4);
  line-height: var(--sn-lh-snug);
}

:where(body.sn-page) :where(p) {
  margin: 0;
}
:where(body.sn-page) :where(p + p) {
  margin-block-start: var(--sn-space-4);
}

/* :where() is load-bearing here - do not "simplify" it to `body.sn-page a`.
 *
 * :where() contributes ZERO specificity, so this rule lands at (0,0,0) and any
 * component class beats it. Written the obvious way, `body.sn-page a` scores
 * (0,1,2) and silently outranks single-class component rules like
 * `.sn-btn--primary { color: #fff }` (0,1,0) - which produced a real and
 * severe bug: the primary CTA rendered as accent-green text on an
 * accent-green pill, so the single most important button on the site was a
 * blank green shape. Caught only by looking at a screenshot.
 *
 * Keeping the default at zero specificity means every future component that
 * styles its own link colour just works, in this file and in any other. */
:where(body.sn-page) :where(a) {
  color: var(--sn-accent);
  text-decoration: none;
}
:where(body.sn-page) :where(a:hover) {
  color: var(--sn-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(body.sn-page) :where(ul, ol) {
  margin: 0;
  padding: 0;
}
:where(body.sn-page) :where(li) {
  list-style: none;
}

/* Focus rings DO want to win - this one is intentionally not :where()'d, so a
   component cannot accidentally remove a visible focus indicator. */
body.sn-page :focus-visible {
  outline: 2px solid var(--sn-focus);
  outline-offset: 2px;
  border-radius: var(--sn-r-sm);
}

/* Anything the sticky header could cover when linked to. */
:where(body.sn-page) :where([id]) {
  scroll-margin-top: 6rem;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.sn-container {
  max-width: var(--sn-container);
  margin-inline: auto;
  padding-inline: var(--sn-gutter);
}

.sn-section {
  padding-block: var(--sn-section-y);
}
.sn-section--alt {
  background: var(--sn-bg-alt);
}
.sn-section--soft {
  background: var(--sn-bg-soft);
}

.sn-eyebrow {
  display: block;
  font-family: var(--sn-font-sans);
  font-size: var(--sn-fs-xs);
  font-weight: 600;
  letter-spacing: var(--sn-ls-caps);
  text-transform: uppercase;
  color: var(--sn-accent);
  margin-block-end: var(--sn-space-3);
}

.sn-lead {
  font-size: var(--sn-fs-lead);
  color: var(--sn-text);
  max-width: 60ch;
}

.sn-prose {
  max-width: var(--sn-measure);
}

.sn-grid {
  display: grid;
  gap: var(--sn-space-5);
}

.sn-card {
  background: var(--sn-surface);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-r-lg);
  padding: var(--sn-space-6);
  box-shadow: var(--sn-shadow-sm);
}

.sn-microcopy {
  font-size: var(--sn-fs-sm);
  color: var(--sn-text-muted);
}

/* Text link with a trailing arrow. The arrow translates on hover, which reads
   as directional affordance without needing a colour change. */
.sn-tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sn-space-2);
  min-height: 44px; /* inline links still need a real tap target on mobile */
  font-family: var(--sn-font-sans);
  font-size: var(--sn-fs-sm);
  font-weight: 600;
  color: var(--sn-accent);
  text-decoration: none;
}
.sn-tlink:hover {
  color: var(--sn-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sn-tlink .sn-icon {
  color: currentColor;
  transition: transform var(--sn-dur) var(--sn-ease);
}
.sn-tlink:hover .sn-icon {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .sn-tlink .sn-icon {
    transition: none;
  }
  .sn-tlink:hover .sn-icon {
    transform: none;
  }
}

/* Visually hidden, still announced. */
.sn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}