:root {
	interpolate-size: allow-keywords;
}

html {
	font-size: 16px;
}

/*
 * `scroll-padding-top` is what keeps an anchor jump from landing behind whatever is
 * pinned to the top of the viewport. Two things can be, and both are added here:
 *
 * - the admin bar, which WordPress pays for with a `margin-top` on `<html>` — but a
 *   `position: fixed` bar still covers the top of the *scrollport*, which is what
 *   scroll padding is measured against;
 * - a fixed header. That one is not a constant: a part only floats when it is given
 *   the `Fixed` block style, so `--kg-fixed-header-block-size` is set by that style's
 *   own sheet (`assets/css/blocks/template-part-fixed.css`) and falls back to zero
 *   here, which is the right answer for a page whose header scrolls away with it.
 *
 * `!important` because `admin-bar.css` declares `html { scroll-padding-top: var(--wp-admin--admin-bar--height) }`
 * at the same specificity and is enqueued after the theme's stylesheets, so it would
 * otherwise win on order and drop the header's share of the offset.
 */
body,
html {
	scroll-padding-top: calc(
		var(--wp-admin--admin-bar--height, 0rem) +
			var(--kg-fixed-header-block-size, 0rem)
	) !important;
	overflow-x: clip;

	@media not (prefers-reduced-motion: reduce) {
		scroll-behavior: smooth;
	}
}

body {
	text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks {
	display: flex;
	flex-flow: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0rem));

	footer {
		margin-top: auto !important;
	}
}

@media screen and (width < 37.5rem) {
	#wpadminbar {
		position: fixed;
	}
}

/*
 * Form controls take the document's font, including its variable-font axis.
 *
 * `font-variation-settings: inherit` is not redundant: the property inherits, but
 * the UA stylesheet sets these controls with the `font` shorthand, and that
 * shorthand resets `font-variation-settings` to `normal`. Without this line a
 * button renders Nure with automatic optical sizing — drifting with its own font
 * size — instead of the Text cut everything around it is set in. See
 * `assets/css/global/fonts.css`.
 */
input,
textarea,
select,
button {
	font-family: inherit;
	font-size: inherit;
	font-variation-settings: inherit;
	line-height: inherit;
}

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

/*
 * Trim the half-leading off headings so their box is the cap height, which is what
 * the design's measurements assume — Figma trims text vertically by default, so a
 * heading measured at 56px/1.2 there has no leading above the caps or below the
 * baseline. Without this, every heading sits a few px lower than the design and
 * every gap above one reads as too large.
 *
 * Scoped to `.wp-block-heading`, not to `h1`–`h6`. The tag selectors caught every
 * heading on the page — ones core prints inside its own block chrome, ones plugins
 * emit, ones sitting in template parts — and trimming those is not the design's
 * decision to make. The class is on Heading blocks only, which is exactly the text
 * the design specifies this for.
 *
 * Headings only, deliberately: the design leaves body copy untrimmed, and the
 * button's 48px height is built from its padding plus a full line box, so trimming
 * a button label would collapse it to ~37px.
 *
 * No `@supports` guard — an unknown property is ignored, so a browser without
 * `text-box` simply keeps the untrimmed leading. There is nothing to fall back to
 * that would be better than that.
 */
.wp-block-heading {
	text-box: trim-both cap alphabetic;
}