/* Volunteer Blue — Home Page (Focused Funnel) bands.
   Upload to: wp-content/themes/Zephyr-Child/css/vb-home.css
   (companion to the vb-home-bands.php mu-plugin, which also accepts a copy
   sitting beside itself in wp-content/mu-plugins/ as a fallback)
   All classes are vbh- prefixed so nothing collides with Zephyr/Impreza. */
.vbh-hero, .vbh-band {
	--vbh-navy: #0a2852;
	--vbh-blue: #1a56b0;
	--vbh-sky: #38b6ff;
	/* the logo cyan: kicker and card titles both use it */
	--vbh-sky-soft: #e8f4ff;
	--vbh-red: #e03131;
	/* Button colour. This pair is the default (red) and is what the hero CTA
	   uses; the impact band overrides it just below. Two tokens, two places to
	   look. */
	--vbh-btn: #e03131;
	--vbh-btn-hover: #c92a2a;
	--vbh-ink: #20262e;
	--vbh-muted: #5a6675;
	--vbh-line: #e3e8ef;
	--vbh-radius: 14px;
	--vbh-shadow: 0 2px 14px rgba(10, 40, 82, .08);
	--vbh-shadow-lg: 0 10px 34px rgba(10, 40, 82, .16);
	--vbh-maxw: 1320px;
}

/* The impact band's buttons are the bright blue, matching the card titles, so
   red stays reserved for the hero's single primary CTA and the hierarchy reads.
   Redeclaring the tokens here is all it takes — .vbh-btn itself is unchanged. */
.vbh-band {
	--vbh-btn: #1668d8;
	--vbh-btn-hover: #1055b8;
}

.vbh-wrap {
	max-width: var(--vbh-maxw);
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- Buttons ---------- */

/* Buttons.
   Two deliberate choices here, both about the fuzzy text:
   1. font-family: inherit. Kanit was a PROTOTYPE-ONLY font — it appears nowhere
      in Zephyr-Child, whose only bundled family is DIN Alternate (regular and
      bold). Naming Kanit just fell through to an unpredictable fallback, so we
      now use whatever heading font the site is actually set to.
   2. font-weight: 700, never 800/900. DIN Alternate ships regular and bold
      only; asking for a heavier weight makes the browser SYNTHESISE it by
      smearing the outlines, which is what looked fuzzy — worst at small sizes,
      which is why the buttons showed it first.
   `filter` on hover is also avoided: it promotes the button to its own
   composited layer, where text can rasterise softly mid-transition. */
.vbh-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--vbh-btn);
	color: #fff !important;
	font-family: inherit;
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: .2px;
	line-height: 1.2;
	padding: 11px 22px;
	border-radius: 9px;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color .12s ease;
}

.vbh-btn:hover {
	background-color: var(--vbh-btn-hover);
	color: #fff !important;
}

/* ---------- HERO ----------
   The colour band bleeds edge to edge; the PHOTO does not. The photo layer is
   capped at the same max-width as the rest of the content and right-aligned
   inside it, so on a very wide screen the Capitol stays where it would be on a
   normal-width screen and the band colour simply continues past it on both
   sides. The band colour is sampled from the photo's own left edge (see
   vb_home_image_edge_color) so the join is invisible. The photo is never
   scaled beyond its natural aspect ratio. */
.vbh-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
}

.vbh-hero-photo, .vbh-hero-tint {
	position: absolute;
	top: 0;
	bottom: 0;
	pointer-events: none;
}

.vbh-hero-photo {
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--vbh-maxw);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	z-index: -2;
}

.vbh-hero-tint {
	left: 0;
	right: 0;
	z-index: -1;
}

/* Height comes from the min-height the plugin puts on .vbh-hero, driven by the
   Band height field — NOT from the WPBakery row. A row taller than this band
   shows its own background as stripes above and below, which is what the
   leftover blue was. */
.vbh-hero-inner {
	flex: 1;
	max-width: var(--vbh-maxw);
	margin: 0 auto;
	padding: 48px 20px 52px;
	text-align: center;
}

/* Rich-text headline. Inline colour/size set in the editor overrides these. */
.vbh-hero-headline {
	font-family: inherit;
	font-weight: 700;
	font-size: 46px;
	line-height: 1.06;
	letter-spacing: .2px;
	max-width: 19ch;
	margin: 0 auto 24px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}

