/*
 * LA Strong Foundation — component styles.
 *
 * Design tokens live in theme.json and arrive as --wp--preset--* custom
 * properties. This file only styles the composed components: anything that
 * core blocks plus theme.json can't express on their own.
 *
 * Contents
 *   1. Primitives        6. Events
 *   2. Header            7. Volunteer shifts
 *   3. Footer            8. Partners
 *   4. Sections          9. News
 *   5. Buttons          10. Page furniture
 */

/* ─────────────────────────── 1. Primitives ─────────────────────────── */

:root {
	--lsf-line: var(--wp--preset--color--line-100);
	--lsf-radius: 0px;
	--lsf-transition: 160ms ease;
}

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

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

img, svg, video { max-width: 100%; height: auto; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue-600);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem; left: 1rem;
	z-index: 999;
	padding: 12px 20px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-800);
	font-weight: 700;
	clip-path: none;
	width: auto; height: auto;
}

/* Media wrapper — keeps aspect and gives empty slots a visible placeholder. */
.lsf-media {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--bg-100);
}

.lsf-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lsf-media--empty::after {
	content: "";
	display: block;
	padding-top: 66%;
	background:
		repeating-linear-gradient( 45deg,
			var(--wp--preset--color--bg-100) 0 10px,
			var(--wp--preset--color--line-100) 10px 20px );
}

.lsf-icon { display: block; }

.lsf-icon-block { color: var(--wp--preset--color--navy-700); }

.lsf-icon-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lsf-icon-size, 46px);
	height: var(--lsf-icon-size, 46px);
	border: 2px solid currentColor;
	border-radius: 50%;
}

.lsf-empty {
	padding: 24px;
	border: 1px dashed var(--wp--preset--color--line-200);
	color: var(--wp--preset--color--slate-400);
	font-style: italic;
	text-align: center;
}

/* ──────────────────────────── 2. Header ────────────────────────────── */

.lsf-header {
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--blue-100);
	position: relative;
	z-index: 20;
}

.lsf-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* The content box (not the border box) has to equal content-size, so the
	   logo lands on the same left edge as every section below it. */
	max-width: calc(var(--wp--style--global--content-size) + var(--wp--custom--gutter) * 2);
	margin-inline: auto;
	padding: 16px var(--wp--custom--gutter);
}

.lsf-brand {
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	flex: none;
}

.lsf-brand__mark {
	background: var(--wp--preset--color--blue-500);
	padding: 7px 13px;
	border-radius: 8px;
	display: flex;
	align-items: center;
}

.lsf-brand__mark img { height: 68px; width: auto; display: block; }

.lsf-brand__tagline {
	font-family: var(--wp--preset--font-family--script);
	font-size: 21px;
	line-height: 1;
	color: var(--wp--preset--color--blue-200);
	padding-left: 4px;
}

/* Navigation — core/navigation carries the .lsf-nav class, so these rules
   style its own markup (and its accessible responsive overlay) rather than
   a hand-rolled toggle. */

.lsf-nav { --navigation-layout-justify: flex-end; }

.lsf-nav .wp-block-navigation__container,
.lsf-nav ul {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lsf-nav .wp-block-navigation-item__content,
.lsf-nav a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-100);
	text-decoration: none;
	white-space: nowrap;
	padding-block: 6px;
	border-bottom: 2px solid transparent;
	transition: color var(--lsf-transition), border-color var(--lsf-transition);
}

.lsf-nav a:hover,
.lsf-nav a:focus-visible,
.lsf-nav .current-menu-item > a,
.lsf-nav [aria-current="page"] {
	color: var(--wp--preset--color--white);
	border-bottom-color: var(--wp--preset--color--blue-600);
	text-decoration: none;
}

/* Submenus, if the client adds any. */
.lsf-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--navy-900);
	border: 0;
	padding: 8px 0;
	min-width: 220px;
}

.lsf-nav .wp-block-navigation__submenu-container li { border: 0; }
.lsf-nav .wp-block-navigation__submenu-container a { padding: 10px 18px; border-bottom: 0; white-space: normal; }

/* The Donate item is styled in section 11, where core's own anchor
   specificity has to be matched. */

/*
 * Mobile overlay menu.
 *
 * Core's own overlay rule is
 *   .wp-block-navigation:not(.has-background)
 *     .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
 * which is five classes deep and paints the panel white. Anything shorter than
 * that loses, so these selectors deliberately mirror its shape rather than
 * reaching for !important.
 */

.lsf-nav .wp-block-navigation__responsive-container-open,
.lsf-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white);
}

.lsf-nav .wp-block-navigation__responsive-container-open svg,
.lsf-nav .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

.wp-block-navigation.lsf-nav:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background: linear-gradient(
		168deg,
		var(--wp--preset--color--navy-800) 0%,
		var(--wp--preset--color--navy-900) 58%,
		#04102F 100%
	);
	color: var(--wp--preset--color--white);
	padding: 0;
	align-items: stretch;
}

/* A wash of brand blue in the lower corner, so the panel is not a flat field. */
.wp-block-navigation.lsf-nav:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)::before {
	content: "";
	position: absolute;
	inset: auto -30% -20% -30%;
	height: 60%;
	background: radial-gradient(
		ellipse at 30% 100%,
		rgba(36, 80, 200, 0.55) 0%,
		rgba(36, 80, 200, 0) 65%
	);
	pointer-events: none;
}

.lsf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	width: 100%;
	height: 100%;
}

.lsf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 var(--wp--custom--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px);
}

/* Sit the close control on the same baseline as the hamburger it replaces, so
   the panel opens without the corner jumping. */
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 22px;
	right: var(--wp--custom--gutter);
	padding: 6px;
	margin: 0;
	border-radius: 4px;
}

.lsf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

.lsf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	width: 100%;
	padding-block: 96px 0;
}

/* The list fills the panel, so it centres its own items rather than packing
   them to the top and leaving the lower half empty. */
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	width: 100%;
}

/* Core makes each item a flex row justified right — inherited from the desktop
   bar, where the nav is right-aligned. Left here, under the logo. */
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
	display: block;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	width: 100%;
}

.lsf-nav .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* The links carry the display face here rather than the body face: at this
   size they are the page, not a utility strip. Core styles the inner
   .wp-block-navigation-item__content, so padding and width have to land there
   or the row collapses to the text's own height. */
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open a,
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(26px, 7.4vw, 34px);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--wp--preset--color--white);
	text-align: left;
	padding: 15px 0;
	border-bottom: 0;
}

.lsf-nav .wp-block-navigation__responsive-container.is-menu-open a:hover,
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--blue-100);
}

/* Donate breaks out of the list and reads as the action it is. */
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open li.lsf-btn--donate {
	border: 0;
	margin-top: 28px;
	background: transparent;
}

.lsf-nav .wp-block-navigation__responsive-container.is-menu-open li.lsf-btn--donate > a,
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open li.lsf-btn--donate > a:hover,
.lsf-nav .wp-block-navigation__responsive-container.is-menu-open li.lsf-btn--donate > a:focus-visible {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--blue-600);
	color: var(--wp--preset--color--white);
	font-size: 20px;
	letter-spacing: 0.08em;
	text-align: center;
	padding: 18px 24px;
}

/* The real logo, lifted over the panel, rather than a copy baked into CSS.
   Without this the overlay covers the brand and the panel opens anonymous. */
.lsf-header:has(.wp-block-navigation__responsive-container.is-menu-open) .lsf-brand {
	position: relative;
	z-index: 100001;
}

/*
 * The tagline used to sit beside the header logo and was hidden here to stop it
 * crowding the nav. It has been removed from the header outright, so the only
 * .lsf-brand__tagline left is the footer's. That one is hidden on mobile with
 * the footer logo — see .lsf-footer__brand in section 3 — not here.
 */

/* Desktop menu sits a step larger. Held to >=1024px: between the overlay's
   600px breakpoint and here the inline bar is already close to wrapping. */
@media (min-width: 1024px) {
	.lsf-nav .wp-block-navigation-item__content,
	.lsf-nav a {
		font-size: 16px;
	}
}

/* ──────────────────────────── 3. Footer ────────────────────────────── */

.lsf-footer {
	background: var(--wp--preset--color--navy-900);
	color: #8FA6CC;
}

.lsf-footer__inner {
	max-width: calc(var(--wp--style--global--content-size) + var(--wp--custom--gutter) * 2);
	margin-inline: auto;
	padding: 48px var(--wp--custom--gutter);
	display: grid;
	grid-template-columns: 1fr 1.1fr 1fr;
	gap: 36px;
	align-items: start;
}

.lsf-footer h2,
.lsf-footer h3,
.lsf-footer .lsf-footer__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	margin: 0 0 6px;
}

.lsf-footer p,
.lsf-footer li { font-size: 14px; line-height: 1.65; }

.lsf-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.lsf-footer a { color: #8FA6CC; text-decoration: none; }
.lsf-footer a:hover,
.lsf-footer a:focus-visible { color: var(--wp--preset--color--white); text-decoration: underline; }

.lsf-footer .lsf-brand__tagline { font-size: 24px; }

/*
 * The footer's own list rule is `.lsf-footer ul { display: grid }`, which
 * outranks a bare `.lsf-social` — so the social row rendered as a one-column
 * grid with each icon stretched across the full column width. Matched at the
 * same weight here so it stays a row.
 */
.lsf-social { display: flex; gap: 12px; flex-wrap: wrap; }

.lsf-footer ul.lsf-social {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 0;
}

.lsf-footer ul.lsf-social > li {
	display: block;
	width: auto;
	margin: 0;
}

/*
 * In the header the chip sits inside a flex row, so it shrinks to the logo. In
 * the footer it is a block-level child of a grid cell and stretched to the
 * whole column, reading as a blue bar with a small mark parked at one end.
 */
.lsf-footer .lsf-brand__mark {
	display: inline-flex;
	padding: 9px 15px;
}

.lsf-footer .lsf-brand__mark img { height: 66px; }

/*
 * Core sizes the social SVG at 1em, so the glyph is whatever font-size this
 * anchor carries. At the old 12px it sat in a 34px box — a third of the tile,
 * which read as an empty square with something small in the middle. The box
 * and the glyph are now sized together, at roughly half the tile.
 */
.lsf-social a {
	width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #6E8FCB;
	font-size: 21px; font-weight: 700;
	color: var(--wp--preset--color--blue-200);
	transition: background var(--lsf-transition), color var(--lsf-transition), border-color var(--lsf-transition);
}

.lsf-social a:hover,
.lsf-social a:focus-visible {
	background: var(--wp--preset--color--blue-600);
	border-color: var(--wp--preset--color--blue-600);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/*
 * Core's social-links stylesheet ships
 *   .wp-block-social-links .wp-social-link a,
 *   .wp-block-social-links .wp-social-link a:hover { border-bottom: 0 }
 * at (0,3,1), which outranks the `.lsf-social a` rule above and shaved the
 * bottom edge off every icon box — three sides drawn, one missing. Re-stated
 * here at (0,4,1) by anchoring on the <ul>, which carries both classes. The
 * hover state has to be repeated because core zeroes that one separately.
 */
.wp-block-social-links.lsf-social .wp-social-link a {
	border: 2px solid #6E8FCB;
}

.wp-block-social-links.lsf-social .wp-social-link a:hover,
.wp-block-social-links.lsf-social .wp-social-link a:focus-visible {
	border: 2px solid var(--wp--preset--color--blue-600);
}

.lsf-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	padding: 20px var(--wp--custom--gutter);
	max-width: calc(var(--wp--style--global--content-size) + var(--wp--custom--gutter) * 2);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
}

@media (max-width: 1023px) {
	.lsf-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 599px) {
	.lsf-footer__inner { grid-template-columns: 1fr; }

	/*
	 * Once the footer stacks, the logo and "We live to give" are the third
	 * time the mark has appeared on the way down a phone screen, and they push
	 * the links the reader actually came for below the fold. The whole column
	 * goes, not just its contents, so the stacked grid does not keep a gap
	 * where it used to be.
	 */
	.lsf-footer .lsf-footer__brand { display: none; }
}

/* ─────────────────────────── 4. Sections ───────────────────────────── */

.lsf-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 30px;
}

