/*
 * VETEFITS — only what theme.json cannot express.
 * Audience skews older and includes disabled veterans: visible focus, big targets,
 * no motion that cannot be turned off.
 */

/* --------------------------------------------------------------- form fields
 * An empty text field is identified by its edge and nothing else — there is no
 * text in it to read — so that edge is what WCAG 2.2 SC 1.4.11 grades, and the
 * palette's `border` token is not strong enough to carry it. Measured live on
 * /register/ and /contact/ before this existed (#265):
 *
 *     border #cfd9e6 vs the page #faf7f2 .... 1.33:1
 *     border #cfd9e6 vs the fill #ffffff .... 1.43:1
 *     fill   #ffffff vs the page #faf7f2 .... 1.07:1     needs 3:1
 *
 * Every field on both forms was effectively edgeless until you focused it, and
 * the text audit could never see it: an empty field has no text to grade.
 *
 * A separate token rather than a stronger `border` preset, because the same
 * preset draws card outlines, row rules and the portrait frame, and those are
 * decoration — darkening them would make the page shout. This one is
 * information. It clears 3:1 against every ground in the palette, so it stays
 * correct if a form is ever placed on cream, surface or sand:
 *
 *     vs fill #ffffff 4.26:1 · paper #faf7f2 3.99:1 · cream #f3ede2 3.66:1
 *     surface #f5f7fa 3.97:1 · surface-alt #e8edf4 3.62:1 · sand #e7dcc9 3.14:1
 *
 * Graded by tools/qa/nontext-contrast.mjs. Keep the two in step: that check
 * fails the build if this drops back under 3:1.
 */
:root { --vf-field-border: #6b7c93; }

/* ------------------------------------------------- full-bleed section seams
 * WordPress puts a block-gap margin between every top-level block, which shows
 * as a white seam between full-width colored sections and under the header.
 * Full-bleed sections are supposed to butt together.
 */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.entry-content > .alignfull { margin-block-start: 0; }
.entry-content > .alignfull { margin-block-end: 0; }

/* ------------------------------------------------------------ line measure
 * Long headings across a 76rem container are unreadable. Cap the measure and
 * let the section decide alignment.
 */
.vetefits-measure { max-width: 34ch; }
.vetefits-measure-wide { max-width: 46ch; }
.has-text-align-center .vetefits-measure,
.vetefits-measure.has-text-align-center { margin-inline: auto; }

/* ----------------------------------------------------------------- hero grid */
.vetefits-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
@media (max-width: 900px) {
	.vetefits-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.vetefits-hero h1 { max-width: 16ch; text-wrap: balance; }
.vetefits-hero__lead { max-width: 52ch; }
/* Hero columns stack once the two halves stop working side by side. Core already
 * stacks below 782px, so this only has to cover 782-900. */
@media (min-width: 782px) and (max-width: 900px) {
	.vetefits-hero__cols { flex-wrap: wrap !important; }
	.vetefits-hero__cols > .wp-block-column { flex-basis: 100% !important; }
}

/* Section headings read badly across a 76rem measure. */
.entry-content h2 { text-wrap: balance; }
.entry-content .has-text-align-center > h2,
.entry-content h2.has-text-align-center { max-width: 22ch; margin-inline: auto; }
.entry-content p.has-text-align-center { max-width: 62ch; margin-inline: auto; }

/* --------------------------------------------------------------- event card
 * The right half of the hero. Substance, not decoration: it answers "what is
 * this day" before the visitor has scrolled anywhere.
 */
.vetefits-eventcard {
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(232,184,75,.32);
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	backdrop-filter: blur(2px);
}
.vetefits-eventcard__date {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--gold);
	line-height: 1;
}
.vetefits-eventcard__day {
	font-size: clamp(3.25rem, 6vw, 4.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.vetefits-eventcard__mon {
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}
.vetefits-eventcard hr {
	border: 0;
	height: 3px;
	width: 64px;
	background: var(--wp--preset--gradient--gold-bar);
	margin: 1.1rem 0;
}
.vetefits-eventcard p { margin: 0 0 .7rem; }
.vetefits-eventcard p:last-child { margin-bottom: 0; }
/* The global link color is navy-light, which is very nearly the navy the card
 * sits on. Same fix, same reasoning, as .vetefits-footer a. */
.vetefits-eventcard a { color: var(--wp--preset--color--on-navy); }
.vetefits-eventcard a:hover { color: var(--wp--preset--color--gold); }
.vetefits-eventcard__links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
}

/* ---------------------------------------------------------------- skip link
 * Core provides the only skip link. Make it impossible to miss when focused.
 */
.skip-link:focus {
	background: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--navy-deep) !important;
	padding: 1rem 1.5rem !important;
	font-weight: 700;
	text-decoration: none;
	outline: 3px solid var(--wp--preset--color--navy-deep);
	outline-offset: 2px;
	z-index: 999999;
}

/* ------------------------------------------------------------- focus visible
 * One consistent, unmistakable focus ring everywhere. Gold on navy, navy on light.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--navy-light);
	outline-offset: 2px;
	border-radius: 3px;
}
.has-navy-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.has-navy-deep-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.has-navy-fade-gradient-background :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

/* ------------------------------------------------------------------- targets
 * WCAG 2.2 AA target size (24px min); we aim well past it for shaky hands.
 */
.wp-block-button__link,
.wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------- cards */
.wp-block-group.is-style-vetefits-card,
.wp-block-group.is-style-vetefits-card-link {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
}
.wp-block-group.is-style-vetefits-card-link {
	position: relative;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* The whole card is the target: the heading link is stretched across it, so the
 * accessible name stays on the real link and there is no duplicate tab stop. */
.wp-block-group.is-style-vetefits-card-link a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.wp-block-group.is-style-vetefits-card-link:hover {
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--gold-deep);
}
.wp-block-group.is-style-vetefits-card-link:focus-within {
	outline: 3px solid var(--wp--preset--color--navy-light);
	outline-offset: 2px;
}
.wp-block-group.is-style-vetefits-card-link a { text-decoration: none; }
.wp-block-group.is-style-vetefits-card-link a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ eyebrows */
.vetefits-eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-small);
	font-family: var(--wp--preset--font-family--body);
}

/* --------------------------------------------------------- gold rule / lists */
.wp-block-separator.is-style-vetefits-gold {
	height: 4px;
	border: 0;
	width: 96px;
	opacity: 1;
	background: var(--wp--preset--gradient--gold-bar);
	margin-inline: 0;
}
.is-content-justification-center .wp-block-separator.is-style-vetefits-gold,
.has-text-align-center .wp-block-separator.is-style-vetefits-gold {
	margin-inline: auto;
}
.wp-block-list.is-style-vetefits-checks {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-vetefits-checks li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: .75rem;
}
/* A link that is the whole list item is a standalone target, not a link inside a
 * sentence — it needs the 24px. */
.wp-block-list.is-style-vetefits-checks li > a:only-child {
	display: inline-block;
	padding-block: .2rem;
}
.wp-block-list.is-style-vetefits-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 1.1rem;
	height: .6rem;
	border-left: 3px solid var(--wp--preset--color--gold-deep);
	border-bottom: 3px solid var(--wp--preset--color--gold-deep);
	transform: rotate(-45deg);
}
/* On navy the deep gold loses contrast against the background — go brighter. */
.has-navy-background-color .wp-block-list.is-style-vetefits-checks li::before,
.has-navy-deep-background-color .wp-block-list.is-style-vetefits-checks li::before,
.has-navy-fade-gradient-background .wp-block-list.is-style-vetefits-checks li::before {
	border-color: var(--wp--preset--color--gold);
}

/* ------------------------------------------------------------ ghost buttons */
.wp-block-button.is-style-vetefits-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--base);
	border: 2px solid rgba(255,255,255,.55);
}
.wp-block-button.is-style-vetefits-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-vetefits-ghost .wp-block-button__link:focus {
	background: rgba(255,255,255,.12);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

/* A ghost button on a light section (paper, cream, sand, white, surface).
 * The default above is white on navy; on /partners/ it sat on paper and was
 * invisible (owner, 2026-10-12). Navy text and outline here, unless the button
 * is itself inside a dark block nested in the light section. */
:is(.has-paper-background-color, .has-cream-background-color, .has-sand-background-color,
    .has-base-background-color, .has-surface-background-color, .has-surface-alt-background-color,
    .has-paper-fade-gradient-background)
	.wp-block-button.is-style-vetefits-ghost:not(:is(.has-navy-background-color, .has-navy-deep-background-color,
	    .has-navy-light-background-color, .has-navy-tint-background-color, .has-navy-fade-gradient-background,
	    .has-red-background-color, .has-red-deep-background-color) .wp-block-button) .wp-block-button__link {
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}
:is(.has-paper-background-color, .has-cream-background-color, .has-sand-background-color,
    .has-base-background-color, .has-surface-background-color, .has-surface-alt-background-color,
    .has-paper-fade-gradient-background)
	.wp-block-button.is-style-vetefits-ghost:not(:is(.has-navy-background-color, .has-navy-deep-background-color,
	    .has-navy-light-background-color, .has-navy-tint-background-color, .has-navy-fade-gradient-background,
	    .has-red-background-color, .has-red-deep-background-color) .wp-block-button) .wp-block-button__link:is(:hover, :focus) {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------- brand lockup
 * Emblem + wordmark. The badge carries its own micro-typography, which is only
 * texture at 58px — the wordmark beside it does the reading. The badge is
 * therefore decorative and the accessible name comes from the site title link.
 */
/* `nowrap` kept the emblem and wordmark on one line — right up to the point
 * where they no longer fit. At 200% text zoom the wordmark alone is 240px on a
 * 320px screen, and `nowrap` turns that into a sideways scrollbar on every
 * page. Wrapping is the correct reflow, and it is inert at ordinary sizes
 * because the lockup fits on one line there anyway. `min-width: 0` lets the
 * title shrink far enough for the wordmark to break if one line is still too
 * wide. Found by the live check at 200% — the offline harness renders the entry
 * content alone, so it structurally cannot see the header. (#78) */
.vetefits-lockup { flex-wrap: wrap; }
.vetefits-lockup > * { min-width: 0; }
.vetefits-lockup .wp-block-site-logo img {
	display: block;
	height: 58px;
	width: 58px;
	border-radius: 50%;
}
.vetefits-lockup .wp-block-site-logo a { display: block; line-height: 0; }
.vetefits-lockup__tag { white-space: nowrap; }
@media (max-width: 600px) {
	.vetefits-lockup .wp-block-site-logo img { height: 44px; width: 44px; }
	.vetefits-lockup .wp-block-site-title { font-size: 1.3rem !important; }
	.vetefits-lockup__tag { display: none; }
}

/* -------------------------------------------------------------------- header */
.vetefits-header {
	border-bottom: 3px solid var(--wp--preset--color--gold);
}
.vetefits-header .wp-block-navigation__responsive-container-open,
.vetefits-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
	padding: .5rem;
}
.vetefits-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--navy-deep);
	padding-top: 4rem;
}
.vetefits-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
}
/* The site title is the home link; keep it unmistakable and never underlined. */
.vetefits-header .wp-block-site-title a { text-decoration: none; }

/* --------------------------------------------------------------------- hero
 * The hero sits over an abstract Front Range ridgeline drawn as engraved contour
 * lines (assets/brand/hero-ridge.svg, generated by tools/build/ridge.py). It says
 * Colorado and "carefully made" without a flag, an eagle or a stock photograph,
 * and it is ours — regenerable from the script.
 *
 * A scrim over the top two thirds keeps the headline comfortably past AA; the
 * ridges only occupy the lower band where nothing but padding sits.
 *
 * At 640px and below, inc/hero-ridge.php swaps in a raster of the same SVG
 * (assets/editorial/ridge-1024.avif|webp) and preloads it, because on a
 * text-only page hero the ridge is the LCP image. Keep this rule's url() as the
 * SVG; the phone override is inline CSS printed after this file.
 */
.vetefits-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.vetefits-hero::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: min(24%, 12rem);
	background: url("../brand/hero-ridge.svg") bottom center / cover no-repeat;
	opacity: .5;
	z-index: -2;
	pointer-events: none;
	/* Feather the top edge so the ridges emerge from the sky instead of starting
	 * at a visible horizontal seam. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
	        mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}
/* Scrim: fades the ridges out under the copy so contrast never depends on where
 * a peak happens to land. */
