/*
Theme Name: Big Marv's Legacy
Theme URI: https://bigmarvslegacy.com/
Author: Big Marv's Legacy
Description: A bold block theme for Big Marv's Legacy, an animal and community welfare charity. Electric-lime and charcoal palette with Oswald headings, Plus Jakarta Sans body, and a Caveat accent. Built on native WordPress blocks, no page builder required.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
Version: 3.7.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bigmarvs-legacy
Tags: charity, nonprofit, block-theme, full-site-editing, custom-colors, custom-menu, one-column, wide-blocks
*/

/* Block themes are configured through theme.json and the Site Editor.
   This file is required for the theme header only. Add small overrides below. */

/* ---------------------------------------------------------------------------
   Design tokens (from the Big Marv's Legacy design system / Gemini spec)
--------------------------------------------------------------------------- */
:root {
	--bml-lime: #B2E635;
	--bml-lime-hover: #9ED425;
	--bml-lime-light: #EEF8D3;
	--bml-sage: #84A972;
	--bml-charcoal: #181F22;
	--bml-offwhite: #F8FAF5;
	--bml-white: #FFFFFF;
	--bml-gray-100: #F3F4F6;
	--bml-gray-300: #D1D5DB;
	--bml-gray-600: #4B5563;
	--font-heading: 'Oswald', 'Arial Narrow', sans-serif;
	--font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
	--radius-lg: 24px;
	--radius-pill: 9999px;
	--shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

.wp-block-navigation .wp-block-navigation-item__content { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Safety net: an inline <svg> with no width/height attribute stretches to fill
   its container, which turns a small icon into a full-width graphic. Default
   any unsized SVG in page content to icon size. Wrapped in :where() so it has
   ZERO specificity and every deliberate rule below still wins.
--------------------------------------------------------------------------- */
svg { max-width: 100%; }
:where(.wp-block-post-content, .entry-content, main) :where(svg:not([width]):not([height])) {
	width: 1.5em;
	height: 1.5em;
	flex: none;
}

/* Sticky white header (32px lime band + 92px white bar) with a soft bottom shadow */
header.wp-block-group.has-base-background-color {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 3px 10px rgba(24, 31, 34, 0.08);
}
/* White bar is exactly 92px tall; the badge overflows and hangs below */
.bml-header-row {
	position: relative;
	height: 92px;
	min-height: 92px;
	overflow: visible;
}
/* Belt and braces: pin the header layout in plain CSS so it renders the same
   on every page, including plugin pages that use the classic-template shim
   (where WP's generated wp-container-* layout styles may be missing). */
.bml-header-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
/* Logo is out of flow, so keep the nav pinned to the right */
.bml-header-row .bml-nav { margin-left: auto; }
.bml-nav { font-size: 1.15rem; }
.bml-nav .wp-block-navigation__container {
	gap: 1.75rem;
	align-items: center;
	flex-wrap: wrap;
}

/* Page content sits flush against the header - no gap. The patterns supply
   their own top padding via full-width sections, and the logo badge hangs
   down over the top of the content. */
body .wp-site-blocks > main,
main.bml-plugin-main {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* No stray gap between the last section and the footer */
body .wp-site-blocks > main > :last-child { margin-bottom: 0 !important; }
body .wp-site-blocks > footer { margin-block-start: 0 !important; }

/* The first full-width band of a page's content (e.g. the FAQ hero) sits
   flush under the header too: zero the block-gap margin WP puts on the
   post-content wrapper and on the band itself, in every template layout. */
body .wp-site-blocks > main > .wp-block-post-content,
body .wp-site-blocks > main > .wp-block-post-content > .alignfull:first-child,
body .wp-site-blocks > main > .alignfull:first-child {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}
/* Same treatment keyed on content rather than position: a full-width band
   whose first element is the page's H1 is a hero (e.g. the FAQ header), so
   it sits flush even when an invisible block precedes it in the content. */
.wp-block-post-content > .alignfull:has(> h1:first-child) {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* The section directly beneath a page's hero banner sits flush against it, so
   there is no dead strip between the banner and the content. Applies to every
   page. The inner cards and columns supply their own padding. */
body .wp-site-blocks > main > :first-child + * {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
/* Exception: a row of cards directly under the hero needs breathing room, or
   the cards butt straight into the banner. Matched by class (new content) and
   by the donor card it contains (pages built before that class existed). */
body .wp-site-blocks > main > :first-child + .bml-cards-row,
body .wp-site-blocks > main > :first-child + *:has(.bml-donor-card) {
	padding-top: var(--wp--preset--spacing--50) !important;
}

/* Full-width CTA band directly above the footer: a pale lime so it can never
   blend into the dark footer. The :last-child selector also catches the older
   dark-background version of this section on pages built before the change. */
.bml-cta-band,
body .wp-site-blocks > main > .has-dark-background-color:last-child {
	margin-bottom: 0 !important;
	background-color: var(--bml-lime-light) !important;
}
.bml-cta-band :is(h1, h2, h3, h4),
body .wp-site-blocks > main > .has-dark-background-color:last-child :is(h1, h2, h3, h4) {
	color: var(--bml-charcoal) !important;
}
.bml-cta-band :is(p, li),
body .wp-site-blocks > main > .has-dark-background-color:last-child :is(p, li) {
	color: #33403A !important;
}

/* CTA button: lime pill, charcoal text, slightly deeper lime on hover */
.bml-cta-band .wp-element-button,
body .wp-site-blocks > main > .has-dark-background-color:last-child .wp-element-button {
	background-color: var(--bml-lime) !important;
	color: var(--bml-charcoal) !important;
	padding: 0.9rem 2.6rem;
	font-size: 1.05rem;
	box-shadow: 0 6px 16px rgba(24, 31, 34, 0.16);
}
.bml-cta-band .wp-element-button:hover,
.bml-cta-band .wp-element-button:focus-visible,
body .wp-site-blocks > main > .has-dark-background-color:last-child .wp-element-button:hover {
	background-color: var(--bml-lime-hover) !important;
	color: var(--bml-charcoal) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(24, 31, 34, 0.22);
}
/* Secondary (outline) button on the band */
.bml-cta-band .is-style-outline .wp-element-button {
	background-color: transparent !important;
	color: var(--bml-charcoal) !important;
	border: 2px solid var(--bml-charcoal);
	box-shadow: none;
}
.bml-cta-band .is-style-outline .wp-element-button:hover {
	background-color: var(--bml-charcoal) !important;
	color: var(--bml-lime) !important;
}

/* Give every button a consistent, subtle hover response */
.wp-element-button {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.wp-element-button:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
	.wp-element-button, .bml-cta-band .wp-element-button { transition: none; transform: none !important; }
}

/* Headings and text on dark sections must be light, otherwise they inherit the
   theme's dark heading colour and disappear into the background. */
.has-dark-background-color :is(h1, h2, h3, h4),
.has-ink-background-color :is(h1, h2, h3, h4) { color: #FFFFFF !important; }
/* Social-link list items are excluded: their icons paint from the li's colour,
   so forcing a light colour here would wash the glyphs out entirely. */
.has-dark-background-color :is(p, li):not(.wp-social-link),
.has-ink-background-color :is(p, li):not(.wp-social-link) { color: #E8EDE4 !important; }

/* Footer social icons: fully self-contained so no other rule (or missing
   WP-generated style) can wash them out. Lime circle, dark glyph. */
footer.wp-block-group .wp-block-social-links {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}
footer.wp-block-group .wp-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background-color: var(--bml-lime) !important;
	color: var(--bml-charcoal) !important;
	transition: background-color 0.2s ease;
}
/* The <a> fills the circle so the glyph centres on both axes */
footer.wp-block-group .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	line-height: 1;
	color: var(--bml-charcoal) !important;
}
/* Glyph fills as much of the circle as it can while keeping a small optical
   margin so it doesn't touch the edge. */
footer.wp-block-group .wp-social-link svg {
	width: 68%;
	height: 68%;
	display: block;
	fill: currentColor;
}

/* Invisible 48px hit area keeps the tap target finger-friendly even though the
   visible circle is smaller (48px is the Material/WCAG touch-target minimum). */
footer.wp-block-group .wp-social-link a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

/* On touch-first widths, grow the circle itself to the full target size */
@media (max-width: 781.98px) {
	footer.wp-block-group .wp-social-link { width: 48px; height: 48px; }
	footer.wp-block-group .wp-block-social-links { gap: 0.85rem; }
}
/* Hover: brighten to pale lime and lift. Core's own social-link hover dims the
   background, which made the icon disappear into the dark footer, so every
   property it touches is overridden here. */
footer.wp-block-group .wp-social-link:hover,
footer.wp-block-group .wp-social-link:focus-within {
	background-color: var(--bml-lime-light) !important;
	opacity: 1 !important;
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
footer.wp-block-group .wp-social-link:hover a,
footer.wp-block-group .wp-social-link:focus-within a,
footer.wp-block-group .wp-social-link:hover svg {
	color: var(--bml-charcoal) !important;
	fill: var(--bml-charcoal) !important;
}
@media (prefers-reduced-motion: reduce) {
	footer.wp-block-group .wp-social-link:hover { transform: none; }
}
/* Scoped to main so the footer keeps its own white links (per the design) */
main :is(.has-dark-background-color, .has-ink-background-color) a:where(:not(.wp-element-button)) { color: var(--bml-lime) !important; }
/* ...but never repaint a button sitting inside one of those sections */
.has-dark-background-color .wp-element-button,
.has-ink-background-color .wp-element-button { color: var(--bml-charcoal) !important; }

/* Primary buttons: lime pill, charcoal text, Oswald (design spec) */
.wp-element-button {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--radius-pill);
}

/* Cards: generous radius + soft shadow (design spec) */
.bml-card,
.bml-donor-card,
.bml-reach-card {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

/* Funky tie-dye border for a highlighted foster card */
.bml-foster-tiedye {
	border: 4px solid transparent;
	border-image: linear-gradient(45deg, #f09, #e60067, #00d2ff, #9b51e0, #b2e635) 1;
	box-shadow: none;
}

/* Site logo image (white ring is baked into logo-ring.png) */
.bml-logo { margin: 0; line-height: 0; position: relative; z-index: 2; }
.bml-logo img { display: block; width: 100%; height: auto; object-fit: contain; }

/* Header badge: 154px, top edge 6px from the top of the screen (it overlaps the
   32px lime band and hangs ~36px below the 92px white bar). Scales down with
   the viewport. */
.bml-header-row .bml-logo {
	position: absolute !important;
	top: -26px;
	left: 0;
	width: clamp(104px, 13vw, 154px) !important;
	height: auto !important;
}
.bml-header-row .bml-logo img {
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(24, 31, 34, 0.3);
}

/* ---------------- Header navigation (WordPress menu) ---------------- */
.bml-nav { margin-left: auto; }
.bml-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bml-menu li { margin: 0; }
.bml-menu a {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--bml-charcoal);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.bml-menu a:hover,
.bml-menu .current-menu-item > a,
.bml-menu .current_page_item > a { color: #77A516; }

/* The LAST menu item renders as the lime pill button (this is the Donate Now
   call to action). An item given the CSS class "donate" also gets the pill,
   wherever it sits in the menu. */
.bml-menu > li:last-child > a,
.bml-menu li.donate > a,
.bml-menu li.is-style-donate > a {
	background: var(--bml-lime);
	color: var(--bml-charcoal);
	border-radius: var(--radius-pill);
	padding: 0.6rem 1.7rem;
	display: inline-block;
}
.bml-menu > li:last-child > a:hover,
.bml-menu li.donate > a:hover,
.bml-menu li.is-style-donate > a:hover { background: var(--bml-lime-hover); color: var(--bml-charcoal); }

/* Submenus (depth 2) */
.bml-menu .sub-menu {
	display: none;
	position: absolute;
	z-index: 120;
	min-width: 200px;
	margin-top: 0.6rem;
	padding: 0.6rem 0;
	list-style: none;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(24, 31, 34, 0.16);
}
.bml-menu li { position: relative; }
.bml-menu li:hover > .sub-menu,
.bml-menu li:focus-within > .sub-menu { display: block; }
.bml-menu .sub-menu a { display: block; padding: 0.5rem 1.2rem; font-size: 1rem; }

/* Hamburger + close buttons are desktop-hidden */
.bml-menu-toggle, .bml-menu-close { display: none; }

/* Vertically centre the whole menu (including the taller Donate pill) in the
   white bar. Scoped to desktop so the mobile drawer layout is untouched. */
@media (min-width: 782px) {
	.bml-header-row .bml-nav {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		margin: 0;
	}
	.bml-header-row .bml-menu {
		align-items: center;
		margin: 0;
		padding: 0;
	}
	/* The pill is taller than the plain links; keep every item on one centre line. */
	.bml-header-row .bml-menu > li {
		display: flex;
		align-items: center;
	}
	.bml-header-row .bml-menu > li > a { display: flex; align-items: center; }
}

/* Footer: force light text/links on the dark background (theme link color is dark) */
footer.wp-block-group { color: #DCE3D8; }
footer.wp-block-group p,
footer.wp-block-group li { color: #DCE3D8; }
footer.wp-block-group h1,
footer.wp-block-group h2,
footer.wp-block-group h3 { color: #FFFFFF !important; }
footer.wp-block-group a:where(:not(.wp-element-button)) { color: #FFFFFF !important; text-decoration: none; font-weight: 600; }
footer.wp-block-group a:where(:not(.wp-element-button)):hover { color: var(--bml-lime) !important; }

/* Nothing in the footer may push the page wider than the viewport */
footer.wp-block-group { overflow-x: hidden; }
footer.wp-block-group .wp-block-column { min-width: 0; }

/* Footer link columns: Oswald condensed bold uppercase, ~17px (design spec) */
.bml-footer-links { list-style: none; padding-left: 0; }
.bml-footer-links li a {
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.5;
}
/* Fine print under the social icons */
.bml-footer-fineprint { color: var(--bml-gray-300); }
/* Bottom legal bar is Oswald too, and spans the full footer width (no max-width),
   so the charity line and Privacy Policy sit on one line */
.bml-footer-legal { max-width: none !important; width: 100%; }
.bml-footer-legal p {
	font-family: var(--font-heading);
	font-weight: 600;
	max-width: none !important;
}

/* Footer newsletter signup: the Sign Up pill sits INSIDE the white field,
   right-aligned, with equal inset from the top, bottom and right edges. */
/* The wrapper IS the white pill. Its 6px padding gives the button an equal gap
   from the top, bottom and right edges, and flex keeps it hard right-aligned
   however wide the column gets. */
.bml-newsletter {
	display: flex;
	align-items: center;
	margin-top: 1rem;
	width: 100%;
	max-width: 420px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--bml-gray-600);
	border-radius: var(--radius-pill);
}
/* An <input> carries an intrinsic width from its default size attribute, and a
   flex item will not shrink below that unless flex-basis is 0 and min-width is
   cleared. Without both, the field pushes past its column and off-screen. */
.bml-newsletter,
.bml-newsletter * { box-sizing: border-box; }
.bml-newsletter input {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 44px;
	padding: 0 0.75rem 0 1.1rem;
	border: none;
	background: transparent;
	font: inherit;
	font-size: 0.95rem;
	color: #181F22;
}
.bml-newsletter input:focus { outline: none; }
.bml-newsletter:focus-within {
	outline: 2px solid var(--bml-lime);
	outline-offset: 2px;
}
.bml-newsletter button {
	flex: 0 0 auto;
	margin-left: auto; /* pinned right */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 1.6rem;
	background: var(--bml-lime);
	color: var(--bml-charcoal);
	border: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}
.bml-newsletter button:hover { background: var(--bml-lime-hover); }
@media (max-width: 600px) {
	.bml-newsletter button { padding: 0 1.15rem; font-size: 0.88rem; }
}

/* Rounded, lime "Donate Now" pill for a nav button link (dark bold text) */
.is-style-donate a,
.is-style-donate .wp-block-navigation-item__content {
	background: #B2E635;
	color: #181F22 !important;
	border-radius: 999px;
	padding: 0.6rem 1.7rem;
	font-family: Oswald, "Arial Narrow", sans-serif;
	font-weight: 700;
}
.is-style-donate a:hover { background: #9ED425; color: #181F22 !important; }

/* Soft card look for grouped content */
.is-style-card {
	background: #FFFFFF;
	border: 1px solid #E6E8E2;
	border-radius: 16px;
}

/* Hero: pale-lime section with a geometric lime accent behind the image */
/* Hero: zero vertical padding; height comes from min-height + the text column */
.bml-hero {
	position: relative;
	overflow: hidden;
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
	/* Lime shade 1 of 3: pale wash sweeping down from the top left
	   (hard-stop gradient = straight diagonal edge, no SVG needed) */
	background-image: linear-gradient(112deg, var(--bml-lime-light) 0 33%, rgba(255, 255, 255, 0) 33%);
}
/* Lime shade 2 of 3: mid triangle rising behind Marv */
.bml-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #DCF0A0;
	clip-path: polygon(33% 10%, 68% 100%, 2% 100%);
	z-index: 0;
}
/* Lime shade 3 of 3: deep wedge in the bottom-left corner */
.bml-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #C9E96D;
	clip-path: polygon(0 55%, 26% 100%, 0 100%);
	z-index: 0;
}
.bml-hero > * { position: relative; z-index: 1; }
/* Keep a decent hero height */
.bml-hero .wp-block-columns { min-height: 300px; }
.bml-hero .wp-block-column:not(:has(.bml-hero-img)) { container-type: inline-size; }

/* Hero H1: fluid size tied to its column width so it always fits in two lines
   max, desktop through mobile. cqw = 1% of the column; vw line is a fallback
   for older browsers. text-wrap: balance splits the two lines evenly. */
/* Hero intro paragraph: fixed size, forced past the block's inline styles */
.bml-hero p:not(.bml-eyebrow) { font-size: 1.43rem !important; }

.bml-hero h1 {
	font-size: clamp(1.5rem, 6vw, 4.3rem);
	font-size: clamp(1.5rem, 7.1cqw, 4.3rem);
	line-height: 1.05;
	text-wrap: balance;
}
/* Marv: absolutely positioned, 20px from the top; the section's bottom edge
   clips him square (overflow: hidden) */
.bml-hero .wp-block-column:has(.bml-hero-img) { position: relative; align-self: stretch !important; }
.bml-hero-img {
	position: absolute;
	/* 20px from the top of the hero SECTION: the column this is measured from
	   starts 3rem down (section padding), so subtract it */
	top: calc(20px - 3rem);
	left: 0;
	width: 100%;
	margin: 0;
}
.bml-hero-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 26px rgba(24, 31, 34, 0.2)); }
/* Stacked layout: back to normal flow so the column doesn't collapse */
@media (max-width: 781.98px) {
	.bml-hero-img { position: static; margin: 0 auto; max-width: 70%; }
	.bml-hero .wp-block-columns { min-height: 0; }
}

/* ---------------- Featured dogs (live from the rescue plugin) ---------------- */
.bml-dogs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}
.bml-dog-card {
	display: block;
	background: var(--bml-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	padding-bottom: 1.1rem;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bml-dog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -8px rgba(0, 0, 0, 0.16); }
/* Keep dog photos to a consistent, sensible crop (square-ish, never a tall
   portrait). !important because wp_get_attachment_image prints width/height
   attributes that otherwise dictate the rendered height. */
.bml-dog-card .bml-dog-photo,
.bml-dog-figure img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover;
	object-position: center 30%; /* bias toward faces */
	display: block;
	max-height: 260px;
}
.bml-dog-figure { margin: 0; overflow: hidden; }
.bml-dog-card h3 {
	font-size: 1.15rem;
	margin: 1rem 1.1rem 0;
}
.bml-dog-meta, .bml-dog-breed {
	margin: 0.3rem 1.1rem 0;
	font-size: 0.85rem;
}
.bml-dog-breed { color: var(--bml-gray-600); }
.bml-dog-cta {
	display: inline-block;
	margin: 0.8rem 1.1rem 0;
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: #77A516;
}
/* The plugin's version of the card wraps its text in .bml-dog-body; pad the
   wrapper instead and drop the per-element side margins so both render alike. */
.bml-dog-body { padding: 1rem 1.1rem 1.3rem; }
.bml-dog-body h3,
.bml-dog-body .bml-dog-meta,
.bml-dog-body .bml-dog-breed,
.bml-dog-body .bml-dog-cta { margin-left: 0; margin-right: 0; }
.bml-dog-body h3 { margin-top: 0; }
@media (max-width: 900px) { .bml-dogs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bml-dogs-grid { grid-template-columns: 1fr; } }

/* Plugin (dog) pages get 40px of breathing room under the header, so content
   never touches it. The archive is the exception: it opens with its own
   full-width hero band, which is meant to sit flush. */
main.bml-plugin-main { padding-top: 2.5rem !important; } /* 2.5rem = 40px */
main.bml-plugin-main:has(.bml-dogs-hero) { padding-top: 0 !important; }
main.bml-plugin-main > .container { padding-top: 0; }

/* ---------------- Meet the Dogs archive ---------------- */
.bml-dogs-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
.bml-dogs-hero {
	background: var(--bml-lime-light);
	/* Top padding matches the other page heros (spacing-60 = 3rem), so the H1
	   clears the hanging logo badge instead of crowding it on mobile. */
	padding: 3rem 0 2rem;
	text-align: center;
}
.bml-dogs-hero h1 { margin: 0; }
.bml-dogs-intro {
	max-width: 680px;
	margin: 1rem auto 0;
	font-size: 1.05rem;
	line-height: 1.6;
}
.bml-dogs-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}
.bml-dogs-stats li { text-align: center; }
.bml-dogs-stats strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--bml-charcoal);
}
.bml-dogs-stats span {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8rem;
	color: #4A5A50;
}

.bml-dogs-section { padding: 3rem 0; }
.bml-dogs-section--alt { background: var(--bml-offwhite); }
.bml-dogs-head { margin-bottom: 1.75rem; }
.bml-dogs-head h2 { margin: 0; }
.bml-dogs-head p {
	margin: 0.5rem 0 0;
	max-width: 640px;
	color: var(--bml-gray-600);
}
.bml-dogs-empty {
	background: #fff;
	border: 1px dashed var(--bml-gray-300);
	border-radius: var(--radius-lg);
	padding: 2rem;
	text-align: center;
	color: var(--bml-gray-600);
}

/* Status badge on the photo */
.bml-dog-figure { position: relative; }
.bml-dog-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 0.3rem 0.8rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--bml-lime);
	color: var(--bml-charcoal);
}
.bml-dog-badge.is-soon { background: #FFD24A; }
.bml-dog-badge.is-trial { background: #A5D8FF; }
.bml-dog-badge.is-adopted { background: var(--bml-charcoal); color: var(--bml-lime); }

.bml-dogs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	margin-top: 2rem;
}
.bml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 2rem;
	border-radius: var(--radius-pill);
	background: var(--bml-lime);
	color: var(--bml-charcoal);
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.bml-btn:hover { background: var(--bml-lime-hover); transform: translateY(-1px); }
.bml-btn-outline {
	background: transparent;
	border: 2px solid var(--bml-charcoal);
}
.bml-btn-outline:hover { background: var(--bml-charcoal); color: var(--bml-lime); }

.bml-dogs-cta {
	background: var(--bml-lime-light);
	padding: 3rem 0;
	text-align: center;
}
.bml-dogs-cta h2 { margin: 0; }
.bml-dogs-cta p { margin: 0.6rem 0 0; }

/* Amazon wishlist links */
.bml-wishlists { margin-top: 2.5rem; }
.bml-wishlists-title {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.82rem;
	color: #4A5A50;
	margin-bottom: 0.9rem !important;
}
.bml-wishlist-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.9rem;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}
.bml-wishlist-grid a {
	display: block;
	height: 100%;
	padding: 1rem 1.15rem;
	background: #fff;
	border: 1px solid rgba(24, 31, 34, 0.12);
	border-radius: 16px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bml-wishlist-grid a:hover {
	transform: translateY(-2px);
	border-color: var(--bml-charcoal);
	box-shadow: 0 8px 18px rgba(24, 31, 34, 0.12);
}
.bml-wishlist-label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bml-charcoal);
}
.bml-wishlist-note {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--bml-gray-600);
}
@media (max-width: 781.98px) {
	.bml-wishlist-grid { grid-template-columns: 1fr; }
}

