/* ==========================================================================
   SBHS — Base
   Element selectors are prefixed with :root so they out-rank Tailwind's
   CDN preflight, which is injected after this stylesheet at runtime.
   ========================================================================== */

:root {
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;           /* 17px — calm, readable body copy */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

:root.theme-ready body,
:root.theme-ready .theme-transition {
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

:root :is(h1, h2, h3, h4) {
  font-family: var(--font-serif);
  color: var(--c-ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}

:root h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); letter-spacing: -0.025em; line-height: 1.06; }
:root h2 { font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); letter-spacing: -0.02em; }
:root h3 { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.3; }
:root h4 { font-size: 1.0625rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: 0; }

p { text-wrap: pretty; }
/* margins, link color and img display come from Tailwind preflight so utilities stay in control */

:root ::selection { background: rgb(var(--sbhs-gold-light-rgb) / 0.45); color: var(--c-ink); }

/* Visible, consistent focus for every interactive element (WCAG 2.4.7 / 2.4.13) */
:root :focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 6px;
}
:root :focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: var(--z-skip);
  background: var(--sbhs-blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur-fast) ease;
}
.skip-link:focus { top: 0.75rem; }

main:focus { outline: none; }

/* Screen-reader only */
.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;
}

/* Reduced motion: remove non-essential movement everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}