.vetefits-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(11,37,69,.55) 0%,
		rgba(9,29,56,.25) 55%,
		rgba(4,18,42,.10) 100%);
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 780px) {
	/* On a phone the copy runs the full height, so the ridges become a thin
	 * horizon band rather than a backdrop. */
	.vetefits-hero::before { height: 16%; opacity: .45; }
}
/* Hero CTAs sit side by side wherever there is room; they stack on small screens. */
.vetefits-hero .wp-block-buttons { gap: 0.75rem 1rem; }
@media (min-width: 1100px) {
	.vetefits-hero .wp-block-button__link { font-size: 1.1875rem; padding-inline: 1.4rem; }
}

/* ------------------------------------------------------- compact event signal
 * The hero used to carry a full event card, which duplicated the November 7
 * section below it and blunted that moment. One line is enough here.
 */
.vetefits-datechip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--on-navy);
}
.vetefits-datechip__k {
	display: inline-block;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-deep);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .8125rem;
	padding: .3rem .6rem;
	border-radius: 3px;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ numbers */
.vetefits-step-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--gold-deep);
}

/* ------------------------------------------------------------------- footer */
.vetefits-footer a { color: var(--wp--preset--color--on-navy); }
.vetefits-footer a:hover { color: var(--wp--preset--color--gold); }

/* ----------------------------------------------------------- disclaimer note */
.vetefits-disclaimer {
	border-left: 4px solid var(--wp--preset--color--gold-deep);
	padding-left: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}
/* On the navy footer the ink-muted gray lands at ~2.1:1. Use the on-navy tone. */
.vetefits-footer .vetefits-disclaimer,
.vetefits-footer .vetefits-disclaimer p { color: var(--wp--preset--color--on-navy); }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.wp-block-group.is-style-vetefits-card-link:hover { transform: none; }
}

/* ------------------------------------------------------------- print sanity
 * On paper a button is a colored box that goes nowhere, so the calls to action
 * are hidden and the facts around them (date, hours, address, what to bring,
 * the accessibility caveats) print as ordinary text.
 *
 * `!important` is load-bearing (#245). This rule used to be
 * `.wp-block-button { display: none }`, one class. WordPress core's buttons
 * stylesheet, printed on every page ahead of this file, says
 * `.wp-block-buttons > .wp-block-button { display: inline-block }`: two
 * classes, so core won and both "Register free" buttons on /event/ printed at
 * every width. Out-specifying core would last only until core changes its
 * selector. An important declaration inside a print-only block beats every
 * normal rule, inline styles included, and cannot reach the screen layout.
 *
 * Gravity Forms' own buttons go too: a "Register free" submit on a printed
 * /register/ page is the same dead end. Only the buttons, not the footer row
 * around them: the form-recovery message (#255) is inserted into that row and
 * is text worth keeping. The fields themselves still print.
 * tools/qa/print.mjs checks all of this under emulated print media.
 */
@media print {
	.vetefits-header,
	.vetefits-footer,
	.wp-block-buttons,
	.wp-block-button,
	.gform_wrapper .gform_button,
	.gform_wrapper .gform_next_button,
	.gform_wrapper .gform_previous_button { display: none !important; }
	body { color: #000; background: #fff; }
}


/* ============================================================================
 * Section forms. Each section below deliberately takes a DIFFERENT shape so the
 * page reads as a designed document rather than a stack of identical card rows.
 * ==========================================================================*/

/* ------------------------------------------------ 01/02/03 editorial strip */
.vetefits-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}
.vetefits-strip > * {
	padding: 0 clamp(1rem, 2.5vw, 2.25rem);
	border-left: 1px solid var(--wp--preset--color--border);
}
.vetefits-strip > *:first-child { padding-left: 0; border-left: 0; }
.vetefits-strip > *:last-child { padding-right: 0; }
@media (max-width: 860px) {
	.vetefits-strip { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
	.vetefits-strip > * {
		padding: 0 0 var(--wp--preset--spacing--30) 0;
		border-left: 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.vetefits-strip > *:last-child { padding-bottom: 0; border-bottom: 0; }
}
.vetefits-strip__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold-text);
	letter-spacing: .04em;
	margin: 0 0 .35rem;
}

/* ------------------------------------------------------------ benefits index
 * Eight equal white boxes read as a dashboard. A two-column index of rows with
 * a mark, a sentence and a persistent arrow reads as a directory — and it is
 * about a screenful shorter on a phone.
 */
.vetefits-index {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(2rem, 5vw, 4rem);
}
@media (max-width: 820px) { .vetefits-index { grid-template-columns: 1fr; } }

/* Every child is placed explicitly. The row used to declare a fixed 40px mark
 * column and place only the description (`grid-column: 2`), leaving the heading
 * and the arrow to grid auto-placement. That works for as long as every row
 * carries a mark — and the rows on the eight /benefits/ sub-pages do not.
 * tools/build/pages.py emits the mark only when a row has an icon key, so on
 * those 21 rows auto-placement put the *heading* in the 40px mark column and the
 * description beside it on the same line, and the heading's 22px serif spilled
 * out of its 40px track straight across the description. Every one of them was
 * unreadable, at every width, since the rows were built.
 *
 * So: no implicit placement anywhere in this component. The mark column is
 * `auto`, which collapses to nothing when a row has no mark, and the column gaps
 * live on the children instead of the grid so that a collapsed column leaves no
 * orphan gutter behind. Sizes are chosen to keep rows that DO have a mark
 * pixel-identical to what they were: 32px mark + 1.5rem = the old 40px track
 * plus its 1rem gap, and 2.5rem for the arrow = the old 1.5rem track plus its.
 *
 * `minmax(0, 1fr)` on the text column is what actually keeps a long unbroken
 * title inside the row: a bare `1fr` floors at the content's min-content width
 * and overflows instead of wrapping. tools/qa/overlap.mjs measures painted text
 * rather than boxes precisely so it can see that failure. */
.vetefits-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 2.5rem;
	/* Rows in a two-column index are stretched to match their neighbor. Without
	 * somewhere for that slack to go it is shared out between the two auto rows,
	 * and a row with a short description pushes that description a few pixels
	 * away from its own title — so the pairs stop lining up across the columns.
	 * The third track takes the slack instead and the description always sits
	 * directly under its heading. */
	grid-template-rows: auto auto 1fr;
	gap: 0;
	align-items: start;
	padding: 1.15rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	position: relative;
	transition: background-color .15s ease;
}
.vetefits-row:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }
@media (max-width: 820px) { .vetefits-row:last-child { border-bottom: 0; } }
.vetefits-index > .vetefits-row:nth-child(1),
.vetefits-index > .vetefits-row:nth-child(2) { border-top: 1px solid var(--wp--preset--color--border); }

.vetefits-row__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	color: var(--wp--preset--color--gold-text);
	width: 32px; height: 32px;
	/* The gutter belongs to the mark, not to the grid — see the note above. */
	margin-right: 1.5rem;
	margin-top: .1rem;
}
.vetefits-row__icon svg { width: 100%; height: 100%; display: block; }
.vetefits-row h3 {
	grid-column: 2;
	grid-row: 1;
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 .25rem;
	line-height: 1.2;
	/* A single unbroken token — a long URL, an unhyphenated compound — must
	 * break rather than push the description out of the way. */
	overflow-wrap: anywhere;
}
.vetefits-row h3 a { text-decoration: none; color: inherit; }
.vetefits-row h3 a::after { content: ""; position: absolute; inset: 0; }
.vetefits-row p {
	/* Column pinned, row left to the algorithm on purpose. With the heading
	 * locked to row 1 of this column, an auto row resolves to the first free
	 * cell below it — row 2 for one paragraph, row 3 for a second. Pinning it to
	 * `grid-row: 2` would stack a second paragraph on the first, and this
	 * component has already been bitten once by a placement that only held for
	 * the shapes that existed the day it was written. */
	grid-column: 2;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	overflow-wrap: anywhere;
}
.vetefits-row__arrow {
	grid-column: 3;
	/* Spanning from row 1 is what actually aligns the arrow to the heading. The
	 * old `grid-row: span 2` was auto-placed onto rows 2-3, so it lined up with
	 * the description and opened an empty third row underneath it. */
	grid-row: 1 / span 2;
	align-self: start;
	padding-left: 1rem;
	margin-top: .15rem;
	color: var(--wp--preset--color--gold-text);
	font-size: 1.4rem;
	line-height: 1;
	transition: transform .15s ease;
}
.vetefits-row:hover { background: rgba(232,184,75,.07); }
.vetefits-row:hover h3 a { text-decoration: underline; }
.vetefits-row:hover .vetefits-row__arrow { transform: translateX(3px); }
.vetefits-row:focus-within { outline: 3px solid var(--wp--preset--color--navy-light); outline-offset: 3px; }

/* ---------------------------------------------------------- process rail
 * Three numbered steps joined by one rule, so it reads as a sequence rather
 * than three unrelated columns.
 */
.vetefits-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 860px) { .vetefits-steps { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.vetefits-steps > * { position: relative; padding-top: 3.6rem; }
.vetefits-steps > *::before {
	content: "";
	position: absolute;
	top: 1.35rem; left: 0; right: 0;
	height: 2px;
	background: var(--wp--preset--color--border);
}
.vetefits-steps > *:first-child::before { left: 1.35rem; }
.vetefits-steps > *:last-child::before  { right: calc(100% - 1.35rem); }
@media (max-width: 860px) { .vetefits-steps > *::before { display: none; } }
.vetefits-steps .vetefits-step-number {
	position: absolute;
	top: 0; left: 0;
	width: 2.7rem; height: 2.7rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--gold);
	font-size: 1.25rem;
	margin: 0;
}

/* ----------------------------------------------------------- trust strip */
.vetefits-trust {
	display: grid;
	/* `minmax(15rem, …)` is a floor an auto-fit track cannot shrink below. At
	 * 200% text zoom 15rem is 480px, so each column stayed 480px wide inside a
	 * 320px viewport and pushed the page sideways (#78). `min(15rem, 100%)`
	 * keeps the 15rem intent at normal sizes and lets the track collapse to the
	 * container when the root font size makes 15rem wider than the screen. */
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.vetefits-trust h3 {
	font-size: 1.0625rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	margin: 0 0 .3rem;
	letter-spacing: 0;
}
.vetefits-trust p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--wp--preset--color--contrast-2); }

/* --------------------------------------------------- reflow at large text
 * At 200% text zoom a single long word can exceed the whole column: "November"
 * in a 68px heading wants 336px inside a 224px content box on a 320px screen.
 * Allowing the break is the only fix that does not shrink the text, and it is
 * inert at ordinary sizes because `break-word` acts only when the word does not
 * otherwise fit. Buttons get an explicit ceiling for the same reason — their
 * automatic minimum is the label's min-content width. (#78)
 *
 * The row is wrapped in `:where()` so it carries no specificity. This file loads
 * after WordPress's layout CSS, and a plain `.wp-block-buttons` here tied with
 * `.wp-container-… > :where(…) { max-width: 76rem; margin: auto }` and won, so
 * a button row placed straight in a constrained section stretched to the full
 * viewport and sat at its left edge instead of in the content column (the
 * "Optional paid services" row on /benefits/). A block-level row never exceeds
 * its container anyway; the cap only matters for the buttons inside it.
 */
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote, a) {
	overflow-wrap: break-word;
}
:where(.wp-block-buttons),
.wp-block-button,
.wp-block-button__link { max-width: 100%; }

/* -------------------------------------------------------- final action bar */
.vetefits-actionbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	border: 1px solid rgba(232,184,75,.3);
	border-radius: 14px;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: rgba(255,255,255,.045);
}
/* Same shape as the trust strip: a rem flex-basis doubles with the root font
 * size, so at 200% this asked for 704px inside a 320px viewport. `min-width: 0`
 * is the other half — a flex item's automatic minimum is its min-content width,
 * which stops `flex-shrink` short of the container on its own. Both children
 * need it: the button block has an automatic minimum too, and was the last
 * thing left sticking out once the text column could shrink (#78). */
