/* ===========================================================================
   site-v3.css - SA2026 page primitives.

   For pages built fresh against the design system. Legacy pages that are only
   being retrofitted keep using site-chrome-v3.css alone.

   Load order on a fresh page:
     <link rel="stylesheet" href="/assets/site-chrome-v3.css">   tokens + header/footer
     <link rel="stylesheet" href="/assets/site-v3.css">          these primitives
   and put class="sa-v3-page" on <body>.

   Deliberately NOT applied here: the sa-v3-chrome-page body class. That class
   is the legacy overlay and its rules carry !important; a fresh page does not
   want them.

   House rules these primitives encode, from the SA2026 guide:
     - At most four surfaces per page: cream, white, blue-800, yellow-400.
     - Yellow means action or "free". Nothing else.
     - 18px type floor. Three text colours only, and never alpha-faded blue.
     - Shadows are blue-cast, never neutral black.
     - No coloured left-border accents on cards.
     - 56px minimum tap target.
     - Section rhythm: bands carry padding-bottom only; the heading block
       inside adds the 1px rule and the space beneath it.
   =========================================================================== */

/* --- Base ---------------------------------------------------------------- */

body.sa-v3-page {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--sa-weight-regular) var(--sa-size-body)/1.55 var(--sa-font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.sa-v3-page *,
body.sa-v3-page *::before,
body.sa-v3-page *::after { box-sizing: border-box; }

/* :where() is load-bearing here. Written out as `body.sa-v3-page li` this
   reset scores (0,1,1) and silently beats a component rule like
   `.sa-cog-tags > li` at (0,1,1) on source order alone - which is how a row of
   pills lost its padding and a list of rows lost its rhythm. Inside :where()
   the whole selector scores (0,1,0), so any component rule wins. */
.sa-v3-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd) {
  margin: 0;
  padding: 0;
}

.sa-v3-page :where(ul.sa-bare, ol.sa-bare) { list-style: none; }

/* :not(.sa-btn) matters. `body.sa-v3-page a` scores higher than the single
   class on .sa-btn--accent, .sa-btn--outline and friends, so without it the
   reset quietly repaints every anchor-based button in body-text blue.
   Scoped to main so it cannot repaint the shared header and footer, whose
   own link colours (site-chrome-v3.css) it would otherwise outrank. */
body.sa-v3-page main a:not(.sa-btn) { color: var(--text-body); text-decoration: none; }
body.sa-v3-page main a:not(.sa-btn):hover { color: var(--sa-blue-900); }
body.sa-v3-page a.sa-btn { text-decoration: none; }
body.sa-v3-page img { display: block; max-width: 100%; }

body.sa-v3-page :focus-visible {
  outline: 3px solid var(--ring-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

body.sa-v3-page ::selection { background: var(--sa-yellow-400); color: var(--sa-blue-900); }

body.sa-v3-page section { scroll-margin-top: 96px; }

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

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

/* Bands carry bottom padding only. Top space belongs to the heading block, so
   that two stacked sections never double up their gap. */
.sa-section { padding: 0 var(--sa-gutter) var(--sa-space-section); }
.sa-section--flush { padding-bottom: 0; }
.sa-section--tight { padding-bottom: clamp(36px, 3.6vw, 56px); }

.sa-container {
  width: 100%;
  max-width: var(--sa-container);
  margin-inline: auto;
}

.sa-container--narrow { max-width: 1180px; }
.sa-container--reading { max-width: 780px; }

/* The rule + space that separates one band from the last. Put it on the first
   child inside the section, not on the section itself. */
.sa-band {
  padding-top: var(--sa-space-rule-top);
  border-top: 1px solid var(--sa-line-rule);
}

.sa-band--norule { border-top: 0; }

/* --- Section headings ---------------------------------------------------- */

.sa-section-head {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 16px);
  align-items: flex-start;
  margin-bottom: clamp(24px, 2.8vw, 40px);
}

.sa-section-head--center { align-items: center; text-align: center; }

.sa-section-head--split {
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 32px);
  align-items: flex-end;
  justify-content: space-between;
}

