/*
 * base.css — resets, typography and layout primitives.
 * Mirrors the current site defaults (Poppins, 1200px container, navy headings).
 */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--usa-font-family);
	font-weight: var(--usa-fw-text);
	font-size: 16px;
	line-height: 1.6;
	color: var(--usa-text);
	background: var(--usa-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--usa-font-family);
	font-weight: var(--usa-fw-heading);
	line-height: 1.2;
	color: var(--usa-heading);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }

p { margin: 0 0 1rem; }

a {
	color: var(--usa-navy);
	text-decoration: none;
	transition: color 0.2s ease;
}
a:hover { color: var(--usa-orange); }

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

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

/* Layout primitives */
.usa-container {
	/* Fluid container: ~20px side gutters on small screens (via --usa-gutter),
	   centered and capped at --usa-container (1200px) on large screens. */
	width: min(100% - 2 * var(--usa-gutter), var(--usa-container));
	margin-inline: auto;
}

.usa-section { padding-block: clamp(2.5rem, 6vw, 5rem); }

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--usa-navy);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* Buttons — primary CTA matches the site's orange "Apply Now" style */
.usa-btn {
	display: inline-block;
	font-weight: var(--usa-fw-accent);
	padding: 12px 26px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.usa-btn--primary {
	background: var(--usa-orange);
	color: #fff;
	border-color: var(--usa-orange);
}
.usa-btn--primary:hover {
	background: var(--usa-orange-hover);
	color: #fff;
}
.usa-btn--ghost {
	background: transparent;
	color: var(--usa-navy);
	border-color: var(--usa-navy);
}
.usa-btn--ghost:hover { background: var(--usa-navy); color: #fff; }