/* ---------------- "How you can help" strip ---------------- */
.bml-help-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.9rem 2.25rem;
}
.bml-help-label {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.9rem;
	color: var(--bml-gray-300);
}
.bml-help-inner a {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.3rem;
	color: #fff;
	text-decoration: none;
}
.bml-help-inner a:hover { color: var(--bml-lime); }

/* ---------------- Breadcrumbs ---------------- */
/* Migrated breadcrumb markup often arrives as a bare <ul>. Lay it out inline. */
.bml-breadcrumb, .breadcrumb, nav[aria-label="breadcrumb"] ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
}
.bml-breadcrumb li + li::before, .breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }

/* ---------------- FAQ accordion (native details/summary) ---------------- */
.bml-faq-item {
	border-bottom: 1px solid #E1E6DA;
	padding: 0;
}
.bml-faq-item:last-of-type { border-bottom: none; }
/* Chevron/icon SVGs pasted inside a summary must stay icon-sized */
.bml-faq-item > summary svg { width: 1em; height: 1em; flex: none; }

/* FAQ sidebar "Ready to Help?" card. Sticks alongside the accordion so the
   donate / meet-the-dogs actions stay in view while reading the questions. */
.bml-faq-side { align-self: flex-start; }
.bml-help-card {
	position: sticky;
	top: 132px; /* clears the sticky header */
	box-shadow: var(--shadow-card);
}
.bml-help-card-img {
	margin: 0 0 1rem;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--bml-charcoal);
	width: 96px;
	height: 96px;
}
.bml-help-card-img img { border-radius: 50%; display: block; }
.bml-help-card .wp-element-button { width: 100%; }
.bml-help-card .is-style-outline .wp-element-button {
	background: transparent;
	color: var(--bml-charcoal);
	border: 2px solid var(--bml-charcoal);
}
.bml-help-card .is-style-outline .wp-element-button:hover {
	background: var(--bml-charcoal);
	color: var(--bml-lime);
}
@media (max-width: 781.98px) {
	.bml-help-card { position: static; }
}