.vbh-hero-headline p {
	margin: 0 0 .3em;
	color: inherit;
}

.vbh-hero-headline p:last-child {
	margin-bottom: 0;
}

.vbh-hero .vbh-btn {
	padding: 15px 38px;
	font-size: 19px;
	border-radius: 11px;
}

.vbh-hero-sub {
	font-family: inherit;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffd7d7;
	margin-top: 20px;
}

.vbh-hero-sub p {
	margin: 0;
	color: inherit;
}

@media (max-width: 760px) {
	.vbh-hero-inner {
		padding: 46px 20px 52px;
	}
	
	.vbh-hero-headline {
		font-size: 30px;
	}
	
	.vbh-hero .vbh-btn {
		font-size: 17px;
		padding: 13px 30px;
	}
	
	.vbh-hero-sub {
		font-size: 15px;
	}
}

/* ---------- BAND ----------
   Every band breaks out to full width, exactly like the hero. This is what makes
   the headings line up: a band left inside its WPBakery column centres its
   content on the THEME's container width, while a full-bleed band centres on the
   viewport — two different left edges, which is why the two headings didn't
   align. With all bands full-bleed, every .vbh-wrap resolves to the same
   1320px column and everything lines up down the page. */
.vbh-band {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 46px 0 50px;
}

.vbh-band-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

/* Colours are stated with .vbh-band in front so they survive a WPBakery row
   whose text colour is set to light — otherwise the heading renders white on
   white and looks like a blank gap above the cards. */
.vbh-band .vbh-kick {
	font-size: 18.75px;
	/* halfway between the original 12.5px and 25px */
	font-weight: 700;
	letter-spacing: 1.3px;
	/* eased off from 1.5px: wide tracking reads as
	                             gappy once the type gets bigger */
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--vbh-sky);
	margin-bottom: 6px;
}

.vbh-band .vbh-band-head h2 {
	font-family: inherit;
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.4px;
	color: var(--vbh-navy);
}

.vbh-band .vbh-more {
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	color: var(--vbh-blue);
	text-decoration: none;
}

@media (max-width: 760px) {
	.vbh-band {
		padding: 34px 0 38px;
	}
	
	.vbh-band .vbh-band-head h2 {
		font-size: 29px;
	}
	
	.vbh-band .vbh-kick {
		font-size: 15px;
	}
}

/* ---------- CARDS ---------- */
.vbh-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}

.vbh-cards-2 {
	grid-template-columns: repeat(2, 1fr);
}

.vbh-cards-1 {
	grid-template-columns: minmax(0, 560px);
	justify-content: center;
}

@media (max-width: 1000px) {
	.vbh-cards, .vbh-cards-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.vbh-cards, .vbh-cards-2, .vbh-cards-1 {
		grid-template-columns: 1fr;
	}
}

.vbh-card {
	background: #fff;
	border: 1px solid var(--vbh-line);
	border-radius: var(--vbh-radius);
	box-shadow: var(--vbh-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}

.vbh-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--vbh-shadow-lg);
}

/* Squarer than a letterbox strip, and driven by aspect ratio so all three
   cards keep the same image height whatever the column width. */
.vbh-card-pic {
	position: relative;
	aspect-ratio: 16/11;
	background-color: #123f80;
	background-size: cover;
	background-position: center 28%;
}

.vbh-card-pill {
	position: absolute;
	top: 11px;
	left: 11px;
	background: var(--vbh-red);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
}

.vbh-card-body {
	padding: 14px 17px 17px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

/* Every colour inside a card is stated at .vbh-band .vbh-card depth. A
   WPBakery row set to light text otherwise wins and the titles render white on
   white — which is exactly what happened to the h2 and to these titles. */
.vbh-band .vbh-card .vbh-card-body h3, .vbh-band .vbh-card .vbh-card-body h3 a, .vbh-band .vbh-card .vbh-card-body h3 a:hover, .vbh-band .vbh-card .vbh-card-body h3 a:focus {
	font-family: inherit;
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	/* Editors enter titles inconsistently — some all-caps, some sentence case.
	   Normalising here means the row always looks deliberate, and the stored
	   title keeps whatever casing was typed. */
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--vbh-sky);
	text-decoration: none;
}

