/*
Theme Name: The Baltimore Station
Theme URI: https://baltimorestation.org/
Author: Sensible Entertainment
Author URI: https://sensibleentertainment.com/
Description: Custom FSE block theme for The Baltimore Station. Faithful to the Figma redesign — veteran-focused, high-contrast, accessible.
Version: 0.1.21
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baltimore-station
Tags: full-site-editing, block-patterns, accessibility-ready, blog, nonprofit, one-column, custom-colors, custom-menu, featured-images
*/

/*
 * Most styling lives in theme.json. This file is required by WP for the theme header
 * and is the place for the few selectors that block-level rules cannot reach:
 * Gravity Forms output, third-party plugin output (e.g. The Events Calendar), and
 * any utility classes we need to attach inside template parts.
 */

/* ---- box-sizing ----------------------------------------------------------
   The theme had NO global border-box rule, so every hand-written .bs-* element
   that sets both a height/width AND padding came out larger than its padding-
   free neighbours. That is the whole "the red stat card is taller than the
   photo next to it" family of bugs: .bs-about-band__stat has padding:.75rem and
   the same height:clamp() as the photo tiles, so under content-box it rendered
   24px taller. Set it once, globally, rather than chasing each collage. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---- Closed dialogs must never intercept clicks --------------------------
   Every one of our modals is a native <dialog> printed in the footer, sized
   position:fixed and centred. The UA hides a closed dialog with display:none —
   but any rule that sets `display` on the dialog element unconditionally
   overrides that, leaving an invisible (opacity:0) fixed panel over the middle
   of the page that eats every click behind it. Belt and braces so a future
   `display:` on a modal can't silently break the whole site again. */
dialog:not([open]) {
	display: none !important;
	pointer-events: none !important;
}

/* Hide FAQ/accordion rows whose copy was a blanked TODO placeholder (see the
   gettext filter in functions.php) so they don't render as empty clickable rows. */
.wp-block-details:has(> summary:empty) {
	display: none;
}

/* ---- Button links: neutralize core's height:100% on bare links ----
   WP core sets .wp-block-button__link{height:100%} so the link fills its
   .wp-block-button wrapper. Many of our patterns use a bare button-link anchor
   with no wrapper; inside a stretched flex column that height:100% balloons the
   button into a giant pill. Reset bare links to auto and restore 100% for
   properly-wrapped buttons (specificity keeps the wrapped rule winning). */
a.wp-block-button__link {
	height: auto;
}
.wp-block-button > a.wp-block-button__link {
	height: 100%;
}

/* ---- Primary navigation: desktop dropdown menus (white card, per Figma) ---- */
.bs-primary-nav .wp-block-navigation__submenu-container {
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 24px -6px rgba(34, 4, 4, 0.18);
	/* extra top padding bridges the gap so the menu doesn't close when you reach for it */
	padding: 0.85rem 0.6rem 0.6rem;
	/* Wide enough that "Corporate Partnerships" stays on one line — a two-word
	   label broken across two lines reads as two menu items. */
	min-width: 310px;
	border: 0;
	margin-top: 0;
}
.bs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	white-space: nowrap;
}
/* submenu links: dark text on the white card (top-level nav is white text on maroon) */
.bs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.bs-primary-nav .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink) !important;
	padding: 0.55rem 0.85rem;
	border-radius: 8px;
	font-weight: 500;
}
.bs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.bs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--brand-pink);
	color: var(--wp--preset--color--brand-maroon) !important;
}
/* Third level (Get Involved › Volunteer › …) flies out beside its parent card
   rather than nesting inside it. Core positions it at left:100%; these just
   stop it inheriting the 310px width meant for "Corporate Partnerships" and
   line its first item up with the parent item it opened from. */
/* margin-left MUST stay 0. Core positions this panel at left:100% of the row
   that opens it; any positive offset opens a strip of dead space between the
   two, and crossing that strip with the pointer drops :hover and the menu
   vanishes mid-reach. At 0 the panel starts exactly where the row ends, so the
   pointer never leaves a hoverable element. It overlaps the parent card's
   0.6rem right padding, which is how cascading menus normally meet. */
.bs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	min-width: 220px;
	margin-top: -0.85rem;
	margin-left: 0;
}

/* Give every dropdown a moment before it closes. Core fades them out the
   instant hover is lost, so clipping a corner on the way to an item — or
   overshooting by a few pixels — snaps the menu shut. The delay only applies
   to the closing direction; opening stays immediate. */
.bs-primary-nav .wp-block-navigation__submenu-container {
	transition: opacity 0.16s linear 0.22s, visibility 0s linear 0.38s;
}
.bs-primary-nav .has-child:hover > .wp-block-navigation__submenu-container,
.bs-primary-nav .has-child:focus-within > .wp-block-navigation__submenu-container,
.bs-primary-nav .wp-block-navigation__submenu-container:hover,
.bs-primary-nav .wp-block-navigation__submenu-container:focus-within {
	transition: opacity 0.14s linear 0s, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
	.bs-primary-nav .wp-block-navigation__submenu-container {
		transition: none;
	}
}
/* active top-level item: red underline */
.bs-primary-nav > ul > .current-menu-item > .wp-block-navigation-item__content,
.bs-primary-nav > ul > .current-menu-ancestor > .wp-block-navigation-item__content {
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--brand-red);
}

/* ---- Announcement bar ---- */
.bs-announcement__close {
	cursor: pointer;
}

/* ---- Footer link lists ---- */
.bs-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.bs-footer-links a {
	color: var(--wp--preset--color--gray-700);
	text-decoration: none;
	font-size: 0.9375rem;
}
.bs-footer-links a:hover {
	color: var(--wp--preset--color--brand-red);
}

/* ---- Announcement bar (dynamic block) ---- */
.bs-announcement {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	border-radius: 999px;
	padding: 0.65rem 1.5rem;
	margin-top: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--brand-pink);
	color: var(--wp--preset--color--ink);
}
.bs-announcement__text {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: center;
}
.bs-announcement__button {
	display: inline-block;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	text-decoration: none;
	padding: 0.4rem 1.1rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}

/* ---- Feature card icons (features-grid) ---- */
.bs-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	flex: 0 0 auto;
}
.bs-feature-icon svg {
	width: 26px;
	height: 26px;
}

/* ---- Partner logos row (home) ---- */
.bs-partner-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
}
.bs-partner-logos__img {
	/* Constrain BOTH dimensions so logos read as roughly the same size whatever
	   their aspect ratio: wide wordmarks hit the width cap (so they don't balloon)
	   and square/tall marks get a generous height (so they aren't dwarfed). */
	max-height: 84px;
	max-width: 210px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Missing-image placeholder: centered glyph on a soft grey field (replaces the
   old flat grey block so an absent photo reads as intentional). */
.bs-img-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--gray-300);
}
.bs-img-fallback svg {
	width: 22%;
	max-width: 56px;
	height: auto;
}
.bs-partner-logos__name {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--gray-500);
}
.bs-partner-logos__link {
	display: inline-flex;
	align-items: center;
}

/* ---- Partner logos slider: auto-rotates, 3 at a time (2 tablet / 1 phone).
   See inc/partners.php. Logos keep .bs-partner-logos__img sizing. ---- */
.bs-partner-slider {
	position: relative;
	width: 100%;
	max-width: 1040px;
	margin-inline: auto;
	padding: 0 3rem; /* room for the side arrows */
}
.bs-partner-slider__viewport {
	overflow: hidden;
	width: 100%;
}
.bs-partner-slider__track {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.bs-partner-slider__item {
	flex: 0 0 33.3333%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.6rem;
	box-sizing: border-box;
	min-height: 104px;
}
.bs-partner-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1.5px solid var(--wp--preset--color--gray-200, #e5e5e5);
	background: #fff;
	color: var(--wp--preset--color--brand-maroon, #220404);
	cursor: pointer;
	padding: 0;
	z-index: 2;
}
.bs-partner-slider__arrow svg { width: 20px; height: 20px; }
.bs-partner-slider__arrow:hover {
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	border-color: var(--wp--preset--color--brand-red);
}
.bs-partner-slider__arrow--prev { left: 0; }
.bs-partner-slider__arrow--next { right: 0; }
@media (max-width: 900px) {
	.bs-partner-slider__item { flex-basis: 50%; }
}
@media (max-width: 560px) {
	.bs-partner-slider { padding: 0 2.5rem; }
	.bs-partner-slider__item { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.bs-partner-slider__track { transition: none; }
}

/* ---- Footer accreditation badges (CARF, Candid, SecurityMetrics) ---- */
.bs-footer-badges__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
}
.bs-footer-badges__link {
	display: inline-flex;
	align-items: center;
}
.bs-footer-badges__img {
	height: 84px;
	width: auto;
	display: block;
}

/* ==========================================================================
   Single event (single-tribe_events) — faithful to the Figma "Event Details".
   ========================================================================== */
.bs-event-hero {
	text-align: center;
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50);
}
.bs-event-hero__title {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 900;
	color: var(--wp--preset--color--brand-red);
	font-size: var(--wp--preset--font-size--5-xl);
	line-height: 1.02;
	letter-spacing: -0.025em;
	max-width: 900px;
	margin: 0 auto var(--wp--preset--spacing--40);
}
.bs-event-hero__date {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: 1rem;
}
.bs-event-countdown {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 18px;
	padding: 0.75rem 0.25rem;
	margin: 0 auto;
}
.bs-event-countdown__seg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 1.25rem;
	min-width: 76px;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.bs-event-countdown__seg:last-child {
	border-right: 0;
}
.bs-event-countdown__seg strong {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
}
.bs-event-countdown__seg span {
	font-size: 0.8rem;
	margin-top: 0.35rem;
	opacity: 0.85;
}
.bs-event-hero__cta {
	margin-top: var(--wp--preset--spacing--60);
}

.bs-event-body {
	background: #fff;
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50);
}
.bs-event-body__inner {
	max-width: 1240px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--wp--preset--spacing--80);
	align-items: start;
}
.bs-event-figure {
	margin: 0 0 var(--wp--preset--spacing--50);
}
.bs-event-figure img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}
.bs-event-desc {
	line-height: 1.7;
}
.bs-event-desc > :first-child {
	margin-top: 0;
}
.bs-event-desc h2,
.bs-event-desc h3 {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--20);
}

