/*
 * Landing page styles — SafeTX.
 *
 * Loaded after style.css (the untouched _s base). Design source: Messina's
 * static comp `safetxpac-landing-page.html` (2026-09-01) — parchment page,
 * navy bands, red primary, brass accents, Source Serif 4 display + Public
 * Sans text, 1080px wrap — with the navy/red retuned to the SafeTX shield
 * logo (2026-09-01 evening) and a few flourishes: red top stripe, shield in
 * header/footer/statement, hero watermark, navy footer, scroll-reveal. Token names below are HIS names so later CSS
 * from the design side drops in unchanged. The comp has no contribution form;
 * the form section here extends his system (two-column like the mission
 * section, card on the right).
 */

/* --------------------------------------------------------------------------
 * Fonts + tokens
 * ------------------------------------------------------------------------ */

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-var-latin.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-italic-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Public Sans";
	src: url("../fonts/public-sans-var-latin.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand colours from the SafeTX shield (navy #02244C, red #BF181F);
	   parchment / brass / hairlines carried over from Messina's comp. */
	--ink-navy: #02244c;
	--ink-navy-deep: #011a38;
	--ink-navy-light: #0b3a72;
	--parchment: #f4efe3;
	--parchment-dim: #eae3d2;
	--barn-red: #bf181f;
	--barn-red-hover: #9a1319;
	--steel-blue: #3b5b85;
	--ink: #1d1b16;
	--ink-soft: #4a4738;
	--brass: #b08d2b;
	--hairline: rgba(29, 27, 22, 0.18);
	--hairline-soft: rgba(29, 27, 22, 0.1);
	--hairline-on-navy: rgba(244, 239, 227, 0.22);
	--parchment-86: rgba(244, 239, 227, 0.86);
	--parchment-60: rgba(244, 239, 227, 0.6);
	--field-bg: #fffdf8;
	--card-bg: #fbf8f0;
	--notice-bg: #f7efd6;
	--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--sans: "Public Sans", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--wrap: 1080px;
	--pad-x: 32px;
	--radius: 2px;
	--header-offset: 104px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--parchment);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
 * Shared
 * ------------------------------------------------------------------------ */

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--pad-x);
}

/*
 * Link colors. The _s base sets royalblue / purple-when-visited, and its
 * `a:visited` selector (type + pseudo-class) outranks any single class, so
 * every branded link and button declares :visited explicitly.
 */
a {
	color: var(--steel-blue);
}

a:visited {
	color: var(--steel-blue);
}

a:hover,
a:focus,
a:active {
	color: var(--barn-red);
}

.btn-primary,
.btn-secondary,
.button {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
	padding: 14px 26px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary,
.button--red {
	background: var(--barn-red);
	border-color: var(--barn-red);
	color: var(--parchment);
}

a.btn-primary:visited,
a.button--red:visited {
	color: var(--parchment);
}

.btn-primary:hover,
.btn-primary:focus,
.button--red:hover,
.button--red:focus {
	background: var(--barn-red-hover);
	border-color: var(--barn-red-hover);
	color: var(--parchment);
}

.btn-secondary,
.button--outline {
	background: transparent;
	border-color: var(--hairline-on-navy);
	color: var(--parchment);
}

a.btn-secondary:visited,
a.button--outline:visited {
	color: var(--parchment);
}

.btn-secondary:hover,
.btn-secondary:focus,
.button--outline:hover,
.button--outline:focus {
	border-color: var(--parchment);
	color: var(--parchment);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 3px;
}

/* Italic serif label above section headings ("Our Mission", "Our Charter"). */
.section-label {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.02rem;
	color: var(--steel-blue);
	margin: 0 0 10px;
}

.section-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
	line-height: 1.25;
	color: var(--ink-navy);
	margin: 0 0 28px;
	max-width: 20ch;
}

/* --------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--parchment);
	border-top: 4px solid var(--barn-red);
	border-bottom: 1px solid var(--hairline);
}

/* Sit below the WP admin bar when logged in (32px, 46px under 783px). */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 18px var(--pad-x);
}

/* In-page anchors stop clear of the pinned header. */
#mission,
#charter,
#contribute {
	scroll-margin-top: var(--header-offset);
}