.sa-section-head--split > .sa-section-head-text {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 16px);
  align-items: flex-start;
  min-width: 0;
}

/* --- Type ---------------------------------------------------------------- */

.sa-eyebrow {
  display: inline-block;
  color: var(--sa-ink-600);
  font: var(--sa-weight-medium) var(--sa-size-eyebrow)/1 var(--sa-font-mono);
  letter-spacing: var(--sa-tracking-caps);
  text-transform: uppercase;
}

.sa-h1 {
  color: var(--text-heading);
  font: var(--sa-weight-black) var(--sa-size-hero)/1.05 var(--sa-font-display);
  letter-spacing: var(--sa-tracking-display);
  text-wrap: balance;
}

.sa-h2 {
  color: var(--text-heading);
  font: var(--sa-weight-black) var(--sa-size-h2)/1.1 var(--sa-font-display);
  letter-spacing: var(--sa-tracking-tight);
  text-wrap: balance;
}

.sa-h3 {
  color: var(--text-heading);
  font: var(--sa-weight-black) var(--sa-size-h3-panel)/1.06 var(--sa-font-display);
  letter-spacing: var(--sa-tracking-tight);
  text-wrap: balance;
}

.sa-h4 {
  color: var(--text-heading);
  font: var(--sa-weight-black) var(--sa-size-h3-card)/1.25 var(--sa-font-display);
  letter-spacing: var(--sa-tracking-tight);
  text-wrap: balance;
}

.sa-lede {
  color: var(--text-body);
  font: var(--sa-weight-regular) var(--sa-size-lede)/1.5 var(--sa-font-text);
  text-wrap: pretty;
}

.sa-body { font: var(--sa-weight-regular) var(--sa-size-body)/1.55 var(--sa-font-text); }
.sa-body-sm { font: var(--sa-weight-regular) var(--sa-size-body-sm)/1.5 var(--sa-font-text); }
.sa-secondary { color: var(--text-secondary); }
.sa-measure { max-width: 62ch; }

.sa-stat {
  display: block;
  color: var(--text-heading);
  font: var(--sa-weight-black) var(--sa-size-stat)/1 var(--sa-font-display);
  letter-spacing: var(--sa-tracking-stat);
}

/* Yellow numerals are one of the four permitted uses of yellow. */
.sa-stat--accent { color: var(--sa-yellow-400); }

.sa-mono { font-family: var(--sa-font-mono); font-weight: var(--sa-weight-medium); }

/* --- Surfaces ------------------------------------------------------------ */

.sa-card {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 14px);
  padding: var(--sa-space-card-pad);
  border: 1px solid var(--sa-line-hairline);
  border-radius: var(--sa-radius-card-lg);
  background: var(--surface-card);
  /* No shadow at rest. No coloured left-border accent, ever. */
}

.sa-card--sm { border-radius: var(--sa-radius-card); }

@media (hover: hover) {
  .sa-card--lift { transition: transform var(--sa-dur-toggle) var(--sa-ease-standard), box-shadow var(--sa-dur-toggle) var(--sa-ease-standard); }
  .sa-card--lift:hover { transform: translateY(-4px); box-shadow: var(--sa-shadow-lift); }
}

.sa-card--lift:focus-within { box-shadow: var(--sa-shadow-lift); }

.sa-panel {
  padding: var(--sa-space-panel-pad);
  border-radius: var(--sa-radius-panel);
  background: var(--surface-panel-dark);
  color: var(--text-on-dark);
}

.sa-panel .sa-h2,
.sa-panel .sa-h3,
.sa-panel .sa-h4 { color: var(--text-on-dark-strong); }
.sa-panel a:not(.sa-btn) { color: var(--text-on-dark-strong); }
.sa-panel .sa-secondary { color: var(--sa-blue-300); }
.sa-panel .sa-eyebrow { color: var(--sa-blue-300); }

