/**
 * MyPlate — supplement to theme.json
 *
 * theme.json is the source of truth for colour, spacing, typography and radii.
 * Only rules that global styles cannot express belong here.
 *
 * Every value below references a token generated by theme.json:
 *   --wp--preset--color--*        palette
 *   --wp--preset--spacing--*      spacing scale
 *   --wp--preset--font-size--*    type scale
 *   --wp--custom--radius--*       radii
 *   --wp--custom--shadow--*       shadows
 *   --wp--custom--macro--*        macro accent colours
 */

/* -------------------------------------------------- *
 * Base
 * -------------------------------------------------- */

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

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

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

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------- *
 * Focus — visible, consistent, keyboard-only
 * -------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
	outline: none;
}

/* -------------------------------------------------- *
 * Skip link
 * -------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999999;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--lg);
	font-size: var(--wp--preset--font-size--base);
	text-decoration: none;
}

.skip-link:focus {
	left: var(--wp--preset--spacing--xl);
	top: var(--wp--preset--spacing--xl);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------- *
 * Form controls — core has no global styles for these
 * -------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
	width: 100%;
	min-height: var(--wp--custom--control--height);
	padding: var(--wp--custom--control--padding);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color var(--wp--custom--transition--base),
	            box-shadow var(--wp--custom--transition--base);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-soft);
	outline: none;
}

::placeholder {
	color: var(--wp--preset--color--faint);
	opacity: 1;
}

/* -------------------------------------------------- *
 * Motion
 * -------------------------------------------------- */

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

/* -------------------------------------------------- *
 * Block templates
 *
 * The templates in /templates and /parts carry structure only — no colour,
 * spacing or typography attributes on static blocks. The Block Editor
 * validates a static block by regenerating its save() output and comparing it
 * to the saved HTML, and those classes are composed inside
 * useBlockProps.save() rather than being literal markup. Hand-writing them is
 * what produces "Block contains unexpected or invalid content".
 *
 * So: layout and semantics in the template, every visual decision here,
 * against the same theme.json tokens.
 * -------------------------------------------------- */

.mp-main {
	margin-top: var(--wp--preset--spacing--3xl);
}

.mp-page-title {
	margin-bottom: var(--wp--preset--spacing--2xl);
}

.mp-post-meta {
	gap: var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--2xl);
	color: var(--wp--preset--color--faint);
	font-size: var(--wp--preset--font-size--sm);
}

.mp-post-meta a {
	color: inherit;
}

.mp-hero-image {
	margin-bottom: var(--wp--preset--spacing--2xl);
}

.mp-post-grid {
	gap: var(--wp--preset--spacing--3xl);
}

.mp-card-image img {
	border-radius: var(--wp--custom--radius--lg);
}

.mp-pagination {
	margin-top: var(--wp--preset--spacing--3xl);
}

/* Query "no results" text — the block saves no wrapper of its own. */
.wp-block-query > p {
	color: var(--wp--preset--color--muted);
}

/* 404 */

.mp-404 {
	margin-top: var(--wp--preset--spacing--4xl);
	padding-bottom: var(--wp--preset--spacing--4xl);
	text-align: center;
}

.mp-404 .wp-block-search {
	max-width: 420px;
	margin-inline: auto;
}

/* -------------------------------------------------- *
 * Site header and footer
 * -------------------------------------------------- */

.mp-site-header,
.mp-site-footer {
	background: var(--wp--preset--color--base);
}

.mp-site-header {
	padding-block: var(--wp--preset--spacing--lg);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mp-site-footer {
	margin-top: var(--wp--preset--spacing--4xl);
	padding-block: var(--wp--preset--spacing--3xl);
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.mp-site-footer p,
.mp-site-footer .wp-block-site-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
}

.mp-site-footer .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

/* Logo and title lockup */

.mp-site-header .wp-block-site-title {
	margin: 0;
}

.wp-block-site-logo img {
	display: block;
	border-radius: var(--wp--custom--radius--sm);
}