.vetefits-actionbar > *:first-child { flex: 1 1 min(22rem, 100%); }
.vetefits-actionbar > * { min-width: 0; max-width: 100%; }
.vetefits-actionbar h2 { margin: 0 0 .4rem; }
.vetefits-actionbar p { margin: 0; }

/* -------------------------------------------------------- profile feature */
.vetefits-profile {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}
@media (max-width: 820px) { .vetefits-profile { grid-template-columns: 1fr; gap: 1.5rem; } }
.vetefits-profile__aside {
	border-left: 4px solid var(--wp--preset--color--gold-deep);
	padding-left: 1.15rem;
}
.vetefits-profile__aside p { margin: 0 0 .5rem; }
.vetefits-profile__quote {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	line-height: 1.35;
	color: var(--wp--preset--color--navy);
}

/* ------------------------------------------------- header, small screens */
.vetefits-header .wp-block-navigation-item.vetefits-mobile-register { display: none; }
/* The site-wide Donate link (#497, DEC-069): a gold outline pill, so it reads as
 * a button without competing with the red Register action. It is a navigation
 * link rather than a button block, so WordPress folds it into the phone overlay
 * with the others. */
.vetefits-header .wp-block-navigation-item.vetefits-nav-donate > .wp-block-navigation-item__content {
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 999px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.1rem;
	color: var(--wp--preset--color--gold);
	line-height: 1.2;
}
.vetefits-header .wp-block-navigation-item.vetefits-nav-donate > .wp-block-navigation-item__content:hover,
.vetefits-header .wp-block-navigation-item.vetefits-nav-donate > .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-deep);
}
/* The sixth item cost the header its single row at 1024px. Between the phone
 * overlay and a wide desktop, close the gaps up rather than wrap. */
@media (min-width: 600px) and (max-width: 1279px) {
	.vetefits-header .wp-block-navigation__container { gap: 0.4rem 0.75rem; }
	.vetefits-header .alignwide > .wp-block-group:last-child { gap: 1rem; }
	.vetefits-header .wp-block-navigation-item.vetefits-nav-donate > .wp-block-navigation-item__content { padding: 0 0.7rem; }
}
@media (max-width: 600px) {
	/* Keep registration in the menu when the standalone header action is hidden. */
	.vetefits-header .wp-block-buttons { display: none; }
	.vetefits-header .wp-block-navigation-item.vetefits-mobile-register { display: flex; }
}

/* --------------------------------------- header menu without JavaScript
 * Below 600px WordPress folds the header links into an overlay that only its
 * Interactivity script can open. With scripting off, the "Open menu" button
 * stayed on screen and did nothing, and the header offered no links at all,
 * registration included (#259).
 *
 * `scripting: none` matches only when the browser will not run scripts, so none
 * of this can reach a visitor whose menu works. It lifts the overlay back into
 * the header the way core's own `min-width: 600px` rule does, hides the Open and
 * Close buttons that need the script, and wraps the links in rows under the
 * lockup. With scripting on it does not apply at all, so WordPress's overlay,
 * its focus handling, Escape and focus return, and the email dialog's wait for
 * an open menu (#390) are exactly as they were. A browser too old to know the
 * `scripting` feature reads the query as false and keeps today's behavior.
 *
 * `width < 600px` is the exact complement of core's `min-width: 600px`, so no
 * fractional width falls between the two rules.
 * tools/qa/nav-nojs-browser.mjs checks both sides in Chromium and WebKit.
 */
@media (scripting: none) and (width < 600px) {
	.vetefits-header .wp-block-navigation__responsive-container-open,
	.vetefits-header .wp-block-navigation__responsive-container-close { display: none; }
	.vetefits-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
	}
	/* Each link is already a 44px target, so rows need no gap of their own; the
	 * 1.6rem the desktop row uses would stack three screens' worth of air. */
	.vetefits-header .wp-block-navigation__container { gap: 0 1.25rem; }
}


/* ------------------------------------------------------- custom-grid gaps
 * These containers do their own layout, so WordPress's between-blocks margin
 * only staggers the columns against each other.
 */
.vetefits-strip > *,
.vetefits-index > *,
.vetefits-steps > *,
.vetefits-trust > *,
.vetefits-profile > * { margin-block-start: 0 !important; }

/* ------------------------------------------------------------ footer links
 * List links were 18px tall. Give them a real target without changing the
 * visual rhythm much.
 */
.vetefits-footer .wp-block-list a,
.vetefits-footer p a {
	display: inline-block;
	padding-block: 0.32rem;
}

/* The profile pull-quote column was too narrow and broke every line. */
.vetefits-profile { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
@media (max-width: 820px) { .vetefits-profile { grid-template-columns: 1fr; } }

/* Visually hidden, still announced. */
.vetefits-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}


/* --------------------------------------------------------------- footer
 * The disclaimer's gold rule was pinned to the wide container while the text
 * sat in the 42rem content column, so the rule read as an unrelated line.
 * Border and copy now share one 58rem block.
 */
/* Keep the disclaimer block on the page's wide grid edge (so its gold rule lines
 * up with the footer columns above it) and cap only the copy inside it, so the
 * rule and the sentence it belongs to stay adjacent. */
.vetefits-footer .vetefits-disclaimer > * {
	max-width: 58rem;
	margin-inline: 0;
}

/* Footer navigation is a list for semantics, not for bullets. */
.vetefits-footer .wp-block-list { list-style: none; padding-left: 0; }


/* ============================================================================
 * VISUAL SYSTEM — primitives reused across the site.
 * ==========================================================================*/

/* ------------------------------------------------------------ section head
 * One treatment, so section openings are recognizable rather than eight
 * differently-centered headings.
 */
.vetefits-sechead {
	max-width: 40ch;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	position: relative;
	padding-top: 1.5rem;
	/* This sits in a grid, and a grid item's automatic minimum is its
	 * min-content width. `overflow-wrap: break-word` deliberately does NOT
	 * reduce intrinsic sizing — it breaks at layout time only — so at 200% the
	 * heading's min-content still forced this box to 290px inside a 224px
	 * track. `min-width: 0` is what lets the track govern. (#78) */
	min-width: 0;
}
.vetefits-sechead::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 56px; height: 4px;
	background: var(--wp--preset--gradient--gold-bar);
}
.vetefits-sechead h2 { margin-bottom: .5rem; }
.vetefits-sechead p  { margin: 0; }
.vetefits-sechead--center { margin-inline: auto; text-align: center; }
.vetefits-sechead--center::before { left: 50%; transform: translateX(-50%); }

/* ---------------------------------------------------------------- /support/
 * The two checkout buttons: full width and stacked on a phone, where most people
 * arrive from the poster's code, and a matched pair from 600px.
 */
.vetefits-give .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.25rem; }
.vetefits-give .wp-block-button { flex: 1 1 100%; margin: 0; }
.vetefits-give .wp-block-button__link { display: block; box-sizing: border-box; width: 100%; text-align: center; }
@media (min-width: 600px) { .vetefits-give .wp-block-button { flex: 1 1 0; } }

/* ------------------------------------------------------------------- tiles
 * Compact category tiles. No box, no shadow: a rule, a mark, a label and five
 * words. The homepage only has to answer "is there something here for me?"
 */
.vetefits-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--sand);
	border-left: 1px solid var(--wp--preset--color--sand);
}
@media (max-width: 1000px) { .vetefits-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .vetefits-tiles { grid-template-columns: 1fr; } }

.vetefits-tile {
	position: relative;
	padding: clamp(1.4rem, 2.5vw, 2rem);
	border-right: 1px solid var(--wp--preset--color--sand);
	border-bottom: 1px solid var(--wp--preset--color--sand);
	transition: background-color .16s ease;
	min-height: 12.5rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
}
.vetefits-tile__icon {
	color: var(--wp--preset--color--gold-text);
	width: 34px; height: 34px;
	margin-bottom: .35rem;
}
.vetefits-tile__icon svg { width: 100%; height: 100%; display: block; }
.vetefits-tile h3 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	margin: 0;
}
.vetefits-tile h3 a { text-decoration: none; color: inherit; }
.vetefits-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.vetefits-tile p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--wp--preset--color--stone);
}
.vetefits-tile::after {
	content: "\2192";
	position: absolute;
	right: clamp(1.4rem, 2.5vw, 2rem);
	bottom: clamp(1.1rem, 2vw, 1.5rem);
	color: var(--wp--preset--color--gold-text);
	font-size: 1.15rem;
	opacity: .55;
	transition: transform .16s ease, opacity .16s ease;
}
.vetefits-tile:hover { background: #fff; }
.vetefits-tile:hover::after { transform: translateX(4px); opacity: 1; }
.vetefits-tile:hover h3 a { text-decoration: underline; }
.vetefits-tile:focus-within { outline: 3px solid var(--wp--preset--color--navy-light); outline-offset: -3px; }

/* ---------------------------------------------------------- event module
 * November 7 has to be an object you recognize while scrolling, not another
 * heading. Oversized stacked date, rule system, reusable as a flyer and an OG card.
 */
.vetefits-datestack {
	display: grid;
	width: 100%;
	justify-items: start;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 0 clamp(1rem, 2vw, 1.6rem);
	padding: clamp(1rem, 2vw, 1.4rem) clamp(1.3rem, 2.6vw, 2rem);
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--display);
	line-height: .92;
	color: var(--wp--preset--color--gold);
}
.vetefits-datestack__mon {
	grid-column: 1;
	font-size: clamp(1.15rem, 2.4vw, 1.6rem);
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 700;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	justify-self: center;
}
.vetefits-datestack__day {
	grid-column: 2;
	font-size: clamp(4.5rem, 11vw, 8.5rem);
	font-weight: 700;
	letter-spacing: -.03em;
}
.vetefits-datestack__meta {
	grid-column: 1 / -1;
	margin-top: .85rem;
	padding-top: .85rem;
	border-top: 1px solid rgba(232,184,75,.35);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--base);
	line-height: 1.4;
}
@media (max-width: 520px) {
	.vetefits-datestack__mon { writing-mode: horizontal-tb; transform: none; justify-self: start; }
	.vetefits-datestack { grid-template-columns: 1fr; }
	.vetefits-datestack__day { grid-column: 1; }
}

/* ------------------------------------------------------------ quote moment
 * The emotional peak of the page. Full-bleed navy, oversized display type,
 * nothing competing with it.
 */
.vetefits-quote {
	max-width: 22ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 5.2vw, 3.75rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--base);
	margin: 0;
	text-wrap: balance;
}
.vetefits-quote__mark {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.5rem, 8vw, 6rem);
	line-height: .6;
	color: var(--wp--preset--color--gold);
	margin-bottom: .35rem;
}
/* WordPress centers every constrained-layout child with
 * `margin-left: auto !important`, so no amount of specificity wins — !important
 * is the only way back. The attribution belongs under the quote, on its left edge. */
.vetefits-quote__attr {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: 0;
	margin-left: 0 !important;
	margin-right: auto !important;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--wp--preset--color--on-navy-dim);
	max-width: 34ch;
}
.vetefits-quote__attr strong { color: var(--wp--preset--color--base); }


/* ============================================================================
 * Premium Veteran + Family — hero figure and campaign module.
 * ==========================================================================*/

/* ------------------------------------------------------------- hero figure
 * The homepage's one human moment. An original editorial illustration, never a
 * photograph, so it cannot be read as documentation of a real veteran or event.
 */
.vetefits-herofig {
	margin: 0;
	position: relative;
	overflow: hidden;
	line-height: 0;
	/* Bleed to the viewport edge — but only as far as the container's own right
	 * gutter. `calc(50% - 50vw)` assumes the element is centered in the viewport;
	 * this column is not, so that pushed the group several hundred pixels
	 * off-screen. */
	margin-right: calc(-1 * max(0px, (100vw - 76rem) / 2));
	border-radius: 10px 0 0 10px;
}
/* Left edge dissolves into the navy rather than stopping at a hard border. */
.vetefits-herofig,
.vetefits-herofig__img {
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 100%);
	        mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 100%);
}
.vetefits-herofig__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Hold the four people and the guide in frame as the column widens. The 5:4
	 * container trims ~17% of a 3:2 source, so this leans right of center: at
	 * 50% the rightmost figure's face was clipped by the right edge. */
	object-position: 56% 54%;
}
/* At and above 1400px the container is 3:2 — the source's own ratio — so the
 * whole composition is shown and the focal point stops mattering. */