.vbh-band .vbh-card .vbh-card-meta {
	font-size: 13px;
	color: var(--vbh-muted);
}

.vbh-band .vbh-card .vbh-card-body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--vbh-ink);
}

.vbh-card-body .vbh-btn {
	margin-top: auto;
	align-self: center;
}

/* ---------- Editor-only empty state ---------- */
.vbh-empty {
	max-width: var(--vbh-maxw);
	margin: 20px auto;
	padding: 13px 17px;
	background: #fff8e6;
	border: 1px solid #f4e2b0;
	border-radius: 12px;
	color: #6b5200;
	font-size: 14px;
}

/* Keep the scroll target clear of the sticky header (mirrors the popup snippet). */
#take-action {
	scroll-margin-top: 100px;
}

/* ---------- KEY RACES BAND ----------
   Rows, not one big grid: each chamber gets a labelled row, so the label can
   sit beside its own tiles and the row can end in a link cell. Column count
   comes from --vbh-race-cols, set inline per row, which is what lets the
   "races per chamber" and "end of each row" fields change the layout without
   touching this file. */

/* Its own full-width background, so it reads as a distinct band whatever the
   WPBakery row behind it is set to (same technique as the hero). */

/* Tighter than the other bands: the row labels do the explaining, so the header
   only needs the heading, subheading and the all-races link. */
.vbh-band-races {
	padding: 34px 0 40px;
}

.vbh-band-races .vbh-band-head {
	margin-bottom: 16px;
	align-items: center;
}

/* Subheading under the band heading.
   Grey rather than a navy: a navy sits too close to the heading's own colour to
   separate from it, whereas the grey reads as a different kind of voice.
   Italic to make that voice conversational — an aside, not a second headline.
   font-weight is stated explicitly because the WPBakery Text Block wrapping the
   shortcode renders its paragraphs bold, which made this compete with the
   heading. The logo cyan was considered and rejected: it measures 2.0:1 against
   this band's pale blue, well under the 4.5:1 needed at this size. The grey is
   5.2:1. */
.vbh-band .vbh-subhead {
	margin: 7px 0 0;
	font-family: inherit;
	font-size: 17.5px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.45;
	color: var(--vbh-muted);
	max-width: 74ch;
}

/* The band's CTA is a button, sized up a little from the card buttons so it
   carries the whole band rather than looking like a fourth card action. */
.vbh-band-races .vbh-band-head .vbh-btn {
	font-size: 16px;
	padding: 13px 26px;
}

@media (max-width: 760px) {
	.vbh-band .vbh-subhead {
		font-size: 15px;
	}
	
	.vbh-band-races {
		padding: 26px 0 32px;
	}
}

.vbh-race-row + .vbh-race-row {
	margin-top: 26px;
}

/* Row label with a hairline rule running out to the right edge. */
.vbh-band .vbh-race-rowhead {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.vbh-band .vbh-race-rowhead span {
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--vbh-sky);
	white-space: nowrap;
}

.vbh-band .vbh-race-rowhead::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	color: var(--vbh-sky);
	opacity: .45;
}

.vbh-race-line {
	display: grid;
	grid-template-columns: repeat(var(--vbh-race-cols, 5), 1fr);
	gap: 20px;
	align-items: start;
}

/* One race tile: square, headshot filling it, race name large over a scrim.
 *
 * The square comes from an in-flow ::before spacer, NOT from `aspect-ratio`.
 * Every visible child here — photo, pill, text — is absolutely positioned, so
 * the tile has no in-flow content of its own and an auto-height grid row has
 * nothing to measure. While each row also held a link cell (which does have
 * real content) the row got its height from that and the tiles stretched to
 * match; the moment those cells were removed, every item in the row had zero
 * content height and all the tiles collapsed to nothing.
 *
 * A padding-based spacer is real in-flow content, so the row always has a
 * height to measure regardless of what else is in it. */
.vbh-race {
	position: relative;
	display: block;
	border-radius: var(--vbh-radius);
	overflow: hidden;
	background: var(--vbh-navy);
	box-shadow: var(--vbh-shadow);
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease;
}

