/*
 * CAH Design System - base layer
 * Element defaults, accessibility primitives, layout helpers, motion language.
 */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.cah {
  margin: 0;
  background: var(--cah-bg);
  color: var(--cah-text);
  font-family: var(--cah-font-sans);
  font-size: var(--cah-fs-body);
  line-height: var(--cah-lh-normal);
  letter-spacing: var(--cah-ls-body);
  font-weight: var(--cah-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Anchor offset so sticky header never covers a jump target. */
:target { scroll-margin-top: calc(var(--cah-header-h) + 24px); }

/* ---------- Typography defaults ---------- */
.cah h1, .cah h2, .cah h3, .cah h4, .cah h5, .cah h6 {
  margin: 0 0 var(--cah-space-4);
  font-family: var(--cah-font-sans);
  font-weight: var(--cah-fw-bold);
  line-height: var(--cah-lh-heading);
  letter-spacing: var(--cah-ls-heading);
  color: var(--cah-primary);
  text-wrap: balance;
}
.cah h1 { font-size: var(--cah-fs-h1); line-height: var(--cah-lh-snug); }
.cah h2 { font-size: var(--cah-fs-h2); }
.cah h3 { font-size: var(--cah-fs-h3); }
.cah h4 { font-size: var(--cah-fs-h4); font-weight: var(--cah-fw-semibold); }

.cah p { margin: 0 0 var(--cah-space-5); }
.cah p:last-child { margin-bottom: 0; }

.cah a { color: var(--cah-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.cah a:hover { color: var(--cah-link-hover); }

.cah strong, .cah b { font-weight: var(--cah-fw-semibold); }
.cah small { font-size: var(--cah-fs-small); }

.cah ul, .cah ol { margin: 0 0 var(--cah-space-5); padding-left: 1.35em; }
.cah li { margin-bottom: var(--cah-space-2); }
.cah li:last-child { margin-bottom: 0; }

.cah img, .cah svg:not(.cah-icon), .cah video { max-width: 100%; height: auto; display: block; }

/* Inline icons size from their own width/height attributes and must never be
   shrunk by a flex parent. */
.cah .cah-icon { display: block; flex: none; max-width: none; }

.cah hr { border: 0; border-top: 1px solid var(--cah-border); margin: var(--cah-space-10) 0; }

.cah code, .cah kbd { font-family: var(--cah-font-mono); font-size: 0.92em; }

/* Utility type roles */
.cah-display { font-size: var(--cah-fs-display); line-height: var(--cah-lh-tight); letter-spacing: var(--cah-ls-display); font-weight: var(--cah-fw-bold); }
.cah-body-lg { font-size: var(--cah-fs-body-lg); line-height: var(--cah-lh-relaxed); }
.cah-caption { font-size: var(--cah-fs-caption); color: var(--cah-text-muted); }
.cah-eyebrow {
  font-size: var(--cah-fs-eyebrow);
  letter-spacing: var(--cah-ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--cah-fw-semibold);
  color: var(--cah-secondary-strong);
  margin: 0 0 var(--cah-space-3);
  display: block;
}
.cah-muted { color: var(--cah-text-muted); }
.cah-reading { max-width: var(--cah-reading-max); }

/* ---------- Accessibility ---------- */
.cah-skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: var(--cah-z-skip);
  background: var(--cah-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--cah-radius-sm);
  font-weight: var(--cah-fw-semibold);
  text-decoration: none;
  transition: top var(--cah-dur) var(--cah-ease-out);
}
.cah-skip-link:focus { top: 12px; color: #fff; }

.cah-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.cah-sr-only-focusable:focus,
.cah-sr-only-focusable:active {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* Visible focus for keyboard users only, never removed outright. */
.cah :focus-visible {
  outline: 3px solid var(--cah-focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}
.cah :focus:not(:focus-visible) { outline: none; }

::selection { background: var(--cah-teal-100); color: var(--cah-navy-900); }

/* ---------- Layout ---------- */
.cah-container {
  width: 100%;
  max-width: calc(var(--cah-container-max) + (var(--cah-gutter-current) * 2));
  margin-inline: auto;
  padding-inline: var(--cah-gutter-current);
}
.cah-container--wide { max-width: calc(var(--cah-container-wide) + (var(--cah-gutter-current) * 2)); }
.cah-container--narrow { max-width: calc(var(--cah-container-narrow) + (var(--cah-gutter-current) * 2)); }
.cah-container--reading { max-width: calc(var(--cah-reading-max) + (var(--cah-gutter-current) * 2)); }

.cah-section { padding-block: var(--cah-section-y); }
.cah-section--lg { padding-block: var(--cah-section-y-lg); }
.cah-section--flush-top { padding-top: 0; }
.cah-section--tint { background: var(--cah-bg-alt); }
.cah-section--surface { background: var(--cah-surface); }
.cah-section--invert { background: var(--cah-surface-invert); color: var(--cah-text-invert); }
.cah-section--invert h1, .cah-section--invert h2, .cah-section--invert h3, .cah-section--invert h4 { color: #fff; }
.cah-section--invert .cah-eyebrow { color: var(--cah-teal-600); }
.cah-section--invert .cah-muted { color: var(--cah-text-invert-muted); }

.cah-stack > * + * { margin-top: var(--cah-stack); }
.cah-grid { display: grid; gap: var(--cah-gap-lg); }
.cah-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cah-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cah-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cah-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 1024px) {
  .cah-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cah-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .cah-grid--2, .cah-grid--3, .cah-grid--4 { grid-template-columns: minmax(0,1fr); }
}

/* ---------- Motion language ----------
 * One vocabulary: fade + short translate, staggered, always transform/opacity.
 * Elements start hidden ONLY when JS is present and motion is allowed, so
 * content is never trapped invisible for no-JS or reduced-motion users.
 */
.cah-reveal { opacity: 1; transform: none; }
html.cah-js .cah-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--cah-dur-slow) var(--cah-ease-out),
              transform var(--cah-dur-slow) var(--cah-ease-out);
  transition-delay: var(--cah-reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.cah-js .cah-reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
html.cah-js .cah-reveal--left { transform: translate3d(-16px, 0, 0); }
html.cah-js .cah-reveal--scale { transform: translate3d(0, 10px, 0) scale(.985); }

.cah-hover-lift { transition: transform var(--cah-dur) var(--cah-ease-out), box-shadow var(--cah-dur) var(--cah-ease-out), border-color var(--cah-dur) var(--cah-ease-out); }
.cah-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--cah-shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  html.cah-js .cah-reveal,
  html.cah-js .cah-reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cah-hover-lift:hover { transform: none; }
  .cah *, .cah *::before, .cah *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print: keep long-form content readable, drop chrome. */
@media print {
  .cah-header, .cah-footer, .cah-cta, .cah-skip-link { display: none !important; }
  .cah { background: #fff; color: #000; }
}