/*
 * TVVA site styles. Values are the 1920 frames' (build notes → Tokens,
 * Layout grid): a 1290 column at x=315, bands 96 top and bottom, section
 * heads eyebrow → 16 → heading, intro → 48 → items.
 *
 * Sections: Base · Buttons and links · Header · Strip · Footer · Forms ·
 * Lists and Formats · Blocks (shared) · Block styles (one per style).
 * Per-block overrides of parent blocks: css/blocks/<block>.css.
 */

/* ==== Base ================================================================ */

body {
	background: var(--surface-page);
	color: var(--text-secondary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: var(--line-height-body);
}

/* The parent sets every <p> to 500 / 1.4 / 16-18px; paragraphs take their
container's type here and the containers carry it (Habitation trap). */
p {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	font-family: inherit;
}

:is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-family-heading);
	font-weight: 400;
	color: var(--color-heading);
	letter-spacing: 0;
}

h4, h5, h6 {
	line-height: 1.3;
}

/* Figma breaks headings greedily; the parent balances them, which moves
line breaks ("board- / led organization"). */
.lp-block :is(h1, h2, h3, h4) {
	text-wrap: wrap;
}

.site-main {
	overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

:target,
.lp-block[id] {
	scroll-margin-top: 24px;
}

.lp-eyebrow {
	font-family: var(--font-family-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-accent);
	margin: 0 0 var(--tv-space-heading);
}

/* Section headers (h2 in every block): Merriweather 42/56 */
.lp-block :is(.lp-two-column__header, .lp-callout__header, .lp-multi-column__header, .lp-form__header, .lp-faq__header, .lp-gallery__header, .lp-quote__header) {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-section-header);
	font-weight: 400;
	line-height: 1.333;
	color: var(--color-heading);
	margin: 0;
}

/* Body copy: 18/28 grey on cream, #E7EAE4 on green */
.lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-multi-column__body, .lp-form__content, .lp-hero__content) {
	font-size: 18px;
	line-height: 28px;
	color: var(--text-secondary);
}

.lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-multi-column__body, .lp-form__content, .lp-hero__content) > * + * {
	margin-top: 26px;
}

.lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-multi-column__body, .lp-form__content, .lp-hero__content) p {
	margin: 0;
}

/* Figma separates paragraphs with a blank line at the copy's own line height. */
.lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-multi-column__body, .lp-form__content, .lp-hero__content, .lp-multi-column__card-body, .lp-multi-column__icon-card-body) > * + p {
	margin-top: 1lh;
}

/* ==== Buttons and links =================================================== */

/* Public Sans 500 16, 60 tall, 6px corners, no shadow. Gold with deep green
ink; the outline is 1.5px green on cream, cream on green. */
a.btn,
.tv-footer .gform_button,
.lp-block .gform_wrapper .gform_footer .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 0 28px;
	border-radius: var(--btn-radius);
	box-shadow: none;
	font-family: var(--font-family-button);
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
	text-decoration: none;
	transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}

a.btn-primary {
	background-color: var(--accent-300);
	color: var(--neutral-400);
	border: 0;
}

a.btn-primary:hover,
a.btn-primary:focus-visible {
	background-color: var(--cta-hover);
	color: var(--neutral-400);
}

a.btn-secondary {
	background-color: transparent;
	color: var(--primary-300);
	border: 1.5px solid currentColor;
	padding: 0 30.5px;
}

a.btn-secondary:hover,
a.btn-secondary:focus-visible {
	background-color: var(--primary-300);
	color: var(--tv-cream);
	border-color: var(--primary-300);
}

.is-dark a.btn-secondary {
	color: var(--tv-cream);
}

.is-dark a.btn-secondary:hover,
.is-dark a.btn-secondary:focus-visible {
	background-color: var(--tv-cream);
	color: var(--primary-300);
	border-color: var(--tv-cream);
}

/* Green button (Home hero "Read the plan", community cards): green fill,
cream text; gold on hover, as the frames' hover states show. */
a.btn-dark {
	background-color: var(--primary-300);
	color: var(--tv-cream);
	border: 1.5px solid var(--tv-cream);
	padding: 0 30.5px;
}

a.btn-dark:hover,
a.btn-dark:focus-visible {
	background-color: var(--accent-300);
	border-color: var(--accent-300);
	color: var(--neutral-400);
}