@media (min-width: 1400px) { .vetefits-herofig__img { object-position: 50% 50%; } }
/* An explicit ratio so the crop is a decision rather than whatever the column
 * height happens to be. */
.vetefits-herofig { aspect-ratio: 5 / 4; }
@media (min-width: 1400px) { .vetefits-herofig { aspect-ratio: 3 / 2; } }
/* A whisper of navy over the artwork so it belongs to the hero rather than
 * sitting on top of it. */
/* A navy wash pulls the artwork's warmth toward the site palette and lets the
 * ridge geometry underneath read through the lower edge. */
.vetefits-herofig::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(11,37,69,.42) 0%, rgba(11,37,69,0) 16%),
		linear-gradient(0deg, rgba(4,18,42,.34) 0%, rgba(4,18,42,0) 20%),
		linear-gradient(200deg, rgba(11,37,69,.05) 0%, rgba(4,18,42,.09) 100%);
	pointer-events: none;
}
@media (max-width: 781px) {
	.vetefits-herofig {
		border-radius: 0;
		/* Full-bleed band on a phone, both edges. */
		margin-inline: calc(50% - 50vw);
	}
	.vetefits-herofig,
	.vetefits-herofig__img {
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
		        mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
	}
}

/* --------------------------------------------------------- verified signals
 * Three short facts. Only things we can actually stand behind go in here.
 */
.vetefits-signals {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}
.vetefits-signals li {
	border: 1px solid rgba(232,184,75,.42);
	color: var(--wp--preset--color--gold);
	border-radius: 3px;
	padding: .38rem .75rem;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .01em;
}

/* ------------------------------------------------------- campaign date stack */
.vetefits-eventsec .vetefits-datestack {
	display: grid;
	justify-items: start;
	gap: 0;
	border: 0;
	padding: 0;
	line-height: .84;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--gold);
}
/* The base date-stack puts the month in its own column; in the campaign section
 * everything stacks so NOV / 07 / 2026 reads as one object. */
.vetefits-eventsec .vetefits-datestack > * { grid-column: 1; }
.vetefits-eventsec .vetefits-datestack__mon {
	writing-mode: horizontal-tb;
	transform: none;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 700;
}
.vetefits-eventsec .vetefits-datestack__day {
	font-size: clamp(5.5rem, 13vw, 10rem);
	font-weight: 700;
	letter-spacing: -.045em;
}
.vetefits-eventsec .vetefits-datestack__yr {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	letter-spacing: .16em;
	font-weight: 700;
	color: var(--wp--preset--color--on-navy-dim);
	margin-top: .5rem;
	padding-top: .6rem;
	border-top: 2px solid rgba(232,184,75,.4);
	justify-self: stretch;
}
@media (max-width: 781px) {
	/* A giant square date block wastes a whole phone screen. Go horizontal. */
	.vetefits-eventsec .vetefits-datestack {
		grid-auto-flow: column;
		align-items: baseline;
		gap: .5rem;
		justify-items: start;
	}
	.vetefits-eventsec .vetefits-datestack__mon { font-size: 1.5rem; }
	.vetefits-eventsec .vetefits-datestack__day { font-size: 3.25rem; }
	.vetefits-eventsec .vetefits-datestack__yr  { font-size: 1.25rem; margin-top: 0; }
}

/* ------------------------------------------------------- one-column directory */
.vetefits-index--single { grid-template-columns: 1fr; }

/* ------------------------------------------------------------------- header
 * Badge 50px desktop / 38px mobile, per review. Keeps the bar compact.
 */
.vetefits-lockup .wp-block-site-logo img { height: 50px; width: 50px; }
@media (max-width: 600px) {
	.vetefits-lockup .wp-block-site-logo img { height: 38px; width: 38px; }
}

/* --------------------------------------------------------------- typography */
.vetefits-hero h1 {
	/* Sized so the headline lands on three lines at desktop widths and four on a
	 * phone — measured, not guessed. */
	font-size: clamp(2.5rem, 3.55vw, 3.35rem);
	line-height: 1.03;
	max-width: 18ch;
}
.vetefits-hero__lead {
	font-size: clamp(1.125rem, 1.35vw, 1.35rem);
	line-height: 1.5;
	max-width: 42ch;
}
.entry-content h2 { line-height: 1.06; }


/* ------------------------------------------------- hero on small screens
 * The review's test: a person should be visible in the first viewport. Stacked
 * normally the illustration lands ~1300px down, so on a phone it becomes a band
 * above the headline instead — human first, message immediately under it.
 */
@media (max-width: 781px) {
	.vetefits-hero__cols > .wp-block-column:last-child { order: -1; }
	/* ...but only when the second column is the illustration. The event page
	 * puts a card of dates and an address there, and lifting THAT above the
	 * headline means a phone opens on "NOV 14" before it says what the page
	 * is. Opt-out class rather than :has(), which this audience's older
	 * phones cannot be assumed to support. */
	.vetefits-hero__cols--copy-first > .wp-block-column:last-child { order: 0; }
	.vetefits-herofig {
		aspect-ratio: 16 / 7;
		box-shadow: 0 10px 28px rgba(2, 10, 24, .35);
	}
	.vetefits-herofig__img {
		height: 100%;
		object-fit: cover;
		/* Keep all four faces in the band. Lower than the desktop value: at 62%
		 * the standing figure's head was cut by the top edge. */
		object-position: 51% 46%;
	}
	.vetefits-hero h1 { font-size: 2.5rem; line-height: 1.04; }
	.vetefits-hero { padding-top: var(--wp--preset--spacing--30) !important; }
	.vetefits-hero__lead { font-size: 1.0625rem; }
	.vetefits-hero .wp-block-buttons .wp-block-button { width: 100%; }
	.vetefits-hero .wp-block-button__link { width: 100%; }
}

/* Desktop: the two hero CTAs share a row when the 42% column allows it. */
@media (min-width: 1180px) {
	.vetefits-hero .wp-block-button__link {
		font-size: 1.0625rem;
		padding-inline: 1.15rem;
	}
}


/* --------------------------------------------------- hero at laptop widths
 * A 42/58 split works at 1440 but starves the headline at ~1024, where it broke
 * to five lines. Even the split and ease the type down through that band.
 */
@media (min-width: 901px) and (max-width: 1200px) {
	.vetefits-hero__cols > .wp-block-column:first-child { flex-basis: 52% !important; }
	.vetefits-hero__cols > .wp-block-column:last-child  { flex-basis: 48% !important; }
	.vetefits-hero h1 { font-size: clamp(2.375rem, 3.9vw, 2.875rem); max-width: 18ch; }
	.vetefits-hero__lead { max-width: 38ch; }
}


/* --------------------------------------------------------------- page hero
 * Interior pages open quieter than the homepage: same navy ground so the site
 * reads as one thing, but no illustration and less height.
 */
.vetefits-hero--page { position: relative; }
.vetefits-hero--page::before { height: min(30%, 9rem); opacity: .4; }
.vetefits-hero--page h1 { max-width: 20ch; font-size: clamp(2.25rem, 3.6vw, 3rem); }

/* ------------------------------------------------------------------- note
 * The honest box. Used wherever a fact is not settled yet, so "we don't know"
 * looks deliberate rather than unfinished.
 */
.vetefits-note {
	border-left: 4px solid var(--wp--preset--color--gold-deep);
	background: rgba(232, 184, 75, .08);
	padding: var(--wp--preset--spacing--30);
	border-radius: 0 6px 6px 0;
	margin-top: var(--wp--preset--spacing--40);
}
.vetefits-note p { margin: 0; }
.has-navy-background-color .vetefits-note,
.has-navy-deep-background-color .vetefits-note { background: rgba(255,255,255,.05); }

/* --------------------------------------------------------- crisis actions
 * #247. The Veterans Crisis Line as three links a phone acts on: call, text,
 * chat. Built by crisis_block() in tools/build/pages.py and placed first after
 * the hero, so on a phone it is the first thing under the page title.
 *
 * Big, plain targets for shaky hands and old eyes: each action is at least 56px
 * tall and a full row wide on a phone. The call is red, the site's primary
 * action color; text and chat are navy, so the order reads as a
 * recommendation, not as three identical choices. White on red is 6.6:1 and
 * white on navy 15:1. Nothing moves, nothing is hidden behind a toggle.
 */
.vetefits-crisis {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 6px solid var(--wp--preset--color--red);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--card);
	margin-block: 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
}
.vetefits-crisis__title {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}
.vetefits-crisis__lead {
	margin: 0 0 1.25rem;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}