.site-branding {
	min-width: 0;
}

.site-branding .custom-logo-link {
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 0;
	text-decoration: none;
}

/* Bundled shield beside the text wordmark (until a logo is uploaded). */
.site-branding .site-mark {
	display: block;
	height: 50px;
	width: auto;
	flex-shrink: 0;
}

.site-branding img.custom-logo {
	display: block;
	height: 44px;
	width: auto;
}

/* Text wordmark — rendered until a logo is uploaded in Site Settings. */
.wordmark {
	display: flex;
	align-items: baseline;
	gap: 8px;
	line-height: 1.2;
	font-family: var(--serif);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: 0.01em;
	color: var(--ink-navy);
	text-decoration: none;
	white-space: nowrap;
}

a.wordmark:visited,
a.wordmark:hover,
a.wordmark:focus {
	color: var(--ink-navy);
}

.wordmark__tag {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 0.72rem;
	color: var(--steel-blue);
	white-space: nowrap;
}

/* Keep the text branding for screen readers; the wordmark carries it visually. */
.site-branding .site-title,
.site-branding .site-description {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-shrink: 0;
}

/* Two anchor links from the Primary menu (Mission / What We Believe). */
.main-navigation {
	display: block;
	float: none;
	width: auto;
}

.main-navigation ul,
.main-navigation ul ul {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: static;
	float: none;
	box-shadow: none;
	background: transparent;
}

.main-navigation li {
	position: static;
	margin: 0;
}

.main-navigation a,
.main-navigation a:visited {
	display: block;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	padding: 4px 0;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--barn-red);
}

.main-navigation .menu-toggle {
	display: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.header-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.header-phone:visited {
	color: var(--ink);
}

.header-phone:hover,
.header-phone:focus {
	color: var(--barn-red);
}

.header-phone .icon-phone {
	display: block;
	width: 16px;
	height: 16px;
	color: var(--barn-red);
	flex-shrink: 0;
}

.donate-button {
	display: inline-block;
	padding: 10px 18px;
	background: var(--barn-red);
	border: 1px solid var(--barn-red);
	color: var(--parchment);
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--radius);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.donate-button:visited {
	color: var(--parchment);
}

.donate-button:hover,
.donate-button:focus {
	background: var(--barn-red-hover);
	border-color: var(--barn-red-hover);
	color: var(--parchment);
}

.donate-button:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Announcement bar (Site Settings, off by default)
 * ------------------------------------------------------------------------ */

.announcement-bar {
	display: block;
	background: var(--barn-red);
	color: var(--parchment);
	text-align: center;
	padding: 10px 16px;
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
}

a.announcement-bar:visited,
a.announcement-bar:hover {
	color: var(--parchment);
}

/* --------------------------------------------------------------------------
 * Sections (shared shell)
 * ------------------------------------------------------------------------ */

.landing > section {
	padding: 84px 0;
}

/* --------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.landing > .hero {
	position: relative;
	isolation: isolate;
	background: var(--ink-navy);
	background-image: radial-gradient(ellipse at 15% 0%, var(--ink-navy-light) 0%, var(--ink-navy) 55%, var(--ink-navy-deep) 100%);
	color: var(--parchment);
	padding: 108px 0 100px;
	overflow: hidden;
}

.hero .wrap {
	position: relative;
}

/* Faint white shield off the right edge; hidden once a Background Photo is set. */
.hero__watermark {
	position: absolute;
	top: 50%;
	right: max(-40px, calc((100vw - var(--wrap)) / 2 - 60px));
	height: 150%;
	width: auto;
	transform: translateY(-50%);
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
}

/* Optional photo (ACF), blended into the navy. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ink-navy); /* blend backdrop for the soft-light photo */
	pointer-events: none;
}

/* Luminosity blend = the photo's light and shade in the band's navy (a
   duotone), so the Capitol reads clearly while the palette stays brand. The
   gradient keeps the left text column dark enough for the parchment type. */
.hero__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
	mix-blend-mode: luminosity;
	opacity: 0.55;
}

.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(2, 36, 76, 0.92) 0%, rgba(2, 36, 76, 0.55) 48%, rgba(2, 36, 76, 0.1) 100%),
		linear-gradient(180deg, rgba(2, 36, 76, 0.35) 0%, rgba(2, 36, 76, 0) 30%, rgba(2, 36, 76, 0.45) 100%);
}

