/**
 * Element styles. theme.json sets the body typography and colours; this file
 * styles the elements.
 *
 * Headings and links live here, not in theme.json styles.elements. theme.json
 * element styles are output outside the cascade layers, so they'd beat every
 * block style and section that restyles a heading or a link. Here they're
 * layered, and anything after base can change them.
 */
@layer base {
	body {
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	/* Links to a place on the same page (a contents list, a back-to-top
	   link) scroll there smoothly instead of jumping. Off for anyone who
	   has asked their device for reduced motion, which is the accessible
	   default. The target stops below the sticky header, not under it:
	   --scroll-offset is the header's height plus a little room (0 on a
	   site with a static header). */
	html {
		scroll-padding-top: var(--scroll-offset, 6rem);
	}

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

	/* A section with its own scheme needs its own background and text colour.
	   Use the scheme--light and scheme--dark classes in the editor. */
	[data-scheme],
	.scheme--light,
	.scheme--dark {
		background-color: var(--bg-body);
		color: var(--text-color);
	}

	h1, h2, h3, h4, h5, h6 {
		color: var(--heading-color);
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		letter-spacing: var(--heading-tracking);
		line-height: var(--heading-line-height);
	}

	h1 { font-size: var(--h1); }
	h2 { font-size: var(--h2); }
	h3 { font-size: var(--h3); }
	h4 { font-size: var(--h4); }
	h5 { font-size: var(--h5); }
	h6 { font-size: var(--h6); }

	a {
		color: var(--link-color);
		text-underline-offset: 0.18em;
	}

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

	/* Header, main and footer sit flush. Core puts the root block gap
	   between them in CSS outside any layer. */
	.wp-site-blocks > * {
		margin-block: 0 !important; /* core override */
	}

	:focus-visible {
		outline: var(--focus-width) solid var(--focus-color);
		outline-offset: var(--focus-offset);
	}

	::selection {
		background-color: var(--primary);
		color: var(--white);
	}

	hr {
		border: 0;
		border-top: var(--border);
	}
}