/**
 * EMMGS — Base
 *
 * Foundational rules only: things theme.json cannot express, or that must apply
 * before any component. Design tokens live in theme.json and are consumed here
 * as --wp--preset--* / --wp--custom--* custom properties.
 */

/* -------------------------------------------------------------------------
 * 1. Document
 * ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchored headings clear the sticky header. */
	scroll-padding-top: 6rem;
	/* Nothing should ever produce sideways scroll. Horizontal overflow is a bug
	   to fix at the source, but this stops one mistake from breaking the whole
	   page on mobile. It belongs on html, not body: overflow set on body would
	   make body a scroll container and break the sticky header. */
	overflow-x: clip;
}

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

/* Media never overflows its container. */
img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
	height: auto;
}

img {
	vertical-align: middle;
}

/* Long unbroken strings (URLs, IDs) must not force horizontal scroll. */
p,
li,
dd,
dt,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Editorial headlines read better with balanced last lines. */
h1,
h2,
h3,
.emmgs-display,
.emmgs-balance {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Tabular figures wherever numbers are compared vertically. */
.emmgs-tabular {
	font-variant-numeric: tabular-nums;
}

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
 * 2. Surface system
 *
 * Every section declares a surface. Components read --surface-* rather than
 * palette tokens directly, so a component works unchanged on light or dark.
 *
 * This is also how the green stays accessible: `signal` is only ever the
 * accent on an ink surface (11.4:1), never on paper (1.7:1).
 * ---------------------------------------------------------------------- */

:root,
.emmgs-surface--paper {
	--surface-bg: var(--wp--preset--color--paper);
	--surface-raised: var(--wp--preset--color--white);
	--surface-fg: var(--wp--preset--color--ink);
	--surface-muted: var(--wp--preset--color--slate);
	/* --surface-faint is the quietest voice that still carries text, so it must
	   clear 4.5:1 on its own surface. `mist` is a border and indicator colour,
	   not a text colour, and is deliberately not used here. */
	--surface-faint: #676C75; /* 5.0:1 on paper */
	--surface-line: var(--wp--preset--color--line);
	--surface-accent: var(--wp--preset--color--accent-deep);
	--surface-accent-bright: var(--wp--preset--color--accent);
}

.emmgs-surface--paper-deep {
	--surface-bg: var(--wp--preset--color--paper-deep);
	--surface-raised: var(--wp--preset--color--paper);
	--surface-fg: var(--wp--preset--color--ink);
	--surface-muted: var(--wp--preset--color--slate);
	--surface-faint: #636872; /* 4.9:1 on paper-deep */
	--surface-line: #DAD7D0;
	--surface-accent: var(--wp--preset--color--accent-deep);
	--surface-accent-bright: var(--wp--preset--color--accent);
}

.emmgs-surface--ink {
	--surface-bg: var(--wp--preset--color--ink);
	--surface-raised: var(--wp--preset--color--ink-raised);
	--surface-fg: var(--wp--preset--color--paper);
	--surface-muted: var(--wp--preset--color--mist);
	--surface-faint: #8B9099; /* 6.1:1 on ink */
	--surface-line: rgba(255, 255, 255, 0.14);
	--surface-accent: var(--wp--preset--color--signal);
	--surface-accent-bright: var(--wp--preset--color--signal);
}

.emmgs-surface--paper,
.emmgs-surface--paper-deep,
.emmgs-surface--ink {
	background-color: var(--surface-bg);
	color: var(--surface-fg);
}

/* Inverted surfaces need heading, link, and rule colours re-pointed. Global
   styles hard-code ink on headings, so this must be specific enough to win. */
.emmgs-surface--ink :is(h1, h2, h3, h4, h5),
.emmgs-surface--ink .wp-block-heading,
.emmgs-surface--ink .wp-block-post-title,
.emmgs-surface--ink .wp-block-post-title a {
	color: var(--surface-fg);
}

.emmgs-surface--ink :is(h6, .emmgs-label),
.emmgs-surface--ink .wp-block-post-date,
.emmgs-surface--ink .wp-block-post-terms a {
	color: var(--surface-muted);
}

.emmgs-surface--ink a:where(:not(.wp-element-button)) {
	color: var(--surface-accent);
}

.emmgs-surface--ink a:where(:not(.wp-element-button)):hover,
.emmgs-surface--ink a:where(:not(.wp-element-button)):focus-visible {
	color: var(--surface-fg);
}

.emmgs-surface--ink hr,
.emmgs-surface--ink .wp-block-separator {
	border-color: var(--surface-line);
	color: var(--surface-line);
}

.emmgs-surface--ink :focus-visible {
	outline-color: var(--wp--preset--color--signal);
}

/* Buttons on ink invert: paper fill on dark, purple on hover stays legible. */
.emmgs-surface--ink .wp-element-button:not(.is-style-outline .wp-element-button) {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.emmgs-surface--ink .wp-element-button:not(.is-style-outline .wp-element-button):hover,
.emmgs-surface--ink .wp-element-button:not(.is-style-outline .wp-element-button):focus-visible {
	background-color: var(--wp--preset--color--signal);
	border-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
}

.emmgs-surface--ink .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.32);
	color: var(--wp--preset--color--paper);
}