.hero__inner {
	max-width: 640px;
}

.hero__title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(2.4rem, 4.4vw, 3.5rem);
	line-height: 1.14;
	color: var(--parchment);
	margin: 0 0 22px;
}

/* Short red rule between headline and lede. */
.hero__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	background: var(--barn-red);
	margin-top: 24px;
}

.hero__lede {
	font-size: 1.12rem;
	line-height: 1.6;
	max-width: 50ch;
	color: var(--parchment-86);
	margin: 0 0 34px;
}

.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* --------------------------------------------------------------------------
 * Mission (two columns)
 * ------------------------------------------------------------------------ */

.landing > .mission {
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

.mission__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 60px;
}

.mission__body p {
	font-size: 1.08rem;
	line-height: 1.6;
	margin: 0 0 18px;
	max-width: 62ch;
}

.mission__body a,
.mission__body a:visited {
	color: var(--steel-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mission__closing {
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--ink-soft);
	border-left: 3px solid var(--brass);
	padding-left: 18px;
	margin: 0;
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
 * Charter (numbered beliefs)
 * ------------------------------------------------------------------------ */

.charter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline);
	counter-reset: charter;
}

.charter__item {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 24px;
	align-items: baseline;
	padding: 26px 0;
	border-bottom: 1px solid var(--hairline);
	counter-increment: charter;
}

.charter__item::before {
	content: counter(charter, upper-roman) ".";
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--brass);
}

.charter__text {
	margin: 0;
	font-size: 1.06rem;
	line-height: 1.55;
	max-width: 58ch;
}

/* --------------------------------------------------------------------------
 * Statement band (pull quote)
 * ------------------------------------------------------------------------ */

.landing > .statement {
	position: relative;
	isolation: isolate;
	background: var(--ink-navy);
	background-image: radial-gradient(ellipse at 50% 100%, var(--ink-navy-light) 0%, var(--ink-navy) 60%);
	color: var(--parchment);
	padding: 104px 0 112px;
	text-align: center;
	overflow: hidden;
}

.statement__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ink-navy); /* blend backdrop — see .hero__bg */
	pointer-events: none;
}

.statement__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
	mix-blend-mode: luminosity;
	opacity: 0.32;
}

.statement__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 50%, rgba(2, 36, 76, 0.7) 0%, rgba(2, 36, 76, 0.15) 70%),
		linear-gradient(180deg, rgba(2, 36, 76, 0.4) 0%, rgba(2, 36, 76, 0) 35%, rgba(2, 36, 76, 0.4) 100%);
}

.statement__mark {
	display: block;
	height: 76px;
	width: auto;
	margin: 0 auto 30px;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25));
}

.statement__inner {
	max-width: 680px;
	margin: 0 auto;
}

.statement__quote {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	line-height: 1.35;
	color: var(--parchment);
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.statement__cite {
	display: block;
	font-family: var(--sans);
	font-style: normal;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--parchment-60);
}

/* --------------------------------------------------------------------------
 * Contribute (two columns: copy left, form card right)
 * ------------------------------------------------------------------------ */

.landing > .contribute {
	border-top: 1px solid var(--hairline);
}

.contribute__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 60px;
	align-items: start;
}

.contribute__intro {
	font-size: 1.08rem;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 48ch;
}

.contribute__notice {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--ink-soft);
	border-left: 3px solid var(--brass);
	padding-left: 18px;
	margin: 0;
	max-width: 52ch;
}

.contribute__card {
	background: var(--card-bg);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: clamp(24px, 3vw, 40px);
}

/* Stripe Buy Button / Payment Link snippet pasted in ACF. */
.contribute__embed {
	display: flex;
	justify-content: center;
}

.contribute__embed stripe-buy-button {
	display: block;
	width: 100%;
}

/* Visible while Stripe is not yet connected — see inc/landing-page.php. */
.contribute__pending {
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ink);
	background: var(--notice-bg);
	border: 1px solid rgba(176, 141, 43, 0.5);
	border-radius: var(--radius);
	padding: 12px 16px;
	margin: 0 0 22px;
}

