/**
 * Base layer: reset + element defaults.
 * Values come from theme.json presets (--wp--preset--*). To re-skin a
 * project, change the tokens in theme.json — not the selectors here.
 * Per-project CSS belongs in @layer overrides.
 */

@layer base, layout, components;

@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	body {
		margin: 0;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
		font-family: var(--wp--preset--font-family--sans);
		line-height: 1.6;
		min-block-size: 100vh;
		-webkit-font-smoothing: antialiased;
	}

	img,
	video,
	svg {
		block-size: auto;
		max-inline-size: 100%;
	}

	img {
		display: block;
	}

	a {
		color: var(--wp--preset--color--primary);
		text-underline-offset: 0.18em;
	}

	a:hover {
		color: var(--wp--preset--color--contrast);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.15;
		margin-block: 0 0.6em;
		overflow-wrap: break-word;
	}

	p,
	ul,
	ol,
	blockquote {
		margin-block: 0 1em;
	}

	blockquote {
		border-inline-start: 3px solid var(--wp--preset--color--accent);
		margin-inline: 0;
		padding-inline-start: var(--wp--preset--spacing--50);
	}

	code,
	pre,
	kbd {
		background: var(--wp--preset--color--neutral);
		border-radius: 0.25rem;
		font-size: 0.9em;
	}

	code,
	kbd {
		padding: 0.15em 0.4em;
	}

	pre {
		overflow-x: auto;
		padding: var(--wp--preset--spacing--50);
	}

	table {
		border-collapse: collapse;
		inline-size: 100%;
	}

	th,
	td {
		border: 1px solid var(--wp--preset--color--border);
		padding: 0.5em 0.75em;
		text-align: start;
	}

	hr {
		border: 0;
		border-block-start: 1px solid var(--wp--preset--color--border);
		margin-block: var(--wp--preset--spacing--60);
	}

	/* Forms inherit the type system; plugins get sane fields for free. */
	button,
	input,
	optgroup,
	select,
	textarea {
		color: inherit;
		font: inherit;
	}

	input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
	select,
	textarea {
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--muted);
		border-radius: 0.25rem;
		inline-size: 100%;
		max-inline-size: 100%;
		padding: 0.6em 0.8em;
	}

	textarea {
		min-block-size: 8rem;
		resize: vertical;
	}

	fieldset {
		border: 1px solid var(--wp--preset--color--border);
		padding: var(--wp--preset--spacing--50);
	}

	/* Focus: single consistent, clearly visible style everywhere. */
	:focus-visible {
		outline: 3px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}

	/* Accessibility utilities */
	.screen-reader-text {
		border: 0;
		clip-path: inset(50%);
		block-size: 1px;
		inline-size: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		word-wrap: normal !important;
	}

	.screen-reader-text:focus {
		background: var(--wp--preset--color--base);
		clip-path: none;
		block-size: auto;
		inline-size: auto;
		display: block;
		font-weight: 600;
		padding: 1rem 1.5rem;
		z-index: 100000;
	}

	.skip-link {
		inset-block-start: 0;
		inset-inline-start: 0;
		position: absolute;
	}
}