/**
 * YWA Base — reset + element defaults
 * ---------------------------------------------------------------------------
 * Two jobs:
 *   1. A modern, minimal reset.
 *   2. Bind bare HTML elements to the type roles and colour tokens.
 *
 * Job 2 is the important one. Content Frank writes in the WordPress editor
 * arrives as unclassed <h2>, <p>, <ul>, <blockquote>. If the element defaults
 * are right, his posts look correct with zero effort from him and zero
 * per-post styling from us. That is the whole "non-coder can add an event"
 * promise, implemented.
 */

/* ===========================================================================
   RESET
   =========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Always reserve the scrollbar's width, even on a page that doesn't scroll.
     Without it, centred content jumps sideways by the scrollbar's width when
     you move between a page that scrolls and one that doesn't — measured on
     staging 2026-07-27: every page scrolls except /donate/, so that one page
     shifted the nav ~8px relative to all the others.

     Deferred until now on purpose: while the interior pages were stubs, none of
     them scrolled, so there was no way to tell whether a fix had worked. Now
     they have real content and the odd one out is visible.

     Windows and Linux only — macOS overlay scrollbars take no layout width, so
     this is invisible there. Preferred over the older `overflow-y: scroll`,
     which reserves the space but also paints an empty scrollbar track. */
  scrollbar-gutter: stable;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Long words / URLs shouldn't blow out narrow columns */
p, h1, h2, h3, h4, h5, h6, li {
  overflow-wrap: break-word;
}

/* In-page anchors glide rather than teleport — the History chapter nav is the
   one place on this site with a lot of them, and a jump there gives no sense of
   how far you moved through a long article. The reduced-motion block directly
   below overrides this back to `auto` for readers who ask for that, which is why
   this is safe to set globally rather than per-component. */
html { scroll-behavior: smooth; }

/* Respect a reader's reduced-motion preference */
@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;
  }
}

/* ===========================================================================
   DOCUMENT
   =========================================================================== */

body {
  background-color: var(--color-surface-canvas);
  color: var(--color-text-default);
  font-family: var(--type-family-sans);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-light);   /* lighter Inter default (2026-07-24) */
  line-height: var(--type-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================================================================
   HEADINGS — mapped to the type roles.
   Convention (locked 2026-07-11): the topmost hero heading on a page uses
   `display`; major section headers use `title`. Those are applied in the
   templates via .type-display / .type-title, since they are page-position
   decisions, not element-level ones. A bare <h1> in editor content gets
   heading-1 — the correct default for prose.
   =========================================================================== */

h1 {
  font-family: var(--type-family-serif);
  font-size: var(--type-size-heading-1);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-heading-1);
  letter-spacing: var(--type-tracking-heading-1);
  color: var(--color-text-strong);
}

/* SERIF from 1.6.6. This element default is what an editor's unclassed <h2>
   lands on — the History chapter headings, "Make your gift" on Donate, and
   anything Frank types in future. It was Inter while every section header our
   own blocks build was Hedvig, so the same kind of heading got a different
   typeface depending on who authored it. Now they agree. Weight is regular
   because Hedvig ships Regular only. */
h2 {
  font-family: var(--type-family-serif);
  font-size: var(--type-size-heading-2);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-heading-2);
  letter-spacing: var(--type-tracking-heading-2);
  color: var(--color-text-strong);
}

h3 {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-heading-3);
  font-weight: var(--type-weight-medium);   /* lighter Inter (2026-07-24) */
  line-height: var(--type-leading-heading-3);
  color: var(--color-text-strong);
}

h4, h5, h6 {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-heading-4);
  font-weight: var(--type-weight-medium);   /* lighter Inter (2026-07-24) */
  line-height: var(--type-leading-heading-4);
  color: var(--color-text-strong);
}

/* ===========================================================================
   PROSE RHYTHM
   Vertical spacing lives on the flow, not on individual elements, so editor
   content spaces itself correctly no matter what order Frank stacks blocks in.
   =========================================================================== */

.flow > * + * {
  margin-block-start: var(--space-400);
}

.flow > * + h2 {
  margin-block-start: var(--space-1200);
}

.flow > * + h3,
.flow > * + h4 {
  margin-block-start: var(--space-800);
}

/* ===========================================================================
   LINKS
   =========================================================================== */

a {
  color: var(--color-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

a:hover {
  color: var(--color-text-link-hover);
}

a:visited {
  color: var(--color-text-link-visited);
}

/* Keyboard focus only — pointer users don't get a ring */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ===========================================================================
   LISTS
   =========================================================================== */

ul:not([role="list"]),
ol:not([role="list"]) {
  padding-inline-start: var(--space-600);
}

li + li {
  margin-block-start: var(--space-200);
}

/* ===========================================================================
   EDITORIAL ELEMENTS — what the WordPress editor emits
   =========================================================================== */

blockquote {
  padding-inline-start: var(--space-600);
  border-inline-start: 3px solid var(--color-accent-default);
  font-size: var(--type-size-body-lead);
  line-height: var(--type-leading-body);
  color: var(--color-text-subdued);
}

hr {
  height: 1px;
  border: 0;
  background-color: var(--color-border-default);
  margin-block: var(--space-1200);
}

figcaption {
  margin-block-start: var(--space-300);
  font-size: var(--type-size-meta);
  color: var(--color-text-subdued);
}

code {
  font-family: var(--type-family-mono);
  font-size: 0.9em;
  padding: 0.15em var(--space-200);
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--type-family-mono);
  font-size: var(--type-size-code);
  padding: var(--space-600);
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
}

strong, b {
  font-weight: var(--type-weight-semibold);
}

small {
  font-size: var(--type-size-body-small);
  color: var(--color-text-subdued);
}

/* ===========================================================================
   TABLES
   =========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  font-size: var(--type-size-data-header);
  font-weight: var(--type-weight-medium);
  letter-spacing: var(--type-tracking-data-header);
  text-transform: uppercase;
  text-align: start;
  color: var(--color-text-subdued);
  padding: var(--space-300) var(--space-400);
  border-block-end: 1px solid var(--color-border-default);
}

td {
  font-size: var(--type-size-data-row);
  line-height: var(--type-leading-data);
  padding: var(--space-300) var(--space-400);
  border-block-end: 1px solid var(--color-border-subtle);
}

/* ===========================================================================
   ACCESSIBILITY HELPERS
   =========================================================================== */

/* Visually hidden but available to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first tab stop, drops into view when focused */
.skip-link {
  position: absolute;
  top: var(--space-200);
  left: var(--space-200);
  z-index: var(--z-tooltip);
  padding: var(--space-300) var(--space-500);
  background-color: var(--color-surface-raised);
  color: var(--color-text-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-overlay);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}