.vetefits-crisis__actions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* min(), not a bare 13rem floor: at 200% text zoom a fixed floor would
	 * force a 320px phone to scroll sideways (#78, responsive-css.py). */
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: .75rem;
}
.vetefits-crisis__actions li { margin: 0; }
.vetefits-crisis .vetefits-crisis__action {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 56px;
	height: 100%;
	padding: .8rem 1.25rem;
	border-radius: 6px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
.vetefits-crisis .vetefits-crisis__action--call { background: var(--wp--preset--color--red); }
.vetefits-crisis .vetefits-crisis__action:hover,
.vetefits-crisis .vetefits-crisis__action:focus {
	background: var(--wp--preset--color--navy-deep);
	color: #fff;
	text-decoration: underline;
}
.vetefits-crisis .vetefits-crisis__action--call:hover,
.vetefits-crisis .vetefits-crisis__action--call:focus { background: var(--wp--preset--color--red-deep); }
.vetefits-crisis__then {
	display: block;
	margin-top: .2rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
/* Read out, not shown: whose line a call, text or chat link reaches, for a
 * screen reader user who meets the link out of context. */
.vetefits-crisis__sr,
.vetefits-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.vetefits-crisis__more,
.vetefits-crisis__form {
	margin: 1rem 0 0;
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.vetefits-crisis__form {
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
@media print {
	/* Backgrounds are dropped on paper, and white type with them. */
	.vetefits-crisis .vetefits-crisis__action {
		background: none !important;
		color: #000 !important;
		border: 2px solid #000;
	}
}


/* ============================================================================
 * Gravity Forms, dressed for this site.
 * Older and disabled users fill this in, so: big targets, obvious focus, errors
 * that say what to do, and labels that never disappear into placeholders.
 * ==========================================================================*/
.vetefits-formwrap .gform_wrapper { margin: 0; }
.vetefits-formwrap .gform_heading { display: none; }
/* Gravity Forms ships the wrapper with an inline display:none and only shows it
 * once its script runs. On a phone the columns stack, so the "What we ask for"
 * card first paints right under the intro and is then pushed ~3000px down:
 * CLS 0.25-0.43 on /register/ below 782px (QA 21 Oct 2026). Holding one screen
 * of space while the form is hidden puts the card below the fold from the first
 * paint, so the reveal moves nothing on screen. The rule stops matching the
 * moment the form shows, and the form is always taller than this, so the
 * finished page looks exactly as before. */
.vetefits-formwrap:has(> .gform_wrapper:is([style*="display:none"], [style*="display: none"])) {
	min-height: 100vh;
}

.vetefits-formwrap .gfield_label,
.vetefits-formwrap legend.gfield_label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin-bottom: .35rem;
	display: block;
}
.vetefits-formwrap .gfield_description,
.vetefits-formwrap .gform_fileupload_rules {
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--stone);
	padding-top: .25rem;
}
.vetefits-formwrap .gfield_required { color: var(--wp--preset--color--red-deep); }

.vetefits-formwrap input[type="text"],
.vetefits-formwrap input[type="email"],
.vetefits-formwrap input[type="tel"],
.vetefits-formwrap input[type="number"],
.vetefits-formwrap textarea,
.vetefits-formwrap select {
	width: 100%;
	min-height: 52px;
	padding: .7rem .85rem;
	font-size: 1.0625rem;
	font-family: inherit;
	color: var(--wp--preset--color--contrast);
	background: #fff;
	/* Not the decorative `border` preset — see --vf-field-border at the top (#265). */
	border: 1px solid var(--vf-field-border, #6b7c93);
	border-radius: 6px;
	box-shadow: none;
}
.vetefits-formwrap textarea { min-height: 7rem; line-height: 1.55; }
.vetefits-formwrap :is(input, textarea, select):focus {
	outline: 3px solid var(--wp--preset--color--navy-light);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--navy-light);
}

/* Checkbox and radio rows: the row is the target, not the box (#126)
 *
 * WHAT WAS MEASURED, LIVE, BEFORE THIS
 *   input 22x22 · label 23.6-24.9 tall · a 17.4px dead strip between them
 *   (input margin-right 3px + a .65rem flex gap + the legacy stylesheet's 4px
 *   label margin) · a 44px-tall row whose padding answered no pointer at all.
 *   elementFromPoint in the middle of that strip returns the <li>, so the row
 *   that looks like one 342x44 target is really a 22px square, a gap that does
 *   nothing, and a run of text. WCAG 2.2 AA 2.5.8 wants a solid 24x24 square to
 *   fit inside the target; nothing here was 24 in either direction.
 *
 * WHY THE OLD RULES DID NOT DO THIS ALREADY
 *   Gravity Forms' legacy stylesheet reaches these elements with three classes
 *   (`.gform_legacy_markup_wrapper .gfield_radio li label`), so two-class theme
 *   rules lost every conflict: the label stayed at the legacy `0.875em` and
 *   `max-width: 85%`, and `browsers.min.css` kept a 6px top margin on the input.
 *   The selectors below carry four, which is what it takes. The unprefixed
 *   rules are kept underneath so the fix survives a later move off the legacy
 *   markup, where the wrapper class no longer exists.
 *
 * WHAT IT DOES NOT DO
 *   No custom control. The input stays a native checkbox or radio with its own
 *   `accent-color`, its own focus ring, its own checked state and its own
 *   `label for=` binding, so keyboard operation and screen-reader announcement
 *   are exactly what they were. This is geometry.
 */
.vetefits-formwrap .gchoice {
	display: flex;
	align-items: stretch;
	gap: 0;
	min-height: 44px;
}
.vetefits-formwrap .gchoice input[type="checkbox"],
.vetefits-formwrap .gchoice input[type="radio"] {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	/* Aligns the box with the first line of the label, whose own .5rem of
	 * padding is what gives the row its height. */
	margin: .5rem 0 0;
	align-self: flex-start;
	accent-color: var(--wp--preset--color--navy-light);
}
.vetefits-formwrap .gchoice label {
	display: block;
	flex: 1 1 auto;
	min-height: 44px;
	max-width: none;
	margin: 0;
	/* The old flex gap, moved inside the label, where it accepts a pointer
	 * action instead of swallowing one. */
	padding: .5rem .5rem .5rem .65rem;
	font-size: 1.0625rem;
	line-height: 1.45;
	cursor: pointer;
}

/* The same three rules again, specific enough to beat Gravity Forms' legacy
 * stylesheet. Identical declarations — see the note above. */
.vetefits-formwrap .gform_legacy_markup_wrapper .gfield_radio li.gchoice,
.vetefits-formwrap .gform_legacy_markup_wrapper .gfield_checkbox li.gchoice {
	display: flex;
	align-items: stretch;
	gap: 0;
	min-height: 44px;
}
.vetefits-formwrap .gform_legacy_markup_wrapper .gfield_radio li.gchoice > input[type="radio"],
.vetefits-formwrap .gform_legacy_markup_wrapper .gfield_checkbox li.gchoice > input[type="checkbox"] {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	margin: .5rem 0 0;
	align-self: flex-start;
	accent-color: var(--wp--preset--color--navy-light);
}
.vetefits-formwrap .gform_legacy_markup_wrapper .gfield_radio li.gchoice > label,
.vetefits-formwrap .gform_legacy_markup_wrapper .gfield_checkbox li.gchoice > label {
	display: block;
	flex: 1 1 auto;
	min-height: 44px;
	max-width: none;
	margin: 0;
	padding: .5rem .5rem .5rem .65rem;
	font-size: 1.0625rem;
	line-height: 1.45;
	cursor: pointer;
}

.vetefits-formwrap .gform_footer { margin-top: var(--wp--preset--spacing--30); padding: 0; }
.vetefits-formwrap .gform_button {
	background: var(--wp--preset--color--red);
	color: #fff;
	font-family: inherit;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	border: 0;
	border-radius: 6px;
	padding: 1rem 2rem;
	min-height: 56px;
	cursor: pointer;
}
.vetefits-formwrap .gform_button:hover { background: var(--wp--preset--color--red-deep); }
.vetefits-formwrap .gform_button:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy-light);
	outline-offset: 3px;
}

/* /register/ on a phone: the optional extras behind one button (#1016).
 * assets/js/register-fold.js adds the .vf-fold row and the classes; without it,
 * at 782px and up, and in check-in mode, none of this applies and every field
 * shows. Only the three optional fields the script lists are ever hidden. */
.vetefits-formwrap .vf-fold { display: none; }
@media (max-width: 781px) {
	.vetefits-formwrap .vf-fold { display: block; margin-top: var(--wp--preset--spacing--30); }
	.vetefits-formwrap .vf-fold-closed .vf-foldable { display: none !important; }
}
html.vf-checkin .vetefits-formwrap .vf-fold { display: none !important; }
.vetefits-formwrap .vf-fold__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	width: 100%;
	min-height: 52px;
	padding: .7rem .85rem;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	color: var(--wp--preset--color--navy);
	background: #fff;
	border: 1px solid var(--vf-field-border, #6b7c93);
	border-radius: 6px;
	cursor: pointer;
}
.vetefits-formwrap .vf-fold__toggle::after {
	content: "+";
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
}
.vetefits-formwrap .vf-fold__toggle[aria-expanded="true"]::after { content: "\2212"; }
.vetefits-formwrap .vf-fold__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy-light);
	outline-offset: 1px;
}
.vetefits-formwrap .vf-fold__hint {
	margin: .35rem 0 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--stone);
}

/* Errors must not depend on color alone. */
.vetefits-formwrap .gfield_error .gfield_label { color: var(--wp--preset--color--red-deep); }
.vetefits-formwrap .validation_message,
.vetefits-formwrap .gform_validation_errors {
	background: #fdeaec;
	border: 1px solid var(--wp--preset--color--red);
	border-left-width: 4px;
	border-radius: 0 6px 6px 0;
	color: #7a1521;
	font-size: 1rem;
	line-height: 1.5;
	padding: .7rem .9rem;
	margin-top: .5rem;
}
.vetefits-formwrap .gform_validation_errors h2 {
	font-family: inherit;
	font-size: 1.0625rem;
	color: #7a1521;
	margin: 0 0 .25rem;
}
/* A send that could not be confirmed (#255), first in the form footer so it sits
 * directly above the button that retries it. Not scoped to .vetefits-formwrap:
 * the contribution form on /partners/ is not inside one, and its footer is a
 * flex row, hence the full-width basis. Same colors as a validation error, so
 * it reads as "something needs you" rather than as a success or a note. */
.vf-form-recovery {
	box-sizing: border-box;
	flex: 1 0 100%;
	background: #fdeaec;
	border: 1px solid var(--wp--preset--color--red);
	border-left-width: 4px;
	border-radius: 0 6px 6px 0;
	color: #7a1521;
	font-size: 1rem;
	line-height: 1.5;
	padding: .7rem .9rem;
	margin: 0 0 1rem;
}
.vf-form-recovery p { margin: 0; }
.vf-form-recovery .vf-form-recovery__heading { font-weight: 700; margin-bottom: .25rem; }
/* The no-JavaScript explanation for a form only script can reveal (#258). */
.vf-form-nojs {
	border-left: 4px solid var(--wp--preset--color--gold-deep);
	background: rgba(232, 184, 75, .1);
	padding: .9rem 1rem;
	border-radius: 0 6px 6px 0;
	font-size: 1.0625rem;
	line-height: 1.55;
}
.vf-form-nojs p { margin: 0; }
.vetefits-formwrap .gform_confirmation_wrapper {
	border-left: 4px solid var(--wp--preset--color--gold-deep);
	background: rgba(232, 184, 75, .1);
	padding: var(--wp--preset--spacing--30);
	border-radius: 0 8px 8px 0;
}
.vetefits-formwrap .gform_confirmation_wrapper h2 { margin-top: 0; }
.vetefits-formwrap .gform_required_legend { font-size: .9375rem; color: var(--wp--preset--color--stone); }

/* Gravity Forms' own character counter ships #767676, which is 4.25:1 on our
 * warm paper — just under AA at 13px. */
.vetefits-formwrap .charleft,
.vetefits-formwrap .ginput_counter {
	color: var(--wp--preset--color--stone) !important;
	font-size: .875rem;
	/* The counter is emitted with `gfield_description`, so Gravity's legacy rule
	 *   ul.gform_fields:not(.top_label) .gfield_description { width:70%; margin-left:29% }
	 * offsets it a second time — it already sits inside the input column. At the
	 * 768px breakpoint that put its right edge at 793.8px inside a 768px viewport:
	 * 26px of horizontal scroll on both Register and Contact, which is WCAG 1.4.10.
	 * Dropping the second offset is on its own enough to contain it — measured
	 * against the live DOM, the document then reports scrollWidth 768 in a 768px
	 * client width, with the counter ending at 660.7px inside a column that ends
	 * at 697.4px. Centering is presentation only and changes no geometry. */
	margin-left: 0 !important;
	text-align: center;
}

.vetefits-formnote {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--stone);
	border-top: 1px solid var(--wp--preset--color--sand);
	padding-top: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

/* Contribution form focus ring (#300)
 *
 * The /partners/ form is Gravity Forms' own "orbital" theme, not the legacy
 * markup the .vetefits-formwrap rules above were written for, so none of them
 * reach it. Its focus ring is rgba(primary, .65): translucent #204ce5, which
 * lands at rgb(106,132,228) on the cream section and measures 2.98:1 — under
 * SC 1.4.11's 3:1 on all 17 controls, the checkboxes and Submit included. The
 * validation summary's ring is the same shape in red (#c02b0a at .65) and
 * measures 2.94:1, its error links 2.86:1.
 *
 * Only the two ring colors change, through the variables Gravity Forms reads
 * them from, so its sizes, radii, fields, checkboxes and button stay exactly as
 * they are. Wrapping the form in .vetefits-formwrap was measured and rejected:
 * it restyles six of the seven text fields but not Website (a url input the
 * wrap rules do not list), leaves Submit's ring at 2.98:1, and its
 * --vf-field-border takes the resting edge from 4.41:1 down to 3.66:1 on cream.
 *
 *     navy-light #12335e vs cream #f3ede2 10.85:1 · paper #faf7f2 11.83:1
 *     red-deep   #8d1a29 vs cream #f3ede2  7.79:1 · paper #faf7f2  8.50:1
 *
 * (0,2,0) beats Gravity's own `.gform-theme--framework` definition (0,1,0).
 * Graded by tools/qa/nontext-contrast.mjs against /partners/.
 */
[data-vf-contribution-form] .gform-theme--framework {
	--gf-ctrl-outline-color-focus: var(--wp--preset--color--navy-light);
	--gf-form-validation-outline-color-focus: var(--wp--preset--color--red-deep);
}

/* Contribution form, sized and colored like /contact/ and /register/ (#300)
 *
 * Same route as the focus ring above: Gravity's own orbital variables, so every
 * control moves together, Website (type=url) included, and no legacy-markup rule
 * is borrowed. Measured live at 375px before this: 14px labels and input text,
 * 13px help text, a 12px "(Required)", 38px fields and a 38px blue #204ce5
 * Submit. After: 17px labels/text, 15px help, 48px fields, 24px checkboxes and a
 * 56px red Submit, the sizes the other two forms use.
 *
 * The resting field edge stays Gravity's #686e77 on purpose: 4.41:1 on cream,
 * where the other forms' --vf-field-border (#6b7c93) would be 3.66:1.
 *
 *     contrast #16202e on cream 14.08:1 · stone #5b6779 4.92:1
 *     red-deep #8d1a29 on cream 7.79:1 · #fff on red #b22234 6.62:1
 *     #fff on red-deep (hover) 9.08:1 · red #b22234 vs cream 5.68:1
 *
 * Gravity prints the form's own style settings inline as
 * #gform_wrapper_N[data-form-index].gform-theme (1,2,0), so variables it sets
 * there (size, radius, button size/padding, label color) need !important;
 * the rest are not in that block and (0,2,0) is enough.
 * Review: docs/qa/partners-form-style-review-2026-10-21.md.
 */