.bs-event-sidebar {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}
.bs-event-detailbox {
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-100);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--60);
}
.bs-event-sidebar__h {
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0 0 var(--wp--preset--spacing--20);
}
.bs-event-detailbox .bs-event-sidebar__h ~ .bs-event-sidebar__h {
	margin-top: var(--wp--preset--spacing--40);
}
.bs-event-detail {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--gray-100);
}
.bs-event-detail__k {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gray-500);
}
.bs-event-detail__v {
	display: block;
	margin-top: 0.15rem;
	font-weight: 500;
}
.bs-event-venue__name {
	font-weight: 700;
	margin: 0.25rem 0 0;
}
.bs-event-venue__addr {
	color: var(--wp--preset--color--gray-700);
	font-size: 0.95rem;
	margin: 0.25rem 0 var(--wp--preset--spacing--30);
}
.bs-event-map {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.bs-event-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.bs-event-sidebar__cta {
	text-align: center;
}
.bs-event-sidebar__cta .bs-btn-pill {
	display: block;
}

.bs-event-cta {
	text-align: center;
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50);
}
.bs-event-cta__inner {
	max-width: 760px;
	margin-inline: auto;
}
.bs-event-cta__title {
	color: #fff;
	font-size: var(--wp--preset--font-size--4-xl);
	margin: 0 0 var(--wp--preset--spacing--30);
}
.bs-event-cta__lead {
	margin: 0 0 var(--wp--preset--spacing--50);
}
.bs-event-cta__btn {
	display: inline-block;
	background: var(--wp--preset--color--brand-maroon);
	color: #fff;
	border-radius: 999px;
	padding: 0.9rem 2.25rem;
	font-weight: 700;
	text-decoration: none;
}
.bs-event-cta__btn:hover,
.bs-event-cta__btn:focus {
	background: #1a0303;
	color: #fff;
}
@media (max-width: 900px) {
	.bs-event-body__inner {
		grid-template-columns: 1fr;
	}
	.bs-event-sidebar {
		position: static;
	}
	.bs-event-countdown__seg {
		min-width: 60px;
		padding: 0.25rem 0.85rem;
	}
}

/* ---- Newsletters grid (newsletters CPT) ---- */
.bs-newsletters-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--60);
}
.bs-newsletter-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bs-newsletter-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lg);
}
.bs-newsletter-card__media {
	display: block;
	aspect-ratio: 1; /* square image covering the card top */
	overflow: hidden;
	background: var(--wp--preset--color--gray-100);
}
.bs-newsletter-card__img,
.bs-newsletter-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bs-newsletter-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--gray-300);
}
.bs-newsletter-card__placeholder svg {
	width: 28%;
	max-width: 64px;
	height: auto;
}
.bs-newsletter-card__title {
	margin: 0;
	padding: 1rem 1.25rem 1.25rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--brand-red);
}
.bs-newsletter-card:hover .bs-newsletter-card__title {
	color: var(--wp--preset--color--brand-maroon);
}
.bs-newsletters-empty {
	text-align: center;
	color: var(--wp--preset--color--gray-500);
}
@media (max-width: 800px) {
	.bs-newsletters-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
	.bs-newsletters-grid { grid-template-columns: 1fr; }
}

/* ---- Give hope to a hero: equal-height card grid ---- */
.bs-give-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* No grid-auto-rows:1fr — in an auto-height grid Chrome under-sizes 1fr tracks,
	   so the card box ends up shorter than its content and the bottom-pinned CTA
	   overflows into the gap. Default auto rows + align-items:stretch already make
	   the cards in each row equal height without that risk. */
	align-items: stretch;
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--50);
}
.bs-give-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	/* NO height:100% — on a grid item in an auto-height grid it makes Chrome
	   collapse the row tracks and merge each column into one tall cell (the CTA
	   then clips at the seam). align-items:stretch on the grid already gives the
	   cards in each row equal height. */
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--60);
}
.bs-give-card__title {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
}
.bs-give-card__body {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--wp--preset--color--gray-700);
	margin: 0;
}
.bs-give-card__cta {
	margin-top: auto; /* pins the link to the bottom so cards align */
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
}
.bs-give-card__cta:hover {
	color: var(--wp--preset--color--brand-maroon);
}
/* white SVG inside the red disc (.bs-feature-icon supplies the 56px circle) */
.bs-give-icon {
	color: #fff;
}

/* ---- Helping Veterans rebuild: equal-height spotlight cards ---- */
.bs-spotlight .wp-block-column {
	display: flex;
}
.bs-spotlight-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	position: relative;
}
.bs-spotlight-card > .wp-block-group {
	flex: 1; /* red text panel grows so both cards match height */
}
/* Whole-card click: the "Get started" link stretches to cover the card, so a
   click anywhere on the card (photo or panel) follows it. The button stays
   visible and keyboard-focusable. */
.bs-spotlight-card .bs-card-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.bs-spotlight-card { cursor: pointer; }

/* ---- Real stories, real change: testimonial polish ---- */
.bs-testimonial__quote {
	position: relative;
	border: 0 !important;
	padding-left: 0;
}
.bs-testimonial__quote::before {
	content: "\201C";
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 0.5;
	color: var(--wp--preset--color--brand-red);
	margin-bottom: 1rem;
}
.bs-testimonial__quote p {
	margin: 0;
	font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.125rem);
	line-height: 1.32;
	font-weight: 500;
}
.bs-testimonial__quote + p {
	position: relative;
	padding-top: 1rem;
}
.bs-testimonial__quote + p::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--brand-red);
}
@media (max-width: 781px) {
	.bs-give-grid { grid-template-columns: 1fr; }
}

/* ---- FAQ accordions (wp:details) — hide native marker, add a rotating chevron ---- */
.wp-block-details summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 600;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
	transition: transform 0.2s ease;
}
.wp-block-details[open] summary::after { transform: rotate(180deg); }

/* Slide the answer down rather than snapping it on.
 *
 * Deliberately a one-shot @keyframes on the OPEN state rather than a
 * transition on the closed state. A transition has to declare block-size:0
 * while closed, and if the browser then fails to recompute ::details-content
 * on the open flip — which Chrome does intermittently when a discrete
 * content-visibility transition is in the same declaration — the answer stays
 * collapsed and the FAQ is simply broken. Here the steady open state has no
 * size constraint at all: if the animation doesn't run, the answer is just
 * open immediately. Worst case is "no animation", never "no content".
 *
 * block-size:auto interpolates only with interpolate-size enabled, below.
 */
@supports selector(::details-content) {
	.wp-block-details[open]::details-content {
		overflow: hidden;
		animation: bs-details-slide 0.26s ease;
	}
}
@keyframes bs-details-slide {
	from {
		block-size: 0;
		opacity: 0;
	}
	to {
		block-size: auto;
		opacity: 1;
	}
}
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-details[open]::details-content {
		animation: none;
	}
}

/* ---- Legal pages (templates/page-legal.html) ----------------------------
   Imported prose, so it carries no block spacing of its own. The generic page
   template renders it at blockGap:0, which ran every heading straight into the
   paragraph under it. Give the body a reading rhythm instead. */
