/**
 * Element styles. theme.json sets the main typography and colours; this adds
 * what theme.json can't express.
 */
@layer base {
	body {
		font-weight: var(--body-weight);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	/* 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);
	}

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

	/* 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 */
	}

	::selection {
		background-color: var(--secondary);
		color: var(--base);
	}

	/* 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. */
	/* Two fonts, one weight each (Austin, 23 October 2026): Halyard Display
	   Medium for headings and anything bold, Halyard Text Light for the rest.
	   Bold text switches to the heading font, and the browser never fakes a
	   bold from the light weight. Italic text is slanted by the browser;
	   the kit has no italic files. */
	body {
		font-synthesis-weight: none;
	}

	strong,
	b {
		font-family: var(--font-heading);
		font-weight: 500;
	}

	/* Anchor links land below the sticky header, not under it. */
	html {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);
	}

	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);
	}

	/* Tight tracking and leading suit display sizes only. Smaller headings
	   open up, or they read as cramped (23 October 2026). */
	h3, .h3 {
		letter-spacing: -0.005em;
		line-height: 1.15;
	}

	h4, h5, h6, .h4, .h5, .h6 {
		letter-spacing: 0;
		line-height: 1.25;
	}

	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;
		text-decoration-thickness: 1px;
	}

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

	p {
		text-wrap: pretty;
	}

	h1, h2, h3, h4, h5, h6 {
		text-wrap: balance;
	}

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