/* The one yellow panel a page is allowed. */
.sa-panel--accent {
  background: var(--surface-panel-accent);
  color: var(--text-on-accent);
}

.sa-panel--accent .sa-h2,
.sa-panel--accent .sa-h3,
.sa-panel--accent .sa-h4,
.sa-panel--accent a:not(.sa-btn) { color: var(--sa-blue-900); }
.sa-panel--accent .sa-eyebrow,
.sa-panel--accent .sa-secondary { color: var(--sa-blue-800); }

/* Photo wells sit on pale aqua so a slow image does not flash dark.
   Photographs never take arch, dome or circular crops. */
.sa-well {
  padding: clamp(14px, 1.8vw, 24px);
  border-radius: var(--sa-radius-tile);
  background: var(--surface-well);
}

.sa-well--flush { padding: 0; overflow: hidden; }
.sa-well img { width: 100%; display: block; }

.sa-figure {
  overflow: hidden;
  border-radius: var(--sa-radius-card);
  background: var(--surface-well);
}

.sa-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Grids --------------------------------------------------------------- */

/* Explicit column counts only. auto-fit produces orphan rows. */
.sa-grid {
  display: grid;
  grid-template-columns: repeat(var(--sa-cols, 3), minmax(0, 1fr));
  gap: var(--sa-space-card-gap);
}

.sa-grid--2 { --sa-cols: 2; }
.sa-grid--3 { --sa-cols: 3; }
.sa-grid--4 { --sa-cols: 4; }
.sa-grid--5 { --sa-cols: 5; }
.sa-grid--wide-gap { gap: clamp(20px, 2.4vw, 32px); }

@media (max-width: 1080px) {
  .sa-grid { grid-template-columns: repeat(var(--sa-cols-md, 2), minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .sa-grid { grid-template-columns: repeat(var(--sa-cols-sm, 1), minmax(0, 1fr)); }
}

/* Two-up editorial pairing: text beside an image. */
.sa-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
}

.sa-pair--text-right > :first-child { order: 2; }

@media (max-width: 900px) {
  .sa-pair { grid-template-columns: minmax(0, 1fr); }
  .sa-pair--text-right > :first-child { order: 0; }
}

/* Hairline rows, for lists that would read as clutter as cards. */
.sa-rows { display: flex; flex-direction: column; }

.sa-rows > * {
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-top: 1px solid var(--sa-line-rule);
}

.sa-rows > *:last-child { border-bottom: 1px solid var(--sa-line-rule); }

/* --- Buttons ------------------------------------------------------------- */

.sa-btn {
  min-height: var(--sa-tap-min);
  padding: 14px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid transparent;
  border-radius: var(--sa-radius-pill);
  background: var(--action-primary);
  color: var(--sa-white);
  cursor: pointer;
  font: var(--sa-weight-bold) var(--sa-size-body)/1 var(--sa-font-text);
  text-align: center;
  text-decoration: none;
  transition: transform var(--sa-dur-press) var(--sa-ease-standard),
              background-color var(--sa-dur-press) var(--sa-ease-standard),
              color var(--sa-dur-press) var(--sa-ease-standard),
              border-color var(--sa-dur-press) var(--sa-ease-standard);
}

/* Hover darkens by one ramp step. Never an opacity fade. */
.sa-btn:hover { background: var(--action-primary-hover); color: var(--sa-white); text-decoration: none; }
.sa-btn:active { transform: translateY(1px) scale(.985); }

.sa-btn[disabled],
.sa-btn.is-disabled { opacity: .45; cursor: not-allowed; }

.sa-btn--accent { background: var(--action-accent); color: var(--sa-blue-900); }
.sa-btn--accent:hover { background: var(--action-accent-hover); color: var(--sa-blue-900); }

.sa-btn--outline {
  border-color: var(--sa-line-control);
  background: transparent;
  color: var(--sa-blue-800);
}

.sa-btn--outline:hover {
  border-color: var(--sa-blue-800);
  background: transparent;
  color: var(--sa-blue-900);
}

/* On a blue panel the outline needs the light ramp instead. */
.sa-panel .sa-btn--outline {
  border-color: var(--sa-line-dark);
  color: var(--sa-white);
}

.sa-panel .sa-btn--outline:hover { border-color: var(--sa-white); color: var(--sa-white); }

.sa-btn--lg { min-height: 60px; padding: 16px 30px; font-size: 19px; }
.sa-btn--senior { min-height: var(--sa-tap-senior); font-size: 20px; font-weight: var(--sa-weight-semibold); }
.sa-btn--block { width: 100%; }

/* Arrows are decorative. Mark them aria-hidden in the markup. */
.sa-btn-arrow { transition: transform var(--sa-dur-press) var(--sa-ease-standard); }
.sa-btn:hover .sa-btn-arrow { transform: translateX(4px); }

/* --- Badges, chips ------------------------------------------------------- */

.sa-badge {
  min-height: 28px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-blue-100);
  color: var(--sa-blue-900);
  font: var(--sa-weight-bold) 13px/1 var(--sa-font-text);
  letter-spacing: var(--sa-tracking-caps);
  text-transform: uppercase;
}