.lsf-section-head > div { display: grid; gap: 4px; }

.lsf-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
}

.lsf-section-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-md);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-more {
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
	text-decoration: none;
	white-space: nowrap;
}

.lsf-more:hover,
.lsf-more:focus-visible { text-decoration: underline; }

/* Dark treatment. */
.lsf-section-head--dark .lsf-section-title { color: var(--wp--preset--color--white); }
.lsf-section-head--dark .lsf-eyebrow,
.lsf-section-head--dark .lsf-more { color: var(--wp--preset--color--blue-200); }

/* The rule-flanked centred heading from the home page. */
.lsf-rule-heading {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-bottom: 42px;
}

.lsf-rule-heading::before,
.lsf-rule-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--line-200);
}

.lsf-tag,
.lsf-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	padding: 7px 12px;
	background: var(--wp--preset--color--blue-600);
	color: var(--wp--preset--color--white);
}

.lsf-badge { position: absolute; left: 0; bottom: 0; }

/* Accent rule under a heading.
   The <hr> keeps the normal flow width so it lines up with the heading above
   it — fighting the constrained layout's `margin-inline: auto !important`
   with margins would push it out to the padding edge instead. The visible
   180px bar is painted with a gradient. */
.lsf-accent-rule {
	width: 100%;
	height: 7px;
	border: 0;
	opacity: 1;
	margin-block: 18px 0;
	background: linear-gradient(
		to right,
		var(--wp--preset--color--blue-600) 0 180px,
		transparent 180px
	);
}

/* Centred where the heading above it is centred. */
.has-text-align-center + .lsf-accent-rule {
	background: linear-gradient(
		to right,
		transparent calc(50% - 90px),
		var(--wp--preset--color--blue-600) calc(50% - 90px) calc(50% + 90px),
		transparent calc(50% + 90px)
	);
}

/* ──────────────────────────── 5. Buttons ───────────────────────────── */

.lsf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	padding: 17px 34px;
	border: 2px solid transparent;
	border-radius: var(--lsf-radius);
	cursor: pointer;
	transition: background var(--lsf-transition), color var(--lsf-transition), border-color var(--lsf-transition);
}

.lsf-btn--primary {
	background: var(--wp--preset--color--blue-600);
	color: var(--wp--preset--color--white);
}

.lsf-btn--primary:hover,
.lsf-btn--primary:focus-visible {
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--white);
}

.lsf-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--white);
	padding: 15px 32px;
}

.lsf-btn--ghost:hover,
.lsf-btn--ghost:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-800);
}

.lsf-btn--outline {
	background: transparent;
	border-color: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--navy-800);
	padding: 15px 32px;
}

.lsf-btn--outline:hover,
.lsf-btn--outline:focus-visible {
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--white);
}

/* ───────────────────────────── 6. Events ───────────────────────────── */

.lsf-events__list { display: grid; gap: 24px; }

.lsf-events--grid .lsf-events__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lsf-events--featured .lsf-events__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/*
 * Past events are a masonry column flow, like the press grid: flyers are every
 * aspect ratio, and a fixed grid would either crop them or leave ragged gaps.
 */
.lsf-events--past .lsf-events__list {
	display: block;
	column-count: 3;
	column-gap: 24px;
}
.lsf-events--compact .lsf-events__list { gap: 16px; }

.lsf-event-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lsf-line);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--slate-600);
	transition: border-color var(--lsf-transition), box-shadow var(--lsf-transition);
}

.lsf-event-card:hover { border-color: var(--wp--preset--color--blue-600); box-shadow: var(--wp--preset--shadow--card); }

.lsf-event-card__figure { position: relative; }
.lsf-event-card__figure .lsf-media { aspect-ratio: 3 / 2; }

.lsf-event-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	flex: 1;
}

.lsf-event-card__meta,
.lsf-event-row__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
}

.lsf-event-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-event-card__title a { color: inherit; text-decoration: none; }
.lsf-event-card__title a:hover { color: var(--wp--preset--color--blue-600); }

.lsf-event-card__excerpt { margin: 0; font-size: 16px; line-height: 1.55; flex: 1; }

.lsf-event-card .lsf-btn { align-self: stretch; margin-top: auto; }

/* Compact date rows. */
/*
 * One row per upcoming event, with the flyer laid over it: taller than the row
 * and vertically centred, so it breaks the top and bottom edges and reads as
 * sitting on top rather than inside. The row keeps enough vertical margin for
 * the overhang, and overflow stays visible so the shadow is not clipped.
 */
.lsf-event-row {
	display: grid;
	grid-template-columns: 84px 1fr 190px;
	align-items: center;
	gap: 20px;
	border: 1px solid var(--lsf-line);
	padding: 18px 22px;
	background: var(--wp--preset--color--white);
	transition: border-color var(--lsf-transition);
	overflow: visible;
	margin-block: 26px;
}

.lsf-event-row:hover { border-color: var(--wp--preset--color--blue-600); }

.lsf-event-row__date {
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 10px;
	background: var(--wp--preset--color--bg-100);
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--navy-800);
	text-transform: uppercase;
}

.lsf-event-row__month { font-size: 14px; font-weight: 700; letter-spacing: var(--wp--custom--tracking--wide); }
.lsf-event-row__day   { font-size: 32px; font-weight: 800; line-height: 1; }

.lsf-event-row__title {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
}

.lsf-event-row__title a { color: var(--wp--preset--color--navy-800); text-decoration: none; }
.lsf-event-row__title a:hover { color: var(--wp--preset--color--blue-600); }

.lsf-event-row__meta { color: var(--wp--preset--color--slate-600); font-weight: 500; letter-spacing: 0; text-transform: none; font-family: var(--wp--preset--font-family--body); font-size: 15px; }

.lsf-event-row__media { width: 140px; aspect-ratio: 3 / 2; }

.lsf-event-row .lsf-btn { padding: 14px 24px; font-size: 14px; }

@media (max-width: 1023px) {
	.lsf-events--grid .lsf-events__list,
	.lsf-events--past .lsf-events__list { column-count: 2; }
	.lsf-event-row { grid-template-columns: 72px 1fr; }
	.lsf-event-row__media { display: none; }
	.lsf-event-row .lsf-btn { grid-column: 1 / -1; }
}

@media (max-width: 719px) {
	.lsf-events__list { grid-template-columns: 1fr !important; }
}

/* ──────────────────── 7. Volunteer shifts ──────────────────────────── */

.lsf-shifts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.lsf-shift {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--lsf-line);
}

.lsf-shift__media { aspect-ratio: 3 / 2; }

.lsf-shift__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }

.lsf-shift__status {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-700);
}

.lsf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lsf-dot, currentColor); flex: none; }

.lsf-shift__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-shift__title a { color: inherit; text-decoration: none; }
.lsf-shift__title a:hover { color: var(--wp--preset--color--blue-600); }

.lsf-shift__meta { margin: 0; font-size: 15px; line-height: 1.55; flex: 1; color: var(--wp--preset--color--slate-600); }
.lsf-shift__note { display: block; color: var(--wp--preset--color--slate-500); }

.lsf-shift .lsf-btn { margin-top: auto; padding: 13px 20px; font-size: 13px; }

/* Navy band treatment. The band's own text is light, but the white cards
   sitting on it must reset to the body colour or the meta line loses all
   contrast against white. */
.lsf-shifts--dark { background: var(--wp--preset--color--navy-800); color: var(--wp--preset--color--blue-100); }

.lsf-shifts--dark .lsf-shift {
	background: var(--wp--preset--color--white);
	border-color: transparent;
	color: var(--wp--preset--color--slate-600);
}

.lsf-shifts--dark .lsf-shift--waitlist { background: transparent; border-color: rgba(255, 255, 255, 0.28); }
.lsf-shifts--dark .lsf-shift--waitlist .lsf-shift__title { color: var(--wp--preset--color--white); }
.lsf-shifts--dark .lsf-shift--waitlist .lsf-shift__status,
.lsf-shifts--dark .lsf-shift--waitlist .lsf-shift__meta { color: var(--wp--preset--color--blue-200); }

@media (max-width: 1023px) { .lsf-shifts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px)  { .lsf-shifts__list { grid-template-columns: 1fr; } }

/* ──────────────────────────── 8. Partners ──────────────────────────── */

.lsf-partners--lead .lsf-partners__list    { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lsf-partners--program .lsf-partners__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lsf-partners--network .lsf-partners__list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }

.lsf-partner-lead {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lsf-line);
	background: var(--wp--preset--color--white);
	transition: border-color var(--lsf-transition), box-shadow var(--lsf-transition);
}

.lsf-partner-lead:hover { border-color: var(--wp--preset--color--blue-600); box-shadow: var(--wp--preset--shadow--card); }
.lsf-partner-lead__media { aspect-ratio: 3 / 2; }
.lsf-partner-lead__body { display: flex; flex-direction: column; gap: 12px; padding: 26px; flex: 1; }
.lsf-partner-lead__logo { height: 54px; display: flex; align-items: center; }
.lsf-partner-lead__logo img { max-height: 54px; width: auto; object-fit: contain; }

.lsf-partner-lead__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}

.lsf-partner-lead__name a { color: var(--wp--preset--color--navy-800); text-decoration: none; }
.lsf-partner-lead__name a:hover { color: var(--wp--preset--color--blue-600); }

.lsf-partner-lead__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.lsf-partner-lead__tags span {
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-500);
	border: 1px solid var(--wp--preset--color--line-200);
	padding: 4px 9px;
}

.lsf-partner-lead__blurb { margin: 0; font-size: 15px; line-height: 1.6; flex: 1; }

.lsf-partner-lead__links { display: flex; gap: 16px; margin: 0; }

.lsf-partner-lead__links a,
.lsf-partner-card__links span {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
	text-decoration: none;
}

.lsf-partner-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: 1px solid var(--lsf-line);
	padding: 24px;
	text-decoration: none;
	background: var(--wp--preset--color--white);
	transition: border-color var(--lsf-transition), box-shadow var(--lsf-transition);
}

.lsf-partner-card:hover { border-color: var(--wp--preset--color--blue-600); box-shadow: var(--wp--preset--shadow--card); }
.lsf-partner-card__logo { height: 60px; display: flex; align-items: center; }
.lsf-partner-card__logo img { max-height: 60px; width: auto; object-fit: contain; }

.lsf-partner-card__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-partner-card__cat { font-size: 14px; color: var(--wp--preset--color--slate-600); flex: 1; }
.lsf-partner-card__links { display: flex; gap: 14px; }

.lsf-partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	padding: 10px;
	border: 1px solid var(--lsf-line);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	color: var(--wp--preset--color--slate-400);
	text-decoration: none;
	transition: border-color var(--lsf-transition), color var(--lsf-transition);
}

/*
 * Hover zoom. The logo grows out of its cell rather than being clipped by it:
 * the border goes transparent so there is no edge for it to cross, the tile is
 * lifted above its neighbours, and a white ground keeps the enlarged mark
 * legible over whatever it now covers. The image scales, not the tile, so
 * nothing in the grid reflows.
 *
 * overflow starts hidden only so a logo never pokes out at rest; it is released
 * on hover. z-index needs the position, hence relative on the base rule.
 */
.lsf-partner-logo {
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.lsf-partner-logo:hover,
.lsf-partner-logo:focus-visible {
	overflow: visible;
	z-index: 2;
	border-color: transparent;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--blue-600);
}

.lsf-partner-logo img {
	max-height: 48px;
	width: auto;
	object-fit: contain;
	transition: transform var(--lsf-transition), filter var(--lsf-transition);
	will-change: transform;
}