.vbh-race::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.vbh-race:hover {
	transform: translateY(-3px);
	box-shadow: var(--vbh-shadow-lg);
}

.vbh-race-pic {
	position: absolute;
	inset: 0;
	background-color: var(--vbh-navy);
	background-size: cover;
	background-position: center 12%;
}

/* The scrim is on the text wrapper, not the image, so it always covers exactly
   as much as the text needs. */
.vbh-race-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	padding: 34px 14px 13px;
	background: linear-gradient(180deg, rgba(10, 40, 82, 0), rgba(10, 40, 82, .82) 42%, rgba(10, 40, 82, .95));
}

.vbh-band .vbh-race-label {
	display: block;
	font-family: inherit;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.08;
	letter-spacing: -.2px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* "North Carolina" and "New Hampshire" need to come down a step to stay on two
   lines inside a square tile; "Texas" and "MI-10" do not. */
.vbh-band .vbh-race-label-long {
	font-size: 20px;
}

.vbh-band .vbh-race-name {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: #cfe4ff;
}

.vbh-race-pill {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	font-family: inherit;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	color: #fff;
}

.vbh-race-pill.is-flip {
	background: var(--vbh-red);
}

.vbh-race-pill.is-hold {
	background: var(--vbh-blue);
}

/* End-of-row link cell. Same square footprint as a tile so the grid stays even,
   but deliberately quieter than the photo tiles: outlined rather than filled,
   so it reads as "and the rest" instead of a ninth race. */
.vbh-race-end {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	aspect-ratio: 1/1;
	padding: 18px 14px;
	border: 2px solid rgba(10, 40, 82, .16);
	border-radius: var(--vbh-radius);
	background: #fff;
	text-align: center;
	text-decoration: none !important;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.vbh-race-end:hover {
	border-color: var(--vbh-sky);
	transform: translateY(-3px);
	box-shadow: var(--vbh-shadow);
}

.vbh-band .vbh-race-end-text {
	font-family: inherit;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--vbh-navy);
}

.vbh-band .vbh-race-end-arrow {
	font-size: 24px;
	line-height: 1;
	color: var(--vbh-sky);
}

@media (max-width: 1000px) {
	.vbh-race-line {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.vbh-band .vbh-race-end-text {
		font-size: 15px;
	}
}

@media (max-width: 760px) {
	.vbh-race-line {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	
	.vbh-race-row + .vbh-race-row {
		margin-top: 20px;
	}
	
	.vbh-band .vbh-race-label {
		font-size: 21px;
	}
	
	.vbh-band .vbh-race-label-long {
		font-size: 17px;
	}
}

/* ---------- TINY ZOOMS BAND ----------
   A dark band, deliberately: after white and pale blue, navy is a change of
   register rather than a third tint, it bookends the page against the hero, and
   white cards on navy read as objects rather than regions — which does more for
   "colour variety" than adding colours inside the cards would.

   Because the ground is dark, the band's own text has light-on-dark overrides.
   Every colour below was measured against #0a2852 or #ffffff: cyan on navy is
   6.5:1, the light steel 10.9:1, and the two card pills 5.5:1 (red) and 5.2:1
   (blue) on white. The brand red is 4.51:1 on white — technically a pass but
   with no margin at pill size, hence the deeper #c92a2a. */
.vbh-band-zooms .vbh-band-head h2 {
	color: #fff;
}

.vbh-band-zooms .vbh-subhead {
	color: #cfe0f5;
}

/* The band's colour comes from the ACF field, written inline as background-color.
   A gradient is a background-IMAGE, so it layers over that colour instead of
   replacing it — the field keeps working and the gradient follows whatever she
   picks. Deep at the top where it meets the pale races band, opening out to a
   cyan-lit floor: dark-to-lighter without a second flat colour to choose. */
.vbh-band-zooms {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .06) 38%, rgba(56, 182, 255, .1) 76%, rgba(56, 182, 255, .22) 100%);
}

/* The heading link is a text link here, not a button: two buttons in the band
   (sign up, watch) are two meanings, and a third would read as a third one. */
.vbh-band-zooms .vbh-more {
	color: var(--vbh-sky);
}

.vbh-band-zooms .vbh-more:hover {
	text-decoration: underline;
}

.vbh-zooms {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}

.vbh-zooms-2 {
	grid-template-columns: repeat(2, 1fr);
}

.vbh-zooms-1 {
	grid-template-columns: minmax(0, 560px);
}

@media (max-width: 1000px) {
	.vbh-zooms, .vbh-zooms-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.vbh-zooms, .vbh-zooms-2, .vbh-zooms-1 {
		grid-template-columns: 1fr;
	}
}

/* No image on these cards, so the panel itself carries the weight: generous
   padding, and the button pinned to the bottom so a short blurb and a long one
   still line up across the row. */
.vbh-zoom {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 26px 26px;
	background: #fff;
	border-radius: var(--vbh-radius);
	box-shadow: var(--vbh-shadow-lg);
	overflow: hidden;
}

/* A colour bar across the top of each card, in that card's own accent. It
   carries the colour at card scale rather than word scale, and it says
   "these two are the same kind of thing, that one isn't" before the pill is
   read. --vbh-accent is set per card type below and reused by the date. */
.vbh-zoom::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--vbh-accent);
}