/* Small uppercase label above a section heading */
.bml-eyebrow {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
	color: #77A516;
	margin-bottom: 0.4rem;
}
.bml-faq-item > summary {
	list-style: none;          /* hide the default triangle */
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0.25rem;
	font-family: var(--font-heading);
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--bml-charcoal);
	transition: color 0.15s ease;
}
.bml-faq-item > summary::-webkit-details-marker { display: none; }
.bml-faq-item > summary::marker { content: ""; }
.bml-faq-item > summary:hover { color: #77A516; }
.bml-faq-item > summary:focus-visible {
	outline: 2px solid var(--bml-lime);
	outline-offset: -2px;
	border-radius: 6px;
}
/* Custom +/- indicator built from two bars */
.bml-faq-item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 0.15rem;
	border-radius: 50%;
	background:
		linear-gradient(var(--bml-charcoal) 0 0) center / 12px 2.5px no-repeat,
		linear-gradient(var(--bml-charcoal) 0 0) center / 2.5px 12px no-repeat,
		var(--bml-lime);
	transition: transform 0.25s ease, background-color 0.2s ease;
}
.bml-faq-item[open] > summary::after {
	/* rotate the plus into a minus (vertical bar spins out of view) */
	background:
		linear-gradient(var(--bml-charcoal) 0 0) center / 12px 2.5px no-repeat,
		var(--bml-lime);
	transform: rotate(180deg);
}
.bml-faq-item[open] > summary { color: #77A516; }
.bml-faq-item > :not(summary) {
	/* Left padding matches the summary's so answers align with their question */
	margin: 0 0 1.9rem !important;
	padding: 0 3rem 0 0.25rem;
	line-height: 1.7;
	color: #3C464A;
	animation: bml-faq-open 0.25s ease;
}
@keyframes bml-faq-open {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.bml-faq-item > :not(summary) { animation: none; }
	.bml-faq-item > summary::after { transition: none; }
}

/* ---------------- Impact stats band ---------------- */
/* Counts inside cards (About page impact cards) match the homepage stats
   band. !important beats the inline font-size:2rem baked into the live
   About page's content. */
.bml-card .bml-count {
	font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
	line-height: 1;
}
.bml-stats-band .bml-count {
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
	line-height: 1;
	margin-bottom: 0.3rem;
}
.bml-stats-band p { color: var(--bml-gray-600); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------------- Mission bullet lists ---------------- */
.bml-mission-list { padding-left: 1.1rem; }
.bml-mission-list li { margin-bottom: 0.35rem; }
.bml-mission-list li::marker { color: var(--bml-lime); }

/* ---------------- "You are applying to adopt X" card ---------------- */
.bml-adopting {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem;
	background: #fff;
	border: 2px solid var(--bml-lime);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
.bml-adopting-figure {
	flex: 0 0 auto;
	margin: 0;
	width: 118px;
	height: 118px;
	border-radius: 18px;
	overflow: hidden;
}
.bml-adopting-photo {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.bml-adopting-body { min-width: 0; }
.bml-adopting-eyebrow {
	margin: 0 !important;
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	color: #77A516;
}
.bml-adopting-name { margin: 0.15rem 0 0 !important; font-size: 1.9rem; line-height: 1.1; }
.bml-adopting-meta { margin: 0.3rem 0 0 !important; color: var(--bml-gray-600); font-size: 0.9rem; }
.bml-adopting-links { margin: 0.6rem 0 0 !important; font-size: 0.85rem; }
.bml-adopting-links a { color: var(--bml-charcoal); font-weight: 600; }
/* No dog chosen yet */
.bml-adopting--none {
	display: block;
	border-style: dashed;
	border-color: var(--bml-gray-300);
	text-align: center;
}
.bml-adopting--none p { margin: 0 !important; }
@media (max-width: 600px) {
	.bml-adopting { flex-direction: column; text-align: center; }
	.bml-adopting-figure { width: 130px; height: 130px; }
}

/* ---------------- Numbered step cards ---------------- */
.bml-step { position: relative; }
.bml-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 1rem !important;
	border-radius: 50%;
	background: var(--bml-lime);
	color: var(--bml-charcoal);
	font-family: var(--font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
}

/* ---------------- Forminator, restyled to match the theme ---------------- */
/* Multi-step forms: phones get Forminator's "small" mode, which stacks the
   step nav into a tall vertical ladder. Recreate the desktop layout instead:
   one horizontal row of dots joined by a line, labels hidden (they only say
   "Step 1/2/3"), so the nav costs one line of height. */
.forminator-ui.forminator-custom-form[data-design=basic].forminator-size--small .forminator-pagination-steps {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0 0 20px;
}
.forminator-ui.forminator-custom-form[data-design=basic].forminator-size--small .forminator-pagination-steps .forminator-step {
	width: 15px;
	height: auto;
	flex: 0 0 auto;
	flex-direction: column;
}
.forminator-ui.forminator-custom-form[data-design=basic].forminator-size--small .forminator-pagination-steps .forminator-step .forminator-step-label {
	display: none;
}
.forminator-ui.forminator-custom-form[data-design=basic].forminator-size--small .forminator-pagination-steps .forminator-step .forminator-step-label + .forminator-step-dot {
	margin: 0;
}
.forminator-ui.forminator-custom-form[data-design=basic].forminator-size--small .forminator-pagination-steps .forminator-break {
	width: auto;
	height: 1px;
	flex: 1;
	margin: 0;
}
.forminator-ui.forminator-custom-form[data-design=basic].forminator-size--small .forminator-pagination-steps .forminator-break:before {
	width: 100%;
	height: 3px;
	top: -1px;
	left: 0;
}
.forminator-ui.forminator-custom-form[data-design=basic].forminator-size--small .forminator-pagination-steps .forminator-break:first-child,
.forminator-ui.forminator-custom-form[data-design=basic].forminator-size--small .forminator-pagination-steps .forminator-break:last-child {
	display: block;
}
.forminator-ui.forminator-custom-form[data-design=basic].forminator-size--small .forminator-pagination-steps .forminator-step.forminator-current ~ .forminator-break:before {
	width: 0;
	height: 3px;
}
/* "Step 1 of 4" counter that bigmarvs_legacy_step_counter() maintains
   above the multi-step dot row. */
.bml-steps-count {
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bml-charcoal);
	margin: 0 0 0.6rem;
}


/* Multi-page forms render a placeholder submit button inside the last page's
   content in addition to the real one in the pagination footer (next to
   Previous / Save as Draft). Hide the placeholder so only one Submit shows -
   theme-wide, so every stepped form gets the fix without per-form CSS. */
.forminator-ui.forminator-custom-form button.forminator-pagination-submit {
	display: none !important;
}
.forminator-ui.forminator-custom-form {
	font-family: var(--font-body) !important;
}
.forminator-ui .forminator-label,
.forminator-ui label {
	font-family: var(--font-body) !important;
	font-size: 0.92rem !important;
	letter-spacing: 0.03em;
	color: var(--bml-charcoal) !important;
}
.forminator-ui#forminator-module-9774.forminator-design--basic .forminator-error-message { font-size: 1rem;background: none; color: #E51919; }
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="number"],
.forminator-ui input[type="url"],
.forminator-ui select,
.forminator-ui textarea {
	border: 1px solid var(--bml-gray-300) !important;
	border-radius: 14px !important;
	background: #fff !important;
	font-family: var(--font-body) !important;
	font-size: 0.98rem !important;
	color: var(--bml-charcoal) !important;
	min-height: 48px;
	padding: 10px;
}

label.forminator-radio input[type="radio"] {
  appearance: none;          /* Removes default browser styling */
  -webkit-appearance: none;  /* Safari support */
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-height: 20px;
  flex: 0 0 20px;            /* never squeezed by long labels */
  align-self: center;        /* never stretched by two-line labels */
  border: 2px solid #ccc;    /* Unselected border color */
  border-radius: 50%;        /* Makes it a circle */
  outline: none;
  background-color: #fff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;     /* Centers the inner dot */
}

label.forminator-radio input[type="radio"]:checked {
  border-color: #B2E635;     /* Your desired border color */
}

label.forminator-radio input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);       /* Hides the dot by default */
  transition: 120ms transform ease-in-out;
  background-color: #B2E635; /* Your desired inner color */
}

