/* Base: reset, body, headings, focus, utilities. */
*, *::before, *::after { box-sizing: border-box; }
 html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
 html { scroll-padding-top: var(--header-height); }
body {
	margin: 0;
	background: var(--c-cream);
	color: var(--c-black);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
	text-wrap: pretty;
}
h1, h2, h3, h4 { font-family: var(--font-heading); text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--c-black); text-underline-offset: 3px; }
a:hover { color: var(--c-deep-ochre); }
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
address { font-style: normal; }

/*
 * The page wrapper clips horizontal overflow. clip, not hidden, so the sticky
 * header still sticks (hidden would create a scroll container).
 */
.site { background: var(--c-cream); overflow-x: clip; }

/* Focus (A13). Dark bands switch to yellow; light panels inside them switch back. */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
.is-dark { --focus-ring: var(--c-yellow); }
.is-dark .is-light { --focus-ring: var(--c-deep-teal); }

/* Layout primitives */
.container { max-width: var(--content-max); margin: 0 auto; }
.section { padding: var(--section-pad) var(--gutter); scroll-margin-top: var(--header-height); }
.gform_wrapper, .gform_anchor, .gform_validation_error, .ginput_container_text>input, .ginput_container_email>input, .ginput_container_textarea>textarea { scroll-margin-top: var(--header-height); }

.h2 {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* Screen-reader only (C1 allowlist items use this). .screen-reader-text is
   WordPress's own name for it, used by the pagination headings. */
.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	margin: -1px; padding: 0; border: 0;
}

/*
 * Skip link (A12). Sits over the Deep Teal top bar, so its focus ring is
 * yellow: the mockup's teal ring measured 1.00:1 there.
 */
.skip-link {
	position: absolute;
	top: 8px; left: 8px;
	z-index: 400;
	transform: translateY(-200%);
	background: var(--c-black);
	color: var(--c-cream);
	padding: 14px 20px;
	border-radius: var(--r-pill);
	font: 600 var(--fs-16)/1 var(--font-heading);
	text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { transform: translateY(0); color: var(--c-cream); outline-color: var(--c-yellow); }

/* Reduced motion (A15) */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}