.contribute__fineprint {
	margin: 22px 0 0;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* ----- Gravity Forms (plugin CSS disabled; the theme owns the markup) ---- */

.contribute .gform_wrapper {
	margin: 0;
	text-align: left;
}

.contribute .gform_wrapper form {
	margin: 0;
}

.contribute .gform_heading {
	display: none;
}

.contribute .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.contribute .gfield {
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}

.contribute .gfield--width-half,
.contribute .gfield.gf-half {
	grid-column: auto / span 1;
}

/* Visually hidden labels (when a field opts in), kept for AT. */
.contribute .hidden_label > .gfield_label,
.contribute .hidden_label > legend.gfield_label,
.contribute .gfield_label.hidden_label,
.contribute .gform-field-label.hidden_label,
.contribute .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

.contribute .gfield_label,
.contribute legend.gfield_label {
	display: block;
	float: none;
	width: auto;
	padding: 0;
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 8px;
}

.contribute .gfield_required {
	color: var(--barn-red);
	margin-left: 2px;
	font-size: inherit;
}

.contribute .gfield_required_text {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}

.contribute .ginput_container input[type="text"],
.contribute .ginput_container input[type="email"],
.contribute .ginput_container input[type="tel"],
.contribute .ginput_container input[type="number"],
.contribute .ginput_container select,
.contribute .ginput_container textarea {
	display: block;
	width: 100%;
	background: var(--field-bg);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: 13px 14px;
	font-family: var(--sans);
	font-size: 0.98rem;
	line-height: normal;
	color: var(--ink);
	-webkit-appearance: none;
	appearance: none;
}

.contribute .ginput_container select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231d1b16' stroke-width='1.5'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}

.contribute .ginput_container input::placeholder,
.contribute .ginput_container textarea::placeholder {
	color: rgba(29, 27, 22, 0.45);
	opacity: 1;
}

.contribute .ginput_container input:focus,
.contribute .ginput_container select:focus,
.contribute .ginput_container textarea:focus {
	outline: 2px solid var(--steel-blue);
	outline-offset: -1px;
	border-color: var(--steel-blue);
	background: #fff;
}

/* GF renders choice + complex fields as fieldsets — neutralize browser chrome. */
.contribute fieldset.gfield {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Complex fields (address, card): sub-inputs in their own grid, sub-labels below. */
.contribute .ginput_complex {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 14px;
}

.contribute .ginput_complex > span {
	display: block;
	min-width: 0;
}

.contribute .ginput_complex .ginput_full,
.contribute .ginput_complex .address_line_1,
.contribute .ginput_complex .address_line_2 {
	grid-column: 1 / -1;
}

.contribute .ginput_complex .gform-field-label--type-sub {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

/* ----- Contribution amount: radio choices as a button grid ----- */

.contribute .gfield--type-product.gfield--input-type-radio .gfield_radio {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.contribute .gfield--type-product.gfield--input-type-radio .gchoice {
	position: relative;
	margin: 0;
}

.contribute .gfield--type-product.gfield--input-type-radio input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.contribute .gfield--type-product.gfield--input-type-radio .gchoice label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 10px 8px;
	background: var(--field-bg);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	font-family: var(--serif);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-navy);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.contribute .gfield--type-product.gfield--input-type-radio input[type="radio"]:hover + label {
	border-color: var(--ink-navy);
}

.contribute .gfield--type-product.gfield--input-type-radio input[type="radio"]:checked + label {
	background: var(--ink-navy);
	border-color: var(--ink-navy);
	color: var(--parchment);
}

.contribute .gfield--type-product.gfield--input-type-radio input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--brass);
	outline-offset: 2px;
}

/* "Other Amount" — GF prints a currency symbol span before the input. */
.contribute .ginput_container_product_price {
	display: flex;
	align-items: center;
	gap: 10px;
}

.contribute .ginput_container_product_price .ginput_product_price_label {
	font-family: var(--serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ink-navy);
}

.contribute .ginput_container_product_price input {
	flex: 1 1 auto;
}

/* Total — GF renders the amount as a read-only <input class="ginput_total">. */
.contribute .gfield--type-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

.contribute .gfield--type-total .gfield_label {
	margin: 0;
}

.contribute .ginput_container_total .ginput_total,
.contribute .ginput_container_total input.ginput_total,
.contribute .ginput_container input[type="text"].ginput_total {
	display: inline-block;
	width: auto;
	max-width: 100%;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: right;
	color: var(--ink-navy);
	pointer-events: none;
}

.contribute .ginput_container_total input.ginput_total:focus {
	outline: 0;
	background: transparent;
}

/* Stripe card element rendered inside an <iframe>-hosting div; box it like an input. */
.contribute .ginput_container_creditcard .StripeElement,
.contribute .ginput_container_creditcard .ginput_card_details,
.contribute .ginput_container_creditcard--pending {
	display: block;
	width: 100%;
	background: var(--field-bg);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: 13px 14px;
	font-size: 0.98rem;
	line-height: normal;
	color: var(--ink);
}

.contribute .ginput_container_creditcard .StripeElement--focus {
	outline: 2px solid var(--steel-blue);
	outline-offset: -1px;
	border-color: var(--steel-blue);
	background: #fff;
}

.contribute .ginput_container_creditcard .StripeElement--invalid {
	border-color: var(--barn-red);
}

.contribute .ginput_container_creditcard--pending {
	color: rgba(29, 27, 22, 0.5);
	border-style: dashed;
}

/* ----- Certification checkbox (GF consent field) ----- */

.contribute .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.contribute .ginput_container_consent input[type="checkbox"],
.contribute .gfield_checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	background: var(--field-bg);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contribute .ginput_container_consent input[type="checkbox"]::before,
.contribute .gfield_checkbox input[type="checkbox"]::before {
	content: "";
	width: 11px;
	height: 11px;
	transform: scale(0);
	transition: transform 0.12s ease;
	background: var(--parchment);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.contribute .ginput_container_consent input[type="checkbox"]:checked,
.contribute .gfield_checkbox input[type="checkbox"]:checked {
	background: var(--ink-navy);
	border-color: var(--ink-navy);
}

.contribute .ginput_container_consent input[type="checkbox"]:checked::before,
.contribute .gfield_checkbox input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.contribute .ginput_container_consent input[type="checkbox"]:focus-visible,
.contribute .gfield_checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--steel-blue);
	outline-offset: 2px;
}