/* A soft shadow once it is floating free, so it reads as lifted rather than
   as a logo that has escaped its box. */
.lsf-partner-logo:hover img,
.lsf-partner-logo:focus-visible img {
	filter: drop-shadow(0 6px 14px rgba(6, 20, 48, 0.22));
}

.lsf-partner-logo:hover img,
.lsf-partner-logo:focus-visible img { transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
	.lsf-partner-logo img { transition: none; }
	.lsf-partner-logo:hover img,
	.lsf-partner-logo:focus-visible img { transform: none; }
}

@media (max-width: 1023px) {
	.lsf-partners--lead .lsf-partners__list,
	.lsf-partners--program .lsf-partners__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lsf-partners--network .lsf-partners__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
	.lsf-partners--lead .lsf-partners__list,
	.lsf-partners--program .lsf-partners__list { grid-template-columns: 1fr; }
	.lsf-partners--network .lsf-partners__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ───────────────────────────── 9. News ─────────────────────────────── */

.lsf-news--featured { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }
.lsf-news--featured .lsf-section-head { grid-column: 1 / -1; }
.lsf-news--grid .lsf-news__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lsf-news__rail { display: grid; gap: 18px; align-content: start; }

.lsf-news-card__link { display: block; text-decoration: none; color: inherit; }
.lsf-news-card__media { aspect-ratio: 16 / 10; }
.lsf-news-card--lead .lsf-news-card__media { aspect-ratio: 16 / 9; }

.lsf-news-card__body { display: grid; gap: 10px; padding: 20px 0 0; }

.lsf-news-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-500);
}

.lsf-news-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-news-card--lead .lsf-news-card__title { font-size: var(--wp--preset--font-size--heading-sm); }
.lsf-news-card__excerpt { margin: 0; font-size: 16px; line-height: 1.6; }
.lsf-news-card__link:hover .lsf-news-card__title { color: var(--wp--preset--color--blue-600); }

/* Side-rail cards sit horizontally. */
.lsf-news__rail .lsf-news-card__link { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; }
.lsf-news__rail .lsf-news-card__body { padding: 0; }
.lsf-news__rail .lsf-news-card__title { font-size: 19px; }
.lsf-news__rail .lsf-news-card__media { aspect-ratio: 1 / 1; }

@media (max-width: 899px) {
	.lsf-news--featured { grid-template-columns: 1fr; }
	.lsf-news--grid .lsf-news__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.lsf-news--grid .lsf-news__list { grid-template-columns: 1fr; }
	.lsf-news__rail .lsf-news-card__link { grid-template-columns: 88px 1fr; }
}

/* ─────────────────────── 10. Page furniture ────────────────────────── */

/* Hero — a core/cover block; cover supplies the image and the scrim
   gradient, so this only sets the height and the inner rhythm. */
/* Core gives covers an em-based `padding: 1em`, which does not match the
   theme gutter. Above the content width, centring hides the difference; below
   it the container fills the viewport and the headline drifts a few px left
   of every other section. Set the gutter explicitly. */
.wp-block-cover.lsf-hero {
	min-height: clamp(380px, 52vw, 540px);
	align-items: center;
	padding-inline: var(--wp--custom--gutter);
	/* The hero artwork is a cut-out PNG, so this blue shows through wherever
	   it is transparent. Matches the header, so the two read as one field. */
	background-color: var(--wp--preset--color--navy-800);
}

/* Cover spans the viewport; its contents sit in the same column as the rest
   of the page so the headline lines up with the logo above it. */
.lsf-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* Constrained layouts centre their children with `margin-inline: auto
   !important`, so left-aligning this needs matching weight. */
.lsf-hero__inner {
	display: grid;
	gap: 24px;
	justify-items: start;
	max-width: 640px;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}
.lsf-hero p { color: var(--wp--preset--color--blue-100); max-width: 46ch; }

/* Hold the headline in its own column. Left to the full container it runs past
   the middle of the frame and over the subject's face, where the artwork is
   near-white and the scrim has nothing left to give. Wrapping earlier reads
   better and keeps the line ends on the darkened side. */
.lsf-hero h1 { max-width: 15ch; }
.lsf-hero .lsf-accent-rule { margin-block: 0; }
.lsf-hero__inner > * { margin-block: 0; }

/* Numbered process steps (Our Work). */
.lsf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

.lsf-step { padding: 30px 26px; border-left: 1px solid var(--wp--preset--color--line-200); }
.lsf-step:first-child { border-left: 0; }

.lsf-step__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
	margin-bottom: 10px;
}

.lsf-step__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
	margin-bottom: 8px;
}

/* Stat row (Impact). */
.lsf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lsf-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 26px;
	text-align: center;
	border-left: 1px solid var(--wp--preset--color--line-200);
	color: var(--wp--preset--color--navy-700);
}

.lsf-stat:first-child { border-left: 0; }

.lsf-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--navy-700);
}

.lsf-stat__label { font-size: 16px; line-height: 1.45; color: var(--wp--preset--color--slate-600); }

/* Pillar cards — photo with a bottom-up scrim and overlaid copy. */
.lsf-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Each pillar is a core/cover with the card-scrim gradient and its content
   pinned bottom-left, so cover handles the photo and the overlay. */
.wp-block-cover.lsf-pillar { min-height: 330px; padding: 0; align-items: flex-end; }
.lsf-pillar .wp-block-cover__inner-container { width: 100%; }

.lsf-pillar__body {
	padding: 26px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	color: var(--wp--preset--color--white);
}

.lsf-pillar__icon {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--blue-600);
	display: flex; align-items: center; justify-content: center;
	flex: none;
	color: var(--wp--preset--color--white);
}

.lsf-pillar__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lsf-pillar__rule { width: 56px; height: 3px; background: var(--wp--preset--color--blue-600); border: 0; margin: 9px 0 10px; }
.lsf-pillar__text { font-size: 16px; line-height: 1.5; color: #D9E4F6; margin: 0; }
.lsf-pillar__title { margin: 0; }
.lsf-pillar__copy { display: grid; gap: 9px; }

/* Testimonials. */
.lsf-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.lsf-quote { background: var(--wp--preset--color--white); border: 1px solid var(--lsf-line); padding: 28px; display: grid; gap: 20px; }

.lsf-quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--navy-700);
}

.lsf-quote__who { display: flex; align-items: center; gap: 14px; }
.lsf-quote__who .lsf-media { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.lsf-quote__name { font-weight: 600; color: var(--wp--preset--color--navy-800); }
.lsf-quote__role { font-size: 14px; color: var(--wp--preset--color--slate-500); }

/* Filter row (Events, Partners). */
.lsf-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

.lsf-filters a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--line-200);
	color: var(--wp--preset--color--navy-800);
	text-decoration: none;
}

.lsf-filters a:hover,
.lsf-filters a[aria-current="page"] {
	background: var(--wp--preset--color--navy-800);
	border-color: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--white);
}

/* Labelled divider — "Already happened — most recent first". A paragraph
   rather than a group, because a group block may only contain blocks. */
.lsf-divider {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 40px 0 24px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-500);
	white-space: nowrap;
}

.lsf-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--line-200);
}

/* Embed wells for the Pledge donation form and SignUpGenius. */
.lsf-embed {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--lsf-line);
	padding: clamp(20px, 4vw, 34px);
	box-shadow: var(--wp--preset--shadow--card);
}

.lsf-embed iframe { width: 100%; border: 0; display: block; }

.lsf-embed__note { font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--slate-500); margin: 16px 0 0; }

/* Team / people grid. */
.lsf-people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.lsf-person .lsf-media { aspect-ratio: 1 / 1; margin-bottom: 14px; }

.lsf-person__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-person__role { font-size: 15px; color: var(--wp--preset--color--slate-500); }

@media (max-width: 1023px) {
	.lsf-steps,
	.lsf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lsf-pillars,
	.lsf-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lsf-step { border-left: 0; border-top: 1px solid var(--wp--preset--color--line-200); }
	.lsf-stat:nth-child(odd) { border-left: 0; }
}

@media (max-width: 719px) {
	/* .lsf-stats deliberately stays 2x2 — four single-file numbers push the
	   rest of the page below the fold for no gain. */
	.lsf-steps,
	.lsf-pillars,
	.lsf-quotes { grid-template-columns: 1fr; }
	.lsf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lsf-stat { padding-block: 22px; }
	.lsf-stat:nth-child(odd) { border-left: 0; }
	.lsf-stat:nth-child(n+3) { border-top: 1px solid var(--wp--preset--color--line-200); }
	.lsf-rule-heading::before { display: none; }
	.lsf-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.lsf-hero .lsf-btn { width: 100%; }
	.lsf-hero .lsf-btn + .lsf-btn { margin-left: 0; margin-top: 12px; }
}

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

/* ─────────────────── 11. Layout corrections ────────────────────────── */

/* The nav item carrying .lsf-btn--donate is an <li>; core styles the inner
   anchor, so the button colours have to be stated at the same depth. */
.lsf-nav li.lsf-btn--donate > a.wp-block-navigation-item__content,
.lsf-nav li.lsf-btn--donate > a.wp-block-navigation-item__content:hover,
.lsf-nav li.lsf-btn--donate > a.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--navy-800);
}

.lsf-nav li.lsf-btn--donate > a.wp-block-navigation-item__content:hover,
.lsf-nav li.lsf-btn--donate > a.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--white);
}

.lsf-nav li.lsf-btn--donate {
	background: var(--wp--preset--color--white);
	transition: background var(--lsf-transition);
}

.lsf-nav li.lsf-btn--donate:hover,
.lsf-nav li.lsf-btn--donate:focus-within { background: var(--wp--preset--color--blue-600); }

.lsf-nav li.lsf-btn--donate > a {
	padding: 14px 30px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wider);
	border-bottom: 0;
	background: transparent;
}

/* Full-bleed sections inside post content must clear the root gutter. */
.wp-block-post-content > .alignfull,
main > .alignfull { max-width: none; }

/* Placeholder shown where a third-party embed (Pledge, the newsletter form)
   has not been pasted in yet. Deliberately plain so it is obvious it is
   scaffolding, not design. */
/*
 * Pledge donation widget. Pledge's script sets the iframe height itself as the
 * form grows, so nothing here may constrain it — a fixed height cuts the card
 * fields off. min-height only reserves space while the script loads.
 */
.lsf-donate-embed { width: 100%; min-height: 828px; }

.lsf-donate-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

.lsf-embed-placeholder {
	display: grid;
	gap: 8px;
	padding: 32px 20px;
	border: 1px dashed var(--wp--preset--color--line-200);
	text-align: center;
	color: var(--wp--preset--color--slate-500);
	font-size: 14px;
	line-height: 1.55;
}

.lsf-embed-placeholder strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-embed-placeholder--compact {
	padding: 16px;
	border-color: rgba(255, 255, 255, 0.24);
	text-align: left;
}