/* Small buttons: 48 tall (cards) */
a.btn.tv-btn-sm {
	min-height: 48px;
	padding: 0 20px;
}

/* Arrow links: Public Sans 500 16 with a 16px arrow, 8 apart */
.tv-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-family-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: var(--primary-300);
	text-decoration: none;
}

.tv-arrow-link::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("../assets/icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../assets/icons/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--motion-fast);
}

.tv-arrow-link:hover::after {
	transform: translateX(3px);
}

.tv-arrow-link .tv-icon {
	display: none; /* links built in PHP carry an inline arrow; the ::after draws it */
}

.is-dark .tv-arrow-link {
	color: var(--accent-300);
}

/* A row of Formats buttons */
p.tv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Stack the arrow links of a section head, 14 apart */
p.tv-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.tv-icon {
	display: block;
	width: 1em;
	height: 1em;
	flex: none;
}

/* ==== Header ============================================================== */

.site-header.lp-header {
	background: var(--tv-cream);
	box-shadow: none;
	border: 0;
	padding-inline: 0;
}

/* Six items on one line (2026-11-05 nav: "Business Directory" made it 702px
wide at 32px gaps). The frame keeps 32px between items and ~25px before the
buttons; under 1360 the item gap tightens so the line still fits at the
1280 breakpoint (below it the parent hides this nav). */
.lp-header__nav .lp-header__menu {
	gap: clamp(16px, 20vw - 240px, 32px);
}

.lp-header__nav .lp-header__link {
	white-space: nowrap;
}

.lp-header .lp-header__inner {
	max-width: calc(var(--content-max-width) + 2 * var(--side-margin));
	margin-inline: auto;
	padding: 4px var(--side-margin) 5px;
	min-height: 141px;
	gap: 64px;
}

.lp-header .site-branding {
	flex: none;
}

.lp-header .custom-logo-link,
.lp-header .custom-logo {
	display: block;
	width: 165px;
	height: auto;
	max-height: none;
}

.lp-header .site-branding :is(.site-title, .site-description) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.lp-header__nav {
	flex: 1;
	margin-right: -40px; /* nav → buttons 24px (the frame: 25), logo → nav stays 64 */
}

.lp-header__nav .lp-menu__link,
.lp-header__nav > ul > li > a,
.lp-header__nav a {
	font-family: var(--font-family-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	color: var(--primary-300);
}

.tv-header__actions {
	display: flex;
	gap: 12px;
	flex: none;
	margin-left: auto;
}

.tv-header__actions a.btn {
	min-height: 60px;
}

.tv-header__actions a.btn-primary {
	padding: 0 28px;
}

/* ==== The strip under the nav ("Next hearing") ============================ */

.tv-bar {
	background: var(--neutral-400);
	color: var(--tv-cream);
}

.tv-bar__inner {
	max-width: calc(var(--content-max-width) + 2 * var(--side-margin));
	margin-inline: auto;
	padding: 13px var(--side-margin);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	flex-wrap: wrap;
}

.tv-bar__message {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
}

.tv-bar__label {
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--accent-300);
}

.tv-bar .tv-arrow-link {
	color: var(--accent-300);
}

/* ==== Footer ============================================================== */

.site-footer.lp-footer {
	background: var(--neutral-400);
	color: var(--primary-100);
	padding: 0;
}

.tv-footer {
	max-width: calc(var(--content-max-width) + 2 * var(--side-margin));
	margin-inline: auto;
	padding: 80px var(--side-margin) 32px;
}

.tv-footer__top {
	display: grid;
	grid-template-columns: 1fr 520px;
	grid-template-rows: minmax(170px, auto); /* the frame's top row */
	gap: 40px 140px;
	padding-bottom: 44px;
	border-bottom: 1px solid rgb(255 253 241 / 0.15);
}

.tv-footer__name {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: 26px;
	line-height: 34px;
	color: var(--tv-cream);
}

.tv-footer__tagline {
	margin: 12px 0 0;
	font-family: var(--font-family-heading);
	font-style: italic;
	font-size: 18px;
	line-height: 23px;
	color: var(--accent-300);
}

.tv-footer__social {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 12px 0 0;
	padding: 12px 0 0;
}