label.forminator-radio input[type="radio"]:checked::before {
  transform: scale(1);       /* Shows the dot when checked */
}

label.forminator-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  align-self: center;
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;    /* Unselected border color */
  border-radius: 4px;        /* Square instead of a circle */
  outline: none;
  background-color: #fff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;            /* Stops long labels squashing the box */
}

label.forminator-checkbox input[type="checkbox"]:checked {
  border-color: #B2E635;
  background-color: #B2E635; /* Filled box */
}

label.forminator-checkbox input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color: #fff;    /* Tick color */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

label.forminator-checkbox input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.forminator-ui textarea { border-radius: 18px !important; }
.forminator-ui input:focus,
.forminator-ui select:focus,
.forminator-ui textarea:focus {
	border-color: var(--bml-lime) !important;
	outline: 2px solid var(--bml-lime) !important;
	outline-offset: 1px;
}
/* Buttons: next / back / submit */
.forminator-ui .forminator-button,
.forminator-ui .forminator-button-submit,
.forminator-ui .forminator-button-next,
.forminator-ui .forminator-button-back {
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-heading) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em;
	min-height: 48px;
	padding: 0.75rem 2rem !important;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.forminator-ui .forminator-button-submit,
.forminator-ui .forminator-button-next {
	background: var(--bml-lime) !important;
	color: var(--bml-charcoal) !important;
	border: none !important;
}
.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-next:hover {
	background: var(--bml-lime-hover) !important;
	transform: translateY(-1px);
}
.forminator-ui .forminator-button-back {
	background: transparent !important;
	color: var(--bml-charcoal) !important;
	border: 2px solid var(--bml-charcoal) !important;
}
.forminator-ui .forminator-button-back:hover {
	background: var(--bml-charcoal) !important;
	color: var(--bml-lime) !important;
}
/* Multi-step progress bar */
.forminator-ui .forminator-pagination-steps .forminator-step-label {
	font-family: var(--font-heading) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.78rem !important;
}
.forminator-ui .forminator-progress-bar span,
.forminator-ui .forminator-step.forminator-step-complete .forminator-step-dot,
.forminator-ui .forminator-step.forminator-step-active .forminator-step-dot {
	background: var(--bml-lime) !important;
}
.bml-foster-form-section .forminator-ui {
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-top: 2rem;
}