.lsf-embed-placeholder--compact strong { color: var(--wp--preset--color--white); font-size: 13px; }
.lsf-embed-placeholder--compact span { color: #8FA6CC; font-size: 13px; }

/* Root-level blocks sit flush: the header, main and footer each carry their
   own padding, so WordPress's default gap between them just reads as a stray
   band of page background under the menu. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ─────────── 12. Home hero tucking under the menu ──────────────────── */

/*
 * The menu keeps its own solid navy background. The home hero is pulled up
 * with a negative margin so its top slides *behind* the bar and is clipped by
 * it — the image reads as continuing up under the menu rather than starting
 * below it.
 *
 * Home page only: every other page keeps the hero flush under the header.
 */

:root {
	/* How much of the image's top edge actually crosses the bar. */
	--lsf-hero-overlap: 30px;
	/* The bar's own height: 16px padding + 82px logo chip + 16px padding.
	   The chip is the logo (68px) plus its own 7px padding top and bottom, so
	   this has to be re-measured whenever the logo size changes — the hero
	   overlap below is calculated from it. */
	--lsf-header-h: 114px;
	/* What main reserves for the fixed bar. */
	--lsf-main-offset: 121px;
}

body.home .wp-block-cover.lsf-hero {
	/* main reserves --lsf-main-offset for the fixed bar, which is not
	   necessarily the bar's height. Pull up by the difference plus the
	   overlap, so --lsf-hero-overlap stays literally true. */
	margin-block-start: calc(
		-1 * (var(--lsf-main-offset) - var(--lsf-header-h) + var(--lsf-hero-overlap))
	);
	/* Add the hidden strip back, plus a gutter of breathing room. Padding equal
	   to the overlap alone puts the headline flush against the bar wherever the
	   content is tall enough to fill the hero — which is every phone. */
	padding-block-start: calc(var(--lsf-hero-overlap) + var(--wp--custom--gutter));
	padding-block-end: var(--wp--custom--gutter);
	min-height: calc(clamp(380px, 52vw, 540px) + var(--lsf-hero-overlap));
}

/*
 * Paint order, home only. The bar keeps its own navy, but the artwork has to
 * sit *over* that navy while the logo and links stay over the artwork. One
 * element cannot do that — a z-index on .lsf-header puts its background and
 * its links on the same layer — so the navy is split onto the template-part
 * wrapper's ::before and the three layers are stacked in the root context:
 *
 *   10  navy bar background
 *   25  hero artwork (cut-out breaks across the bar)
 *   26  hero scrim, offset to start below the bar so it never tints it
 *   27  hero headline, rule, copy and buttons
 *   30  logo + nav links, always legible and clickable
 *
 * The wrapper takes position:relative but no z-index, so it does NOT open a
 * stacking context — otherwise everything inside would be trapped on one layer.
 */

body.home header.wp-block-template-part {
	position: fixed;
	inset-inline: 0;
	width: 100%;
	/* Below the hero's raised artwork at rest, so the cut-out breaks across
	   the bar. See the scrolled state directly below. */
	z-index: 25 !important;
}

/*
 * Once scrolled, the bar has to win. Otherwise the hero's scrim and headline
 * ride up over the fixed nav — measured: at scrollY 150 the H1 was the topmost
 * element where the links are. data-scrolled is set by assets/js/site.js.
 */
:root[data-scrolled] body.home header.wp-block-template-part,
html[data-scrolled] body.home header.wp-block-template-part {
	/* Matches the !important above; the extra attribute selector wins. */
	z-index: 40 !important;
}

/*
 * Menu open: the bar has to clear the hero outright.
 *
 * Core gives the overlay z-index: 100000, but it is nested inside .lsf-header
 * (z-index 30) inside the template part (z-index 25), and a z-index only ranks
 * an element among its siblings — so the whole panel resolved to 25 and the
 * hero's artwork, scrim and headline all painted over it. Measured at the top
 * of the homepage, the open menu was the BOTTOM of six layers, which is why it
 * looked dead there and worked once scrolling raised the bar to 40.
 *
 * Raising the outermost context is the fix; the nested values then order
 * themselves normally inside it.
 */
body.home header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) {
	z-index: 100 !important;
}

/* Fixed header is out of flow, so main has to reserve its height. */
body.home main {
	padding-block-start: var(--lsf-main-offset);
}

body.home header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--navy-800);
	z-index: 10;
}

body.home .lsf-header {
	background: transparent;
	z-index: 30;
}

/*
 * No knock-back over the artwork: at a 30px overlap the image crosses only the
 * bar's lower edge, well below the logo and nav text (which sit around y35–46
 * in an 83px bar), so nothing needs protecting and the cut-out stays fully
 * bright — reading clearly in FRONT of the bar rather than washed behind it.
 *
 * If --lsf-hero-overlap is raised past roughly 55px the artwork starts reaching
 * the nav text, and a knock-back on .lsf-header::before plus a text-shadow on
 * the links becomes necessary again. At 83px, "Our Work" measured 1.07:1
 * unprotected.
 */

body.home .lsf-hero img.wp-block-cover__image-background {
	z-index: 25;
}

/* Full-height scrim: offsetting its top to clear the menu left a hard line
   across the hero where it began. The gradient now runs bottom-up and is
   already transparent at the top, so it clears the bar on its own. */
body.home .lsf-hero .wp-block-cover__background {
	z-index: 26;
}

/* The headline sits above artwork and scrim alike. Core leaves this container
   at z-index auto, which would bury it under the raised image. */
body.home .lsf-hero .wp-block-cover__inner-container {
	z-index: 27;
}

/*
 * Text-side scrim. The vertical gradient is nearly clear at the top of the
 * hero, which is exactly where the headline's first line sits — and where the
 * artwork is close to pure white. Measured, the h1 bottomed out at 2.61:1 on
 * desktop and 3.35:1 on mobile, so it failed the 3:1 floor for large text.
 *
 * Deepening the vertical gradient would fix it by dimming the subject's face,
 * which is the point of the photograph. This darkens only the column the
 * copy occupies and is fully transparent before it reaches her, so it adds no
 * edge of its own: it lives inside the hero and fades out mid-frame.
 */
.lsf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(6, 26, 70, 0.55) 0%,
		rgba(6, 26, 70, 0.38) 30%,
		rgba(6, 26, 70, 0) 58%
	);
}

.lsf-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* On home the layering runs on its own raised scale (25 artwork / 26 scrim /
   27 content), so the text-side scrim has to join it at the scrim's level.
   The hero is also pulled up under the bar, so the scrim would otherwise tint
   the strip the logo sits in — it is masked to fade in below the header. */
body.home .lsf-hero::after {
	z-index: 26;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--lsf-hero-overlap),
		#000 calc(var(--lsf-hero-overlap) + var(--lsf-header-h) * 0.7)
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--lsf-hero-overlap),
		#000 calc(var(--lsf-hero-overlap) + var(--lsf-header-h) * 0.7)
	);
}

/* Narrow screens: the copy runs the full width, so the falloff has to as
   well — it keeps a floor under the line ends instead of stopping mid-column. */
@media (max-width: 900px) {
	.lsf-hero::after {
		background: linear-gradient(
			to right,
			rgba(6, 26, 70, 0.45) 0%,
			rgba(6, 26, 70, 0.34) 70%,
			rgba(6, 26, 70, 0.22) 100%
		);
	}
}

/*
 * Full-bleed sections butt together.
 *
 * Constrained layouts give every child a block-gap top margin. Each section
 * here carries its own padding, so that gap only ever shows as a seam of page
 * background between two coloured bands. Scoped to .alignfull so prose inside
 * post content keeps its normal paragraph rhythm — removing the rule outright
 * would collapse the spacing between paragraphs on posts and inner pages.
 */
:root :where(.is-layout-constrained) > .alignfull,
:root :where(.is-layout-flow) > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Hero secondary button.
 *
 * A thin white outline over photography reads as a rectangle of nothing
 * wherever the artwork behind it is busy or light — on the current hero it
 * sits across detergent bottles and a Crayola box. Giving it a translucent
 * navy body makes it read as a button at any point in the image, without
 * promoting it to a second primary. The blur helps it separate from fine
 * detail; browsers without backdrop-filter still get the fill.
 */
.lsf-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: rgba(6, 26, 70, 0.62);
	border-width: 2px;
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition:
		background-color var(--lsf-transition),
		color var(--lsf-transition),
		border-color var(--lsf-transition);
}

.lsf-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.lsf-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-800);
}

/* ─────────── 13. Event cards, flyer treatment ──────────────────────── */

/*
 * Event artwork is usually a flyer — varying sizes, aspect ratios and
 * background colours — so it is shown whole rather than cropped to fill.
 * A fixed square well keeps the grid aligned while letting portrait and
 * landscape flyers both sit at a usable size, and the tinted ground stops
 * pale flyers from bleeding into the card.
 *
 * Change --lsf-flyer-ratio if the client's flyers settle on one shape:
 * 4/5 favours portrait, 4/3 favours landscape.
 */

.lsf-event-card--flyer {
	--lsf-flyer-ratio: 1 / 1;
}

.lsf-event-card--flyer .lsf-event-card__figure {
	background: var(--wp--preset--color--bg-100);
	border-bottom: 1px solid var(--lsf-line);
	padding: 14px;
}

.lsf-event-card--flyer .lsf-media {
	aspect-ratio: var(--lsf-flyer-ratio);
	background: transparent;
}

.lsf-media--contain img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lsf-event-card--flyer .lsf-event-card__body {
	gap: 14px;
}

/* Icon-led meta rows. */
.lsf-event-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
	flex: 1;
}

.lsf-event-meta li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--wp--preset--color--slate-600);
}

.lsf-event-meta .lsf-icon {
	flex: none;
	margin-top: 1px;
	color: var(--wp--preset--color--blue-600);
}

/* No narrow-viewport override: at one card per row a 4/3 well would favour
   landscape and shrink portrait flyers to about half the card width. Square
   treats both orientations the same at every size. */

/* Backfilled past events, so a finished event is never silently presented
   under an "Upcoming" heading. */
.lsf-event-card__figure { position: relative; }

.lsf-tag--past {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	background: var(--wp--preset--color--slate-500);
	font-size: 11px;
	padding: 6px 10px;
}

.lsf-event-card--past .lsf-media { opacity: 0.88; }

/* ─────────── 14. Press ─────────────────────────────────────────────── */

/*
 * Press items arrive in three shapes — a video, an image of no fixed ratio
 * (clippings, logos, stills, screenshots), or nothing but a link. The card
 * handles all three: the visual sits in a fixed well and is shown whole, and
 * an item with no visual at all falls back to a text card carrying the outlet
 * name, so it never renders as an empty box.
 */

/*
 * Masonry, via CSS columns. Press visuals have no common shape — a tall
 * clipping next to a wide still next to a square logo — so a fixed grid either
 * crops them or leaves ragged whitespace. Columns let every card keep its own
 * height. Note this flows top-to-bottom per column rather than left-to-right.
 */
.lsf-press__list {
	column-count: var(--lsf-press-cols, 3);
	column-gap: 24px;
}

.lsf-press-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: inline-block;
	width: 100%;
	margin-block-end: 24px;
}

/*
 * White cards on a white page with a #E4EAF3 hairline were hard to read as
 * separate objects — especially the text-only ones, which had no image edge to
 * define them. A firmer border plus a resting shadow gives each card an edge
 * before you hover it.
 */
.lsf-press-card {
	border: 1px solid #CFD9E8;
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 2px rgba(6, 20, 48, 0.06), 0 8px 20px rgba(6, 20, 48, 0.07);
	overflow: hidden;
	transition: border-color var(--lsf-transition), box-shadow var(--lsf-transition), transform var(--lsf-transition);
}

.lsf-press-card:hover {
	border-color: var(--wp--preset--color--blue-600);
	box-shadow: 0 2px 4px rgba(6, 20, 48, 0.10), 0 14px 30px rgba(6, 20, 48, 0.14);
	transform: translateY(-2px);
}

/* A hairline between the image and the text, so the body reads as its own
   band rather than running straight out of the picture. */
.lsf-press-card__body { border-top: 1px solid var(--lsf-line); }

.lsf-press-card--link .lsf-press-card__body,
.lsf-press-card:not(:has(.lsf-press-card__figure)) .lsf-press-card__body { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.lsf-press-card { transition: none; }
	.lsf-press-card:hover { transform: none; }
}

.lsf-press-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.lsf-press-card__figure {
	position: relative;
	display: block;
	background: var(--wp--preset--color--bg-100);
	border-bottom: 1px solid var(--lsf-line);
}

/* Natural height: nothing is cropped and nothing is letterboxed. */
.lsf-press-card__figure img {
	width: 100%;
	height: auto;
	display: block;
}