.bs-legal .wp-block-post-content > * {
	margin-block: 0 1.1em;
}
.bs-legal h2 {
	font-size: 1.5rem;
	line-height: 1.25;
	margin-block: 2.25em 0.6em;
}
.bs-legal h3 {
	font-size: 1.15rem;
	line-height: 1.3;
	margin-block: 1.8em 0.5em;
}
.bs-legal .wp-block-post-content > *:first-child {
	margin-block-start: 0;
}
.bs-legal p,
.bs-legal li {
	line-height: 1.65;
	color: var(--wp--preset--color--gray-700);
}
.bs-legal ul,
.bs-legal ol {
	padding-inline-start: 1.4em;
}
.bs-legal li + li {
	margin-block-start: 0.4em;
}
.bs-legal a {
	color: var(--wp--preset--color--brand-red);
}

/* ---- Press feed (Press Room CPT) ---- */
.bs-press-feed {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
}
.bs-press-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform 0.15s ease;
}
.bs-press-card:hover {
	transform: translateY(-3px);
}
.bs-press-card__media .bs-press-card__img,
.bs-press-card__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.bs-press-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.bs-press-card__publisher {
	color: var(--wp--preset--color--brand-red);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.bs-press-card__date {
	color: var(--wp--preset--color--gray-500);
	font-size: 0.8rem;
}
.bs-press-card__title {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
}
@media (max-width: 781px) {
	.bs-press-feed {
		grid-template-columns: 1fr;
	}
}

/* ---- Layout: no gap between header / main / footer (kill default site-blocks margin) ---- */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---- Mobile header: smaller logo, keep CTAs inline next to the hamburger ---- */
@media (max-width: 781px) {
	.bs-header .wp-block-site-logo img {
		width: 130px;
	}
	.bs-header .wp-block-buttons {
		flex-wrap: nowrap;
		gap: 0.4rem;
	}
	.bs-header .wp-block-buttons .wp-block-button__link {
		white-space: nowrap;
		padding: 0.55rem 1rem !important;
		font-size: 0.82rem;
	}
}
/* phones: keep only the Donate CTA in the bar (Volunteer is in the menu + hero) */
@media (max-width: 600px) {
	.bs-header .wp-block-buttons .wp-block-button:first-child {
		display: none;
	}
}

/* ---- Mobile navigation ---------------------------------------------------
   Collapse to the hamburger EARLIER (≤1024px, not the WP default 600px) so the
   header never crowds, and restyle the open overlay as a proper mobile menu
   instead of the desktop dropdown cards leaking in (floating white boxes,
   borders, shadows). Core already turns `.is-menu-open` into a fixed white
   overlay; these rules replace what's inside it. The header nav needs ~1185px
   to lay out without crowding, so we collapse at 1200px. */
@media (max-width: 1200px) {
	/* Show the hamburger; hide the inline horizontal menu until it's opened. */
	.bs-header .bs-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		color: #fff;
	}
	.bs-header .bs-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Roomy, single-column list. */
	.bs-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding: 0 1.4rem 2.5rem;
	}
	.bs-primary-nav .is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
		align-items: stretch;
	}
	.bs-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid #ececec;
	}
	.bs-primary-nav .is-menu-open .wp-block-navigation-item__content {
		padding: 0.95rem 0.15rem !important;
		font-size: 1.12rem;
		font-weight: 700;
		color: #220404;
	}

	/* Submenus: static, indented lists — no cards, borders, or shadows. */
	.bs-primary-nav .is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		box-shadow: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		min-width: 0 !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 0 0.6rem 0.9rem !important;
	}
	.bs-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border: 0 !important;
	}
	.bs-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.5rem 0 !important;
		font-size: 1rem !important;
		font-weight: 500 !important;
		color: #555 !important;
	}
	.bs-primary-nav .is-menu-open .wp-block-navigation__submenu-icon {
		display: none !important;
	}
	.bs-primary-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 1rem;
		right: 1.2rem;
	}
}

/* ---- Newsletter signup (placeholder until the Gravity Forms newsletter form is wired) ---- */
.bs-newsletter-form {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}
.bs-newsletter-form__input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 0.85rem 1.1rem;
	border: 0;
	border-radius: 999px;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
}
.bs-newsletter-form__btn {
	background: var(--wp--preset--color--brand-maroon);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 1.6rem;
	font-weight: 700;
	cursor: pointer;
}

/* ============================================================
   Reusable section motifs (faithful rebuild)
   ============================================================ */

/* Defensive: any inline icon SVG in page content defaults to a small size.
   :where() = 0 specificity, so named icon rules (.bs-iconrow__icon svg, social
   links, etc.) always win — this only catches otherwise-unstyled stray icons. */
.wp-block-group :where(svg) {
	width: 1.5rem;
	height: 1.5rem;
}

/* Page hero (maroon band: title + subtitle + button) */
.bs-page-hero {
	text-align: center;
}
.bs-page-hero .bs-page-hero__subtitle {
	max-width: 640px;
	margin-inline: auto;
}
/* Compact variant (legal pages): left-aligned title that lines up with the body. */
.bs-page-hero--compact {
	text-align: left;
}

/* Photo-background hero */
.bs-hero-photo {
	position: relative;
	background-size: cover;
	background-position: center;
}
.bs-hero-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Left-weighted scrim: dark enough under the headline for AA contrast, but it
	   fades out by ~60% so the photo subject on the right stays visible. */
	background: linear-gradient(90deg, rgba(34, 4, 4, 0.78) 0%, rgba(34, 4, 4, 0.5) 38%, rgba(34, 4, 4, 0.12) 70%, rgba(34, 4, 4, 0) 100%);
}
.bs-hero-photo > * {
	position: relative;
}

/* Feature spotlight media with floating cards/badges */
.bs-spotlight__media {
	position: relative;
}
.bs-spotlight__media > img {
	width: 100%;
	border-radius: 20px;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}
.bs-float-card {
	position: absolute;
	background: #fff;
	color: var(--wp--preset--color--ink);
	border-radius: 14px;
	padding: 0.7rem 1rem;
	box-shadow: 0 12px 28px -8px rgba(34, 4, 4, 0.3);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	font-size: 0.85rem;
}
.bs-float-card--tl { top: 1rem; left: -0.75rem; }
.bs-float-card--bl { bottom: 1rem; left: -0.75rem; }
.bs-float-card--pink { background: var(--wp--preset--color--brand-pink) !important; color: var(--wp--preset--color--brand-maroon); }
.bs-float-pill {
	position: absolute;
	top: 38%;
	right: -0.5rem;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-weight: 700;
	font-size: 0.85rem;
	box-shadow: 0 12px 28px -8px rgba(34, 4, 4, 0.3);
}
.bs-float-card__icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-maroon);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.bs-float-card__icon svg { width: 16px; height: 16px; }
.bs-bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 26px;
}
.bs-bars i {
	width: 5px;
	background: var(--wp--preset--color--brand-red);
	border-radius: 2px;
	display: block;
}

/* ---- Home hero figure: veteran photo + floating stat cards (faithful to Figma) ---- */
.bs-hero-figure {
	position: relative;
	max-width: 440px;
	margin-inline: auto;
}
.bs-hero-figure__photo {
	width: 100%;
	display: block;
	border-radius: 24px;
	aspect-ratio: 4 / 4.5;
	object-fit: cover;
	/* The source is a landscape frame with the man on the left third and empty
	   projector screen to his right; a centre crop shoved him to the left edge.
	   Bias the horizontal crop left so his head sits centred in the portrait box. */
	object-position: 12% 50%;
	background: var(--wp--preset--color--gray-100);
}
.bs-hero-figure__asof {
	text-align: center;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.6);
	margin: 0.85rem 0 0;
}
.bs-hero-card {
	position: absolute;
	background: #fff;
	color: var(--wp--preset--color--ink);
	border-radius: 14px;
	padding: 0.7rem 0.85rem;
	box-shadow: 0 14px 30px -10px rgba(34, 4, 4, 0.4);
	font-size: 0.78rem;
	line-height: 1.35;
	z-index: 2;
}
.bs-hero-card--quote {
	top: 7%;
	left: -7%;
	max-width: 196px;
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}
.bs-hero-card--quote p { margin: 0; font-weight: 500; }
.bs-hero-card--quote cite { display: block; margin-top: 0.3rem; font-style: normal; font-weight: 700; font-size: 0.7rem; }
.bs-hero-card__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--wp--preset--color--brand-pink) center/cover no-repeat;
}
.bs-hero-card--stat {
	top: 4%;
	right: -5%;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
}
.bs-hero-card--hours {
	bottom: 16%;
	left: -7%;
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.bs-hero-card--hours strong { font-size: 1.05rem; font-weight: 800; display: block; }
.bs-hero-card__avatars { display: inline-flex; }
.bs-hero-card__avatars span {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--wp--preset--color--brand-pink);
	margin-left: -8px;
}
.bs-hero-card__avatars span:first-child { margin-left: 0; }
.bs-hero-circle {
	position: absolute;
	bottom: 3%;
	right: -4%;
	width: 116px;
	height: 116px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow: 0 14px 30px -10px rgba(34, 4, 4, 0.5);
	z-index: 2;
}
.bs-hero-circle strong { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.bs-hero-circle span { font-size: 0.72rem; margin-top: 0.2rem; }
@media (max-width: 1024px) {
	.bs-hero-card--quote { left: 0; }
	.bs-hero-card--stat { right: 0; }
	.bs-hero-card--hours { left: 0; }
	.bs-hero-circle { right: 0; }
}
@media (max-width: 600px) {
	.bs-hero-figure { max-width: 340px; }
	.bs-hero-card { font-size: 0.72rem; padding: 0.55rem 0.65rem; }
	.bs-hero-card--quote { max-width: 160px; }
	.bs-hero-circle { width: 92px; height: 92px; }
	.bs-hero-circle strong { font-size: 1.25rem; }
}

/* Photo collage (staggered) */
.bs-collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}
.bs-collage img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}
.bs-collage img:nth-child(odd) { transform: translateY(14px); }