/* ---------------- Inline enquiry forms (foster / adopt) ---------------- */
.bml-inline-form { display: flex; flex-direction: column; gap: 0.9rem; }
.bml-inline-form label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-family: var(--font-heading);
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.bml-inline-form input {
	padding: 0.7rem 1rem;
	border: 1px solid var(--bml-gray-300);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--bml-charcoal);
	background: #fff;
}
.bml-inline-form input:focus-visible { outline: 2px solid var(--bml-lime); outline-offset: 1px; }
.bml-inline-form button {
	margin-top: 0.3rem;
	align-self: flex-start;
	background: var(--bml-lime);
	color: var(--bml-charcoal);
	border: none;
	border-radius: var(--radius-pill);
	padding: 0.7rem 1.9rem;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1rem;
	cursor: pointer;
}
.bml-inline-form button:hover { background: var(--bml-lime-hover); }
.bml-form-note { font-size: 0.72rem; color: var(--bml-gray-600); margin: 0; }

/* ---------------- Adopter quote band ---------------- */
.bml-quote-text {
	font-family: var(--font-accent, 'Caveat', cursive);
	font-size: clamp(1.5rem, 3.2vw, 2.3rem);
	line-height: 1.3;
	max-width: 40ch;
	margin-inline: auto;
}
.bml-quote-cite {
	margin-top: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bml-gray-600);
}

/* Count-up numbers: avoid layout shift while animating */
.bml-count { font-variant-numeric: tabular-nums; }

