/*
 * Base Typography
 */

body {
	font-family: var(--qehs-font-base);
	font-size: var(--qehs-font-size-base);
	line-height: var(--qehs-line-height-base);
	color: var(--qehs-text);
	background-color: var(--qehs-background);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.25;
	color: var(--qehs-text);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
	color: var(--qehs-text);
}

.qehs-page-title {
	margin-bottom: var(--qehs-space-lg);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/*
 * Layout utilities
 *
 * .qehs-section: full-viewport-width wrapper for a homepage section's
 * background. .qehs-container: the centered, max-width content region
 * inside it. Reuses the existing --qehs-container-max /
 * --qehs-container-padding tokens (see base/variables.css) — this is
 * the single content-width system for the theme, not a second one.
 *
 * Usage (once homepage sections are built):
 *   <section class="qehs-section" style="background: ...;">
 *     <div class="qehs-container"> ...section content... </div>
 *   </section>
 */
.qehs-section {
	width: 100%;
}

.qehs-container {
	width: 100%;
	max-width: var(--qehs-container-max);
	margin-inline: auto;
	padding-inline: var(--qehs-container-padding);
}