.tv-footer__social a {
	display: block;
	color: var(--tv-cream);
	font-size: 22px;
}

.tv-footer__social a:hover {
	color: var(--accent-300);
}

.tv-footer__news-title {
	margin: 0;
	font-size: 22px;
	line-height: 28px;
	color: var(--tv-cream);
}

.tv-footer__news-text {
	margin: 14px 0;
	font-size: 18px;
	line-height: 21px;
	color: var(--primary-100);
}

/* One column per Footer menu heading, sized to its links and centred as a
group (three columns since 2026-11-05; the frame centres them at a 330px
pitch: 540 / 870 / 1200 at 1920, built 554 / 870 / 1211). */
.tv-footer__links {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: center;
	grid-auto-rows: minmax(220px, auto); /* the frame's link row */
	gap: 32px min(185px, 12vw);
	padding: 44px 0;
	border-bottom: 1px solid rgb(255 253 241 / 0.15);
}

.tv-footer__heading {
	margin: 0 0 14px;
	font-size: 20px;
	line-height: 25px;
	color: var(--tv-cream);
}

.tv-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 38px;
}

.tv-footer a {
	color: inherit;
	text-decoration: none;
}

.tv-footer__col a:hover,
.tv-footer__bottom a:hover {
	color: var(--accent-300);
}

.tv-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 8px 32px;
	flex-wrap: wrap;
	padding-top: 44px;
	font-size: 17px;
	line-height: 20px;
	color: #CCD1CC;
}

.tv-footer__legal {
	margin: 0;
}

.tv-footer__bottom-links {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tv-footer__bottom-links li + li::before {
	content: "|";
	margin: 0 8px;
}

/* The newsletter form: email and button on one line */
.tv-footer .gform_wrapper form {
	display: flex;
	gap: 12px;
}

.tv-footer .gform_wrapper .gform_body {
	flex: 1;
}

.tv-footer .gform_wrapper .gform_fields {
	display: block;
}

.tv-footer .gform_wrapper .gform_footer {
	margin: 0;
	padding: 0;
}

.tv-footer .gform_wrapper input[type="email"] {
	height: 56px;
	padding: 0 18px;
	background: rgb(255 255 255 / 0.06);
	border: 1px solid rgb(255 253 241 / 0.35);
	border-radius: var(--btn-radius);
	color: var(--tv-cream);
	font-size: 18px;
	box-shadow: none;
}

.tv-footer .gform_wrapper input[type="email"]::placeholder {
	color: #CCD1CC;
	opacity: 1;
}

.tv-footer .gform_wrapper .gform_button {
	min-height: 56px;
	width: 160px;
	padding: 0;
	background: var(--accent-300);
	color: var(--neutral-400);
	border: 0;
	font-size: 18px;
	line-height: 21px;
	cursor: pointer;
}

/* ==== Forms (the form cards) ============================================== */

.gform_wrapper.gform-theme {
	--gf-ctrl-label-color-primary: var(--neutral-400);
	--gf-ctrl-label-font-size-primary: 16px;
	--gf-ctrl-label-font-weight-primary: 500;
	--gf-ctrl-font-family: var(--font-family-body);
	--gf-ctrl-size-xl: 56px;
	--gf-ctrl-size-md: 56px;
	--gf-ctrl-border-color: var(--neutral-200);
	--gf-ctrl-radius: 6px;
	--gf-ctrl-bg-color: #FFFFFF;
	--gf-ctrl-btn-bg-color-primary: var(--accent-300);
	--gf-ctrl-btn-color-primary: var(--neutral-400);
	--gf-ctrl-btn-font-family: var(--font-family-body);
	--gf-ctrl-btn-font-size: 18px;
	--gf-ctrl-btn-font-weight: 500;
	--gf-ctrl-btn-radius: 6px;
	--gf-ctrl-btn-size: 56px;
	--gf-ctrl-btn-padding-x: 28px;
	--gf-color-primary: var(--accent-300);
	--gf-color-primary-contrast: var(--neutral-400);
	--gf-form-gap-y: 24px;
	--gf-field-gap-x: 24px;
	--gf-label-space-primary: 10px;
	--gf-font-family-base: var(--font-family-body);
}

.lp-block .gform_wrapper .gfield_label,
.lp-block .gform_wrapper legend.gfield_label {
	font-family: var(--font-family-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
	color: var(--neutral-400);
	margin-bottom: 10px;
}

.lp-block .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], select) {
	height: 56px;
	border: 1px solid var(--neutral-200);
	border-radius: 6px;
	background: #FFFFFF;
	box-shadow: none;
	font-size: 16px;
}

