/* ==========================================================================
   BASE
   Minimal reset + sensible defaults for bare HTML elements. No classes here
   — this file only ever targets element selectors, so it forms a safe
   baseline that layout.css and components.css build on top of.

   v2 (visual redesign pass): heading vertical rhythm, link underline
   animation, text selection color, and a refined focus-visible treatment
   that layers a box-shadow glow on top of the outline (better on rounded
   elements like pill buttons, while keeping the outline for Windows High
   Contrast Mode / forced-colors support).
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  /* Respect the user's browser font-size setting; all rem units below
     scale from this rather than a hardcoded pixel value. */
  font-size: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

img,
picture {
  max-width: 100%;
  display: block;
}

/* Prevent long unbroken strings (emails, URLs) from overflowing on mobile */
p,
li,
blockquote {
  overflow-wrap: break-word;
}

/* ---- Document defaults ---- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Selection color matches the brand rather than the OS default blue */
::selection {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* ---- Headings ---- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4 {
  font-size: var(--text-md);
}

/* ---- Links ----
   Base/default state only. Nav links and buttons override this in
   layout.css / components.css as their own explicit component styles.
   Underline draws in from the left on hover rather than just changing
   color, a small but deliberate signature touch used consistently for
   every inline text link on the site. */
a {
  color: var(--color-accent);
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent-dark), var(--color-accent-dark));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--transition-base), color var(--transition-fast);
  padding-bottom: 1px;
}

a:hover {
  color: var(--color-accent-dark);
  background-size: 100% 1.5px;
}

/* ---- Focus visibility (accessibility) ----
   Applies to every interactive element site-wide, including default
   browser controls, so keyboard focus is never invisible. The outline is
   the accessibility guarantee (works even in forced-colors/high-contrast
   mode); the box-shadow adds a soft glow that reads better on rounded
   elements like pill-shaped buttons and inputs. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-accent-tint);
  border-radius: var(--radius-sm);
}

/* The <main> landmark is given tabindex="-1" in the HTML so the skip link
   actually moves keyboard focus into it (without this, focus would stay
   wherever it was and the skip link would only scroll the page visually,
   not for assistive tech). This gives that programmatic focus a visible,
   on-brand indicator instead of the browser's default outline. */
main:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

/* ---- Lists ---- */
ul,
ol {
  padding-left: 1.25em;
}

/* Vertical spacing between stacked list items — for regular body-copy
   lists (Privacy page, etc.) only. Explicitly excluded from the site nav
   and footer nav lists, which are flex rows, not stacked lists — without
   this exclusion, the extra margin-top on 2nd/3rd+ items throws off
   align-items: center in the row, making nav links appear misaligned
   with each other. */
.site-nav__list li + li,
.footer-nav li + li {
  margin-top: 0;
}

li + li {
  margin-top: 0.35em;
}

/* ---- Blockquote (base element defaults; visual styling in components.css) ---- */
blockquote {
  font-style: italic;
}

/* ---- Form elements ---- */
input,
textarea,
select {
  font-family: inherit;
  font-size: var(--text-base);
  color: inherit;
}

button {
  font-family: inherit;
  font-size: var(--text-base);
  color: inherit;
  cursor: pointer;
}