/**
 * Base layout + reduced-motion-safe smooth scroll.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	font-family: var(--font-family);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	font-weight: var(--text-body-weight);
	line-height: var(--line-height-base);
	letter-spacing: var(--text-body-letter-spacing);
	color: var(--color-text);
	background-color: var(--color-bg);
}

h1,
h2,
h3 {
	margin: 0 0 var(--space-16);
	font-family: var(--font-sans);
	line-height: var(--text-heading-line-height);
	letter-spacing: var(--text-heading-letter-spacing);
}

h1 {
	font-size: var(--text-h1-size);
	font-weight: var(--text-h1-weight);
}

h2 {
	font-size: var(--text-h2-size);
	font-weight: var(--text-h2-weight);
}

h3 {
	font-size: var(--text-h3-size);
	font-weight: var(--text-h3-weight);
}

/* Type scale utilities — sections opt in (Display is not default <h1>). */
.text-display-lg {
	font-family: var(--font-sans);
	font-size: var(--text-display-lg-size);
	font-weight: var(--text-display-lg-weight);
	line-height: var(--text-heading-line-height);
	letter-spacing: var(--text-heading-letter-spacing);
}

.text-display-md {
	font-family: var(--font-sans);
	font-size: var(--text-display-md-size);
	font-weight: var(--text-display-md-weight);
	line-height: var(--text-heading-line-height);
	letter-spacing: var(--text-heading-letter-spacing);
}

.text-h1 {
	font-family: var(--font-sans);
	font-size: var(--text-h1-size);
	font-weight: var(--text-h1-weight);
	line-height: var(--text-heading-line-height);
	letter-spacing: var(--text-heading-letter-spacing);
}

.text-h2 {
	font-family: var(--font-sans);
	font-size: var(--text-h2-size);
	font-weight: var(--text-h2-weight);
	line-height: var(--text-heading-line-height);
	letter-spacing: var(--text-heading-letter-spacing);
}

.text-h3 {
	font-family: var(--font-sans);
	font-size: var(--text-h3-size);
	font-weight: var(--text-h3-weight);
	line-height: var(--text-heading-line-height);
	letter-spacing: var(--text-heading-letter-spacing);
}

.text-body-lg {
	font-family: var(--font-sans);
	font-size: var(--text-body-lg-size);
	font-weight: var(--text-body-lg-weight);
	line-height: var(--text-body-line-height);
	letter-spacing: var(--text-body-letter-spacing);
}

.text-body {
	font-family: var(--font-sans);
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-line-height);
	letter-spacing: var(--text-body-letter-spacing);
}

.text-body-sm {
	font-family: var(--font-sans);
	font-size: var(--text-body-sm-size);
	font-weight: var(--text-body-sm-weight);
	line-height: var(--text-body-line-height);
	letter-spacing: var(--text-body-letter-spacing);
}

.text-label {
	font-family: var(--font-sans);
	font-size: var(--text-label-size);
	font-weight: var(--text-label-weight);
	line-height: var(--text-label-line-height);
	letter-spacing: var(--text-label-letter-spacing);
}

.text-btn {
	font-family: var(--font-sans);
	font-size: var(--text-btn-size);
	font-weight: var(--text-btn-weight);
	line-height: var(--text-btn-line-height);
	letter-spacing: var(--text-btn-letter-spacing);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-bg);
	clip: auto !important;
	clip-path: none;
	color: var(--color-text);
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 0.5rem;
	line-height: normal;
	padding: 0.5rem 1rem;
	text-decoration: none;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

.site-main {
	min-height: 50vh;
}

/* 1248px content column. Backgrounds stay full-bleed; copy sits in .container.
 * Desktop: no inline pad (96px is leftover from 1440 − 1248). Below 1440: pad so copy does not hit the edge. */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	box-sizing: border-box;
}

@media (max-width: 1439px) {
	.container {
		padding-inline: var(--section-pad-inline);
	}
}

.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	gap: var(--grid-gutter);
}

.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Default WP/Woo content uses the same 1248 column. Flex pages stay full-bleed. */
.content-area {
	width: 100%;
}

.content-area:not(:has(> .scroll-reveal)) {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-32);
}

@media (max-width: 1439px) {
	.content-area:not(:has(> .scroll-reveal)) {
		padding-inline: var(--section-pad-inline);
	}
}