.lsf-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(6, 26, 70, 0.82);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 4px;
	transition: background var(--lsf-transition), transform var(--lsf-transition);
}

.lsf-press-card__link:hover .lsf-play {
	background: var(--wp--preset--color--blue-600);
	transform: scale(1.06);
}

.lsf-press-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1;
}

.lsf-press-card__meta {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
}

.lsf-press-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.18;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-press-card__link:hover .lsf-press-card__title { color: var(--wp--preset--color--blue-600); }
.lsf-press-card__body .lsf-more { margin-top: auto; }

/* Link-only items get a little more presence, since they have no visual. */
.lsf-press-card--link .lsf-press-card__body { padding: 28px 22px; }
.lsf-press-card--link .lsf-press-card__title { font-size: 24px; }

@media (max-width: 899px) { .lsf-press__list { column-count: 2; } }
@media (max-width: 599px) { .lsf-press__list { column-count: 1; } }

/* ─────────── 15. Flyer lightbox ────────────────────────────────────── */

.lsf-zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	position: relative;
}

.lsf-zoom__hint {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(6, 26, 70, 0.78);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--lsf-transition);
	pointer-events: none;
}

.lsf-zoom:hover .lsf-zoom__hint,
.lsf-zoom:focus-visible .lsf-zoom__hint { opacity: 1; }

/* The viewer itself. */
.lsf-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: 100vw;
	max-height: 100dvh;
	width: 100%;
	height: 100%;
	overflow: auto;
	overscroll-behavior: contain;
}

.lsf-lightbox::backdrop { background: rgba(6, 20, 48, 0.92); }

/* Fallback for browsers without <dialog>. */
.lsf-lightbox:not([open]) { display: none; }

.lsf-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	z-index: 100;
}

.lsf-lightbox__figure {
	margin: 0;
	padding: clamp(16px, 4vw, 48px);
	display: grid;
	gap: 14px;
	justify-items: center;
	max-width: 100%;
}

.lsf-lightbox__figure img {
	max-width: min(96vw, 1100px);
	max-height: 82dvh;
	width: auto;
	height: auto;
	object-fit: contain;
	background: var(--wp--preset--color--white);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lsf-lightbox__figure figcaption {
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	text-align: center;
}

.lsf-lightbox__close {
	position: fixed;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--white);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.lsf-lightbox__close:hover,
.lsf-lightbox__close:focus-visible { background: var(--wp--preset--color--blue-600); }

.lsf-lightbox-open { overflow: hidden; }

/* Tighter join between the lead partner cards and the logo wall — they read
   as one section, so the default block gap between them was too loose. */
.lsf-partners--lead { margin-block-end: var(--wp--preset--spacing--30); }
.lsf-partners--network .lsf-section-head:empty { display: none; }
.lsf-partners--network .lsf-partners__list { gap: 12px; }

.lsf-partners__footer {
	margin: 22px 0 0;
	display: flex;
	justify-content: flex-end;
}

/* The closing impact statement reads as one line at full width. Constrained
   layouts cap children at content-size (1100px) and the sentence needs about
   1176px, so it was breaking to two lines on desktop; letting it use the
   container's full width fixes that without shrinking the type. It still
   wraps normally below roughly 1220px. */
.lsf-statement {
	max-width: none;
	text-wrap: balance;
}

/* Video in the lightbox. */
.lsf-lightbox__video {
	width: min(92vw, 1100px);
	aspect-ratio: 16 / 9;
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lsf-lightbox__video iframe { width: 100%; height: 100%; display: block; border: 0; }
.lsf-lightbox__video[hidden] { display: none; }
.lsf-lightbox__figure img[hidden] { display: none; }

/* Video press cards signal that they open in place. */
.lsf-press-card--video .lsf-press-card__link { cursor: pointer; }

/* Press items with nothing to link to are not interactive, so they must not
   pretend otherwise — no pointer, no hover lift. */
.lsf-press-card--static { cursor: default; }
.lsf-press-card--static:hover {
	border-color: #CFD9E8;
	box-shadow: 0 1px 2px rgba(6, 20, 48, 0.06), 0 8px 20px rgba(6, 20, 48, 0.07);
	transform: none;
}

/* ─────────── 16. Resource table ────────────────────────────────────── */

/*
 * Filters and search sit half and half on wide screens, stacking below 900px.
 * Flex rather than a two-column grid: if search is switched off, or there is
 * only one category, the remaining control fills the row instead of leaving a
 * dead half.
 */
.lsf-resources__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	margin-block-end: 26px;
}

.lsf-resources__controls > * {
	flex: 1 1 calc(50% - 12px);
	min-width: 0;
	margin-block-end: 0;
}

@media (max-width: 899px) {
	.lsf-resources__controls { gap: 18px; }
	.lsf-resources__controls > * { flex-basis: 100%; }
}

.lsf-resources__search { margin-block-end: 0; }

.lsf-resources__input {
	width: 100%;
	padding: 15px 18px;
	border: 2px solid var(--wp--preset--color--line-200);
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	color: var(--wp--preset--color--navy-800);
}

.lsf-resources__input:focus-visible {
	outline: 0;
	border-color: var(--wp--preset--color--blue-600);
}

.lsf-resources__count {
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-500);
}

.lsf-resources__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.lsf-resources__table th,
.lsf-resources__table td {
	text-align: left;
	vertical-align: top;
	padding: 18px 20px 18px 0;
	border-bottom: 1px solid var(--lsf-line);
}

.lsf-resources__table thead th {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-500);
	border-bottom: 2px solid var(--wp--preset--color--navy-800);
	padding-block: 12px;
}

.lsf-resources__table tbody tr:hover { background: var(--wp--preset--color--bg-50); }

.lsf-resources__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-resources__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.lsf-resources__tags span {
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
	border: 1px solid var(--wp--preset--color--line-200);
	padding: 3px 8px;
}

.lsf-resources__contact { display: grid; gap: 10px; justify-items: start; }

.lsf-resources__tel {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	font-weight: 800;
	color: var(--wp--preset--color--navy-800);
	white-space: nowrap;
}

.lsf-btn--sm { padding: 10px 16px; font-size: 13px; }

.lsf-resources__empty {
	padding: 28px;
	border: 1px dashed var(--wp--preset--color--line-200);
	color: var(--wp--preset--color--slate-500);
	text-align: center;
}

/*
 * Below 780px the table becomes stacked rows. A three-column table on a phone
 * either scrolls sideways or crushes the copy, and this audience is mostly on
 * a phone — the semantics stay a table, only the presentation changes.
 */
@media (max-width: 780px) {
	.lsf-resources__table thead { display: none; }

	.lsf-resources__table,
	.lsf-resources__table tbody,
	.lsf-resources__table tr,
	.lsf-resources__table th,
	.lsf-resources__table td { display: block; width: 100%; }

	.lsf-resources__table tr {
		border: 1px solid var(--lsf-line);
		padding: 18px;
		margin-block-end: 14px;
		background: var(--wp--preset--color--white);
	}

	.lsf-resources__table th,
	.lsf-resources__table td { border: 0; padding: 0 0 12px; }
	.lsf-resources__table td:last-child { padding-bottom: 0; }

	.lsf-resources__table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-family: var(--wp--preset--font-family--display);
		font-size: 11px;
		font-weight: 800;
		letter-spacing: var(--wp--custom--tracking--wide);
		text-transform: uppercase;
		color: var(--wp--preset--color--slate-400);
		margin-bottom: 4px;
	}
}

/* Quick category filters above the resource table. */
.lsf-resources__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lsf-chip {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--line-200);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-800);
	cursor: pointer;
	transition: background var(--lsf-transition), border-color var(--lsf-transition), color var(--lsf-transition);
}

.lsf-chip:hover { border-color: var(--wp--preset--color--blue-600); color: var(--wp--preset--color--blue-600); }

.lsf-chip.is-active {
	background: var(--wp--preset--color--navy-800);
	border-color: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--white);
}

/*
 * Links on dark bands.
 *
 * The theme's link colour is blue-600, which measures about 2:1 against
 * navy-800 — effectively invisible, and these are the emergency numbers on
 * the Resources page. Buttons and the arrow "more" links are excluded: they
 * carry their own colour and already read correctly.
 */
:where(.has-navy-800-background-color, .has-navy-900-background-color, .has-navy-700-background-color)
	a:not(.wp-block-button__link):not(.lsf-btn):not(.lsf-more):not(.wp-block-navigation-item__content) {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

:where(.has-navy-800-background-color, .has-navy-900-background-color, .has-navy-700-background-color)
	a:not(.wp-block-button__link):not(.lsf-btn):not(.lsf-more):hover {
	color: var(--wp--preset--color--blue-200);
}

/* ─────────── 17. Team cards ────────────────────────────────────────── */

.lsf-person__links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}

.lsf-person__links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--slate-600);
	text-decoration: none;
	word-break: break-word;
}

.lsf-person__links a:hover,
.lsf-person__links a:focus-visible {
	color: var(--wp--preset--color--blue-600);
	text-decoration: underline;
}

.lsf-person__links .lsf-icon { flex: none; color: var(--wp--preset--color--blue-600); }

.lsf-person__links .lsf-person__li {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
}

/* Headshots vary in shape and quality, so they sit in a square well and are
   cropped to it rather than stretching the grid out of alignment. */
.lsf-person .lsf-media,
.lsf-person figure.wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.lsf-person__role { min-height: 1.2em; }

@media (max-width: 1023px) { .lsf-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .lsf-people { grid-template-columns: 1fr; } }

/*
 * The four "what can you bring" tiles hold their 2x2 shape below the point
 * where core columns would stack them into a single file of four. They are a
 * set of equal choices — reading them as one long list loses that.
 */
@media (max-width: 781px) {
	/* Direct child only. A descendant match would also catch the OUTER
	   columns — whose left column merely *contains* the tiles — and pin the
	   "What can you bring to the table" heading beside them instead of
	   letting it take its own row. */
	.wp-block-columns:has(> .wp-block-column > .lsf-step) {
		flex-wrap: nowrap !important;
		gap: var(--wp--preset--spacing--20);
	}

	.wp-block-columns:has(> .wp-block-column > .lsf-step) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}

	/* Two condensed uppercase columns on a phone leave "VOLUNTEER" wider than
	   its tile, and it breaks mid-word. Scale the title to the column instead
	   of letting it split. */
	.lsf-step { padding: 26px 16px; }

	.lsf-step__title {
		font-size: clamp(19px, 5.2vw, 28px);
		overflow-wrap: normal;
		hyphens: none;
	}
}

/*
 * Team grid: five across, stepping down to two rather than one. Ten people
 * read as two clean rows of five on desktop, and headshots stay large enough
 * to recognise all the way down.
 */
@media (max-width: 1200px) { .lsf-people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .lsf-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .lsf-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }

/*
 * Every headshot renders at the same size regardless of what was uploaded —
 * sources here run from 200x200 to 1000x1508. The square well plus cover
 * keeps the grid even; only the crop differs.
 */
.lsf-person figure.wp-block-image,
.lsf-person .wp-block-image { margin: 0 0 14px; }

.lsf-person figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	display: block;
	background: var(--wp--preset--color--bg-100);
}

@media (max-width: 680px) {
	.lsf-person__name { font-size: 18px; }
	.lsf-person__links a { font-size: 13px; }
}

/* ─────────── 18. Forms and form dialogs ────────────────────────────── */

/* Tiles that open a form read as controls, not decoration. */
.lsf-step--interactive { cursor: pointer; position: relative; }

.lsf-step--interactive:hover,
.lsf-step--interactive:focus-within { background: var(--wp--preset--color--bg-100); }

.lsf-step__action {
	appearance: none;
	background: none;
	border: 0;
	margin-top: 14px;
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
	cursor: pointer;
}

.lsf-step__action:hover,
.lsf-step__action:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ── The form itself ── */