[data-vf-contribution-form] .gform-theme--framework {
	--gf-ctrl-font-size: 1.0625rem;
	--gf-ctrl-label-font-size-primary: 1.0625rem;
	--gf-ctrl-label-font-size-secondary: 1.0625rem;
	--gf-ctrl-label-font-weight-primary: 700;
	--gf-ctrl-label-color-primary: var(--wp--preset--color--contrast) !important;
	--gf-ctrl-label-color-req: var(--wp--preset--color--red-deep);
	--gf-ctrl-label-font-size-req: 1.0625rem;
	--gf-ctrl-desc-font-size: .9375rem;
	--gf-ctrl-desc-color: var(--wp--preset--color--stone);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--navy-light);
	--gf-ctrl-size: 48px !important;
	--gf-radius: 6px !important;
	--gf-ctrl-choice-size: 24px !important;
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--red);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--red-deep);
	--gf-ctrl-btn-font-size: 1.1875rem !important;
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-btn-size: 56px !important;
	--gf-ctrl-btn-padding-x: 2rem !important;
}


/* ------------------------------------------------------------- numbered step
 * /get-started/ — a big numeral in the margin, the copy beside it, and the
 * official links it hands you to underneath.
 */
.vetefits-step {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 0 1.5rem;
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--sand);
}
.vetefits-step:last-child { border-bottom: 1px solid var(--wp--preset--color--sand); }
@media (max-width: 700px) {
	.vetefits-step { grid-template-columns: 1fr; gap: .5rem; }
}
.vetefits-step__n {
	grid-row: span 3;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.25rem;
	font-weight: 700;
	line-height: .9;
	color: var(--wp--preset--color--gold-text);
}
@media (max-width: 700px) { .vetefits-step__n { grid-row: auto; font-size: 2.5rem; } }
.vetefits-step h3 { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--x-large); }
.vetefits-step > p { margin: 0; max-width: 62ch; }
.vetefits-step__links {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
}
.vetefits-step__links li { margin: 0; }
.vetefits-step__links a {
	display: inline-block;
	padding: .45rem .8rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 4px;
	background: #fff;
	font-size: 1rem;
	text-decoration: none;
	line-height: 1.3;
}
.vetefits-step__links a:hover {
	border-color: var(--wp--preset--color--gold-deep);
	text-decoration: underline;
}
.vetefits-step__links a::after { content: " \2197"; color: var(--wp--preset--color--gold-text); }

/* The quote treatment also runs on light grounds (About). */
.vetefits-quote--dark { color: var(--wp--preset--color--navy); }
/* The bright gold reads on navy but sits at 1.7:1 on paper. It is decorative and
 * aria-hidden, so contrast does not strictly apply — but a glyph you can barely
 * see is just bad drawing. */
.vetefits-quote__mark { color: var(--wp--preset--color--gold); }
.has-paper-background-color .vetefits-quote__mark,
.has-cream-background-color .vetefits-quote__mark,
.has-surface-background-color .vetefits-quote__mark { color: var(--wp--preset--color--gold-deep); }
.vetefits-quote__attr--dark { color: var(--wp--preset--color--stone); }
.vetefits-quote__attr--dark strong { color: var(--wp--preset--color--navy); }


/* ------------------------------------------------------------------- prose
 * Legal and policy pages. These are the pages nobody wants to read, so the
 * typography has to work harder, not less.
 */
.vetefits-prose h2 {
	font-size: var(--wp--preset--font-size--x-large);
	/* These were <h3> until the heading levels were corrected. Pin the size and
	 * leading the design was signed off with, so the outline changed and the
	 * page did not. */
	line-height: 1.15;
	margin: var(--wp--preset--spacing--40) 0 .5rem;
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--sand);
}
.vetefits-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vetefits-prose p { max-width: 66ch; }
.vetefits-prose .vetefits-note { margin-top: var(--wp--preset--spacing--30); }

/* --------------------------------------------------------------------- FAQ */
.vetefits-faq__item {
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--sand);
}
.vetefits-faq__item:last-child { border-bottom: 1px solid var(--wp--preset--color--sand); }
.vetefits-faq__item h2 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
	margin: 0 0 .5rem;
}
.vetefits-faq__item p { margin: 0; max-width: 64ch; }


/* ============================================================================
 * INTERIOR EDITORIAL IMAGERY
 *
 * Six pages, six deliberately different compositions. The homepage already
 * owns "illustration bleeding off the right of a navy split", so none of these
 * repeats it — otherwise the site reads as one hero template with the copy
 * swapped out, which is exactly what the image review warned against.
 *
 *   November 7   full-bleed threshold band welded to the bottom of the hero
 *   Families     figure bleeding off the LEFT edge, paired with a statement
 *   Benefits     contained panel straddling the navy/paper seam
 *   Get Started  section head and image sharing one masthead row
 *   Partners     section head paired with a crop-safe preparation scene
 *   About        a small supporting portrait under the pull quote
 *
 * Everything generated here is an illustration and is labeled as one. The only
 * photographic asset on the site is Pat, and it is deliberately the smallest.
 * ==========================================================================*/

/* ------------------------------------------------------------------ shared
 * One frame primitive. The aspect ratio lives on the frame, not the image, so
 * the box is reserved before a single byte arrives and the crop is a decision
 * each page makes rather than whatever the column height happens to be.
 */
.vetefits-fig { margin: 0; }
.vetefits-fig__frame {
	display: block;
	position: relative;
	overflow: hidden;
	line-height: 0;
	/* What occupies the reserved box until the image paints. Navy rather than
	 * white so a slow connection never flashes a bright rectangle at someone
	 * reading on a phone. */
	background: var(--wp--preset--color--navy);
}
.vetefits-fig__frame img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.vetefits-fig__cap {
	margin: .7rem 0 0;
	line-height: 1.5;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--stone);
	max-width: 46ch;
}

/* --------------------------------------------------- November 7: threshold
 * The strongest interior visual, and the one with the biggest honesty problem:
 * the day has not happened. So it is unmistakably a band of artwork under the
 * headline — welded to the navy hero above it, captioned in plain words — and
 * never something that could be mistaken for coverage of an event.
 */
.vetefits-threshold {
	background: var(--wp--preset--color--navy-deep);
}
.vetefits-threshold .vetefits-fig__frame {
	/* Cinematic on a desktop: enough of the doorway and two of the background
	 * consultations survive, which is what makes the room read as a room. */
	aspect-ratio: 21 / 9;
	background: var(--wp--preset--color--navy-deep);
}
.vetefits-threshold .vetefits-fig__frame img { object-position: 50% 44%; }
/* The hero's navy-fade ends on navy-deep, so the band starts in the same color
 * it is butted against; this dissolves the top edge the rest of the way. */
.vetefits-threshold .vetefits-fig__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(4,18,42,.85) 0%, rgba(4,18,42,0) 22%);
}
.vetefits-threshold .vetefits-fig__cap {
	max-width: 76rem;
	margin: 0 auto;
	padding: .85rem var(--wp--preset--spacing--30) 1.15rem;
	color: var(--wp--preset--color--on-navy-dim);
}
@media (max-width: 1023px) {
	.vetefits-threshold .vetefits-fig__frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
	/* The supplied phone crop is 3:4 and keeps the arriving pair, the guide and
	 * one screened one-on-one together. A wide band loses all three. */
	.vetefits-threshold .vetefits-fig__frame { aspect-ratio: 3 / 4; }
	.vetefits-threshold .vetefits-fig__frame img { object-position: 50% 50%; }
}

/* ------------------------------------------------------ Families: fig band
 * Mirrored against the homepage on purpose: artwork off the LEFT edge, the
 * words on the right. The family's own discovery is the subject, so the crop
 * holds the three of them around the tablet rather than isolating the veteran.
 */
.wp-block-group.vetefits-figband {
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
	gap: clamp(1.75rem, 4.5vw, 3.5rem);
	align-items: center;
}
/* `100vw` counts the scrollbar and the layout width does not, so any bleed
 * computed from it over-reaches by half a scrollbar and hands the page a
 * horizontal scrollbar. The section clips instead of scrolling, which makes the
 * bleed exact at every width and impossible to get wrong at any other. */