.emmgs-surface--ink .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.emmgs-surface--ink .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------
 * 3. Focus & keyboard accessibility
 * ---------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Only suppress the ring for pointer interaction, never for keyboard. */
:focus:not(:focus-visible) {
	outline: none;
}

/* WordPress injects the "Skip to content" link for block themes; it carries
   both .skip-link and .screen-reader-text, so the rules below style it. */

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

.screen-reader-text:focus,
.sr-only:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: 999999;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--sm);
}

/* Touch targets.
 *
 * WCAG 2.5.8 exempts links inline in a sentence, whose height is set by the
 * surrounding line-height. So this sizes standalone, navigational targets
 * only — applying min-height to every <a> would do nothing (inline boxes
 * ignore it) and, once made inline-flex, would wreck prose line spacing.
 */
@media (pointer: coarse) {
	button,
	summary,
	input[type="submit"],
	.wp-element-button {
		min-height: 44px;
	}

	/* Standalone navigational links become their own touch target. */
	.wp-block-site-title a,
	.emmgs-header .wp-block-navigation a,
	.emmgs-footer a:not(.wp-element-button),
	.wp-block-list.is-style-emmgs-plain a,
	.wp-block-list.is-style-emmgs-rows a,
	.wp-block-query-pagination a,
	.emmgs-arrowlink,
	.emmgs-pill,
	.comment-reply-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Taxonomy links are standalone metadata, not prose, so they need their
	   own height rather than relying on the surrounding line box. */
	.wp-block-post-terms a {
		display: inline-block;
		padding-block: 0.4rem;
	}

	.wp-block-navigation__responsive-container-content a {
		display: flex;
		align-items: center;
	}
}

/* The nav open/close buttons carry only an icon, so they need an explicit
   box — the 24px SVG alone is well under any target-size threshold. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* -------------------------------------------------------------------------
 * 4. Motion tokens
 *
 * Motion is opt-in per component via these variables. Any component that moves
 * must read them rather than hard-coding a duration, so the reduced-motion
 * override below reaches all of them.
 * ---------------------------------------------------------------------- */

:root {
	--emmgs-motion-fast: var(--wp--custom--transition--fast);
	--emmgs-motion-base: var(--wp--custom--transition--base);
	--emmgs-motion-slow: var(--wp--custom--transition--slow);
	--emmgs-motion-ease: var(--wp--custom--transition--ease);
	--emmgs-motion-ease-in: var(--wp--custom--transition--ease-in);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--emmgs-motion-fast: 1ms;
		--emmgs-motion-base: 1ms;
		--emmgs-motion-slow: 1ms;
	}

	html {
		scroll-behavior: auto;
	}

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

/* -------------------------------------------------------------------------
 * 5. Print
 * ---------------------------------------------------------------------- */

@media print {
	.emmgs-header,
	.emmgs-footer,
	.emmgs-cta,
	.wp-block-navigation {
		display: none !important;
	}

	.emmgs-surface--ink {
		background: #fff !important;
		color: #000 !important;
	}
}