.lsf-form { max-width: 720px; margin-inline: auto; }

.lsf-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }

@media (max-width: 599px) {
	.lsf-form__row { grid-template-columns: 1fr; }
}

.lsf-form__field { margin: 0 0 18px; }

.lsf-form__field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--navy-900);
	margin-bottom: 6px;
}

.lsf-form__req { color: var(--wp--preset--color--blue-600); }

/* A ZIP box the width of a ZIP, rather than the width of the form. */
.lsf-form__field--short input { max-width: 190px; }

.lsf-form input[type="text"],
.lsf-form input[type="email"],
.lsf-form input[type="tel"],
.lsf-form input[type="url"],
.lsf-form select,
.lsf-form textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px; /* below 16px iOS zooms the page on focus */
	line-height: 1.4;
	color: var(--wp--preset--color--navy-900);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line-200);
	border-radius: 4px;
}

.lsf-form textarea { resize: vertical; min-height: 110px; }

.lsf-form input:focus-visible,
.lsf-form select:focus-visible,
.lsf-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue-600);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--blue-600);
}

.lsf-form__group {
	border: 1px solid var(--wp--preset--color--line-200);
	border-radius: 4px;
	padding: 18px 18px 6px;
	margin: 0 0 22px;
}

.lsf-form__group legend {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-900);
	padding-inline: 6px;
}

/* CF7 wraps each option in its own <span class="wp-block-checkbox">-ish item;
   two columns keep a fourteen-box list from becoming a scroll. */
.lsf-form__group .wpcf7-checkbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }

@media (max-width: 699px) {
	.lsf-form__group .wpcf7-checkbox { grid-template-columns: 1fr; }
}

.lsf-form__group .wpcf7-list-item { margin: 0; }

.lsf-form__group .wpcf7-list-item label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 9px;
	align-items: start;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	padding: 7px 0;
	margin: 0;
	cursor: pointer;
}

.lsf-form__group input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--blue-600);
}

.lsf-form__actions { margin: 4px 0 0; }

.lsf-form .wpcf7-spinner { display: block; margin: 12px 0 0; }

/* CF7's own status messages, brought onto the palette. */
.lsf-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 14px;
	border-width: 1px;
	border-radius: 4px;
	font-size: 14px;
}

.lsf-form .wpcf7-not-valid-tip { color: #B3261E; font-size: 13px; margin-top: 4px; }

.lsf-form .wpcf7-not-valid { border-color: #B3261E; }

/* ── The dialog wrapper ── */

.lsf-form-dialog {
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--white);
	overflow: hidden;
}

.lsf-form-dialog::backdrop { background: rgba(6, 20, 48, 0.72); }

/*
 * The dialog inherits display:flex from .lsf-lightbox, so this is a flex item
 * and shrinks to its content — measured 356px inside a 620px dialog. Form
 * fields are wide enough to hide it; the Pledge widget is not, and it collapsed
 * to its 300px minimum. Make the item fill instead.
 *
 * Fixed by growing the item, not by changing the dialog's display: a <dialog>
 * relies on display:none while closed, and overriding it would show every
 * dialog on page load.
 */
.lsf-form-dialog__inner {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 34px clamp(20px, 4vw, 40px) 40px;
	-webkit-overflow-scrolling: touch;
}

.lsf-form-dialog__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--wp--preset--color--navy-900);
	margin: 0 0 22px;
	padding-right: 44px;
}

.lsf-form-dialog .lsf-lightbox__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	color: var(--wp--preset--color--navy-900);
}

.lsf-form-dialog .lsf-form { max-width: none; }

/* Context for the FireAid grantees, set apart from the table it explains. */
.lsf-fireaid-note {
	margin-top: var(--wp--preset--spacing--50);
	padding: 26px 28px;
	background: var(--wp--preset--color--bg-100);
	border-left: 4px solid var(--wp--preset--color--blue-600);
}

.lsf-fireaid-note .lsf-footer__label {
	color: var(--wp--preset--color--navy-900);
	margin: 0 0 10px;
}

.lsf-fireaid-note p { font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.lsf-fireaid-note p:last-child { margin-bottom: 0; }

/* ─────────── 19. Paragraph rhythm ──────────────────────────────────── */

/*
 * Every paragraph at 1.1, set deliberately rather than inherited.
 *
 * About a dozen components set their own line-height on paragraph elements
 * (card excerpts 1.55, stat labels 1.45, footer 1.65). All of them are single
 * class selectors, so `:root p` at (0,1,1) outranks them and ties are settled by
 * coming last in the file — no !important needed anywhere.
 *
 * Hero headings are handled by theme.json's h1 element style, not here.
 */
:root p { line-height: 1.1; }

/* ─────────── 20. Grid children carry no flow margin ────────────────── */

/*
 * WordPress gives every child but the first a `margin-block-start` for vertical
 * rhythm in a flow layout. Our grids are not flow, and the margin does not
 * cancel out: it drops items 2..n by 24px, so the first cell of each row sits
 * higher than the ones beside it. Measured on the homepage stats at 900px —
 * item 1 at y=702, items 2-4 at 726 — and the same offset appears wherever a
 * grid is built from a core group, which is every one of these.
 *
 * The grid owns its spacing through gap, so the children carry none.
 *
 * This list is every container on the site that lays out across an axis and
 * had mixed child margins — found by walking each page for grid/row-flex
 * elements whose children disagreed. The footer two ran on every single page:
 * its first column, and the copyright line, both sat 24px above their
 * neighbours. Vertical flex (.lsf-stat, stacking icon over number over label)
 * is deliberately NOT here — there the margin IS the spacing.
 */
.lsf-stats > *,
.lsf-people > *,
.lsf-pillars > *,
.lsf-quotes > *,
.lsf-steps > *,
.lsf-quote > *,
.lsf-pillar__body > *,
.lsf-pillar__copy > *,
.lsf-footer__inner > *,
.lsf-footer__legal > * {
	margin-block: 0;
}

/* A logo with nowhere to link is still a logo, just not a control. */
.lsf-partner-logo--static { cursor: default; }

/* ─────────── 21. About intro + what we provide ─────────────────────── */

.lsf-about { background: var(--wp--preset--color--white); }

.lsf-about .lsf-accent-rule { margin-block: 14px 26px; }

.lsf-about h2 { margin-bottom: 0; }

.lsf-provide__heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-900);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line-200);
}

/* Same shape as the impact stats above it: one row, hairline dividers, each
   cell centred. Five columns rather than four. */
.lsf-provide {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 0;
	margin-top: var(--wp--preset--spacing--30);
}

/* Grid children carry no flow margin — see section 20. */
.lsf-provide > * { margin-block: 0; }

.lsf-provide__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 8px 20px;
	text-align: center;
	border-left: 1px solid var(--wp--preset--color--line-200);
	color: var(--wp--preset--color--navy-700);
}

/* Dividers run between columns, so the first cell of every row has none. */
.lsf-provide__item:nth-child(3n+1) { border-left: 0; }

.lsf-provide__item > * { margin-block: 0; }

.lsf-provide__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--wp--preset--color--navy-900);
	max-width: none;
}

/* The line off the flyer, in the brand's script face. */
.lsf-provide__quote {
	font-family: var(--wp--preset--font-family--script);
	font-size: 24px;
	line-height: 1.25;
	color: var(--wp--preset--color--blue-600);
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: none;
}

/* An emptied quote paragraph still reserves its margin; collapse it. */
.lsf-provide__quote:empty { display: none; }

@media (max-width: 560px) {
	.lsf-provide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
	.lsf-provide__item:nth-child(3n+1) { border-left: 1px solid var(--wp--preset--color--line-200); }
	.lsf-provide__item:nth-child(odd) { border-left: 0; }
}

/* ─────────── 22. Ask Maxi ──────────────────────────────────────────── */

/*
 * No max-width on these. The band is a constrained layout, which centres any
 * child narrower than the content column — a 60ch paragraph got centred inside
 * a 1100px column and floated away from the heading above it.
 */
.lsf-maxi-call-wrap { margin-block-start: var(--wp--preset--spacing--40); }

/* The number is the page. Someone reaching this in a crisis should be able to
   hit it without reading anything above it, so it is a single large target
   rather than a button with the digits set as body copy beside it. */
.lsf-maxi-call {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 22px 34px;
	background: var(--wp--preset--color--blue-600);
	border-radius: 6px;
	text-decoration: none;
	transition: background var(--lsf-transition);
}

.lsf-maxi-call:hover,
.lsf-maxi-call:focus-visible { background: var(--wp--preset--color--blue-500); }

.lsf-maxi-call:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

.lsf-maxi-call__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-100);
}

.lsf-maxi-call__number {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(32px, 6vw, 52px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--white);
}

/* The spelled number is the memorable one, the digits are the dialable one —
   both are shown because a keypad has letters but a screen reader does not. */
.lsf-maxi-call__digits {
	font-size: 17px;
	color: var(--wp--preset--color--blue-100);
}

/*
 * The eyebrow is brand blue, which is right on a white ground and wrong on a
 * navy one — measured 2.49:1 against navy-900, under the 4.5 small text needs.
 * Two classes deep so it outranks the base .lsf-eyebrow rule.
 */
.has-navy-900-background-color .lsf-eyebrow,
.has-navy-800-background-color .lsf-eyebrow,
.has-navy-700-background-color .lsf-eyebrow,
.lsf-maxi-hero .lsf-eyebrow {
	color: var(--wp--preset--color--blue-100);
}

.lsf-maxi-hero__note {
	margin-top: var(--wp--preset--spacing--30);
	font-size: 15px;
	color: var(--wp--preset--color--blue-100);
}

.lsf-maxi-does {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 34px;
	margin-top: var(--wp--preset--spacing--50);
}

.lsf-maxi-does > * { margin-block: 0; }

.lsf-maxi-does__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-top: 22px;
	border-top: 2px solid var(--wp--preset--color--blue-600);
	color: var(--wp--preset--color--navy-700);
}

.lsf-maxi-does__item > * { margin-block: 0; }

.lsf-maxi-does__item p { font-size: 16px; max-width: none; }

@media (max-width: 900px) { .lsf-maxi-does { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lsf-maxi-does { grid-template-columns: 1fr; } }

/* Eighteen topics: a plain list would be a scroll, chips read as a glance. */
.lsf-maxi-topics {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.lsf-maxi-topics li {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line-200);
	border-radius: 999px;
	padding: 9px 17px;
	font-size: 15px;
	line-height: 1.2;
	color: var(--wp--preset--color--navy-800);
}

.lsf-maxi-privacy {
	background: var(--wp--preset--color--bg-100);
	border-left: 4px solid var(--wp--preset--color--blue-600);
	padding: 26px 28px;
	max-width: 70ch;
}

.lsf-maxi-privacy .lsf-footer__label { color: var(--wp--preset--color--navy-900); margin: 0 0 10px; }

.lsf-maxi-closing {
	margin-top: var(--wp--preset--spacing--50);
	font-size: 15px;
	color: var(--wp--preset--color--slate-600);
}

/* ─────────── 23. Ask Maxi banner (resources page) ──────────────────── */

/*
 * Sits above the filters. Anyone who has landed on a 147-row table and does not
 * know what to search for should be able to leave with a phone number instead.
 */
.lsf-maxi-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	margin-bottom: var(--wp--preset--spacing--40);
	padding: 26px 30px;
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--white);
	border-radius: 6px;
}

.lsf-maxi-banner > * { margin-block: 0; }

.lsf-maxi-banner__copy {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	flex: 1 1 460px;
}

.lsf-maxi-banner__copy > * { margin-block: 0; }

/* The icon block renders as .lsf-icon-block, which carries the colour. */
.lsf-maxi-banner__copy .lsf-icon-block { color: var(--wp--preset--color--blue-100); flex: none; }

.lsf-maxi-banner__text > * { margin-block: 0; }