.contribute .ginput_container_consent label,
.contribute .gfield_consent_label {
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	cursor: pointer;
	margin: 0;
}

.contribute .gfield_description {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--ink-soft);
	margin-top: 6px;
}

/* Validation */
.contribute .gform_validation_errors {
	background: rgba(140, 29, 43, 0.08);
	border: 1px solid var(--barn-red);
	border-radius: var(--radius);
	padding: 12px 16px;
	margin-bottom: 18px;
}

.contribute .gform_validation_errors h2 {
	font-family: var(--sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--barn-red);
	margin: 0;
}

.contribute .gform_validation_errors ol {
	display: none;
}

.contribute .gfield_validation_message,
.contribute .validation_message {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--barn-red);
	margin-top: 6px;
}

.contribute .gfield_error .ginput_container input,
.contribute .gfield_error .ginput_container select,
.contribute .gfield_error .ginput_container textarea {
	border-color: var(--barn-red);
}

/* Honeypot — GF hides it inline; belt and braces. */
.contribute .gform_validation_container {
	display: none !important;
}

/* Submit — outside the fields grid, so restate the gap. */
.contribute .gform_footer {
	margin: 22px 0 0;
	padding: 0;
}

.contribute .gform_footer input[type="submit"],
.contribute .gform_footer button {
	display: block;
	width: 100%;
	background: var(--barn-red);
	color: var(--parchment);
	border: 1px solid var(--barn-red);
	border-radius: var(--radius);
	padding: 16px 24px;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contribute .gform_footer input[type="submit"]:hover,
.contribute .gform_footer input[type="submit"]:focus,
.contribute .gform_footer button:hover,
.contribute .gform_footer button:focus {
	background: var(--barn-red-hover);
	border-color: var(--barn-red-hover);
}

.contribute .gform_footer input[type="submit"]:focus-visible,
.contribute .gform_footer button:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 2px;
}