/* Two-column list */
.bs-twocol-list {
	columns: 2;
	column-gap: 2rem;
	padding-left: 1.1rem;
}
.bs-twocol-list li { margin-bottom: 0.4rem; break-inside: avoid; }

/* Maroon feature band (inside a pink section) */
.bs-maroon-band {
	background: var(--wp--preset--color--brand-maroon);
	color: #fff;
	border-radius: 24px;
	overflow: hidden;
}
.bs-maroon-band .bs-maroon-band__media img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	display: block;
}

/* Tax-letter band (Donate): image cover-fills the left, content on the right.
   Two-column grid so the band height is driven by the body content and the
   image stretches to match — no dead maroon space. */
.bs-taxband {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
	align-items: stretch;
}
.bs-taxband__media {
	position: relative;
	overflow: hidden;
	min-height: 280px; /* sets the band height; the body centers within it */
}
/* Absolutely positioned so the photo cover-fills the column WITHOUT its natural
   height leaking into the grid row (which made the band too tall, leaving dead
   maroon space). !important overrides bs_image()'s inline aspect-ratio/height. */
.bs-taxband__media img,
.bs-taxband__media .bs-img-fallback {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	display: block;
}
.bs-taxband__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	padding: 2.5rem 3rem;
}
.bs-taxband__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
@media (max-width: 781px) {
	.bs-taxband {
		grid-template-columns: 1fr;
	}
	.bs-taxband__media {
		min-height: 0;
	}
	/* stacked: image becomes a normal banner with a fixed aspect on top */
	.bs-taxband__media img,
	.bs-taxband__media .bs-img-fallback {
		position: static !important;
		height: auto !important;
		aspect-ratio: 16 / 9 !important;
	}
	.bs-taxband__body {
		padding: 2rem;
	}
}

/* Horizontal icon-row card grid (e.g. Connective services) */
.bs-iconrow-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
}
.bs-iconrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: #fff;
	border-radius: 14px;
	padding: 0.9rem 1.1rem;
	box-shadow: var(--wp--preset--shadow--card);
	font-weight: 600;
	line-height: 1.25;
}
.bs-iconrow__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.bs-iconrow__icon svg { width: 22px; height: 22px; }

/* Contact pills (form bands) */
.bs-contact-pills {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}
.bs-contact-pill {
	background: var(--wp--preset--color--brand-maroon);
	color: #fff;
	border-radius: 999px;
	padding: 0.6rem 1.4rem;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

@media (max-width: 781px) {
	.bs-twocol-list { columns: 1; }
	.bs-collage img:nth-child(odd) { transform: none; }
	/* Overlay chips on photos ($ figures, "Housing ✓", the 501(c)3 badge, etc.):
	   pull them in off the edges and scale them down so they sit neatly on the
	   smaller mobile images instead of overhanging or crowding the photo. */
	.bs-float-card--tl, .bs-float-card--bl { left: 0.5rem; }
	.bs-float-card { font-size: 0.76rem; padding: 0.5rem 0.75rem; gap: 0.45rem; }
	.bs-float-card__icon { width: 26px; height: 26px; }
	.bs-float-card__icon svg { width: 14px; height: 14px; }
	.bs-float-card .bs-bars { height: 20px; }
	.bs-float-pill { right: 0.5rem; font-size: 0.74rem; padding: 0.38rem 0.8rem; }
	.bs-float-card--vert { right: 0.4rem !important; }
}

/* ---- Staff / Board (team CPT) ---- */
.bs-team__heading {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 0 2rem;
}
.bs-team + .bs-team {
	margin-top: 3.5rem;
}
.bs-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* mock is a 4-up grid */
	gap: 2rem;
}
@media (max-width: 1024px) {
	.bs-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 781px) {
	.bs-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
	.bs-team-grid { grid-template-columns: 1fr; }
}
.bs-team-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.bs-team-card__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 14px;
	display: block;
	background: var(--wp--preset--color--gray-100);
}
.bs-team-card__name {
	font-weight: 700;
	font-size: 1.05rem;
	margin-top: 0.25rem;
	line-height: 1.3;
}
.bs-team-card__title {
	color: var(--wp--preset--color--gray-500);
	font-size: 0.9rem;
}
.bs-team-card:hover .bs-team-card__name {
	color: var(--wp--preset--color--brand-red);
}

.bs-team-modal {
	/* position:fixed + margin:auto keeps the UA centering for showModal(); the
	   modal is a containing block for the absolutely-positioned close button. */
	position: fixed;
	inset: 0;
	margin: auto;
	border: 0;
	border-radius: 20px;
	/* Padding + scroll live on __inner (below), not here: a scrollbar on the
	   rounded dialog itself paints inside the border box and squares off the
	   right-hand corners. Let the rounded, overflow-hidden dialog clip an inner
	   scroller instead — same fix as the donate/apply modals. */
	padding: 0;
	max-width: 760px;
	width: calc(100% - 2rem);
	max-height: min(88dvh, 46rem);
	overflow: hidden;
	box-shadow: 0 24px 60px -12px rgba(34, 4, 4, 0.4);
	color: var(--wp--preset--color--ink);
	/* Smooth open/close: fade + lift. Exit transitions need allow-discrete. */
	opacity: 0;
	transform: translateY(10px) scale(0.985);
	transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}
.bs-team-modal[open] {
	opacity: 1;
	transform: none;
	display: flex;
}
@starting-style {
	.bs-team-modal[open] {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
}
.bs-team-modal::backdrop {
	background: rgba(34, 4, 4, 0.55);
	opacity: 0;
	transition: opacity 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}
.bs-team-modal[open]::backdrop {
	opacity: 1;
}
@starting-style {
	.bs-team-modal[open]::backdrop {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bs-team-modal,
	.bs-team-modal::backdrop {
		transition: none;
	}
}
.bs-team-modal__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	background: none;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}
.bs-team-modal__inner {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
	/* The scroll surface. Padding is here so the scrollbar sits inside it, clear
	   of the dialog's rounded corners. */
	padding: 2.5rem;
	overflow-y: auto;
	min-height: 0;
	width: 100%;
	scrollbar-width: thin;
	scrollbar-color: rgba(34, 4, 4, 0.24) transparent;
}
.bs-team-modal__inner::-webkit-scrollbar { width: 6px; }
.bs-team-modal__inner::-webkit-scrollbar-track { background: transparent; }
.bs-team-modal__inner::-webkit-scrollbar-thumb {
	background: rgba(34, 4, 4, 0.24);
	border-radius: 999px;
}
.bs-team-modal__inner::-webkit-scrollbar-thumb:hover { background: rgba(34, 4, 4, 0.4); }
.bs-team-modal__inner::-webkit-scrollbar-button,
.bs-team-modal__inner::-webkit-scrollbar-corner { display: none; width: 0; height: 0; }
.bs-team-modal__media img {
	width: 230px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	flex: 0 0 auto;
}
.bs-team-modal__name {
	font-size: 2rem;
	font-weight: 800;
	margin: 0 0 0.25rem;
}
.bs-team-modal__title {
	color: var(--wp--preset--color--gray-700);
	margin: 0 0 1.25rem;
}
.bs-team-modal__bio {
	line-height: 1.6;
}
.bs-team-modal__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 1.25rem 0 0;
}
.bs-team-modal__contact-link {
	display: inline-block;
	border: 1.5px solid var(--wp--preset--color--brand-red);
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	color: var(--wp--preset--color--brand-red);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}
.bs-team-modal__contact-link:hover,
.bs-team-modal__contact-link:focus-visible {
	background: var(--wp--preset--color--brand-red);
	color: #fff;
}
@media (max-width: 600px) {
	.bs-team-modal__inner {
		flex-direction: column;
		gap: 1.5rem;
		padding: 1.75rem;
	}
	.bs-team-modal__media img {
		width: 140px;
	}
}

