/* What every page shares: the typeface, the text colour and a clean starting point. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* A link to a place on the page lands it just below the sticky header (and the admin bar, when logged in),
   and glides there unless the visitor has asked their device for reduced motion. The mouse wheel's glide
   is in smooth-scroll.js. */
html {
	scroll-padding-top: calc(var(--space-80) + var(--toolbar-height));
}

/* The space WordPress's toolbar takes at the top of the screen, only while it is shown and stays put.
   WordPress sets --wp-admin--admin-bar--height whenever the toolbar's styles load, even when the
   toolbar itself is hidden, and on phones the toolbar scrolls away with the page. */
html {
	--toolbar-height: 0px;
}

html:has(> body.admin-bar) {
	--toolbar-height: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	html:has(> body.admin-bar) {
		--toolbar-height: 0px;
	}
}

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

body {
	margin: 0;
	font-family: var(--font-family);
	font-weight: var(--weight-regular);
	color: var(--color-text);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Text that only screen readers announce. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The "Skip to content" link appears only when a keyboard user reaches it. */
.skip-link {
	position: absolute;
	top: var(--space-8);
	left: var(--space-8);
	z-index: 1000;
	padding: var(--space-8) var(--space-16);
	background: var(--color-white);
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}