.contribute .gform_footer .gform_button--pending,
.contribute .gform_footer .gform_button--pending:hover,
.contribute .gform_footer .gform_button--pending:focus {
	background: var(--parchment-dim);
	border-color: var(--hairline);
	color: var(--ink-soft);
	cursor: not-allowed;
}

/* GF's AJAX spinner has no place here (non-AJAX form). */
.contribute .gform_ajax_spinner {
	display: none;
}

/* Confirmation */
.contribute .gform_confirmation_wrapper {
	margin: 0;
}

.contribute .gform_confirmation_message {
	font-family: var(--serif);
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--ink-navy);
}

.contribute .gform_confirmation_message p {
	margin: 0;
}

.contribute .gform_confirmation_message p + p {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
 * 404
 * ------------------------------------------------------------------------ */

.error-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--ink-navy);
	color: var(--parchment);
	text-align: center;
	padding: clamp(72px, 9vw, 140px) var(--pad-x);
}

.error-404__code {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(3.5rem, 9vw, 7.5rem);
	line-height: 1;
	color: var(--brass);
	margin: 0 0 clamp(12px, 1.5vw, 20px);
}

.error-404__title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
	line-height: 1.2;
	color: var(--parchment);
	margin: 0;
}

.error-404__message {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--parchment-86);
	max-width: 34em;
	margin: 16px 0 0;
}

.error-404__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: clamp(28px, 3vw, 40px);
}

.error-404__home,
.error-404__home:visited {
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--parchment-86);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.error-404__home:hover,
.error-404__home:focus {
	color: var(--parchment);
	border-bottom-color: var(--hairline-on-navy);
}

/* --------------------------------------------------------------------------
 * Interior content pages (Privacy Policy, etc.)
 *
 * Scoped with :not(.landing) so the front page's full-bleed sections are
 * untouched.
 * ------------------------------------------------------------------------ */

.site-main:not(.landing) {
	max-width: 780px;
	margin: 0 auto;
	padding: clamp(36px, 4vw, 56px) 24px clamp(48px, 5vw, 72px);
}

.site-main:not(.landing) .entry-header {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.site-main:not(.landing) .entry-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
	line-height: 1.2;
	color: var(--ink-navy);
	margin: 0;
}

.site-main:not(.landing) .entry-content {
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--ink);
}

.site-main:not(.landing) .entry-content > * + * {
	margin-top: 1.15em;
}

.site-main:not(.landing) .entry-content h2,
.site-main:not(.landing) .entry-content h3,
.site-main:not(.landing) .entry-content h4 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink-navy);
	margin-top: 1.9em;
	margin-bottom: 0.4em;
}

.site-main:not(.landing) .entry-content h2 {
	font-size: 1.5rem;
}

.site-main:not(.landing) .entry-content h3 {
	font-size: 1.2rem;
}

.site-main:not(.landing) .entry-content h4 {
	font-family: var(--sans);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.site-main:not(.landing) .entry-content a,
.site-main:not(.landing) .entry-content a:visited {
	color: var(--steel-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	overflow-wrap: break-word;
}

.site-main:not(.landing) .entry-content a:hover,
.site-main:not(.landing) .entry-content a:focus {
	color: var(--barn-red);
}

.site-main:not(.landing) .entry-content ul,
.site-main:not(.landing) .entry-content ol {
	padding-left: 1.35em;
}

.site-main:not(.landing) .entry-content li + li {
	margin-top: 0.4em;
}

.site-main:not(.landing) .entry-content blockquote {
	border-left: 3px solid var(--brass);
	padding-left: 1.15em;
	margin-left: 0;
	color: var(--ink-soft);
}

.site-main:not(.landing) .entry-content img {
	max-width: 100%;
	height: auto;
}

.site-main:not(.landing) .entry-footer {
	margin-top: 2.5em;
	font-size: 0.8rem;
	color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

.site-footer {
	background: var(--ink-navy-deep);
	color: var(--parchment-86);
	border-top: 4px solid var(--barn-red);
	padding: 44px 0;
	font-size: 0.86rem;
}

.site-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 20px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--pad-x);
}

.site-footer__left,
.site-footer__right {
	min-width: 0;
}

/* The _s base centres footer text; the comp is left-aligned. */
.site-footer__left,
.site-footer__left .footer-logo,
.site-footer__left .paid-for-disclaimer,
.site-footer__left .site-info {
	text-align: left;
	justify-content: flex-start;
}

.site-footer__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}