/* ==========================================================================
   Donate modal (inc/donate.php) — site-wide donation form in a <dialog>.
   ========================================================================== */

/* 720px, not 560: the donation form lays its fields out in two columns
   (Email | Phone, City | State), and at 560 every row was wrapping to one
   column, which is what made the modal read as a thin ribbon.

   padding:0 + overflow:hidden with the scroll moved onto .__form is what keeps
   the corners round. A scrollbar on the dialog itself paints inside the border
   box and squares off the top-right and bottom-right radius; letting the
   rounded, overflow-hidden dialog clip an inner scroller avoids that.

   NOTE: `display` stays scoped to [open] — see the dialog guard at the top of
   this file. */
.bs-donate-modal {
	position: fixed;
	inset: 0;
	margin: auto;
	border: 0;
	border-radius: 20px;
	padding: 0;
	max-width: 720px;
	width: calc(100% - 2rem);
	max-height: min(88dvh, 56rem);
	overflow: hidden;
	box-shadow: 0 24px 60px -12px rgba(34, 4, 4, 0.4);
	color: var(--wp--preset--color--ink);
	opacity: 0;
	transform: translateY(10px) scale(0.985);
	transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}
.bs-donate-modal[open] {
	opacity: 1;
	transform: none;
	display: flex;
	flex-direction: column;
}
@starting-style {
	.bs-donate-modal[open] {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
}
.bs-donate-modal::backdrop {
	background: rgba(34, 4, 4, 0.55);
	opacity: 0;
	transition: opacity 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}
.bs-donate-modal[open]::backdrop {
	opacity: 1;
}
@starting-style {
	.bs-donate-modal[open]::backdrop {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bs-donate-modal,
	.bs-donate-modal::backdrop {
		transition: none;
	}
}
.bs-donate-modal__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	background: none;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}
/* Header stays put; only the form scrolls. */
.bs-donate-modal__inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}
.bs-donate-modal__title {
	font-size: 1.75rem;
	font-weight: 800;
	margin: 0;
	padding: 2rem 2.5rem 0;
}
.bs-donate-modal__intro {
	color: var(--wp--preset--color--gray-700);
	margin: 0.5rem 0 0;
	padding: 0 2.5rem;
	line-height: 1.5;
}
.bs-donate-modal__form {
	overflow-y: auto;
	min-height: 0;
	padding: 1.5rem 2.5rem 2.25rem;
	-webkit-overflow-scrolling: touch;
}
.bs-donate-modal__form .gform_wrapper {
	margin: 0;
}

/* Minimal modal scrollbars ------------------------------------------------
   The platform scrollbar — full width, stepper arrows at both ends, opaque
   track — is a lot of chrome to hang down the side of a donation form. Thin
   bar, no buttons, no track.

   Both syntaxes are here on purpose: Chrome and Firefox take the standard
   scrollbar-width/color (and Chrome ignores the ::-webkit- rules entirely once
   they are set), while Safari and older Chrome only understand ::-webkit-. */
.bs-donate-modal__form,
.bs-apply-modal__form {
	scrollbar-width: thin;
	scrollbar-color: rgba(34, 4, 4, 0.24) transparent;
}
.bs-donate-modal__form::-webkit-scrollbar,
.bs-apply-modal__form::-webkit-scrollbar {
	width: 6px;
}
.bs-donate-modal__form::-webkit-scrollbar-track,
.bs-apply-modal__form::-webkit-scrollbar-track {
	background: transparent;
}
.bs-donate-modal__form::-webkit-scrollbar-thumb,
.bs-apply-modal__form::-webkit-scrollbar-thumb {
	background: rgba(34, 4, 4, 0.24);
	border-radius: 999px;
}
.bs-donate-modal__form::-webkit-scrollbar-thumb:hover,
.bs-apply-modal__form::-webkit-scrollbar-thumb:hover {
	background: rgba(34, 4, 4, 0.4);
}
/* Kill the stepper arrows and the corner square. */
.bs-donate-modal__form::-webkit-scrollbar-button,
.bs-apply-modal__form::-webkit-scrollbar-button,
.bs-donate-modal__form::-webkit-scrollbar-corner,
.bs-apply-modal__form::-webkit-scrollbar-corner {
	display: none;
	width: 0;
	height: 0;
}
@media (max-width: 600px) {
	.bs-donate-modal {
		max-height: 90dvh;
	}
	.bs-donate-modal__title {
		padding: 1.5rem 1.5rem 0;
	}
	.bs-donate-modal__intro {
		padding: 0 1.5rem;
	}
	.bs-donate-modal__form {
		padding: 1.25rem 1.5rem 1.75rem;
	}
}

/* ==========================================================================
   Events archive (archive-tribe_events.html) — faithful to the Figma mock.
   Bespoke presentation over The Events Calendar data.
   ========================================================================== */

/* Section bands */
.bs-events-band {
	background-color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50);
}
.bs-galleries-band {
	background-color: var(--wp--preset--color--gray-50);
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50);
}
.bs-events__heading {
	text-align: center;
	font-size: var(--wp--preset--font-size--4-xl, 2.5rem);
	line-height: 1.05;
	margin: 0 auto var(--wp--preset--spacing--60);
	max-width: 1240px;
}

/* Upcoming events — 3 x 2 card grid */
.bs-events__grid {
	max-width: 1240px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
/* Sparse sets center at card width instead of stretching across an empty 3-up row. */
.bs-events__grid--n1 { grid-template-columns: minmax(0, 380px); justify-content: center; }
.bs-events__grid--n2 { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
.bs-event-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(34, 4, 4, 0.07);
}
.bs-event-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	/* Brand-red panel behind the image; the contained image letterboxes against
	   it so the full graphic shows without cropping, red flush to the card edges. */
	background: var(--wp--preset--color--brand-red);
}
.bs-event-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.bs-event-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #ebebeb;
}
.bs-event-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--brand-red);
	border-radius: 12px;
	padding: 6px 12px;
	min-width: 54px;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(34, 4, 4, 0.18);
}
.bs-event-card__badge-mon {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red);
}
.bs-event-card__badge-day {
	font-family: var(--wp--preset--font-family--inter-tight, inherit);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--brand-maroon);
	margin-top: 3px;
}
.bs-event-card__badge-day sup {
	font-size: 0.55em;
	font-weight: 700;
	vertical-align: super;
	margin-left: 1px;
}
.bs-event-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
}
.bs-event-card__title {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
}
.bs-event-card__excerpt {
	color: var(--wp--preset--color--gray-500);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}
.bs-event-card__link {
	margin-top: auto;
	padding-top: 0.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
}
.bs-event-card__link:hover,
.bs-event-card__link:focus {
	text-decoration: underline;
}
.bs-events__more {
	text-align: center;
	margin-top: var(--wp--preset--spacing--70);
}
.bs-events__empty {
	text-align: center;
	color: var(--wp--preset--color--gray-500);
}
.bs-btn-pill {
	display: inline-block;
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
	border-radius: 999px;
	padding: 0.9rem 2.25rem;
	font-weight: 700;
	text-decoration: none;
}
.bs-btn-pill:hover,
.bs-btn-pill:focus {
	filter: brightness(0.92);
	color: var(--wp--preset--color--white);
}

/* Past event galleries — horizontal carousel */
.bs-galleries {
	max-width: 1240px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.bs-galleries__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	flex: 1;
	scrollbar-width: none;
}
.bs-galleries__track::-webkit-scrollbar {
	display: none;
}
.bs-gallery-card {
	flex: 0 0 calc((100% - 48px) / 3);
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.bs-gallery-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	background: #ebebeb;
}
.bs-gallery-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bs-gallery-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #ebebeb;
}
.bs-gallery-card__title {
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.3;
}
.bs-gallery-card__meta {
	color: var(--wp--preset--color--brand-red);
	font-weight: 700;
	font-size: 0.9rem;
}
.bs-galleries__arrow {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(34, 4, 4, 0.18);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-maroon);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bs-galleries__arrow:hover {
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--brand-red);
}

@media (max-width: 1024px) {
	.bs-events__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.bs-gallery-card {
		flex-basis: calc((100% - 24px) / 2);
	}
}
@media (max-width: 640px) {
	.bs-events__grid {
		grid-template-columns: 1fr;
	}
	.bs-gallery-card {
		flex-basis: 80%;
	}
	.bs-galleries__arrow {
		display: none;
	}
}