.vetefits-figband-sec { overflow-x: clip; }
.vetefits-figband .vetefits-fig__frame {
	aspect-ratio: 4 / 3;
	border-radius: 0 12px 12px 0;
	box-shadow: 0 14px 34px rgba(4, 18, 42, .16);
	/* The wide container's own left edge: the root gutter on a narrow screen, half
	 * the leftover once the viewport is wider than 76rem. */
	margin-left: calc(-1 * max(var(--wp--preset--spacing--30), (100vw - 76rem) / 2));
}
.vetefits-figband .vetefits-fig__frame img { object-position: 44% 48%; }
.vetefits-figband__say h2 { margin: .35rem 0 var(--wp--preset--spacing--20); }
.vetefits-figband__say p  { margin: 0; max-width: 40ch; }
@media (max-width: 860px) {
	.wp-block-group.vetefits-figband { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
	.vetefits-figband .vetefits-fig__frame {
		/* Full-bleed band on a phone, both edges, and shallower so the words the
		 * page is actually about are not pushed off the screen. */
		margin-inline: calc(-1 * var(--wp--preset--spacing--30));
		border-radius: 0;
		aspect-ratio: 5 / 4;
	}
	.vetefits-figband__say { order: -1; }
}

/* ------------------------------------------------------ Partners: prep head
 * This page asks organizations to picture the practical work behind “being in
 * the room.” The scene is preparation, not attendance: it sits beside the
 * directory heading, carries an explicit editorial caption, and never borrows
 * the full-bleed event-photo grammar used on November 7.
 */
.wp-block-group.vetefits-prephead {
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: end;
	margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.vetefits-prephead .vetefits-sechead {
	margin-bottom: 0;
	max-width: 24ch;
}
.vetefits-prephead .vetefits-fig__frame {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--sand);
	box-shadow: 0 14px 34px rgba(4, 18, 42, .14);
}
.vetefits-prephead .vetefits-fig__frame img { object-position: 50% 50%; }
@media (max-width: 860px) {
	.wp-block-group.vetefits-prephead {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
	.vetefits-prephead .vetefits-sechead { max-width: 40ch; }
	.vetefits-prephead .vetefits-fig__frame { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------- Benefits: wayfind panel
 * The deliberate grammar change. Everything else on the site is people around a
 * table; this is a landscape of routes. It is also the only image here that is
 * a contained object with an edge, lifted onto the seam between the navy hero
 * and the directory below — a map laid on the table, not a scene.
 */
/* `.wp-block-group` is not decoration: WordPress emits `<container> > * {
 * margin-block: 0 }` for every layout container, from a stylesheet printed after
 * this one and at the same specificity — so a bare class loses the tie and the
 * overlap silently computes to zero. */
.wp-block-group.vetefits-wayfind {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * (var(--wp--preset--spacing--60) + clamp(2rem, 5vw, 3.25rem)));
	margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.vetefits-wayfind .vetefits-fig__frame {
	aspect-ratio: 12 / 5;
	border-radius: 12px;
	border: 1px solid rgba(232, 184, 75, .34);
	box-shadow: 0 20px 46px rgba(4, 18, 42, .34);
}
/* The gold route and the cream doorway are the whole point; center on them. */
.vetefits-wayfind .vetefits-fig__frame img { object-position: 50% 45%; }
@media (max-width: 1023px) {
	.vetefits-wayfind .vetefits-fig__frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
	.wp-block-group.vetefits-wayfind { margin-top: calc(-1 * (var(--wp--preset--spacing--60) + 1.5rem)); }
	.vetefits-wayfind .vetefits-fig__frame { aspect-ratio: 5 / 4; }
}

/* ------------------------------------------------- Get Started: masthead row
 * The section head and the artwork share one row, so the image reads as the
 * diagram at the top of a process rather than a picture bolted above it.
 */
.wp-block-group.vetefits-masthead {
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.vetefits-masthead .vetefits-sechead { margin-bottom: 0; max-width: 26ch; }
.vetefits-masthead .vetefits-fig__frame {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--sand);
}
.vetefits-masthead .vetefits-fig__frame img { object-position: 50% 46%; }
@media (max-width: 860px) {
	.wp-block-group.vetefits-masthead { grid-template-columns: 1fr; align-items: start; }
	.vetefits-masthead .vetefits-sechead { max-width: 40ch; }
	.vetefits-masthead .vetefits-fig__frame { aspect-ratio: 4 / 3; }
	/* Keep the document, the gold route, the arriving person and the helper who
	 * receives them together; a strict center crop drops the helper. */
	.vetefits-masthead .vetefits-fig__frame img { object-position: 61% 50%; }
}

/* --------------------------------------------------------- About: portrait
 * The one authentic photograph on the site, and therefore the smallest image on
 * it. The quote stays the primary device; this sits under the attribution as
 * corroboration, not as a hero.
 */
.vetefits-portrait {
	max-width: 22rem;
	margin-top: var(--wp--preset--spacing--30);
}
.vetefits-portrait .vetefits-fig__frame {
	/* The source is 3:2 and is shown at 3:2 — no crop at all, so nothing about
	 * how Pat appears is a decision made here. */
	aspect-ratio: 3 / 2;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--card);
	background: var(--wp--preset--color--surface-alt);
}
.vetefits-portrait .vetefits-fig__cap { max-width: 30ch; }
@media (max-width: 820px) { .vetefits-portrait { max-width: 26rem; } }

/* -------------------------------------------------- form choice groups (#58)
 * Radio and checkbox groups are wrapped in a fieldset by inc/forms-a11y.php so
 * a screen reader announces the question when focus enters the group. A
 * fieldset carries a browser default border, margin and padding the legacy
 * Gravity Forms layout does not expect, and a legend participates in layout
 * differently from the label it replaces — so both are reset to what they
 * displaced. This is a semantics change, not a visual one.
 */
.vetefits-choice-group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.vetefits-choice-group > legend.gfield_label {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
}

/* --------------------------------------------------------------- video facade
 * A click-to-load YouTube embed. Nothing from youtube.com is fetched until a
 * visitor asks for it: the resting state is one poster image and a button, so
 * the section costs ~36KB instead of the ~700KB and dozens of requests a bare
 * <iframe> spends on every page view, for every visitor, most of whom never
 * press play. That matters more here than on most sites — this audience skews
 * old, rural and on metered connections.
 *
 * The control is a real <button>, not a styled div, so it is reachable by Tab,
 * announced as a button, and fires on Space and Enter with no key handling of
 * our own. aria-label carries the full sentence; the visible label stays short.
 */
.vetefits-video {
	margin: 0;
	max-width: 46rem;
}
.vetefits-video__frame {
	position: relative;
	/* Reserve the box before the poster decodes, so the section never shifts
	 * under the reader — the poster and the iframe that replaces it share this
	 * ratio exactly. */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	background: var(--wp--preset--color--navy-deep);
	box-shadow: 0 2px 18px rgb(4 18 42 / 28%);
}
.vetefits-video__frame img,
.vetefits-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.vetefits-video__frame img { object-fit: cover; }

/* The scrim lives here rather than being baked into the poster, so the same
 * frame can be reused at other sizes without a burnt-in gradient. */
.vetefits-video__btn {
	position: absolute;
	inset: 0;
	width: 100%;
	display: flex;
	align-items: flex-end;
	gap: .9rem;
	padding: 1rem 1.1rem;
	border: 0;
	cursor: pointer;
	color: #fff;
	text-align: left;
	font: inherit;
	background: linear-gradient(
		to top,
		rgb(4 18 42 / 82%) 0%,
		rgb(4 18 42 / 34%) 38%,
		rgb(4 18 42 / 0%) 72%
	);
}
.vetefits-video__btn:hover .vetefits-video__play,
.vetefits-video__btn:focus-visible .vetefits-video__play {
	background: var(--wp--preset--color--red);
	transform: scale(1.06);
}
.vetefits-video__btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}
.vetefits-video__play {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgb(178 34 52 / 92%);
	display: grid;
	place-items: center;
	transition: background .18s ease, transform .18s ease;
}
.vetefits-video__play::before {
	content: "";
	width: 0; height: 0;
	margin-left: 4px;
	border-left: 17px solid #fff;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
}
.vetefits-video__label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	font-weight: 600;
	text-shadow: 0 1px 3px rgb(4 18 42 / 70%);
}
.vetefits-video__meta {
	display: block;
	font-weight: 400;
	opacity: .85;
}
.vetefits-video__cap {
	margin: .75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.vetefits-video__cap a { color: inherit; }

/* #260: the button ships `hidden` and the inline script reveals it, so without
 * JavaScript nobody meets a play button that does nothing. `display: flex`
 * above would otherwise override the attribute and show it anyway. */
.vetefits-video__btn[hidden] { display: none; }

/* The direct watch link. Outside the frame on purpose: the click handler empties
 * the frame for the iframe, and this has to survive that, a blocked embed and a
 * browser without JavaScript. Gold on navy-deep is 10.1:1; the theme's own link
 * color would be navy on navy (1.5:1). */
.vetefits-video__alt {
	margin: .75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.vetefits-video__alt .vetefits-video__watch {
	display: inline-block;
	padding-block: .25rem;
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	text-underline-offset: .18em;
}
.vetefits-video__alt .vetefits-video__watch:hover,
.vetefits-video__alt .vetefits-video__watch:focus { color: var(--wp--preset--color--base); }

/* Older and disabled visitors are the design target, and a 56px control that
 * grows under the pointer is a motion cue some of them cannot use. */
@media (prefers-reduced-motion: reduce) {
	.vetefits-video__play { transition: none; }
	.vetefits-video__btn:hover .vetefits-video__play,
	.vetefits-video__btn:focus-visible .vetefits-video__play { transform: none; }
}
@media (max-width: 600px) {
	.vetefits-video__play { width: 48px; height: 48px; }
	.vetefits-video__play::before {
		border-left-width: 14px;
		border-top-width: 9px;
		border-bottom-width: 9px;
	}
}

/* ------------------------------------------------------- /benefits/ search
 * #246. A box above the eight category rows, for the visitor who already knows
 * the word they want ("caregiver", "home loan") and should not have to guess
 * which of eight categories hides it.
 *
 * THE `hidden` RULES COME FIRST, AND THEY ARE THE IMPORTANT ONES.
 * The section, the result list and the empty state are all printed with the
 * `hidden` attribute and revealed by theme/vetefits/assets/js/benefits-search.js.
 * A `display` declaration on any of them beats the attribute's UA rule, so each
 * one needs its own `[hidden]` override or the box appears, unusable, for every
 * visitor without JavaScript — which is exactly the #260 play-button defect,
 * and the reason that rule is a few lines above this one.
 *
 * NOTHING HERE HAS A FIXED FLOOR. Every track is `minmax(min(…), 1fr)` or a
 * plain single column, so a 320px viewport at 200% text zoom reflows instead of
 * scrolling sideways (#78, tools/ci/validators/responsive-css.py). The two
 * fields sit side by side only once there is room for both.
 */
.vf-bsearch[hidden],
.vf-bsearch__results[hidden],
.vf-bsearch__empty[hidden],
.vf-bsearch__clear[hidden] { display: none; }

.vf-bsearch {
	display: block;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}
.vf-bsearch__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}
@media (min-width: 48rem) {
	.vf-bsearch__fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; }
}
.vf-bsearch__field { margin: 0; }
.vf-bsearch__label {
	display: block;
	margin-bottom: .25rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}
.vf-bsearch__hint {
	display: block;
	margin-bottom: .6rem;
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}
/* The category field has no hint, so its control needs the hint's space back or
 * the two fields' inputs sit on different lines. */
@media (min-width: 48rem) {
	.vf-bsearch__field--cat .vf-bsearch__control { margin-top: calc(.6rem + 1.5em); }
}
.vf-bsearch__control { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.vf-bsearch__input,
.vf-bsearch__select {
	flex: 1 1 10rem; min-width: 0;   /* the basis grows with the root font size; the floor must not */
	box-sizing: border-box;
	min-height: 48px;
	padding: .6rem .75rem;
	font-size: var(--wp--preset--font-size--medium);
	font-family: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	/* The same 3:1 edge every other field on the site uses — an empty search box
	 * is identified by its border and nothing else. See --vf-field-border. */
	border: 2px solid var(--vf-field-border);
	border-radius: 6px;
}
.vf-bsearch__input::-webkit-search-cancel-button { margin-left: .35rem; }
.vf-bsearch__clear {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-height: 48px;
	min-width: 44px;
	padding: .6rem 1.1rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 6px;
	cursor: pointer;
}
.vf-bsearch__clear:hover { background: var(--wp--preset--color--surface-alt); }
.vf-bsearch__input:focus-visible,
.vf-bsearch__select:focus-visible,
.vf-bsearch__clear:focus-visible,
.vf-bsearch__result-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy-light);
	outline-offset: 2px;
}

.vf-bsearch__count {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	/* Empty for most of the page's life, and it must not leave a gap that makes
	 * the results jump down the moment it speaks. */
	min-height: 1.4em;
	overflow-wrap: anywhere;
}

.vf-bsearch__results {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	list-style: none;
	margin: .75rem 0 0;
	padding: 0;
}
.vf-bsearch__result { margin: 0; }
.vf-bsearch__result-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .15rem .75rem;
	padding: .9rem .25rem;
	border-top: 1px solid var(--wp--preset--color--border);
	text-decoration: none;
	color: inherit;
}
.vf-bsearch__result:last-child .vf-bsearch__result-link {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.vf-bsearch__result-title {
	grid-column: 1;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
	text-underline-offset: .15em;
	/* A long unbroken destination name must wrap rather than push the badge off
	 * the row — the same failure tools/qa/overlap.mjs exists to catch. */
	overflow-wrap: anywhere;
}
.vf-bsearch__result-where {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	margin-top: .2rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
	color: var(--wp--preset--color--gold-text);
	overflow-wrap: anywhere;
}
.vf-bsearch__result-summary {
	grid-column: 1 / -1;
	margin-top: .15rem;
	/* The card is as wide as the section, and a one-line summary read across
	 * 76rem is a line nobody finishes. */
	max-width: 76ch;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	overflow-wrap: anywhere;
}
.vf-bsearch__result-cat {
	grid-column: 1 / -1;
	margin-top: .3rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
	color: var(--wp--preset--color--stone);
	overflow-wrap: anywhere;
}
.vf-bsearch__result-link:hover { background: rgba(232,184,75,.07); }
.vf-bsearch__result-link:hover .vf-bsearch__result-title { color: var(--wp--preset--color--navy-light); }

/* At phone width the destination badge under a wrapped title reads as part of
 * the next line, so it takes its own row instead. */
@media (max-width: 30rem) {
	.vf-bsearch__result-link { grid-template-columns: minmax(0, 1fr); }
	.vf-bsearch__result-where { grid-column: 1; grid-row: auto; margin-top: .25rem; }
}

.vf-bsearch__empty {
	margin-top: 1rem;
	padding: 1rem 1.15rem;
	background: var(--wp--preset--color--cream);
	border-left: 4px solid var(--wp--preset--color--gold);
	border-radius: 0 6px 6px 0;
}
.vf-bsearch__empty-lead {
	margin: 0 0 .6rem;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}
.vf-bsearch__empty-links { margin: 0; padding-left: 1.2rem; }
.vf-bsearch__empty-links li { margin: 0 0 .35rem; line-height: 1.5; }
.vf-bsearch__empty-links li:last-child { margin-bottom: 0; }

/* Read out, not shown: "Official site:" before a bare hostname, which on its
 * own does not say it belongs to somebody else. */
.vf-bsearch__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vf-bsearch__result-link { transition: none; }
}

/* -------------------------------------------------------- footer social icons
 * Icons instead of words (owner, 2026-10-12). Each link keeps its accessible
 * name in aria-label; the URLs are the registry's (tools/ci/validators/social-links.py). */