/* The dark button inside the lime Monthly Donor card gets lime text.
   Also applied here (not just in the pattern) so it takes effect on pages
   that were built before this change. */
.bml-donor-card .wp-element-button { color: var(--bml-lime) !important; }
.bml-donor-card .wp-element-button:hover { color: #fff !important; }

/* Page H1s span the full width of their section rather than being clamped to
   the constrained-layout content size. */
main h1,
main h1.wp-block-heading,
.wp-block-post-content h1 {
	max-width: none !important;
	width: 100%;
}

/* Pull quotes: sized here rather than via the x-large preset, which is also
   used by H2 headings and should not shrink with them. */
.wp-block-quote p {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem) !important;
	line-height: 1.35;
}

/* Body copy: tighter leading for long paragraphs */
.wp-block-post-content p { line-height: 1.55; }

/* Monthly Donor card: dog cutout bottom-right */
.bml-donor-card { position: relative; overflow: hidden; }
.bml-donor-card > * { position: relative; z-index: 1; }
.bml-donor-dog {
	position: absolute;
	right: 14px;
	bottom: 14px;
	margin: 0;
	z-index: 2;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #181F22;
	box-shadow: 0 6px 16px rgba(24, 31, 34, 0.22);
}
.bml-donor-dog img { border-radius: 50%; display: block; }

/* Our Reach card: paw-print graphic bottom-right */
.bml-reach-card { position: relative; overflow: hidden; }
.bml-reach-paw {
	position: absolute;
	right: 18px;
	bottom: 20px;
	width: 62px;
	height: 62px;
	opacity: 0.85;
	pointer-events: none;
}
.bml-reach-paw svg { width: 100%; height: 100%; display: block; }

/* ---------------- Back-to-top button ---------------- */
.bml-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 999px;
	background: #B2E635;
	color: #181F22;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(24, 31, 34, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
	z-index: 999;
}
.bml-to-top:hover { background: #181F22; color: #fff; }
.bml-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .bml-to-top { transition: none; } }

/* ---------------- Mobile header ---------------- */
/* Mobile donate button (lime heart + label). Hidden on desktop. */
.bml-donate-mobile { display: none; }

@media (max-width: 781.98px) {
	/* Centered badge overlaps the 32px lime band above (same -26px offset as
	   desktop, leaving a 6px sliver of green) and hangs ~36px below the white
	   bar into the page content, matching the desktop proportions. Bar and
	   badge scale with the viewport up to their caps (96px bar / 158px badge,
	   both reached at a 460px viewport, so the ratio holds at every width). */
	header.wp-block-group.has-base-background-color { position: static; }
	.bml-header-row {
		height: min(calc(26.5vw - 26px), 96px);
		min-height: min(calc(26.5vw - 26px), 96px);
		max-height: 96px;
	}
	.bml-header-row .bml-logo {
		left: 50%;
		top: -26px;
		transform: translateX(-50%);
		width: min(34.42vw, 158px) !important;
	}
	/* Hamburger sits left; thick bars, never below a 48px tap target */
	.bml-menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		order: -1;
		padding: 0;
		min-width: 48px;
		min-height: 48px;
		background: none;
		border: none;
		cursor: pointer;
		color: var(--bml-charcoal);
	}
	.bml-burger,
	.bml-burger::before,
	.bml-burger::after {
		display: block;
		width: max(30px, 7.4vw);
		height: max(3px, 0.72vw);
		background: currentColor;
		border-radius: 2px;
	}
	.bml-burger { position: relative; }
	.bml-burger::before,
	.bml-burger::after { content: ""; position: absolute; left: 0; }
	.bml-burger::before { top: max(-9px, -2.2vw); }
	.bml-burger::after  { top: max(9px, 2.2vw); }
	/* Heart + DONATE on the right; never below a 48px tap target */
	.bml-donate-mobile {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		gap: 0.5vw;
		min-width: 48px;
		min-height: 48px;
		font-family: var(--font-heading);
		font-weight: 700;
		text-transform: uppercase;
		font-size: max(13px, 3.65vw);
		line-height: 1;
		letter-spacing: 0.02em;
		color: #181F22;
		text-decoration: none;
	}
	.bml-donate-mobile svg { width: max(40px, 9.1vw); height: auto; }
	.bml-donate-mobile:hover { color: #77A516; }
}

/* ---------------- Mobile slideout menu ---------------- */
@media (max-width: 781.98px) {
	/* The nav becomes a right-anchored dark panel that slides in. */
	.bml-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		width: min(330px, 86vw);
		margin: 0;
		padding: 4.75rem 1.75rem 2rem;
		background: var(--bml-charcoal);
		box-shadow: -14px 0 44px rgba(0, 0, 0, 0.45);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s ease-out, visibility 0.3s;
	}
	body.bml-menu-open .bml-nav { transform: translateX(0); visibility: visible; }

	/* Translucent backdrop behind the panel */
	body.bml-menu-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 150;
		background: rgba(24, 31, 34, 0.55);
	}
	body.bml-menu-open { overflow: hidden; }

	.bml-nav .bml-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}
	.bml-nav .bml-menu a {
		display: block;
		color: #F8FAF5;
		font-size: 1.15rem;
		padding: 0.5rem 0;
	}
	.bml-nav .bml-menu a:hover { color: var(--bml-lime); }
	/* Keep the last item (and any .donate item) a pill inside the panel */
	.bml-nav .bml-menu > li:last-child > a,
	.bml-nav .bml-menu li.donate > a,
	.bml-nav .bml-menu li.is-style-donate > a {
		margin-top: 0.75rem;
		padding: 0.55rem 1.4rem;
		color: var(--bml-charcoal);
		display: inline-block;
	}
	/* Submenus stack open inside the drawer */
	.bml-nav .sub-menu {
		display: block;
		position: static;
		background: none;
		box-shadow: none;
		margin: 0 0 0 0.9rem;
		padding: 0;
	}
	.bml-nav .sub-menu a { font-size: 1rem; padding: 0.35rem 0; }

	.bml-menu-close {
		display: block !important;
		position: absolute;
		top: 1.1rem;
		right: 1.25rem;
		width: 44px;
		height: 44px;
		background: none;
		border: none;
		color: #fff;
		font-size: 1.9rem;
		line-height: 1;
		cursor: pointer;
		z-index: 2;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bml-nav { transition: none !important; }
}

/* ---------------- Gallery lightbox ---------------- */
.bml-gallery img { transition: transform 0.2s ease; }
.bml-gallery img:hover { transform: scale(1.02); }

.bml-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(24, 31, 34, 0.94);
	padding: clamp(1rem, 4vw, 3rem);
}
.bml-lightbox.is-open { display: flex; }
.bml-lb-stage {
	margin: 0;
	max-width: min(1100px, 92vw);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.bml-lb-stage img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	animation: bml-lb-fade 0.25s ease;
}
.bml-lb-stage figcaption { color: #EEF8D3; font-size: 0.9rem; text-align: center; }
.bml-lightbox button {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 999px;
	transition: background 0.2s ease;
}
.bml-lightbox button:hover { background: #B2E635; color: #181F22; }
.bml-lb-close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 46px;
	height: 46px;
	font-size: 1.7rem;
	line-height: 1;
}
.bml-lb-prev, .bml-lb-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	font-size: 2rem;
	line-height: 1;
}
.bml-lb-prev { left: 1.25rem; }
.bml-lb-next { right: 1.25rem; }
@keyframes bml-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
	.bml-lb-prev { left: 0.5rem; } .bml-lb-next { right: 0.5rem; }
	.bml-lb-prev, .bml-lb-next { width: 44px; height: 44px; font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .bml-lb-stage img { animation: none; } }

