/*
 * shitate base reset.
 *
 * Two layers, both at zero specificity (every selector is wrapped in
 * :where(), so nothing here outranks core, a plugin, or the site owner's
 * custom CSS):
 *
 * 1. UA normalisation — evens out the browser defaults that differ between
 *    engines or get in the way of a block layout (box-sizing, default
 *    margins, form-control fonts, sub/sup, code fonts, tables). WordPress
 *    already handles most of this for block markup; this layer makes plugin
 *    output, Custom HTML and comment forms behave the same way.
 * 2. The handful of modern-reset rules core does not cover (text-size-adjust,
 *    scrollbar-gutter, media sizing, focus ring, reduced motion).
 *
 * Deliberately not reset: list padding and bullets (core lists rely on the
 * UA defaults), heading sizes and weights (global styles own them), link
 * colours and button appearance.
 *
 * Original work for this theme, informed by the practices shared across
 * modern resets (text-size-adjust, scrollbar-gutter, media sizing, form
 * font inheritance, focus-visible, reduced motion). No third-party code is
 * copied.
 *
 * Loaded first on the front end (handle shitate-reset) and in the editor.
 */

/* ---- 1. UA normalisation ---- */

/* Border-box everywhere, including generated content. */
*,
::before,
::after {
	box-sizing: border-box;
}

/* Default margins off the elements whose spacing the layout (block gap) or
   the theme's rhythm rules provide. Inside block layouts core already zeroes
   these; this covers plugin markup, Custom HTML and the comment form. */
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre) {
	margin: 0;
}

/* Text-level semantics render the same in every engine. */
:where(b, strong) {
	font-weight: bolder;
}

:where(abbr[title]) {
	text-decoration: underline dotted;
}

:where(sub, sup) {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

:where(sub) {
	bottom: -0.25em;
}

:where(sup) {
	top: -0.5em;
}

:where(code, kbd, samp, pre) {
	font-family: var(--st-font-mono, ui-monospace, monospace);
	font-size: 1em;
}

:where(table) {
	border-collapse: collapse;
	border-color: inherit;
	text-indent: 0;
}

:where(fieldset) {
	min-width: 0;
}

:where(legend) {
	padding: 0;
}

:where(textarea) {
	resize: vertical;
}

:where(button, [type="button"], [type="submit"], [type="reset"]) {
	-webkit-appearance: button;
	appearance: button;
}

:where(progress) {
	vertical-align: baseline;
}

/* ---- 2. Modern-reset rules core does not cover ---- */

/* Keep the layout steady: no iOS landscape text inflation, and reserve the
   scrollbar gutter so content does not shift when a scrollbar appears. */
:where(html) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-gutter: stable;
}

/* Media never overflows its container and sits on the baseline without the
   phantom gap. display is left alone so inline images (emoji, icons inside
   buttons) keep flowing with text. */
:where(img, picture, video, canvas, svg) {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* Embedded frames never overflow their container either. A Custom HTML
   block that holds nothing but an iframe (a Google Map, a YouTube player, a
   form) stretches it to the block's width; the frame's own height attribute
   is kept, so fixed-height embeds are not squashed. */
:where(iframe, embed, object) {
	max-width: 100%;
}

:where(.wp-block-html) > :where(iframe:only-child) {
	display: block;
	width: 100%;
}

/* Form controls inherit the site's typography instead of the browser's, and
   drop the engine-specific default margins. */
:where(button, input, optgroup, select, textarea) {
	margin: 0;
	font: inherit;
	color: inherit;
}

/* Anchor targets (table of contents, "back to top" links) stop clear of the
   viewport edge instead of hugging it. */
:where(:target) {
	scroll-margin-block-start: var(--st-space-l, 1.5rem);
}

/* One consistent, visible keyboard focus ring in the brand colour. Mouse
   clicks do not trigger it. */
:where(:focus-visible) {
	outline: 2px solid var(--st-color-brand, #2952cc);
	outline-offset: 2px;
}

/*
 * Reduced motion. This is the theme's one sanctioned media query outside
 * device-specific display rules: it responds to a user preference, not to
 * viewport width, and it exists for accessibility (vestibular disorders).
 * The theme itself does not animate; this covers block, plugin and custom
 * animations on the site. !important is required to beat their own rules.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}