/* Reset + base element styles */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-primary);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 16px;
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--color-text-primary);
	line-height: 1.15;
}

h1 { font-size: clamp(32px, 4.5vw, 50px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: clamp(20px, 2.4vw, 28px); }

p { margin: 0 0 16px; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select {
	font-family: var(--font-body);
	font-size: 16px;
}

.text-accent-gold { color: var(--color-accent-gold); }
.text-primary-green { color: var(--color-primary-green); }

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.section { padding: var(--space-section) 0; }

.section-heading {
	text-align: center;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
}

.section-intro {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 40px;
	color: var(--color-text-dark-gray);
}

.section-cta {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: 32px;
	flex-wrap: wrap;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: var(--radius-button);
	font-family: var(--font-body-medium);
	font-size: 16px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.btn--primary {
	background: var(--color-accent-gold);
	color: var(--color-text-primary);
}
.btn--primary:hover, .btn--primary:focus-visible {
	background: var(--color-accent-gold-alt);
}

.btn--secondary {
	background: var(--color-primary-green);
	color: var(--color-white);
}
.btn--secondary:hover, .btn--secondary:focus-visible {
	background: #012c17;
}

.btn--block { width: 100%; }

.btn:focus-visible {
	outline: 3px solid var(--color-primary-green);
	outline-offset: 2px;
}

/* Forms */
.form-field {
	margin-bottom: 16px;
	text-align: left;
}
.form-field label {
	display: block;
	font-size: 14px;
	font-family: var(--font-body-medium);
	margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d9d9d9;
	border-radius: var(--radius-button);
	background: var(--color-white);
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
	outline: 2px solid var(--color-primary-green);
	outline-offset: 1px;
}
.form-field--checkbox {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 13px;
	color: var(--color-text-dark-gray);
}
.form-field--checkbox input { width: auto; margin-top: 3px; }

.form-status {
	margin-top: 12px;
	font-size: 14px;
}
.form-status[data-state="success"] { color: var(--color-primary-green); }
.form-status[data-state="error"] { color: #b3261e; }

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	background: var(--color-primary-green);
	color: var(--color-white);
	padding: 12px 20px;
	border-radius: var(--radius-button);
	z-index: 200;
	transition: top 0.15s ease;
}
.skip-link:focus { top: 16px; }