/* In-page anchor navigation (About Us facets, etc.) ------------------------ */
/* The sticky header's height varies (the announcement bar sits inside it and can
   be dismissed), so assets/js/sticky-offset.js measures it into --bs-sticky-h.
   The 168px fallback covers header + announcement bar for the no-JS case. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--bs-sticky-h, 168px);
}

.bs-section-anchor {
	scroll-margin-top: var(--bs-sticky-h, 168px);
}

/* Apply modal (careers "Apply now" → Gravity Form #4) ---------------------- */
/* Mirrors .bs-donate-modal; kept self-contained to avoid touching the donate modal. */
.bs-apply-modal {
	position: fixed;
	inset: 0;
	margin: auto;
	border: 0;
	border-radius: 20px;
	padding: 2.5rem;
	max-width: 560px;
	width: calc(100% - 2rem);
	max-height: calc(100dvh - 3rem);
	overflow: auto;
	box-shadow: 0 24px 60px -12px rgba(34, 4, 4, 0.4);
	color: var(--wp--preset--color--ink);
	opacity: 0;
	transform: translateY(10px) scale(0.985);
	transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}
.bs-apply-modal[open] {
	opacity: 1;
	transform: none;
}
@starting-style {
	.bs-apply-modal[open] {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
}
.bs-apply-modal::backdrop {
	background: rgba(34, 4, 4, 0.55);
	opacity: 0;
	transition: opacity 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}
.bs-apply-modal[open]::backdrop {
	opacity: 1;
}
@starting-style {
	.bs-apply-modal[open]::backdrop {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bs-apply-modal,
	.bs-apply-modal::backdrop {
		transition: none;
	}
}
.bs-apply-modal__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	background: none;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}
.bs-apply-modal__title {
	font-size: 1.75rem;
	font-weight: 800;
	margin: 0 0 0.5rem;
}
.bs-apply-modal__intro {
	color: var(--wp--preset--color--gray-700);
	margin: 0 0 1.5rem;
	line-height: 1.5;
}
.bs-apply-modal__form .gform_wrapper {
	margin: 0;
}
@media (max-width: 600px) {
	.bs-apply-modal {
		padding: 1.75rem;
	}
}

/* Footer layout ------------------------------------------------------------ */
/* Full wordmark + socials in a left brand column, link columns filling the rest,
   accreditation seals + legal links in the lower bar. */
.bs-footer-main {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--70);
}
.bs-footer-brand {
	flex: 0 0 auto;
	max-width: 210px;
}
.bs-footer-brand .wp-block-site-logo img {
	width: 190px;
	max-width: 100%;
	height: auto;
}
/* A 42rem basis meant the link columns demanded ~670px before they'd shrink, so
   they dropped below the logo while there was still plenty of room. A smaller
   basis lets the column grid reflow (it is auto-fit at 170px) instead. */
.bs-footer-cols {
	flex: 1 1 28rem;
	min-width: 0;
}
.bs-footer-bar {
	row-gap: var(--wp--preset--spacing--40);
}
/* Lower bar: seals on the left, socials stacked above copyright + legal on the
   right. Explicit column flex (rather than relying on wrapping) so there is no
   in-between width where the block drifts into the middle of the row. */
.bs-footer-bar {
	align-items: flex-end;
	row-gap: var(--wp--preset--spacing--60);
}
.bs-footer-legal {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 1.1rem;
	margin-left: auto;
}
.bs-footer-social {
	margin: 0;
	justify-content: flex-end;
}
.bs-footer-legal__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	column-gap: var(--wp--preset--spacing--40);
	row-gap: 0.35rem;
}
/* Once the two halves stop fitting side by side, stack and centre them.
   Switching to a column at the breakpoint (rather than letting the row wrap)
   removes the in-between width where one half had wrapped but both were still
   pinned to opposite edges — that was the badly-spaced state. */
@media (max-width: 1080px) {
	.bs-footer-bar {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.bs-footer-legal {
		align-items: center;
		text-align: center;
		margin-left: 0;
	}
	.bs-footer-social,
	.bs-footer-legal__row,
	.bs-footer-badges__list { justify-content: center; }
}
@media (max-width: 900px) {
	.bs-footer-brand {
		max-width: none;
	}
	.bs-footer-bar {
		justify-content: flex-start;
	}
}

/* Visually-hidden utility ------------------------------------------------- */
/* For link/button text that screen readers need but sighted users get from
   context or an icon (e.g. "(opens in a new tab)"). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* Updates cards (baltimore-station/updates) -------------------------------- */
/* Station news — annual reports, appeals, grant announcements — shown under the
   blog grid and on the home page. Real cards on a scroll-snap rail with arrows;
   the rail works by swipe/keyboard even without the arrow script. */
.bs-updates__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--50);
}
.bs-updates__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
}
.bs-updates__more {
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--brand-red);
	white-space: nowrap;
}
.bs-updates__more:hover,
.bs-updates__more:focus-visible { text-decoration: underline; }

.bs-updates__rail { position: relative; }
.bs-updates__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* An overflow container clips at its padding edge, so the room the card's
	   drop shadow needs has to be padding — 0.25rem was less than a tenth of the
	   34px hover shadow, which is why it looked sliced off along the bottom and
	   got worse on hover. Negative margins pull the layout back so nothing moves.
	   Kept modest on the sides: the rail sits inside the page gutter and a wider
	   negative inline margin would push it past the container edge. */
	padding: 0.75rem 1rem 2.5rem;
	margin: -0.75rem -1rem -2rem;
}
.bs-updates__track::-webkit-scrollbar { display: none; }
.bs-updates__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 4px;
	border-radius: 20px;
}

/* Arrows: only once JS confirms the rail actually overflows. */
.bs-updates__arrow { display: none; }
.bs-updates__rail.is-scrollable .bs-updates__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	/* Vertically centered on the card rail (was a fixed 7.25rem that sat in the
	   upper third of the taller cards and read as "too high"). */
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 0;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 6px 20px rgba(34, 4, 4, 0.28);
	z-index: 2;
}
.bs-updates__arrow svg { width: 20px; height: 20px; }
.bs-updates__arrow--prev { left: -18px; }
.bs-updates__arrow--next { right: -18px; }
.bs-updates__arrow:disabled { opacity: 0; pointer-events: none; }
.bs-updates__arrow:hover:not(:disabled) { background: var(--wp--preset--color--brand-maroon); }