.lsf-maxi-banner__title {
	color: var(--wp--preset--color--white);
	margin: 0 0 6px;
}

.lsf-maxi-banner__note {
	font-size: 15px;
	color: var(--wp--preset--color--blue-100);
	max-width: 60ch;
}

/*
 * The site-wide dark-band link rule keys on the has-navy-*-background-color
 * classes, and this banner paints its navy in CSS instead — so the rule misses
 * it and the inline link stayed brand blue at 2.03:1. Set explicitly here.
 */
.lsf-maxi-banner__note a {
	color: var(--wp--preset--color--white);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lsf-maxi-banner__note a:hover,
.lsf-maxi-banner__note a:focus-visible { color: var(--wp--preset--color--blue-100); }

.lsf-maxi-banner__call {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex: none;
	padding: 16px 26px;
	background: var(--wp--preset--color--blue-600);
	border-radius: 5px;
	text-decoration: none;
	transition: background var(--lsf-transition);
}

.lsf-maxi-banner__call:hover,
.lsf-maxi-banner__call:focus-visible { background: var(--wp--preset--color--blue-500); }

.lsf-maxi-banner__call:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

.lsf-maxi-banner__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-100);
}

.lsf-maxi-banner__number {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 800;
	line-height: 1.05;
	color: var(--wp--preset--color--white);
}

.lsf-maxi-banner__digits { font-size: 14px; color: var(--wp--preset--color--blue-100); }

@media (max-width: 720px) {
	.lsf-maxi-banner { padding: 22px; }
	.lsf-maxi-banner__call { width: 100%; align-items: center; }
}

/* ─────────── 24. Programs (Work & Impact) ──────────────────────────── */

.lsf-programs__heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-900);
	text-align: center;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line-200);
}

.lsf-programs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 30px;
	margin-top: var(--wp--preset--spacing--40);
}

/* Grid children carry no flow margin — see section 20. */
.lsf-programs > * { margin-block: 0; }

.lsf-program {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 20px;
	border-top: 3px solid var(--wp--preset--color--blue-600);
}

.lsf-program > * { margin-block: 0; }

.lsf-program__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--wp--preset--color--navy-900);
	margin: 0;
}

.lsf-program p { color: var(--wp--preset--color--slate-600); margin: 0; }

/* The agencies Kindness on Patrol serves, as chips rather than a bullet list. */
.lsf-program__tags {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.lsf-program__tags li {
	border: 1px solid var(--wp--preset--color--line-200);
	border-radius: 999px;
	padding: 5px 12px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--wp--preset--color--navy-800);
}

@media (max-width: 900px) {
	.lsf-programs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.lsf-programs { grid-template-columns: 1fr; gap: 28px; }
}

/* Program images are click-to-enlarge; the button is a transparent wrapper so
   the picture keeps the card's own layout. */
.lsf-program__zoom {
	appearance: none;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

.lsf-program__zoom img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity var(--lsf-transition);
}

.lsf-program__zoom:hover img { opacity: 0.88; }

.lsf-program__zoom:focus-visible {
	outline: 3px solid var(--wp--preset--color--blue-600);
	outline-offset: 3px;
}

/* ─────────── 25. Flat page hero ────────────────────────────────────── */

/*
 * The same hero band as the homepage and Work & Impact, without a photograph
 * behind it — for pages that have no image worth using yet. Structure and type
 * are identical, so dropping a cover image in later changes nothing else.
 */
.wp-block-group.lsf-hero--flat {
	padding-block: clamp(54px, 7vw, 94px);
	padding-inline: var(--wp--custom--gutter);
	background-image: linear-gradient(
		104deg,
		var(--wp--preset--color--navy-900) 0%,
		var(--wp--preset--color--navy-800) 62%,
		var(--wp--preset--color--navy-700) 100%
	);
}

/*
 * Inside a cover, .lsf-hero__inner sits within an already-centred container and
 * pins itself left with margin-inline-start: 0 !important. Here it IS the
 * constrained child, so that pin would flush it to the gutter instead of the
 * content column — measured, it started 43px left of the logo. Restore the
 * centred column and let justify-items keep the text left within it.
 */
.wp-block-group.lsf-hero--flat > .lsf-hero__inner {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto !important;
}

.lsf-hero--flat h1 { margin-block: 0; }

/*
 * Quick links run two-up: seven items stacked made one very tall, thin column
 * next to much shorter neighbours.
 *
 * display:block is required, not decoration — the footer's own `.lsf-footer ul`
 * rule makes every list a grid, and CSS multi-column has no effect on a grid
 * container, so `columns` computed as 2 and rendered as 1.
 */
.lsf-footer .wp-block-list {
	display: block;
	columns: 2;
	column-gap: 28px;
}

.lsf-footer .wp-block-list li {
	break-inside: avoid;
	margin-bottom: 9px;
}

.lsf-footer .wp-block-list li:last-child { margin-bottom: 0; }

/* ─────────── 26. Past event cards ──────────────────────────────────── */

.lsf-past-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: inline-block;
	width: 100%;
	margin-block-end: 24px;
}

/* The flyer is the content, so it is the control — a real button for keyboard
   reach, transparent so the image keeps its own shape. */
.lsf-past-card__zoom {
	appearance: none;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

/* Never cropped: flyers carry their detail edge to edge. */
.lsf-past-card__zoom img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--lsf-line);
	transition: opacity var(--lsf-transition);
}

.lsf-past-card__zoom:hover img { opacity: 0.88; }

.lsf-past-card__zoom:focus-visible {
	outline: 3px solid var(--wp--preset--color--blue-600);
	outline-offset: 3px;
}

.lsf-past-card__title {
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--wp--preset--color--navy-900);
}

@media (max-width: 599px) {
	.lsf-events--past .lsf-events__list { column-count: 1; }
}

/* ─────────── 27. Upcoming event row flyer ──────────────────────────── */

.lsf-event-row__zoom {
	appearance: none;
	justify-self: end;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
	/* Stand taller than the row on both edges. The row's own margin-block
	   leaves the space, so neighbours are not overlapped. */
	margin-block: -34px;
	position: relative;
	z-index: 1;
	transition: transform var(--lsf-transition), filter var(--lsf-transition);
	/* A drop-shadow filter rather than box-shadow: flyers are often not
	   rectangular once transparency is involved, and filter follows the art. */
	filter: drop-shadow(0 10px 18px rgba(6, 20, 48, 0.28));
}

.lsf-event-row__zoom img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 190px;
	object-fit: contain;
	object-position: center;
}

.lsf-event-row__zoom:hover,
.lsf-event-row__zoom:focus-visible {
	transform: translateY(-3px) scale(1.02);
	filter: drop-shadow(0 16px 26px rgba(6, 20, 48, 0.36));
}

.lsf-event-row__zoom:focus-visible {
	outline: 3px solid var(--wp--preset--color--blue-600);
	outline-offset: 4px;
}

@media (max-width: 781px) {
	.lsf-event-row {
		grid-template-columns: 84px 1fr;
		margin-block: 18px;
	}

	/* Stacked, the overhang has nothing to sit against — let it sit in the row. */
	.lsf-event-row__zoom {
		grid-column: 1 / -1;
		justify-self: start;
		margin-block: 4px 0;
		max-width: 260px;
	}

	.lsf-event-row__zoom img { max-height: none; }
}

/*
 * The Give dialog holds the Pledge widget.
 *
 * Pledge measures its container when the script runs, which is while the dialog
 * is still display:none — so it falls back to a 300px holder and the iframe,
 * set to width:100%, inherits that. Height corrects itself afterwards over
 * postMessage; width does not. Forcing the holder is what makes it fill.
 */
.lsf-form-dialog--pledge { width: min(620px, calc(100vw - 32px)); }

.lsf-form-dialog--pledge .lsf-donate-embed { min-height: 0; }

.lsf-form-dialog--pledge .plg-donate,
.lsf-form-dialog--pledge .plg-donate-iframe {
	width: 100% !important;
	max-width: none !important;
}

.lsf-form-dialog--pledge .lsf-form-dialog__inner { padding-inline: clamp(16px, 3vw, 28px); }

/* ─────────── 28. Contact Form 7 fallback styling ───────────────────── */

/*
 * The ported forms use .lsf-form__field markup. A form built in the CF7 editor
 * without it — the stock sample form, or anything the client adds later — would
 * otherwise render as raw browser defaults next to them. This styles CF7's own
 * paragraph-wrapped output to match.
 */
.lsf-form .wpcf7-form > p {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--navy-900);
}

.lsf-form .wpcf7-form > p > label { display: block; }

.lsf-form .wpcf7-form-control-wrap { display: block; margin-top: 6px; }

.lsf-form input[type="date"],
.lsf-form input[type="number"],
.lsf-form input[type="search"],
.lsf-form select,
.lsf-form textarea {
	font-weight: 400;
}

/* CF7's submit is a bare <input type="submit"> unless classes are added. */
.lsf-form input[type="submit"] {
	appearance: none;
	display: inline-block;
	margin-top: 4px;
	padding: 14px 30px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--blue-600);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--lsf-transition);
}

.lsf-form input[type="submit"]:hover,
.lsf-form input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--navy-800);
}

.lsf-form input[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--blue-600);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * 29. Footer pull quote
 *
 * The line the foundation runs on, given a band of its own above the footer
 * columns. It is navy-800 against the footer's navy-900 so it reads as a
 * separate panel rather than more footer copy — the same one-shade lift the
 * CTA band uses against the page on /impact-programs/, and centred to match
 * it. The quotation marks are in the text itself, so there is no decorative
 * glyph here to double them up.
 *
 * Every rule is written with the `.lsf-footer` ancestor, not the class alone.
 * Two global rules would otherwise win on specificity: the footer's own
 * `.lsf-footer p { font-size: 14px; line-height: 1.65 }` and the site-wide
 * `:root p { line-height: 1.1 }`, which is (0,1,1).
 * -------------------------------------------------------------------- */
.lsf-footer .lsf-footer__quote {
	position: relative;
	overflow: hidden;
	max-width: none;
	margin: 0;
	padding: clamp(40px, 5vw, 68px) var(--wp--custom--gutter);
	border: 0;
	background: var(--wp--preset--color--navy-800);
	text-align: center;
}

/* An oversized opening mark as the band's watermark. It is the typographic
 * glyph in the display face rather than an SVG, so it matches the quotation
 * marks in the line above it, and `overflow: hidden` clips it to the band.
 *
 * The two magic numbers are measured, not guessed. Canvas metrics for this
 * glyph in Barlow Condensed 800 give ink 0.233em tall sitting 0.317em below
 * the top of a line-height:1 box — so its ink centre is at 31.65% of the
 * element's height, and translating up by that much centres the ink on the
 * band. The font-size is then chosen for ink height, not em size: 620px
 * yields a mark about 145px tall, a little over half the band. */
.lsf-footer .lsf-footer__quote::before {
	content: "\201C";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -31.65%);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(340px, 46vw, 620px);
	line-height: 1;
	font-weight: 800;
	color: var(--wp--preset--color--white);
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
}

/* The quote and its attribution ride above the watermark. */
.lsf-footer .lsf-footer__quote > * {
	position: relative;
	z-index: 1;
}

.lsf-footer .lsf-footer__quote p {
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(26px, 3.4vw, 44px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
	text-wrap: balance;
}

/* A short rule sits above the attribution rather than beside it, so the name
 * stays centred under the quote instead of being pushed off-axis by the bar. */
.lsf-footer .lsf-footer__quote cite {
	display: block;
	margin: 22px auto 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 15.6px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-200);
}

.lsf-footer .lsf-footer__quote cite::before {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin: 0 auto 14px;
	background: var(--wp--preset--color--blue-600);
}

