/* ==========================================================================
   2. BASE — bare HTML elements only
   ==========================================================================

   Scope: element selectors, no classes. Behaviour that must be true
   everywhere on the site regardless of which block wraps it.

   If a rule needs a class to work, it is not a base rule — it belongs in
   components.css. Keeping that line sharp is what stops this file growing
   into the tangle the old site had.

   Colours, sizes and spacing for headings, links, buttons and captions are
   already set in theme.json under styles.elements. Do not restate them here.
   ========================================================================== */

/* --- Document ------------------------------------------------------------ */

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

/* Anchor links land below the sticky masthead instead of under it. */
html:focus-within {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
}

/* --- Rhythm -------------------------------------------------------------- */

/* Headings never sit alone at the bottom of a column. */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
	break-after: avoid;
}

:where(p, li) {
	text-wrap: pretty;
}

/* Kill the top margin on the first heading of any container so section
   padding is the only thing controlling the gap. */
:where(.entry-content, .wp-block-group) > :first-child {
	margin-block-start: 0;
}

/* --- Links --------------------------------------------------------------- */

:where(a) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
	transition: color var(--wva-duration-fast) var(--wva-easing);
}

/* --- Focus --------------------------------------------------------------- */

/* One focus treatment for the whole site. Never remove it; if a component
   needs a different shape, override outline-offset, not outline. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wva-focus-ring);
	outline-offset: var(--wva-focus-offset);
	border-radius: var(--wva-radius-sm);
}

/* --- Media --------------------------------------------------------------- */

:where(img, svg, video, canvas, iframe) {
	max-width: 100%;
	height: auto;
	display: block;
}

:where(img) {
	background-color: var(--wva-surface-sunken);
}

/* --- Forms --------------------------------------------------------------- */

:where(input, select, textarea) {
	font: inherit;
	color: var(--wva-text);
	background-color: var(--wva-surface);
	border: var(--wva-line-width) solid var(--wva-line);
	border-radius: var(--wva-radius);
	padding: 0.75rem 1rem;
	max-width: 100%;
}

:where(input, select, textarea)::placeholder {
	color: var(--wva-text-muted);
	opacity: 1;
}

/* --- Tables -------------------------------------------------------------- */

:where(table) {
	border-collapse: collapse;
	width: 100%;
}

:where(th) {
	text-align: left;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wva-text-muted);
}

:where(th, td) {
	padding: 0.75rem 1rem 0.75rem 0;
	border-bottom: var(--wva-line-width) solid var(--wva-line);
	vertical-align: top;
}

/* --- Selection ----------------------------------------------------------- */

::selection {
	background-color: var(--wva-highlight);
	color: var(--wp--preset--color--ink);
}

/* --- Motion preference --------------------------------------------------- */

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

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