/* The card itself */
.bs-update-card {
	flex: 0 0 clamp(17rem, 30%, 23rem);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(34, 4, 4, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bs-update-card:hover,
.bs-update-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 38px rgba(34, 4, 4, 0.18);
}
/* overflow+min-height are what make aspect-ratio stick: without them a tall
   portrait thumbnail stretches its own box and the cards stop lining up. */
.bs-update-card__media {
	display: block;
	background: var(--wp--preset--color--gray-100);
	aspect-ratio: 16 / 10;
	flex: 0 0 auto;
	width: 100%;
	min-height: 0;
	overflow: hidden;
}
.bs-update-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bs-update-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bdbdbd;
}
.bs-update-card__media--empty svg { width: 42px; height: 42px; }
.bs-update-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.35rem 1.4rem 1.5rem;
	flex: 1;
}
.bs-update-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	font-weight: 600;
}
.bs-update-card__cat {
	background: var(--wp--preset--color--brand-pink);
	color: var(--wp--preset--color--brand-maroon);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	line-height: 1.4;
}
.bs-update-card__featured {
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	line-height: 1.4;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.bs-update-card__date { color: var(--wp--preset--color--gray-500); }
.bs-update-card__title {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
.bs-update-card__more {
	margin-top: auto;
	padding-top: 0.4rem;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--brand-red);
}
.bs-update-card:hover .bs-update-card__more,
.bs-update-card:focus-visible .bs-update-card__more { text-decoration: underline; }

/* ---- Updates archive: merged posts + newsletters as a paginated grid (/updates).
   Reuses .bs-update-card; grid ignores its rail flex-basis. ---- */
.bs-updates-archive {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
}
.bs-updates-archive .bs-update-card {
	flex: initial;
}
.bs-updates-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 3rem;
}
.bs-updates-pagination__pages { display: flex; align-items: center; gap: 0.35rem; }
.bs-updates-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #3a3a3a;
	text-decoration: none;
}
.bs-updates-pagination .page-numbers.current { color: #e31d1a; font-weight: 800; }
.bs-updates-pagination a.page-numbers:hover { background: #f0f0f0; }
.bs-updates-pagination__next {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	padding: 0.55rem 1.5rem;
}
@media (max-width: 900px) {
	.bs-updates-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.bs-updates-archive { grid-template-columns: 1fr; }
}

@media (max-width: 781px) {
	.bs-update-card { flex-basis: min(85%, 20rem); }
	.bs-updates__arrow--prev { left: 2px; }
	.bs-updates__arrow--next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
	.bs-update-card { transition: none; }
	.bs-update-card:hover, .bs-update-card:focus-visible { transform: none; }
}

/* Empty-state panel (bs_empty_state) --------------------------------------- */
/* Feeds that can legitimately be empty — events, blog, press, newsletters,
   updates — share one designed well instead of a bare grey sentence. */
.bs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	border-radius: 20px;
	background: var(--wp--preset--color--brand-pink);
	color: var(--wp--preset--color--brand-maroon);
}
.bs-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 0.35rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
}
.bs-empty__icon svg { width: 30px; height: 30px; }
.bs-empty__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	font-weight: 800;
	line-height: 1.2;
}
.bs-empty__body {
	margin: 0;
	max-width: 34rem;
	font-size: 0.9688rem;
	line-height: 1.55;
	color: var(--wp--preset--color--gray-700);
}
.bs-empty__cta {
	margin-top: 0.9rem;
	display: inline-block;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	border-radius: 999px;
	padding: 0.7rem 1.6rem;
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
}
.bs-empty__cta:hover,
.bs-empty__cta:focus-visible { background: var(--wp--preset--color--brand-maroon); color: #fff; }

/* On dark sections the well inverts so it doesn't punch a pink hole in the page. */
.has-black-background-color .bs-empty,
.has-brand-maroon-background-color .bs-empty {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.has-black-background-color .bs-empty__body,
.has-brand-maroon-background-color .bs-empty__body { color: var(--wp--preset--color--gray-300); }

/* Maroon band media: the photo fills its half of the panel top-to-bottom rather
   than sitting in a fixed crop with a coloured strip beneath it. */
.bs-maroon-band__media {
	align-self: stretch;
	display: flex;
}
.bs-maroon-band__media img,
.bs-maroon-band__media .bs-img-fallback {
	width: 100%;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	display: block;
}

/* Select fields --------------------------------------------------------------
   Native selects were rendering with no dropdown arrow and clipping their value
   ("Volunteer" cut in half). Give them the same chrome as text inputs plus a
   drawn caret, and enough height/padding that the value is never cropped. */
.gform_wrapper select,
select.bs-select,
.wp-block-group select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	min-height: 3rem;
	line-height: 1.4;
	padding: 0.65rem 2.6rem 0.65rem 1rem;
	border: 1px solid var(--wp--preset--color--gray-300, #d4d4d4);
	border-radius: 10px;
	background-color: #fff;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23220404' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 1.05rem;
	color: var(--wp--preset--color--ink, #0a0a0a);
	text-overflow: ellipsis;
}
.gform_wrapper select:focus,
select.bs-select:focus {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--brand-red);
}

/* Contact pills on a maroon field: red reads, maroon-on-maroon disappears. */
.bs-contact-pills--red .bs-contact-pill,
.bs-taxband__contact .bs-contact-pill {
	background: var(--wp--preset--color--brand-red);
	color: #fff;
}
.bs-contact-pills--red .bs-contact-pill:hover,
.bs-taxband__contact .bs-contact-pill:hover {
	background: #fff;
	color: var(--wp--preset--color--brand-maroon);
}

/* Patriots hero: keep the two columns on their shared centre line. The crest
   itself is recoloured in the media library (dark navy/black -> white) rather
   than filtered, so the red stripes survive. */
.bs-patriots-hero .wp-block-columns { align-items: center; }
.bs-patriots-crest { justify-content: center; }
.bs-patriots-crest img { margin: 0 auto; }
/* .bs-page-hero centres its text, but a buttons block is a flex row and ignores
   text-align — so the CTA sat left of the centred title. */
.bs-patriots-hero .wp-block-buttons { justify-content: center; }

/* Contact info column ------------------------------------------------------ */
/* Was a loose stack of icons and text with no separation, so the address, email
   and phone ran together. Each is now a card with the icon beside the content. */
.bs-contact-info {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.bs-contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.15rem 1.25rem;
	border-radius: 16px;
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-100);
}
.bs-contact-info__item > div {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.bs-contact-info__item strong {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-500);
}
/* The icon badge is itself a <span>, so this rule (0-1-1) was out-specifying
   .bs-contact-info__icon (0-1-0) and painting the glyph ink-black on the red
   circle. Exclude it explicitly rather than relying on source order. */
.bs-contact-info__item span:not(.bs-contact-info__icon),
.bs-contact-info__item a {
	font-size: 1.0313rem;
	line-height: 1.45;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.bs-contact-info__item a:hover,
.bs-contact-info__item a:focus-visible {
	color: var(--wp--preset--color--brand-red);
	text-decoration: underline;
}
.bs-contact-info__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
}
.bs-contact-info__icon svg { width: 1.3rem; height: 1.3rem; }

/* Drag-scrollable rails (assets/js/drag-scroll.js) */
.bs-updates__track,
.bs-fundraiser-cards,
.bs-quotes__track { cursor: grab; }
.bs-updates__track.is-dragging,
.bs-fundraiser-cards.is-dragging,
.bs-quotes__track.is-dragging { cursor: grabbing; user-select: none; }
.bs-updates__track.is-dragging a,
.bs-fundraiser-cards.is-dragging a,
.bs-quotes__track.is-dragging a { pointer-events: none; }

/* "Give with purpose" band: the heading, copy, contact pills and form were all
   using the group's default blockGap, so the pills floated between two big
   equal gaps. Tighten the copy-to-pills relationship and let the form breathe. */
#give-with-purpose .bs-contact-pills { margin-top: 0.25rem; }
#give-with-purpose > .wp-block-group { margin-top: var(--wp--preset--spacing--50); }
#give-with-purpose h2 { margin-bottom: 0.35rem; }

/* ==========================================================================
   Motion — deliberately restrained.
   Two ideas only: things you can click respond to the pointer, and sections
   settle into place as you reach them. No parallax, no bounce, no long
   durations. Everything is short (150–500ms) and everything is disabled
   wholesale under prefers-reduced-motion at the foot of this block.
   ========================================================================== */

/* --- Buttons: lift a hair and deepen, rather than just changing colour ---- */
.wp-element-button,
.wp-block-button__link,
.bs-empty__cta,
.bs-contact-pill,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_button {
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.bs-empty__cta:hover,
.bs-contact-pill:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(34, 4, 4, 0.22);
}
.wp-element-button:active,
.wp-block-button__link:active,
.bs-empty__cta:active { transform: translateY(0); box-shadow: none; }

/* --- Cards: the same 2px lift, so the whole site behaves consistently ----- */
.bs-feature-card,
.bs-spotlight-card,
.bs-tier-card,
.bs-iconrow,
.bs-team-card,
.bs-reslinks__item,
.bs-impact-list__item,
.bs-fundraiser-card,
.bs-gallery-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bs-feature-card:hover,
.bs-spotlight-card:hover,
.bs-tier-card:hover,
.bs-iconrow:hover,
.bs-team-card:hover,
.bs-reslinks__item:hover,
.bs-impact-list__item:hover,
.bs-gallery-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(34, 4, 4, 0.14);
}
.bs-team-card:focus-visible,
.bs-reslinks__item:focus-within { transform: translateY(-3px); }

/* --- Photos: a very slight push-in on hover, clipped by the frame --------- */
/* .bs-spotlight__media is deliberately excluded from this group: it holds
   float cards/badges that overhang the photo edge (e.g. the donate "501(c)3
   organization" badge and the program-page pills), and overflow:hidden here
   was slicing them off. Its photo stays rounded via the img's own
   border-radius, so it needs no frame clip and skips the hover-zoom. */
