/*
 * WTR Tidewater: base (base.css, handle wtre-base).
 *
 * Reset, body typography, links, focus, containers and grid, visually hidden
 * text, reduced motion. Loads after the parent's wtr.css and bridge.css, so
 * it also sets the floor for markup the parent and plugins still print.
 * Colour only through --wtr-* tokens. Components live in components.css.
 */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 64px; }
body { margin: 0; }
img, svg, video, canvas, picture { max-width: 100%; }
img, video { height: auto; }
img { border-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:where(button):disabled { cursor: not-allowed; }
:where(h1, h2, h3, h4) { margin: 0; }
/* Paragraph, list and figure spacing stay with the browser and the page CSS:
   article bodies and plugin screens rely on them. */
table { border-collapse: collapse; }
/* hidden="until-found" keeps the browser's own rule (content-visibility: hidden), so find in page
   can reveal it (WP0-CR, WP4 change request); every other [hidden] is gone. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* ---------- body ---------- */
body.wx {
	background: var(--wtr-bg);
	color: var(--wtr-text);
	font-family: var(--wtr-ff-sans);
	font-size: 1rem;
	line-height: 1.5;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Element defaults carry no class weight (:where), so any component, parent or
   plugin class rule still wins over them. */
:where(body.wx) :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wtr-heading);
	font-family: var(--wtr-ff-sans);
}
::selection { background: var(--wtr-tag-bg); color: var(--wtr-heading); }

/* ---------- links ---------- */
:where(body.wx) a { color: var(--wtr-link); text-decoration: none; }
:where(body.wx) a:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }

/* ---------- focus ---------- */
:focus-visible { outline: 2px solid var(--wtr-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.wtr-on-brand :focus-visible,
.wtr-on-brand:focus-visible { outline-color: var(--wtr-accent); }

/* ---------- skip link (.wtr-skip → #wtr-main; ui.js retargets to the first <main>) ---------- */
body.wx .wtr-skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: var(--wtr-radius-sm);
	background: var(--wtr-btn);
	color: var(--wtr-btn-text);
	font: 600 var(--wtr-fs-ui)/var(--wtr-lh-ui) var(--wtr-ff-sans);
}
body.wx .wtr-skip:focus { left: 8px; color: var(--wtr-btn-text); text-decoration: none; }

/* ---------- visually hidden ---------- */
.screen-reader-text,
.wx-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; white-space: normal; }

/* ---------- containers and grid ---------- */
/*
 * .wx-container: full width with the page margin as padding. --wtr-margin is
 * 16 / 32 / max(80px, (100vw - 1280px) / 2), so the content box is never wider
 * than --wtr-container (1280) and is centred at every width.
 */
.wx-container { width: 100%; padding-inline: var(--wtr-margin); }
.wx-measure { max-width: var(--wtr-measure); }

/* 4 / 8 / 12 columns with the token gutter. Children span with --wx-span. */
.wx-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--wtr-gutter);
}
.wx-grid > * { grid-column: span min(var(--wx-span, 4), 4); }
@media (min-width: 600px) {
	.wx-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.wx-grid > * { grid-column: span min(var(--wx-span-sm, var(--wx-span, 8)), 8); }
}
@media (min-width: 1024px) {
	.wx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.wx-grid > * { grid-column: span min(var(--wx-span-md, var(--wx-span-sm, var(--wx-span, 12))), 12); }
	html { scroll-padding-top: calc(48px + 16px + var(--wp-admin--admin-bar--height, 0px)); }
}

/* Main column + optional 336 px sidebar, from 1024 and only when the sidebar exists. */
.wx-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wtr-space-9); }
@media (min-width: 1024px) {
	.wx-layout:has(> .wx-sidebar) { grid-template-columns: minmax(0, 1fr) var(--wtr-sidebar); gap: var(--wtr-space-9); }
}
@media (min-width: 1280px) {
	.wx-layout:has(> .wx-sidebar) { gap: var(--wtr-space-10); }
}

/* Numbers: Plex Mono, tabular. */
.wx-num { font-family: var(--wtr-ff-mono); font-variant-numeric: tabular-nums; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}