/* ---------------------------------------------------------------------------
   Donate page: monthly giving tiers + one-time amounts
--------------------------------------------------------------------------- */

/* Tier grid. Four across on desktop, two on tablet, one on phone. A CSS grid
   rather than a core/columns block, because columns collapse straight from
   four-across to a single stack at 782px, which leaves a very long page. */
.bml-tiers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 2.25rem !important;
}
/* WP's block-gap margin lands on every card after the first, staggering the
   grid; zero it so all cards start level and stretch to equal height. */
.bml-tiers > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}
@media (max-width: 1024px) { .bml-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bml-tiers { grid-template-columns: 1fr; } }

.bml-tier {
	display: flex;
	flex-direction: column;
	background: var(--bml-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bml-tier:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px -8px rgba(0, 0, 0, 0.14);
}

/* Product/gift image tile at the top of each card */
.bml-tier-media {
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 0.82;
	background: var(--bml-lime-light);
	padding: 1.25rem;
}
.bml-tier-media img {
	max-width: 78%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 50%;
	filter: drop-shadow(0 8px 18px rgba(24, 31, 34, 0.22));
}

/* Card body. margin-top:auto on the button row pins every CTA to the same
   baseline even when the gift descriptions run to different lengths. */
.bml-tier-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0;
	/* Top padding matches bottom, so the price sits as close to the photo as
	   the button sits to the card's end. */
	padding: 1.5rem 1.5rem 1.5rem;
}
/* WP's block-gap adds margin-block-start to every paragraph in page content,
   inflating the card's rhythm; kill it and give each line its own margin. */
.bml-tier-body > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}
/* Teef Squad tier name - handwritten, echoing the campaign poster's script */
.bml-tier-name {
	font-family: 'Caveat', cursive;
	font-size: 1.6rem !important;
	line-height: 1;
	color: #7AA81F;
	margin: 0.95rem 0 0 !important;
	transform: rotate(-1.5deg);
	transform-origin: left bottom;
}
.bml-tier-amount {
	font-family: var(--font-heading);
	font-size: 2.4rem !important;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--bml-charcoal);
	margin: 0 !important;
}
/* Small "/ month" tag tight under the big amount */
.bml-tier-per {
	margin: 0.2rem 0 0 !important;
	font-size: 0.72rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--bml-gray-600);
	font-family: var(--font-heading);
	font-weight: 600;
}
/* What's in the welcome pack - bold, uppercase, the card's workhorse line */
.bml-tier-gift {
	margin: 0.6rem 0 0 !important;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bml-charcoal);
}
/* The cute description */
.bml-tier-desc {
	margin: 0.45rem 0 0 !important;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--bml-gray-600);
}
/* Legacy note line (kept for older card markup still in page content) */
.bml-tier-note {
	margin: 0.15rem 0 0 !important;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #77A516;
	font-family: var(--font-heading);
}
.bml-tier-actions { margin-top: auto !important; padding-top: 1.1rem; }
.bml-tier-actions .wp-block-buttons { gap: 0 !important; }
.bml-tier .wp-element-button {
	width: 100%;
	text-align: center;
	background: var(--bml-charcoal);
	color: var(--bml-lime);
}
.bml-tier .wp-element-button::before { content: "\2665"; margin-right: 0.5rem; }
.bml-tier .wp-element-button:hover,
.bml-tier .wp-element-button:focus-visible {
	background: var(--bml-lime);
	color: var(--bml-charcoal);
}

/* Highlighted "most popular" tier */
.bml-tier--featured { outline: 3px solid var(--bml-lime); outline-offset: -3px; position: relative; }
.bml-tier--featured .bml-tier-media { background: var(--bml-lime); }
/* Handwritten tag explaining why this tier is highlighted */
.bml-tier--featured::after {
	content: "Marv's Pick";
	position: absolute;
	top: 10px;
	right: 10px;
	transform: rotate(4deg);
	background: var(--bml-charcoal);
	color: var(--bml-lime);
	font-family: 'Caveat', cursive;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.35rem 0.85rem 0.45rem;
	border-radius: var(--radius-pill);
	box-shadow: 0 4px 10px rgba(24, 31, 34, 0.25);
	pointer-events: none;
	z-index: 2;
}

/* ---------------- One-time amount buttons ---------------- */
.bml-amounts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0.9rem;
	margin: 1.75rem auto 0 !important;
	max-width: 640px;
}
.bml-amounts .wp-block-button { width: 100%; }
.bml-amounts .wp-element-button {
	width: 100%;
	background: var(--bml-white);
	color: var(--bml-charcoal);
	border: 2px solid var(--bml-charcoal);
	font-size: 1.1rem;
	padding: 0.85rem 0.5rem;
}
.bml-amounts .wp-element-button:hover,
.bml-amounts .wp-element-button:focus-visible {
	background: var(--bml-charcoal);
	color: var(--bml-lime);
}

/* ---------------- "Manage my donation" band ---------------- */
.bml-manage-card {
	max-width: 720px;
	margin-inline: auto;
	border-radius: var(--radius-lg);
}
.bml-manage-steps {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0 !important;
	display: grid;
	gap: 0.7rem;
	text-align: left;
}
.bml-manage-steps li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: 0.95rem;
}
.bml-manage-steps li::before {
	content: "\2713";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bml-lime);
	color: var(--bml-charcoal);
	font-size: 0.75rem;
	font-weight: 700;
}

/* Small print block (tax deductibility, gift fulfilment) */
.bml-fineprint {
	max-width: 760px;
	margin-inline: auto;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--bml-gray-600);
}
.bml-fineprint strong { color: var(--bml-charcoal); }

@media (prefers-reduced-motion: reduce) {
	.bml-tier { transition: none; }
	.bml-tier:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Homepage v2 pattern: Home: Rescue and Community
--------------------------------------------------------------------------- */
/* Keep homepage sections flush to one another. Their own padding controls the
   vertical rhythm, so WordPress' root block gap must not add a second gap. */
body .wp-site-blocks > main > .bml-home2-hero ~ [class*="bml-home2-"] {
	margin-block-start: 0 !important;
}

/* The global post-hero rule intentionally removes top padding on most pages.
   This homepage needs the mission section to use the same top spacing as the
   other standard sections. */
body .wp-site-blocks > main > .bml-home2-hero + .bml-home2-mission {
	padding-top: var(--wp--preset--spacing--60) !important;
}

/* These sections sit flush against the preceding section (no top margin).
   Each one's top padding matches its bottom padding, set in the pattern. */
.bml-home2-impact,
.bml-home2-story {
	margin-top: 0 !important;
}

.bml-home2-hero .bml-eyebrow {
	margin-bottom: 0.65rem;
	font-size: 0.82rem !important;
}
/* The H1 is set tight (line-height 1) but the paragraphs under it inherit the
   loose body line-height at a large font size, which reads as mismatched
   spacing. Tighten the hero copy so the whole block hangs together. */
.bml-home2-hero p { line-height: 1.35; }
.bml-home2-hero .wp-block-buttons { gap: 0.8rem; }

.bml-home2-lede {
	max-width: 760px;
	margin-inline: auto;
	font-size: 1.08rem;
	color: var(--bml-gray-600);
}

.bml-home2-mission { background: #fff; }
.bml-home2-mission-grid,
.bml-home2-help-grid { align-items: stretch; }
.bml-home2-mission-card,
.bml-home2-help-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e6e8e2;
}
.bml-home2-mission-card > :last-child,
.bml-home2-help-card > .wp-block-buttons:last-child { margin-top: auto; }
.bml-home2-mission-card--outreach { border-color: #d8eb9b; }
.bml-home2-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	margin: 0 0 1.1rem;
	border-radius: 999px;
	background: var(--bml-lime);
	font-family: var(--font-heading);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--bml-charcoal);
}
.bml-home2-card-link {
	padding-top: 0.7rem;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.88rem;
}