.bs-spotlight-card,
.bs-update-card__media,
.bs-timeline__media,
.bs-team-card__media { overflow: hidden; }
.bs-spotlight-card img,
.bs-update-card__media img,
.bs-timeline__media img,
.bs-team-card__media img {
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bs-spotlight-card:hover img,
.bs-update-card:hover .bs-update-card__media img,
.bs-timeline__media:hover img,
.bs-team-card:hover .bs-team-card__media img {
	transform: scale(1.035);
}

/* --- Icon badges: a small nudge, no spin ---------------------------------- */
.bs-feature-icon,
.bs-iconrow__icon,
.bs-tier-card__icon,
.bs-contact-info__icon {
	transition: transform 0.18s ease;
}
.bs-iconrow:hover .bs-iconrow__icon,
.bs-tier-card:hover .bs-tier-card__icon,
.bs-contact-info__item:hover .bs-contact-info__icon { transform: scale(1.06); }

/* --- Links: underline grows from the left rather than snapping on --------- */
.bs-footer-links a,
.bs-updates__more,
.bs-reslinks__name {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.22s ease, color 0.16s ease;
	text-decoration: none;
}
.bs-footer-links a:hover,
.bs-updates__more:hover,
.bs-reslinks__name:hover,
.bs-footer-links a:focus-visible,
.bs-updates__more:focus-visible,
.bs-reslinks__name:focus-visible { background-size: 100% 1.5px; text-decoration: none; }

/* --- FAQ accordions: the chevron turns, the panel doesn't jump ------------ */
.wp-block-details > summary { transition: color 0.16s ease; }
.wp-block-details > summary:hover { color: var(--wp--preset--color--brand-red); }

/* --- Section reveal (assets/js/reveal.js) --------------------------------
   Sections start a few pixels low and fade in once, when they first scroll
   into view. Only applied after JS confirms support, so with JS off nothing
   is ever hidden. */
.bs-reveal-ready .bs-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}
.bs-reveal-ready .bs-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	.bs-empty__cta,
	.bs-contact-pill,
	.bs-feature-card,
	.bs-spotlight-card,
	.bs-tier-card,
	.bs-iconrow,
	.bs-team-card,
	.bs-reslinks__item,
	.bs-impact-list__item,
	.bs-fundraiser-card,
	.bs-gallery-card,
	.bs-spotlight__media > img,
	.bs-spotlight-card img,
	.bs-update-card__media img,
	.bs-timeline__media img,
	.bs-team-card__media img,
	.bs-feature-icon,
	.bs-iconrow__icon,
	.bs-tier-card__icon,
	.bs-contact-info__icon,
	.bs-footer-links a,
	.bs-updates__more,
	.bs-reslinks__name { transition: none !important; }

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.bs-feature-card:hover,
	.bs-spotlight-card:hover,
	.bs-tier-card:hover,
	.bs-iconrow:hover,
	.bs-team-card:hover,
	.bs-reslinks__item:hover,
	.bs-impact-list__item:hover,
	.bs-gallery-card:hover { transform: none; }

	.bs-spotlight__media:hover > img,
	.bs-spotlight-card:hover img,
	.bs-update-card:hover .bs-update-card__media img,
	.bs-timeline__media:hover img,
	.bs-team-card:hover .bs-team-card__media img { transform: none; }

	.bs-reveal-ready .bs-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Image sizing — one rule, applied everywhere.

   bs_image( …, 'fill' => true ) emits .bs-img--fill: the WRAPPER owns the box,
   the image just covers it. Any wrapper that sets its own height (square grid
   cells, equal-height collages, band media, card media) must use fill, or the
   image's own aspect-ratio fights the wrapper and you get the "photo is taller
   than the stat card next to it" class of bug.
   ========================================================================== */
.bs-img--fill,
.bs-img-fallback--fill {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	display: block;
}

/* Grid cells that own their own height ------------------------------------ */
.bs-about-band__tile,
.bs-trust-grid__photo,
.bs-mission-collage > .bs-img,
.bs-mission-collage > img { overflow: hidden; }

/* Transitional trust grid + Partnerships mission collage: every cell an equal
   square, photos and stat cards alike. In the mission collage the <img> IS the
   grid cell (no wrapper), so it keeps its own aspect-ratio and must NOT use
   fill — .bs-img--fill clears aspect-ratio, which collapses the square. */
.bs-trust-grid > *,
.bs-mission-collage > * {
	aspect-ratio: 1;
	min-height: 0;
	overflow: hidden;
}
.bs-mission-collage > img,
.bs-mission-collage > .bs-img,
.bs-stat-collage > img,
.bs-stat-collage > .bs-img,
.bs-collage > img,
.bs-collage > .bs-img {
	aspect-ratio: 1 !important;
	height: auto !important;
	width: 100%;
	object-fit: cover;
}
.bs-trust-stat,
.bs-trust-badge,
.bs-mission-stat { min-height: 0; }

/* Maroon band media (Vocational / life skills): the photo is the height of the
   text beside it, cropped — not a fixed portrait crop that stretches the panel. */
/* !important is REQUIRED: the band markup carries an inline `align-items:center`
   on the columns, and an inline style beats a plain selector — so without this
   the image column never stretches to the band height and the photo stops short
   of the bottom edge. This was the long-standing "image never touches the bottom"
   bug; the earlier stretch rule here was dead because the inline style won. */
.bs-maroon-band .wp-block-columns {
	align-items: stretch !important;
	/* WordPress core adds `:where(.wp-block-columns){margin-bottom:1.75em}`, which
	   left ~30px of maroon below the photo — the LAST piece of the "image never
	   touches the bottom" bug. Zero it so the columns fill the band to its edge.
	   (Measured live: with this margin the band was 546px vs the 516px columns; at 0
	   they match and the photo reaches the bottom.) */
	margin-bottom: 0;
}
.bs-maroon-band__media {
	align-self: stretch;
	position: relative;
	/* No overflow:hidden here — it clipped the floating "Learn. Grow. Thrive."
	   card, which straddles this column's left edge (left:-1.5rem) into the text
	   column. The photo's corners are still rounded by the parent .bs-maroon-band
	   (overflow:hidden + radius), so nothing spills past the band. */
	min-height: 0;
}
.bs-maroon-band__media > .bs-img,
.bs-maroon-band__media > img,
.bs-maroon-band__media > .bs-img-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fundraiser cards: the photo fills its column — the grey strip underneath was
   a 3/4 crop sitting in a taller card. */
.bs-fundraiser-card__media { position: relative; overflow: hidden; background: transparent; }
.bs-fundraiser-card__media > .bs-img,
.bs-fundraiser-card__media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Team cards --------------------------------------------------------------
   The card had no surface of its own, so the hover lift/shadow was drawn
   around bare text and the photo's rounded corners were clipped square by the
   new overflow:hidden. Give the card a real surface: rounded, padded, with the
   photo's top corners matching the card's. */
.bs-team-card {
	background: #fff;
	border-radius: 16px;
	padding: 0.75rem 0.75rem 1.1rem;
	overflow: hidden;
	gap: 0.15rem;
}
.bs-team-card__media {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 0.6rem;
}
.bs-team-card__media img { border-radius: 12px; }
.bs-team-card__name,
.bs-team-card__title { padding: 0 0.25rem; }
.bs-team-card__name { margin-top: 0; }

/* Event gallery cards get the same treatment. */
.bs-gallery-card {
	background: #fff;
	border-radius: 16px;
	padding: 0.75rem 0.75rem 1.1rem;
	overflow: hidden;
}
.bs-gallery-card__media,
.bs-gallery-card__placeholder { border-radius: 12px; overflow: hidden; }
.bs-gallery-card__title,
.bs-gallery-card__meta { padding: 0 0.25rem; }

/* Apply modal -------------------------------------------------------------
   Was filling the viewport top to bottom with square corners. Give it a gap,
   round it, and scroll the BODY rather than the dialog so the header and close
   button stay put.

   NOTE: `display` here MUST stay scoped to [open]. Setting it on the bare
   .bs-apply-modal selector defeats the UA's `dialog:not([open]){display:none}`,
   which left a 560px-wide, full-height, opacity:0 fixed box parked over the
   middle of EVERY page — silently swallowing clicks on anything in the centre
   two columns. See the dialog guard further down. */
.bs-apply-modal {
	max-height: min(86dvh, 52rem);
	max-width: 720px;
	border-radius: 22px;
	padding: 0;
	overflow: hidden;
}
.bs-apply-modal[open] {
	display: flex;
	flex-direction: column;
}
.bs-apply-modal__title { margin: 0; padding: 2rem 2.5rem 0; }
.bs-apply-modal__intro { margin: 0.5rem 0 0; padding: 0 2.5rem; }
.bs-apply-modal__inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}
.bs-apply-modal__form {
	overflow-y: auto;
	min-height: 0;
	padding: 1.5rem 2.5rem 2.25rem;
	-webkit-overflow-scrolling: touch;
}
.bs-apply-modal__close { top: 1rem; right: 1rem; }
@media (max-width: 600px) {
	.bs-apply-modal { padding: 0; max-height: 88dvh; }
	.bs-apply-modal__title { padding: 1.5rem 1.5rem 0; }
	.bs-apply-modal__intro { padding: 0 1.5rem; }
	.bs-apply-modal__form { padding: 1.25rem 1.5rem 1.75rem; }
}

/* Resource cards ----------------------------------------------------------
   The card and the title were BOTH picking up the sliding-underline treatment,
   so a line appeared under the whole card as well as the title and read as a
   divider. Only the title gets it, and only the card lifts. */
.bs-reslinks__item { background-image: none !important; }
.bs-reslinks__item:hover { box-shadow: 0 10px 26px rgba(34, 4, 4, 0.12); }
.bs-reslinks__name {
	background-image: none;
	transition: color 0.16s ease;
}
.bs-reslinks__name:hover,
.bs-reslinks__name:focus-visible {
	background-size: 0 0;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: var(--wp--preset--color--brand-red);
}

/* "Give hope to a hero" cards get the same lift as every other card. */
.bs-give-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.bs-give-card:hover,
.bs-give-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(34, 4, 4, 0.14);
}
.bs-give-card .bs-give-icon,
.bs-give-card .bs-feature-icon { transition: transform 0.18s ease; }
.bs-give-card:hover .bs-give-icon,
.bs-give-card:hover .bs-feature-icon { transform: scale(1.06); }