/* -----------------------------------------------------------------------
 * 30. Testimonials
 *
 * A masonry column flow, like the press grid and the past-events list.
 * These run from two lines to nine paragraphs, and a fixed grid would either
 * set every row to the height of its tallest card or crop the long ones.
 *
 * `break-inside: avoid` is load-bearing, not tidiness: without it a card
 * splits across a column boundary and its attribution lands under a
 * different quote.
 * -------------------------------------------------------------------- */
.lsf-testimonials__list {
	column-count: var(--lsf-testimonial-cols, 3);
	column-gap: 24px;
}

.lsf-testimonial {
	position: relative;
	break-inside: avoid;
	overflow: hidden;
	margin: 0 0 24px;
	padding: 26px 28px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--lsf-line);
	border-top: 3px solid var(--wp--preset--color--blue-600);
	color: var(--wp--preset--color--slate-600);
}

/*
 * A quote mark watermark in the bottom-right corner of every card.
 *
 * Canvas metrics for this glyph in Barlow Condensed 800, in a line-height:1
 * box: ink starts 0.200em down, ends 0.433em down, so it stands 0.233em tall
 * and clears the bottom of its own box by 0.567em. Anchoring from `bottom`
 * with that figure puts the ink 20px above the card's bottom edge, and em
 * resolves against the pseudo-element's own font-size, so the inset survives
 * a size change.
 *
 * The earlier top-anchored version used 0.317em, which is the ink's *centre*,
 * not its top — that put the ink's top edge 8.6px above the card and the
 * card's `overflow: hidden` sheared it off.
 */
.lsf-testimonial::before {
	content: "\201C";
	position: absolute;
	bottom: calc(20px - 0.567em);
	right: 20px;
	z-index: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 210px;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--blue-600);
	opacity: 0.09;
	pointer-events: none;
}

/* The words sit over the watermark, not under it. */
.lsf-testimonial > * {
	position: relative;
	z-index: 1;
}

.lsf-testimonial__quote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
}

.lsf-testimonial__quote p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.55;
}

.lsf-testimonial__quote p:last-child { margin-bottom: 0; }

/*
 * The clamp is applied server-side so nothing reflows once the script runs.
 * -webkit-line-clamp still needs the -webkit-box display in every engine
 * that supports it, including Firefox, which implements the prefixed pair.
 */
.lsf-testimonial__quote[data-lsf-clamp] {
	display: -webkit-box;
	-webkit-line-clamp: 9;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lsf-testimonial__toggle {
	appearance: none;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-600);
	cursor: pointer;
}

.lsf-testimonial__toggle:hover,
.lsf-testimonial__toggle:focus-visible { text-decoration: underline; }

.lsf-testimonial__who {
	display: grid;
	gap: 2px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--lsf-line);
}

.lsf-testimonial__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-800);
}

.lsf-testimonial__org {
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--slate-500);
}

.lsf-testimonials__actions {
	margin: 8px 0 0;
	text-align: center;
}

@media (max-width: 1023px) {
	.lsf-testimonials__list { column-count: 2; }
}

@media (max-width: 719px) {
	.lsf-testimonials__list { column-count: 1; }
}

/* -----------------------------------------------------------------------
 * 31. The work we support — focus areas
 *
 * Twelve short labels that need to read as one scannable index rather than
 * twelve paragraphs. Deliberately no icons: eight of the twelve have no
 * existing icon in the set, and inventing eight more would give a row of
 * near-identical glyphs that carry less meaning than the words themselves.
 * The blue edge does the visual work instead.
 * -------------------------------------------------------------------- */
/*
 * Sized here rather than with the `large` preset, which renders at 31px — a
 * headline, not a lede, and it sat unhappily between the section heading and
 * the body copy. A ch-based max-width was no use either: 68ch works out wider
 * than the 1100px content column, so it never constrained anything. An
 * explicit measure does.
 */
.lsf-lede {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.4;
	color: var(--wp--preset--color--slate-600);
}

/* Two columns of body copy, so three long paragraphs do not read as a wall.
   Collapses before the measure gets uncomfortably narrow. */
.lsf-prose-two { margin-top: 30px; gap: 44px; }
.lsf-prose-two p { line-height: 1.45; }

.lsf-focus {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 34px;
}

.lsf-focus__item {
	display: grid;
	align-content: center;
	gap: 6px;
	padding: 18px 20px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--lsf-line);
	border-left: 4px solid var(--wp--preset--color--blue-600);
}

/* The grid is a flow layout as far as core is concerned, so every item but
   the first would otherwise carry a margin-block-start and the rows would
   sit a few pixels out of true. Same fix as .lsf-stats and friends. */
.lsf-focus > *,
.lsf-focus__item > * { margin-block: 0; }

.lsf-focus__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--wp--preset--color--navy-800);
}

.lsf-focus__note {
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--slate-500);
}

@media (max-width: 899px) {
	.lsf-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.lsf-focus { grid-template-columns: 1fr; }
	.lsf-lede { text-align: left; }
}

/* -----------------------------------------------------------------------
 * 32. Share Your Strength Award — qualification chips
 *
 * Seven items, which is an awkward count for a grid: three columns leaves a
 * lone card on the last row, four leaves three. Centred flowing chips let the
 * row breaks fall wherever the widths land, so no arrangement looks broken.
 * -------------------------------------------------------------------- */
.lsf-quals {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 30px;
}

.lsf-quals > * { margin-block: 0; }

.lsf-qual {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px 14px 18px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--lsf-line);
	border-left: 4px solid var(--wp--preset--color--blue-600);
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--wp--preset--color--navy-800);
}

/* The emoji carries no meaning a screen reader needs — the label says the
   same thing — so it is decorative and hidden from the accessibility tree
   in the markup. Sized here so it reads as an icon, not as text. */
.lsf-qual__mark {
	font-size: 22px;
	line-height: 1;
	flex: none;
}

@media (max-width: 599px) {
	.lsf-quals { gap: 10px; }
	.lsf-qual { width: 100%; font-size: 14px; }
}

/* -----------------------------------------------------------------------
 * 33. Legal pages — privacy, terms, accessibility
 *
 * Long-form reading, which the rest of the site is not. The site-wide
 * `:root p { line-height: 1.1 }` is far too tight for a document someone
 * actually has to read through, so it is loosened here; `.lsf-legal p` is
 * (0,1,1), the same weight as `:root p`, and wins on source order.
 * -------------------------------------------------------------------- */
.lsf-legal {
	max-width: 74ch;
	margin-inline: auto;
	color: var(--wp--preset--color--slate-600);
}

.lsf-legal p,
.lsf-legal li {
	line-height: 1.6;
}

.lsf-legal > p { margin-block: 0 16px; }

.lsf-legal h2 {
	margin-block: 44px 14px;
	padding-top: 22px;
	border-top: 1px solid var(--lsf-line);
	color: var(--wp--preset--color--navy-800);
}

.lsf-legal h3 {
	margin-block: 26px 10px;
	color: var(--wp--preset--color--navy-800);
}

.lsf-legal ul {
	margin-block: 0 18px;
	padding-inline-start: 22px;
}

.lsf-legal li { margin-bottom: 7px; }

.lsf-legal__updated {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-500);
}

.lsf-legal__contact {
	margin-top: 6px;
	padding: 20px 24px;
	background: var(--wp--preset--color--bg-100);
	border-left: 4px solid var(--wp--preset--color--blue-600);
}

.lsf-legal__contact > * { margin-block: 0; }

.lsf-legal__closer {
	margin-top: 34px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	line-height: 1.25;
	color: var(--wp--preset--color--navy-800);
}

/* The legal strip at the very bottom of the footer carries the policy links
   beside the copyright line, so they are present on every page. */
.lsf-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 26px;
}

.lsf-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	list-style: none;
	padding: 0;
}

.lsf-footer .lsf-footer__policies { display: flex; }
.lsf-footer .lsf-footer__policies li { margin: 0; }

/* -----------------------------------------------------------------------
 * 34. Cookie notice
 *
 * A band across the bottom rather than a modal: it carries no decision, so it
 * must never block the page or trap focus. z-index sits above ordinary content
 * but well below the mobile nav overlay (100000) and the form dialogs, so it
 * can never cover an open menu or a form someone is filling.
 *
 * Copy and the two actions run as one line, the way the Cookie Law Info
 * banners do — the button and link are inline-block inside the paragraph
 * rather than a separate row, so short viewports get one compact strip.
 * -------------------------------------------------------------------- */
.lsf-cookie {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	background: var(--wp--preset--color--navy-900);
	border-top: 3px solid var(--wp--preset--color--blue-600);
	color: #C9D8F2;
	box-shadow: 0 -10px 30px rgba(6, 24, 71, 0.28);
	animation: lsf-cookie-in 260ms ease-out both;
}

@keyframes lsf-cookie-in {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

/* Motion on something that appears unbidden is exactly what reduced-motion
   is asking us to drop. */
@media (prefers-reduced-motion: reduce) {
	.lsf-cookie { animation: none; }
}

.lsf-cookie__inner {
	max-width: calc(var(--wp--style--global--content-size) + var(--wp--custom--gutter) * 2);
	margin-inline: auto;
	padding: 14px var(--wp--custom--gutter);
	text-align: center;
}

/* Beats the site-wide `:root p { line-height: 1.1 }` at (0,2,0). */
.lsf-cookie .lsf-cookie__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	/* Keeps the copy, the button and the link on one line wherever there is
	   room. Released below 700px, where nothing sensible fits on one line and
	   forcing it would push the button off the edge. */
	white-space: nowrap;
}

@media (max-width: 700px) {
	.lsf-cookie .lsf-cookie__text { white-space: normal; }
}

.lsf-cookie__accept,
.lsf-cookie__more {
	display: inline-block;
	margin: 5px;
	vertical-align: middle;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--widest);
	text-transform: uppercase;
}

.lsf-cookie__accept {
	appearance: none;
	padding: 9px 22px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--blue-600);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background var(--lsf-transition);
}

.lsf-cookie__accept:hover,
.lsf-cookie__accept:focus-visible { background: var(--wp--preset--color--blue-500); }

.lsf-cookie__more {
	padding: 9px 4px;
	color: var(--wp--preset--color--blue-200);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.lsf-cookie__more:hover,
.lsf-cookie__more:focus-visible {
	color: var(--wp--preset--color--white);
	border-bottom-color: currentColor;
}

@media (max-width: 599px) {
	.lsf-cookie .lsf-cookie__text { font-size: 13px; }
	.lsf-cookie__accept { display: block; margin: 10px auto 4px; width: 100%; }
}

/* -----------------------------------------------------------------------
 * 35. Transparency seal in the footer
 *
 * Sits on the social row at the same 42px box as the icon tiles, so the
 * three read as one line of marks. The seal artwork carries its own gold
 * frame, so it gets no border of its own — a second frame around a framed
 * badge looks like a mistake.
 * -------------------------------------------------------------------- */
.lsf-connect {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.lsf-connect > * { margin-block: 0; }

.lsf-seal {
	appearance: none;
	flex: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
	transition: opacity var(--lsf-transition);
}

.lsf-seal img {
	display: block;
	width: 42px;
	height: 42px;
}

.lsf-seal:hover { opacity: 0.82; }

/* The seal has no border to change on focus, so it needs a real ring. */
.lsf-seal:focus-visible {
	outline: 3px solid var(--wp--preset--color--blue-600);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * 36. Any image marked `lsf-zoomable`
 *
 * The button site.js wraps around such an image must not introduce a box of
 * its own — the image keeps whatever size and alignment the block gave it,
 * and the button just makes it operable.
 * -------------------------------------------------------------------- */
.lsf-zoom-btn {
	appearance: none;
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	line-height: 0;
	cursor: zoom-in;
	max-width: 100%;
	transition: opacity var(--lsf-transition);
}

.lsf-zoom-btn img { display: block; max-width: 100%; height: auto; }

.lsf-zoom-btn:hover { opacity: 0.85; }

.lsf-zoom-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--blue-600);
	outline-offset: 3px;
}