.lp-block .gform_wrapper textarea {
	block-size: 128px;
	min-block-size: 128px;
	border: 1px solid var(--neutral-200);
	border-radius: 6px;
	background: #FFFFFF;
	box-shadow: none;
}

.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_asterisk {
	color: var(--accent-400);
	font-size: 16px;
	font-weight: 500;
}

.lp-block .gform_wrapper .gform_footer {
	margin-top: 24px;
	padding: 0;
}

.lp-block .gform_wrapper .gform_footer .gform_button {
	min-height: 56px;
	background: var(--accent-300);
	color: var(--neutral-400);
	border: 0;
	font-size: 18px;
	line-height: 21px;
	padding: 0 28px;
	cursor: pointer;
}

.lp-block .gform_wrapper .gform_footer .gform_button:hover {
	background: var(--cta-hover);
}

/* Check and radio options: 16/24 grey, a 16px box */
.lp-block .gform_wrapper .gchoice label {
	font-size: 16px;
	line-height: 24px;
	color: var(--text-secondary);
}

/* ==== Lists and Formats =================================================== */

/* Check lists: a 22px gold-brown circle check, 14 before the text */
.lp-block ul.tv-checks,
.lp-block .lp-list--checks ul:not([class]),
.tv-checks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tv-checks > li,
.lp-block .lp-list--checks ul:not([class]) > li {
	position: relative;
	padding-left: 32px;
}

.tv-checks > li::before,
.lp-block .lp-list--checks ul:not([class]) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	background: var(--text-accent);
	-webkit-mask: url("../assets/icons/circle-check.svg") center / contain no-repeat;
	mask: url("../assets/icons/circle-check.svg") center / contain no-repeat;
}

/* Stats row (Formats "Stats"): Merriweather 36 gold over a 16px label */
ul.tv-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 72px;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.tv-stats > li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
	font-size: 16px;
	line-height: 19px;
	color: var(--text-secondary);
	min-width: 150px;
}

ul.tv-stats > li::before {
	content: none;
}

ul.tv-stats strong {
	font-family: var(--font-family-heading);
	font-size: 36px;
	font-weight: 400;
	line-height: 45px;
	color: var(--accent-300);
}

.lp-block:not(.is-dark) ul.tv-stats strong {
	color: var(--accent-400);
}

/* Pull quote (Formats): Merriweather 28/40 with a 4px gold rule */
p.tv-pullquote {
	font-family: var(--font-family-heading);
	font-size: 28px;
	line-height: 40px;
	color: var(--color-heading);
	border-left: 4px solid var(--accent-300);
	padding-left: 24px;
}

/* Milestone (Formats): the bold year in Merriweather 64 gold beside its line */
p.tv-milestone {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 24px 0;
	color: var(--text-primary);
}

p.tv-milestone strong {
	font-family: var(--font-family-heading);
	font-size: 64px;
	font-weight: 400;
	line-height: 80px;
	color: var(--accent-300);
	flex: none;
}

.lp-block:not(.is-dark) p.tv-milestone strong {
	color: var(--accent-400);
}

/* ==== Blocks (shared) ===================================================== */

/* Bands: 96 top and bottom, the 1290 column */
.lp-block:is(.lp-two-column, .lp-callout, .lp-multi-column, .lp-form, .lp-faq, .lp-gallery, .lp-quote) {
	padding-block: var(--tv-space-section);
}

.lp-block--surface-subtle {
	background-color: var(--neutral-100);
}

.lp-block--surface-brand {
	background-color: var(--primary-300);
}

.lp-block--surface-dark {
	background-color: var(--neutral-400);
}

.is-dark :is(.lp-two-column__body, .lp-callout__content, .lp-multi-column__body, .lp-form__content, .lp-hero__content) {
	color: var(--primary-100);
}

/* ==== Section head (child blocks) ========================================= */