.vbh-zoom-upcoming {
	--vbh-accent: #1668d8;
}

.vbh-zoom-watch {
	--vbh-accent: #c92a2a;
}

.vbh-band .vbh-zoom-pill {
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	line-height: 1;
}

.vbh-band .vbh-zoom-pill {
	color: var(--vbh-accent);
}

.vbh-band .vbh-zoom-title, .vbh-band .vbh-zoom-title a {
	margin: 0;
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.22;
	color: var(--vbh-navy);
	text-decoration: none;
}

/* The date in the card's accent rather than grey: a third place the colour
   lands, and the line most people scan for. 5.5:1 and 5.2:1 on white. */
.vbh-band .vbh-zoom-when {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--vbh-accent);
}

.vbh-band .vbh-zoom-text {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--vbh-ink);
}

.vbh-zoom .vbh-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* The recording is a different kind of action, so its button is navy rather
   than the band's blue — distinguishable without introducing a new hue. */
.vbh-zoom-watch .vbh-btn {
	background: var(--vbh-navy);
}

.vbh-zoom-watch .vbh-btn:hover {
	background-color: #123f80;
}

@media (max-width: 760px) {
	.vbh-zoom {
		padding: 20px 20px 22px;
	}
	
	.vbh-band .vbh-zoom-title, .vbh-band .vbh-zoom-title a {
		font-size: 19px;
	}
}

/* ---------- READY TO DIVE IN BAND ----------
   The last band, and the only centred one. Everything above it is a left-
   aligned grid of things to read; this is one question with three answers, so
   centring marks it as the end rather than a sixth section.

   Generous vertical padding on purpose: the page ends here, and the ending
   needs air around it or it reads as a leftover row. */
.vbh-band-start {
	text-align: center;
	padding: 74px 0 84px;
}

/* The heading rides in .vbh-band-head so it inherits the colour rule that
   already survives a WPBakery row text colour. Only the layout changes. */
.vbh-band-start .vbh-band-head-center {
	justify-content: center;
	margin-bottom: 0;
}

/* Bigger than the other band headings — it is the finale, not another section
   label. */
.vbh-band-start .vbh-band-head h2 {
	font-size: 46px;
	color: var(--vbh-navy);
}

/* Equal thirds, not three pills of whatever width their words happen to need.
   A row of matched tiles reads as a deliberate set of choices; pills of three
   different lengths read as leftover buttons. */
.vbh-start-forks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin: 30px auto 0;
	max-width: 1080px;
}

/* Grid items stretch to the tallest row by default, so an open accordion next
   door made the plain tiles grow with it. Both kinds of fork sit at the top of
   the row instead and keep their own height. */
.vbh-start-forks > .vbh-fork, .vbh-start-forks > .vbh-fork-group {
	align-self: start;
}

.vbh-start-forks-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 720px;
}

.vbh-start-forks-1 {
	grid-template-columns: minmax(0, 360px);
	justify-content: center;
}

/* Not .vbh-btn: these are the page's closing choices and carry more weight
   than an in-card button. The gradient runs blue into the navy of the band
   above, so the ending picks up the colour it just left; the arrow sits still
   until hover, then steps right. */