/* "FREE" is one of the four permitted uses of yellow. */
.sa-badge--free { background: var(--sa-yellow-400); color: var(--sa-blue-900); }

.sa-chip {
  min-height: var(--sa-tap-min);
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--sa-line-control);
  border-radius: var(--sa-radius-pill);
  background: transparent;
  color: var(--sa-blue-800);
  cursor: pointer;
  font: var(--sa-weight-semibold) var(--sa-size-body-sm)/1 var(--sa-font-text);
  transition: background-color var(--sa-dur-press) var(--sa-ease-standard),
              border-color var(--sa-dur-press) var(--sa-ease-standard),
              color var(--sa-dur-press) var(--sa-ease-standard);
}

.sa-chip:hover { border-color: var(--sa-blue-800); color: var(--sa-blue-900); }

.sa-chip[aria-pressed="true"],
.sa-chip.is-active {
  border-color: var(--sa-blue-800);
  background: var(--sa-blue-800);
  color: var(--sa-white);
}

.sa-chip-count { color: inherit; font-weight: var(--sa-weight-regular); opacity: .8; }

.sa-icon-chip {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: var(--sa-blue-100);
  color: var(--sa-blue-900);
}

/* --- Controls ------------------------------------------------------------ */

.sa-field {
  width: 100%;
  min-height: var(--sa-tap-min);
  padding: 14px 18px;
  border: 2px solid var(--sa-line-control);
  border-radius: var(--sa-radius-control);
  background: var(--sa-white);
  color: var(--sa-blue-900);
  font: var(--sa-weight-regular) var(--sa-size-body)/1.3 var(--sa-font-text);
}

.sa-field::placeholder { color: var(--sa-ink-600); opacity: 1; }
.sa-field:focus { border-color: var(--sa-blue-800); outline: none; }
.sa-field:focus-visible { outline: 3px solid var(--ring-focus); outline-offset: 3px; }

.sa-search { position: relative; display: flex; gap: 10px; }
.sa-search .sa-field { flex: 1 1 auto; }

/* --- Tabs (underline style) ---------------------------------------------- */

.sa-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 1vw, 18px);
  border-bottom: 1px solid var(--sa-line-rule);
}

.sa-tab {
  min-height: var(--sa-tap-min);
  padding: 14px 4px;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--sa-ink-600);
  cursor: pointer;
  font: var(--sa-weight-bold) var(--sa-size-body)/1.2 var(--sa-font-text);
  transition: color var(--sa-dur-press) var(--sa-ease-standard),
              border-color var(--sa-dur-press) var(--sa-ease-standard);
}

.sa-tab:hover { color: var(--sa-blue-900); }

.sa-tab[aria-selected="true"],
.sa-tab.is-active { border-bottom-color: var(--sa-yellow-400); color: var(--sa-blue-900); }