/* Eyebrow and heading left (up to 700), a note and stacked arrow links from
the column's 770 line (x=1085 at 1920), both from the top; 48 to the items.
(Home puts the note 20 lower than Action Center: built to one, flagged.) */
.tv-section-head {
	display: grid;
	grid-template-columns: minmax(0, 700px) minmax(0, 520px);
	justify-content: space-between;
	column-gap: 40px;
	row-gap: 24px;
	align-items: start;
	margin-bottom: var(--tv-space-stack);
}

.tv-section-head__header {
	margin: 0;
	font-size: var(--font-size-section-header);
	line-height: 1.333;
	color: var(--color-heading);
}

.tv-section-head__aside {
	font-size: 18px;
	line-height: 28px;
	color: var(--text-secondary);
}

.tv-section-head__aside > * {
	margin: 0;
}

.tv-section-head__aside > * + * {
	margin-top: 14px;
}

@media screen and (max-width: 899px) {
	.tv-section-head {
		grid-template-columns: 1fr;
	}
}

/* ==== Fixes found on Home ================================================== */

.tv-bar,
.tv-footer {
	font-family: var(--font-family-body);
}

.lp-block a.tv-arrow-link,
.tv-bar a.tv-arrow-link {
	text-decoration: none;
}

.lp-block a.tv-arrow-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Consecutive bands on the same ground read as one band: the second drops
its top padding (the parent does this for blocks with no background only).
Home: community cards, then the committees, both sand. */
.lp-block--surface-subtle + .lp-block--surface-subtle,
.lp-block--surface-brand + .lp-block--surface-brand {
	padding-top: 0;
}

/* ==== Icon lists (Formats "Icon list": Contact card, Quick facts) ========== */

ul.tv-icon-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

ul.tv-icon-list > li {
	position: relative;
	padding-left: 32px;
	font-size: 16px;
	line-height: 24px;
	color: var(--text-secondary);
}

ul.tv-icon-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	background: var(--accent-400);
	-webkit-mask: var(--tv-i) center / contain no-repeat;
	mask: var(--tv-i) center / contain no-repeat;
}

li.tv-i-map-pin { --tv-i: url("../assets/icons/map-pin.svg"); }
li.tv-i-mail { --tv-i: url("../assets/icons/mail.svg"); }
li.tv-i-facebook { --tv-i: url("../assets/icons/facebook.svg"); }
li.tv-i-calendar { --tv-i: url("../assets/icons/calendar.svg"); }
li.tv-i-landmark { --tv-i: url("../assets/icons/landmark.svg"); }
li.tv-i-shield { --tv-i: url("../assets/icons/shield.svg"); }
li.tv-i-phone { --tv-i: url("../assets/icons/phone.svg"); }
li.tv-i-globe { --tv-i: url("../assets/icons/globe.svg"); }
li.tv-i-user { --tv-i: url("../assets/icons/user.svg"); }

/* The Contact card: sand, 24 in, labels as small gold capitals over 18/28 lines */
ul.tv-contact-card {
	gap: 24px;
	padding: 24px;
	background: var(--neutral-100);
	border-radius: 8px;
}

ul.tv-contact-card > li {
	padding-left: 34px;
	font-size: 18px;
	line-height: 28px;
	color: var(--neutral-400);
}

ul.tv-contact-card > li strong {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--accent-400);
}

ul.tv-contact-card > li strong + br {
	display: none;
}

ul.tv-contact-card a {
	color: inherit;
	text-decoration: none;
}

ul.tv-contact-card a:hover {
	text-decoration: underline;
}

/* Titled check lists (Action Center priorities): bold 18/21 title, 16/26 text */
ul.tv-checks--titled {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

ul.tv-checks--titled > li {
	font-size: 16px;
	line-height: 26px;
	color: var(--text-secondary);
}

ul.tv-checks--titled > li strong {
	display: inline-block;
	font-size: 18px;
	font-weight: 500;
	line-height: 21px;
	color: var(--primary-300);
	margin-bottom: 4px;
}

ul.tv-checks--titled > li::before {
	top: 1px;
}

/* Plain check lists: 18/28 lines, 12 apart (support panel), 16/19 in cards */
ul.tv-checks:not(.tv-checks--titled) {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.is-dark ul.tv-checks > li::before {
	background: var(--accent-300);
}

/* ==== Group: At a glance (Our Community) ==================================== */

/* Sand band: the multi column's intro, then the photo (1290×420, 12px
corners), then the green stats panel lifted 120 over the photo's foot and
inset 48 each side. The multi column and its contents become the group's
grid items so the photo can sit between the intro and the stats. */
.wp-block-group.is-style-glance {
	background: var(--neutral-100);
	padding: 96px max(4vw, var(--side-margin));
	max-width: none;
}

/* WordPress wraps a group's blocks in an inner container (classic theme):
that is the grid. */
.wp-block-group.is-style-glance > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--content-max-width);
	margin-inline: auto;
}