.vbh-fork {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 76px;
	padding: 18px 26px;
	background-image: linear-gradient(135deg, #1a7ae8 0%, #1355ad 55%, #0f3f86 100%);
	color: #fff !important;
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1px;
	text-decoration: none !important;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(10, 40, 82, .22);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* No transform on the text layer itself and no filter: both promote the
	   tile to its own composited layer, where the type rasterises softly. Only
	   the shadow and the arrow move. */
	transition: box-shadow .15s ease;
}

.vbh-fork:hover, .vbh-fork:focus-visible {
	color: #fff !important;
	box-shadow: 0 10px 26px rgba(10, 40, 82, .34);
}

.vbh-fork-arrow {
	font-size: 20px;
	line-height: 1;
	transition: transform .15s ease;
}

.vbh-fork:hover .vbh-fork-arrow, .vbh-fork:focus-visible .vbh-fork-arrow {
	transform: translateX(4px);
}

/* ----- The two expandable forks -----
   A <details> is the grid item; its <summary> is the tile. Picking a state or
   a tactic on the page is the whole point, so the panel opens in place rather
   than sending anyone to an index page first.

   The tile keeps its own hover behaviour; only the marker changes. */
summary.vbh-fork {
	cursor: pointer;
	list-style: none;
	/* Firefox */
	width: 100%;
}

summary.vbh-fork::-webkit-details-marker, summary.vbh-fork::marker {
	display: none;
	content: "";
}

/* The arrow turns to point at the panel it opened, which is the one cue that
   says "this expands" rather than "this navigates". */
.vbh-fork-group[open] > summary.vbh-fork {
	border-radius: 12px 12px 0 0;
}

.vbh-fork-group[open] > summary.vbh-fork .vbh-fork-arrow {
	transform: rotate(90deg);
}

.vbh-fork-group[open] > summary.vbh-fork:hover .vbh-fork-arrow {
	transform: rotate(90deg) translateX(3px);
}

.vbh-fork-panel {
	text-align: left;
	padding: 18px 20px 16px;
	background: #f1f7fe;
	border: 1px solid #cfe0f5;
	border-top: 0;
	border-radius: 0 0 12px 12px;
}

/* Two columns: a single column of twenty-one states would be taller than the
   rest of the page put together. `break-inside` keeps a name from splitting
   across the column break. */
.vbh-fork-list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 18px;
}

.vbh-fork-list li {
	margin: 0;
	break-inside: avoid;
}

.vbh-band .vbh-fork-list a {
	display: block;
	padding: 6px 8px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vbh-blue);
	text-decoration: none;
	border-radius: 6px;
}

.vbh-band .vbh-fork-list a:hover, .vbh-band .vbh-fork-list a:focus-visible {
	background: #fff;
	color: var(--vbh-navy);
}

/* The index page is still one click away for anyone who wants the overview —
   this is what the button's own link becomes once a list takes its place. */
.vbh-band .vbh-fork-all {
	display: inline-block;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #cfe0f5;
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	color: var(--vbh-navy);
	text-decoration: none;
}

.vbh-band .vbh-fork-all:hover {
	text-decoration: underline;
}

/* The closing line: bold, upright, and spaced away from the buttons. It is a
   statement, not a caption — italic made it read as an aside. */
.vbh-band .vbh-start-close {
	margin: 40px 0 0;
	font-size: 25px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: -.2px;
	color: var(--vbh-navy);
}

@media (max-width: 900px) {
	.vbh-start-forks, .vbh-start-forks-2 {
		grid-template-columns: 1fr;
		max-width: 460px;
	}
	
	.vbh-fork {
		min-height: 64px;
	}
}

@media (max-width: 760px) {
	.vbh-band-start {
		padding: 52px 0 58px;
	}
	
	.vbh-fork-list {
		columns: 1;
	}
	
	.vbh-band-start .vbh-band-head h2 {
		font-size: 31px;
	}
	
	.vbh-band .vbh-start-close {
		font-size: 21px;
		margin-top: 32px;
	}
	
	.vbh-start-forks {
		gap: 18px;
		margin-top: 26px;
	}
}