/* --- Accordion ----------------------------------------------------------- */

.sa-accordion { display: flex; flex-direction: column; gap: 12px; }

.sa-accordion > details {
  border: 1px solid var(--sa-line-hairline);
  border-radius: var(--sa-radius-card);
  background: var(--surface-card);
}

.sa-accordion summary {
  min-height: var(--sa-tap-min);
  padding: clamp(16px, 1.8vw, 22px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-heading);
  cursor: pointer;
  font: var(--sa-weight-bold) var(--sa-size-body)/1.35 var(--sa-font-text);
  list-style: none;
}

.sa-accordion summary::-webkit-details-marker { display: none; }

.sa-accordion summary::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border-right: 2px solid var(--sa-blue-800);
  border-bottom: 2px solid var(--sa-blue-800);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--sa-dur-toggle) var(--sa-ease-standard);
}

.sa-accordion details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }

.sa-accordion .sa-accordion-body {
  padding: 0 clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px);
  color: var(--text-body);
}

.sa-accordion .sa-accordion-body > * + * { margin-top: 14px; }

/* --- Prose, for document pages ------------------------------------------- */

.sa-prose { color: var(--text-body); font-size: var(--sa-size-body); line-height: 1.7; }
.sa-prose > * + * { margin-top: 20px; }

.sa-prose h2 {
  margin-top: clamp(32px, 3.4vw, 48px);
  color: var(--text-heading);
  font: var(--sa-weight-black) clamp(23px, 2vw, 28px)/1.2 var(--sa-font-display);
  letter-spacing: var(--sa-tracking-tight);
}

.sa-prose h3 {
  margin-top: clamp(24px, 2.4vw, 32px);
  color: var(--text-heading);
  font: var(--sa-weight-bold) clamp(20px, 1.6vw, 22px)/1.3 var(--sa-font-display);
}

.sa-prose ul,
.sa-prose ol { padding-left: 24px; list-style: disc; }
.sa-prose ol { list-style: decimal; }
.sa-prose li + li { margin-top: 10px; }

/* Scoped through the body class so it outranks the `a { text-decoration: none }`
   in the reset above, which is otherwise the more specific selector. */
body.sa-v3-page .sa-prose a {
  color: var(--sa-blue-800);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.sa-v3-page .sa-prose a:hover { color: var(--sa-blue-900); }
.sa-prose strong { font-weight: var(--sa-weight-bold); }

/* --- Marquee ------------------------------------------------------------- */

/* Spacing MUST come from margin-right on each child, never gap on the track,
   and the track carries no horizontal padding. Either desynchronises the loop.
   The duplicate set must be aria-hidden and inert. */
.sa-marquee { width: 100%; overflow: hidden; }

.sa-marquee-track {
  width: max-content;
  padding: 0;
  display: flex;
  align-items: center;
  animation: sa-marquee-scroll var(--sa-marquee-duration, 44s) linear infinite;
}

.sa-marquee-track > * { margin-right: var(--sa-marquee-space, 48px); }
.sa-marquee:hover .sa-marquee-track { animation-play-state: paused; }

@keyframes sa-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Utilities ----------------------------------------------------------- */

.sa-stack { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); align-items: flex-start; }
.sa-stack--center { align-items: center; text-align: center; }
.sa-stack--tight { gap: 10px; }
.sa-stack--loose { gap: clamp(20px, 2.4vw, 32px); }

.sa-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sa-row--between { justify-content: space-between; }

.sa-fill { flex: 1 1 auto; min-width: 0; }
.sa-push { margin-top: auto; }
.sa-hide { display: none !important; }

/* A card whose whole surface is a link. It takes its accessible name from its
   own heading and body, so do not add an aria-label. */
.sa-linkcard { position: relative; }

.sa-linkcard .sa-linkcard-target::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  body.sa-v3-page *,
  body.sa-v3-page *::before,
  body.sa-v3-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}