.wp-block-group.is-style-glance .lp-multi-column,
.wp-block-group.is-style-glance .lp-multi-column > .block-contents {
	display: contents;
}

.wp-block-group.is-style-glance .lp-multi-column__intro {
	grid-row: 1;
	margin-bottom: 40px;
}

.wp-block-group.is-style-glance .wp-block-image {
	grid-row: 2;
	margin: 0;
}

.wp-block-group.is-style-glance .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1290 / 420;
	height: auto;
	object-fit: cover;
	border-radius: 12px;
}

.wp-block-group.is-style-glance .lp-multi-column__grid {
	grid-row: 3;
	position: relative;
	z-index: 2;
	margin: -120px 48px 0;
	width: auto;
}

@media screen and (max-width: 767px) {
	.wp-block-group.is-style-glance .lp-multi-column__grid {
		margin: -48px 12px 0;
	}
}

@media screen and (max-width: 899px) {
	.tv-footer__top {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.tv-footer__links {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
		justify-content: stretch;
		column-gap: 30px;
	}
}

@media screen and (max-width: 520px) {
	.tv-footer__links {
		grid-template-columns: 1fr;
	}

	.tv-footer .gform_wrapper form {
		flex-direction: column;
	}

	.tv-footer .gform_wrapper .gform_button {
		width: 100%;
	}
}

/* Inline links in copy on green (Donate "Lend a hand"): gold, underlined on hover. */
.is-dark :is(.lp-callout__content, .lp-two-column__body) p a:not(.btn):not(.tv-arrow-link) {
	color: var(--accent-300);
	font-weight: 500;
	text-decoration: none;
}

.is-dark :is(.lp-callout__content, .lp-two-column__body) p a:not(.btn):not(.tv-arrow-link):hover {
	text-decoration: underline;
}

/* ==== Header on narrow screens ============================================= */

/* Phones: the logo shrinks and the two buttons move into the menu panel
(the parent panel shows the CTA; the child adds the outlined one). */
@media screen and (max-width: 720px) {
	.lp-header .lp-header__inner {
		min-height: 96px;
		gap: 16px;
	}

	.lp-header .custom-logo-link,
	.lp-header .custom-logo {
		width: 100px;
	}

	.tv-header__actions {
		display: none;
	}

	.tv-bar__inner {
		padding-block: 10px;
	}

	.tv-bar .tv-arrow-link {
		font-size: 15px;
	}
}

.lp-header__panel .tv-header__panel-cta2 {
	margin-bottom: 12px;
}

/* Arrow links are not inline copy links: the parent underlines
`.lp-block p a:not(.btn)` (motion.css), which outranks a single class. */
.lp-block p a.tv-arrow-link.tv-arrow-link {
	text-decoration: none;
}

.lp-block p a.tv-arrow-link.tv-arrow-link:hover {
	text-decoration: underline;
}

/* Gravity Forms prints each form's style settings inline under its id
(#gform_wrapper_N), which outranks the label size above: set it outright. */
.lp-block .gform_wrapper.gform-theme .gfield_label,
.lp-block .gform_wrapper.gform-theme legend.gfield_label {
	font-size: 16px !important;
	line-height: 19px !important;
	font-weight: 500 !important;
}

/* Donate "Lend a hand": items are a 500 title over 16/30 copy. */
.lp-callout.is-style-statement .lp-callout__content p:has(> strong:first-child) {
	font-size: 16px;
	line-height: 30px;
}

.lp-callout.is-style-statement .lp-callout__content p:has(> strong:first-child) > strong:first-child {
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-100);
}