.footer-logo {
	line-height: 0;
}

.footer-logo a {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}

.footer-logo img.footer-logo__img,
.footer-logo img {
	display: block;
	height: 76px;
	width: auto;
}

.footer-logo .wordmark {
	display: inline-block;
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--parchment);
}

/* The base sheet boxes the disclaimer (border, uppercase, bold); we want a
   plain sentence-case paragraph like the comp. */
.paid-for-disclaimer {
	display: block;
	max-width: 64ch;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	font-size: 0.86rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--parchment-86);
}

.footer-social-links {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-social-links a,
.footer-social-links a:visited {
	color: var(--parchment-86);
	display: block;
	line-height: 0;
}

.footer-social-links a:hover,
.footer-social-links a:focus {
	color: var(--parchment);
}

.footer-side-text {
	margin: 0;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--parchment-86);
}

/* Copyright + privacy link: one quiet row under the disclaimer. */
.site-footer .site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-top: 12px;
	font-size: 0.78rem;
	color: var(--parchment-60);
}

.footer-legal-links a,
.footer-legal-links a:visited {
	color: var(--parchment-60);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus {
	color: var(--parchment);
	border-bottom-color: var(--hairline-on-navy);
}

.site-info__copyright + .footer-legal-links::before {
	content: "•";
	margin-right: 12px;
	color: currentcolor;
}

.footer-source-note {
	margin: 6px 0 0;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--parchment-60);
}

/* --------------------------------------------------------------------------
 * Scroll reveal (assets/js/landing.js adds .has-reveal only when it can run)
 * ------------------------------------------------------------------------ */

.has-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.65s ease, transform 0.65s ease;
	transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.contribute .gfield--type-product.gfield--input-type-radio .gfield_radio {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	:root {
		--pad-x: 20px;
		--header-offset: 88px;
	}

	.site-branding .site-mark {
		height: 42px;
	}

	.hero__watermark {
		right: -30%;
		opacity: 0.06;
	}

	.statement__mark {
		height: 60px;
		margin-bottom: 24px;
	}

	.footer-logo img.footer-logo__img,
	.footer-logo img {
		height: 60px;
	}

	.site-header__inner {
		padding: 14px var(--pad-x);
		gap: 16px;
	}

	.mission__grid,
	.contribute__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.landing > .statement {
		padding: 90px 0;
	}

	.landing > .hero {
		padding: 84px 0 76px;
	}

	.site-footer__right {
		align-items: flex-start;
		text-align: left;
	}
}

@media (max-width: 700px) {
	.wordmark__tag {
		display: none;
	}

	.site-header__right {
		gap: 18px;
	}

	.main-navigation ul {
		gap: 18px;
	}
}

@media (max-width: 600px) {
	.contribute .gform_fields {
		grid-template-columns: 1fr;
	}

	.contribute .gfield--width-half,
	.contribute .gfield.gf-half {
		grid-column: 1 / -1;
	}

	.contribute .ginput_complex {
		grid-template-columns: 1fr;
	}

	.contribute .gfield--type-product.gfield--input-type-radio .gfield_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__ctas .btn-primary,
	.hero__ctas .btn-secondary {
		text-align: center;
	}

	.header-phone .header-phone__number {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		width: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
	}
}

@media (max-width: 480px) {
	/* Header button is off while the form is suspended, so both links fit;
	   hide the nav only when the button is present. */
	.site-header__actions:not(:empty) ~ .main-navigation,
	.site-header__right:has(.donate-button) .main-navigation {
		display: none;
	}

	.main-navigation ul {
		gap: 14px;
	}

	.main-navigation a,
	.main-navigation a:visited {
		font-size: 0.85rem;
	}

	.wordmark {
		font-size: 1.2rem;
	}

	.site-branding .site-mark {
		height: 36px;
	}

	.site-branding .custom-logo-link {
		gap: 8px;
	}

	.donate-button {
		padding: 9px 14px;
		font-size: 0.85rem;
	}
}