.bml-home2-section-head { gap: 1.5rem; }
.bml-home2-section-head > .wp-block-group { max-width: 720px; margin: 0; }
.bml-home2-section-head h2 { margin-bottom: 0.55rem; }
.bml-home2-section-head p:last-child { margin-bottom: 0; color: var(--bml-gray-600); }
.bml-home2-dogs .bml-dogs-grid { margin-top: 2rem; }

.bml-home2-outreach { overflow: hidden; }
.bml-home2-outreach .bml-eyebrow { color: var(--bml-lime); }
.bml-home2-outreach .is-style-outline .wp-element-button {
	background: transparent !important;
	border: 2px solid var(--bml-lime) !important;
	color: var(--bml-lime) !important;
}
.bml-home2-outreach .is-style-outline .wp-element-button:hover {
	background: var(--bml-lime) !important;
	color: var(--bml-charcoal) !important;
}
.bml-home2-outreach-images {
	position: relative;
	min-height: 430px;
}
.bml-home2-outreach-image {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}
.bml-home2-outreach-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bml-home2-outreach-image--primary {
	top: 0;
	left: 0;
	width: 62%;
	height: 360px;
	transform: rotate(-2deg);
}
.bml-home2-outreach-image--secondary {
	right: 0;
	bottom: 0;
	width: 62%;
	height: 260px;
	transform: rotate(2deg);
	border: 6px solid var(--bml-dark, #181F22);
}

.bml-home2-impact .wp-block-columns { margin-top: 1rem; }
.bml-home2-impact .wp-block-column + .wp-block-column {
	border-left: 1px solid rgba(24, 31, 34, 0.18);
}

.bml-home2-story-image {
	margin: 0;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.bml-home2-story-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.bml-home2-help-card .wp-block-buttons { margin-top: auto; padding-top: 1rem; width: 100%; }
.bml-home2-help-card .wp-block-button { width: 100%; }
.bml-home2-help-card .wp-element-button { width: 100%; box-sizing: border-box; }
.bml-home2-help-card--donate { border-color: var(--bml-lime-hover); }
.bml-home2-help-card--donate .wp-element-button:hover { color: #fff !important; }

.bml-home2-final .bml-quote-text { margin-bottom: 0; }

@media (max-width: 781.98px) {
	.bml-home2-mission-grid,
	.bml-home2-help-grid { gap: 1rem; }
	.bml-home2-section-head { align-items: flex-start !important; }
	.bml-home2-outreach-images {
		min-height: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.8rem;
		margin-top: 1rem;
	}
	.bml-home2-outreach-image,
	.bml-home2-outreach-image--primary,
	.bml-home2-outreach-image--secondary {
		position: static;
		width: 100%;
		height: auto;
		transform: none;
		border-width: 0;
	}
	.bml-home2-outreach-image img { aspect-ratio: 4 / 3; }
	.bml-home2-impact .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid rgba(24, 31, 34, 0.18);
		padding-top: 1.25rem;
	}
}

@media (max-width: 520px) {
	.bml-home2-outreach-images { grid-template-columns: 1fr; }
	.bml-home2-hero .wp-block-buttons,
	.bml-home2-final .wp-block-buttons { width: 100%; }
	.bml-home2-hero .wp-block-button,
	.bml-home2-final .wp-block-button { width: 100%; }
	.bml-home2-hero .wp-element-button,
	.bml-home2-final .wp-element-button { width: 100%; box-sizing: border-box; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Embedded third-party donation form (Givebutter widget)

   The widget renders in an iframe, so nothing inside it can be styled from
   here. What we CAN do is give it a frame that belongs to this theme: white
   card, our radius and shadow, sitting on the lime-pale band like the tier
   cards above it.
--------------------------------------------------------------------------- */
.bml-embed {
	background: var(--bml-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: clamp(0.75rem, 2vw, 1.25rem);
	scroll-margin-top: 140px; /* clears the sticky header on anchor jumps */
}
.bml-embed iframe,
.bml-embed .givebutter-widget,
.bml-embed > div {
	max-width: 100%;
}
/* The widget sets its own height; stop any stray global rule squashing it. */
.bml-embed iframe { display: block; width: 100%; border: 0; }

/* Editor-only notice shown when a [bml_donate_form] shortcode still holds a
   placeholder widget ID. Visitors never see this. */
.bml-embed-placeholder {
	margin: 0;
	padding: 1rem 1.15rem;
	border: 2px dashed var(--bml-gray-300);
	border-radius: 12px;
	background: #FFFBE6;
	color: var(--bml-gray-600);
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: left;
}

/* Anchor jumps (#give, #monthly, #manage) must clear the sticky header. */
main :is(h1, h2, h3)[id] { scroll-margin-top: 140px; }
@media (max-width: 781.98px) {
	main :is(h1, h2, h3)[id],
	.bml-embed { scroll-margin-top: 100px; }
}

/* ---------------------------------------------------------------------------
   Donate page: form-first layout
--------------------------------------------------------------------------- */

/* Outline buttons on a dark band. The core outline style paints the label in
   the theme's ink colour, which on the charcoal hero is charcoal on charcoal
   and therefore invisible. Repaint them light. */
:is(.has-dark-background-color, .has-dark-card-background-color, .bml-give-hero)
	.is-style-outline .wp-element-button {
	color: #fff;
	border-color: #fff;
	background: transparent;
}
:is(.has-dark-background-color, .has-dark-card-background-color, .bml-give-hero)
	.is-style-outline .wp-element-button:hover,
:is(.has-dark-background-color, .has-dark-card-background-color, .bml-give-hero)
	.is-style-outline .wp-element-button:focus-visible {
	background: #fff;
	color: var(--bml-charcoal);
	border-color: #fff;
}

/* Hero that carries the donation form beside the pitch, so the form is on
   screen at load rather than four sections down the page. */
/* The give hero sits flush under the header wherever it lands in the content
   (its H1 is nested inside columns, so the generic :has(> h1) hero rule never
   matches it), and the section after it - Monthly Welcome Gifts - sits flush
   against it too: both gaps are WP block-gap margins, not design spacing. */
.bml-give-hero {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}
.bml-give-hero + .alignfull {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}
.bml-give-hero .bml-embed {
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}
.bml-give-hero .bml-give-points {
	list-style: none;
	padding: 0;
	margin: 1.4rem 0 0 !important;
	display: grid;
	gap: 0.6rem;
}
/* Block + absolute check, NOT flex: a flex li turns each inline element
   (e.g. a <strong>) into its own flex item and shreds the sentence. */
.bml-give-hero .bml-give-points li {
	display: block;
	position: relative;
	padding-left: calc(22px + 0.65rem);
	font-size: 0.98rem;
	color: var(--bml-lime-light);
}
.bml-give-hero .bml-give-points li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bml-lime);
	color: var(--bml-charcoal);
	font-size: 0.75rem;
	font-weight: 700;
}

/* The embedded Givebutter form itself */
.bml-embed-frame {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
	min-height: 620px;
}

/* Compact impact strip: three facts on one line, not three full cards. */
.bml-impact-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 1.75rem !important;
}
.bml-impact-strip > .wp-block-group {
	background: var(--bml-white);
	border-radius: 16px;
	box-shadow: var(--shadow-card);
	padding: 1.15rem 1.25rem;
}
.bml-impact-strip p:first-child {
	font-family: var(--font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--bml-charcoal);
	margin: 0 0 0.15rem !important;
}
.bml-impact-strip p:last-child {
	margin: 0 !important;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--bml-gray-600);
}
@media (max-width: 781.98px) {
	.bml-impact-strip { grid-template-columns: 1fr; gap: 0.75rem; }
	.bml-embed-frame { min-height: 700px; }
}