.vetefits-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: var(--wp--preset--spacing--30);
}
.vetefits-social__label {
	font-size: 0.95rem;
	line-height: 1.7;
}
.vetefits-social__list {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vetefits-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.28);
	color: var(--wp--preset--color--on-navy);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vetefits-social__link:hover,
.vetefits-social__link:focus-visible {
	background: rgba(255,255,255,.1);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}
.vetefits-social__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
.vetefits-social__icon {
	width: 22px;
	height: 22px;
	display: block;
}

/* /benefits/ "Who'll be at the event" (DEC-070, logos DEC-071). Every tile the
 * same size whether it has a logo or only a name; two columns at 375px, more as
 * the band widens, never wider than the viewport. Logos sit on white because
 * several official files (Valley Hope's) ship on a white ground. */
.vetefits-vendor-groups > .wp-block-heading:not(:first-child) {
	margin-top: var(--wp--preset--spacing--50);
}
.vetefits-vendor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vetefits-vendor {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-width: 0;
	min-height: 9rem;
	padding: 1rem 0.75rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	text-align: center;
}
.vetefits-vendor__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 4rem;
}
.vetefits-vendor__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.vetefits-vendor__name {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	overflow-wrap: anywhere;
}
/* A linked tile (BENEFITS_LINKS): the logo and name are one link, laid out
 * exactly like an unlinked tile. */
.vetefits-vendor__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: 4px;
}
.vetefits-vendor__link:hover .vetefits-vendor__name,
.vetefits-vendor__link:focus-visible .vetefits-vendor__name {
	text-decoration: underline;
}
.vetefits-vendor__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy, #18304c);
	outline-offset: 4px;
}
.vetefits-vendor--name-only .vetefits-vendor__name {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

/* ------------------------------------------------------------------------
 * Event-week banner (inc/event-week.php). Gold on the navy header, so it reads
 * as news rather than as more navigation. Navy-deep on gold is well past AA.
 * ---------------------------------------------------------------------- */
.vetefits-eventweek {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-deep);
	font-size: 1rem;
	line-height: 1.5;
}
.vetefits-eventweek[hidden],
.vetefits-eventweek__msg[hidden] { display: none; }
.vetefits-eventweek__inner {
	/* The header's 76rem wide size, inside the same root padding, so the text
	   starts where the logo does. */
	box-sizing: border-box;
	max-width: calc(76rem + var(--wp--style--root--padding-left, 1.25rem) + var(--wp--style--root--padding-right, 1.25rem));
	margin: 0 auto;
	padding: 0.7rem var(--wp--style--root--padding-right, 1.25rem) 0.7rem var(--wp--style--root--padding-left, 1.25rem);
}
.vetefits-eventweek__msg { margin: 0; }
.vetefits-eventweek__cta {
	display: inline-block;
	padding: 0.15rem 0;
	color: var(--wp--preset--color--navy-deep);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}
.vetefits-eventweek__cta::after { content: " \2192"; content: " \2192" / ""; }
.vetefits-eventweek__cta:hover { text-decoration-thickness: 2px; }
.vetefits-eventweek__cta:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy-deep);
	outline-offset: 2px;
}
@media print { .vetefits-eventweek { display: none; } }

/* ------------------------------------------------------------------------
 * "Register free" bar on phones (inc/register-bar.php, #1016). Below 782px
 * only, fixed to the bottom, above the home indicator. The page keeps a
 * bottom padding of the bar's height so the footer is never under it. White
 * on red is 6.6:1, on-navy on navy-deep 15:1 and the gold focus ring on
 * navy-deep 10:1. Hidden while a form field has focus, so it never covers
 * the field above a phone's keyboard.
 * ---------------------------------------------------------------------- */
.vetefits-regbar { display: none; }
@media (max-width: 781px) {
	.vetefits-regbar:not([hidden]) {
		--vf-regbar-h: 3.75rem;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 900;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-height: var(--vf-regbar-h);
		padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
		background: var(--wp--preset--color--navy-deep);
		color: var(--wp--preset--color--on-navy);
		border-top: 2px solid var(--wp--preset--color--gold);
		box-shadow: 0 -4px 16px rgba(4, 18, 42, .25);
	}
	body.has-vetefits-regbar {
		padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
	}
	body:has(:is(input, select, textarea):focus) .vetefits-regbar { display: none; }
	body.has-vetefits-regbar:has(:is(input, select, textarea):focus) { padding-bottom: 0; }
}
@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {
	.vetefits-regbar:not([hidden]) { animation: vf-regbar-in .25s ease-out both; }
}
@keyframes vf-regbar-in { from { transform: translateY(100%); } to { transform: none; } }
.vetefits-regbar__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}
.vetefits-regbar__text strong { color: var(--wp--preset--color--base); }
.vetefits-regbar__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1.1rem;
	border-radius: 6px;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--base);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.vetefits-regbar__cta:hover { background: var(--wp--preset--color--red-deep); color: var(--wp--preset--color--base); }
.vetefits-regbar__cta:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
@media print { .vetefits-regbar { display: none !important; } body.has-vetefits-regbar { padding-bottom: 0; } }

/* -------------------------------------------------- /veterans-day-meals/
 * #865. Count chips and a search box over two lists of compact rows: what you
 * get and where | how to claim it | where it came from. The markup is
 * generated by veterans_day_meals() in tools/build/pages.py; every row is in
 * the HTML, and theme/vetefits/assets/js/vday-filter.js only hides rows.
 *
 * The tools row is printed with `hidden` and revealed by the script, so a
 * visitor without JavaScript sees every row and no controls that do nothing.
 * As with the /benefits/ search, `display` on any of these would beat the
 * attribute, so the [hidden] rules come first.
 *
 * Nothing has a fixed floor: the row is one column below 760px and three
 * minmax(0, …) columns above it, and links may break anywhere (#78).
 */
.vday [hidden] { display: none !important; }
.vday {
	--vday-line: var(--wp--preset--color--border);
	--vday-muted: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}
.vday-tools { display: block; margin: 0 0 0.5rem; }
.vday-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.9rem; }
.vday-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.4rem 1rem;
	border: 1px solid var(--vday-line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
	font: 600 var(--wp--preset--font-size--x-small)/1.2 var(--wp--preset--font-family--body);
	cursor: pointer;
}
.vday-chip b {
	font: 700 1.2rem/1 var(--wp--preset--font-family--display);
	font-variant-numeric: tabular-nums;
}
.vday-chip:hover { border-color: var(--wp--preset--color--navy); }
.vday-chip[aria-pressed="true"] {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
}
.vday-chip:focus-visible,
.vday-search input:focus-visible,
.vday a:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold-deep);
	outline-offset: 2px;
}
.vday-search { margin: 0; }
.vday-search input {
	box-sizing: border-box;
	width: 100%;
	max-width: 28rem;
	min-height: 44px;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--vf-field-border, #6b7c93);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: 400 var(--wp--preset--font-size--small)/1.3 var(--wp--preset--font-family--body);
}
.vday-dot { display: inline-block; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.vday-dot--free { background: #1f6b45; }
.vday-dot--call { background: #a0570a; }
.vday-warn {
	max-width: none;
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--vday-line);
	border-left: 4px solid var(--wp--preset--color--gold-deep);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
}
.vday-warn strong { color: var(--wp--preset--color--navy); }
/* Chips and search share one row on a wide screen (review item 4). The
 * .vday [hidden] rule still wins, so without JavaScript the row stays hidden. */
@media (min-width: 760px) {
	.vday-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; }
	.vday-chips { margin: 0; }
	.vday-search { flex: 1 1 18rem; }
}
/* All, Free and Call ahead fit one 327px line (review item 8). */
@media (max-width: 480px) {
	.vday-chip { padding: 0.4rem 0.75rem; gap: 0.35rem; }
	.vday-chip b { font-size: 1.05rem; }
	.vday-chips { gap: 0.4rem; margin-bottom: 0.6rem; }
	.vday-warn { margin-top: 0.9rem; padding: 0.7rem 0.9rem; }
}
.vday-checked { margin: 0.5rem 0 0; color: var(--vday-muted); font-size: var(--wp--preset--font-size--x-small); }
.vday-lede { max-width: 60ch; }
.vday-status { margin: 1rem 0 0; font-weight: 600; }
.vday-status:empty { display: none; }
.vday-group { margin-top: clamp(1.5rem, 3vw, 2rem); }
.vday-group h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
	color: var(--wp--preset--color--navy);
	font: 700 var(--wp--preset--font-size--x-large)/1.2 var(--wp--preset--font-family--display);
}
.vday-group h2 .vday-dot { align-self: center; }
.vday-group h2 small {
	color: var(--vday-muted);
	font: 600 var(--wp--preset--font-size--x-small)/1 var(--wp--preset--font-family--body);
}
.vday-gsub { margin: 0.2rem 0 0.6rem; color: var(--vday-muted); }
.vday-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--vday-line); }
.vday-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4rem;
	margin: 0;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--vday-line);
}
@media (min-width: 760px) {
	.vday-row {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.6fr);
		gap: 1.25rem;
	}
}
.vday-row > div { min-width: 0; }
.vday-row p { margin: 0; }
.vday-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.vday-nm h3 {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font: 700 var(--wp--preset--font-size--medium)/1.3 var(--wp--preset--font-family--body);
}
.vday-pill {
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}
.vday-pill--ok { background: #e3f1e8; color: #1a5c3b; }
.vday-pill--past {
	background: transparent;
	color: var(--vday-muted);
	box-shadow: inset 0 0 0 1px var(--vday-line);
}
.vday-offer { margin-top: 0.35rem !important; font-weight: 600; }
.vday-where,
.vday-how p { color: var(--vday-muted); font-size: var(--wp--preset--font-size--small); }
.vday-how p:first-child { color: var(--wp--preset--color--contrast); font-weight: 600; }
.vday-how p + p { margin-top: 0.25rem; }
.vday-label {
	margin-right: 0.3rem;
	color: var(--wp--preset--color--gold-text);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.vday-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; font-size: var(--wp--preset--font-size--x-small); }
@media (min-width: 760px) {
	.vday-src { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
}
.vday-src a { color: var(--wp--preset--color--navy); overflow-wrap: anywhere; }
.vday-when { color: var(--vday-muted); }
@media print {
	.vday-tools, .vday-status { display: none !important; }
	.vday-row { break-inside: avoid; }
}

/* -------------------------------------------------- /home-adaptation-grants/
 * The same rows as /veterans-day-meals/, with the amount as the thing you read
 * first. Generated by home_adaptation_grants() in tools/build/pages.py.
 */
.vday-dot--va { background: var(--wp--preset--color--navy); }
.vday-dot--co { background: var(--wp--preset--color--gold-deep); }
.hag-chips { margin-bottom: 0.5rem; }
.hag-chip { text-decoration: none; }
.hag-chip:hover { color: var(--wp--preset--color--navy); }
.hag-row { gap: 0.75rem; padding: 1.1rem 0; }
@media (min-width: 760px) {
	.hag-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
		gap: 1.5rem;
	}
}
.hag-for { margin-top: 0.35rem !important; color: var(--vday-muted); }
.vday-row .hag-amount {
	color: var(--wp--preset--color--navy);
	font: 700 var(--wp--preset--font-size--large)/1.2 var(--wp--preset--font-family--display);
	font-variant-numeric: tabular-nums;
}
.hag-rest { margin-top: 0.15rem !important; color: var(--vday-muted); }
.hag-pays p + p + p,
.hag-how p + p { margin-top: 0.5rem; }
.hag-links span:not(.vday-label) { display: block; }
.hag-links a { color: var(--wp--preset--color--navy); overflow-wrap: anywhere; }
.vday-group[aria-labelledby^="hag-"] { scroll-margin-top: 6rem; }
.hag-gather { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 760px) {
	.hag-gather { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
}
.hag-gather h2 {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font: 700 var(--wp--preset--font-size--x-large)/1.2 var(--wp--preset--font-family--display);
}
.hag-list { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.hag-list li + li { margin-top: 0.35rem; }
.hag-first { margin: 0; }
.hag-first p { margin: 0; }
.hag-first p + p { margin-top: 0.5rem; }
.hag-first a { color: var(--wp--preset--color--navy); }