/*
Theme Name: Butler PTA
Theme URI: https://butlerpta.org
Author: Butler PTA
Description: Custom block theme for the Butler Elementary PTA. Refined civic aesthetic — cream background, Butler red + warm navy, Source Serif 4 page titles with a 2px red rule, Source Sans 3 body. See DESIGN.md for the full system.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: butler-pta
*/

/* ============================================================
 * Design tokens (kept in sync with DESIGN.md and theme.json)
 * ============================================================ */
:root {
	--butler-red: #B41E2D;
	--butler-red-hover: #951526;
	--butler-red-soft: #D4525E;
	--butler-navy: #1B365D;
	--butler-navy-soft: #2D4A78;
	--butler-cream: #FAFAF7;
	--butler-cream-surface: #F4F0E8;
	--butler-cream-deep: #ECE5D2;
	--butler-text-muted: #5B6470;
	--butler-border-soft: #E8E1D2;

	--bpta-space-2xs: 4px;
	--bpta-space-xs:  8px;
	--bpta-space-sm:  12px;
	--bpta-space-md:  16px;
	--bpta-space-lg:  24px;
	--bpta-space-xl:  32px;
	--bpta-space-2xl: 48px;
	--bpta-space-3xl: 64px;

	--bpta-radius-sm: 4px;
	--bpta-radius-md: 6px;
	--bpta-radius-lg: 10px;

	--bpta-max: 1100px;
	--bpta-prose: 760px;

	--bpta-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
	--bpta-font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/*
	 * WP preset-slug aliasing.
	 *
	 * Why: WordPress generates CSS variables for spacing presets by inserting
	 * a hyphen between a leading digit and the following letter — so the slug
	 * "3xl" in theme.json becomes --wp--preset--spacing--3-xl. But the block
	 * markup transform (`var:preset|spacing|3xl`) does NOT apply the same
	 * conversion; it emits var(--wp--preset--spacing--3xl), which is
	 * undefined. The two halves don't meet and the padding silently
	 * resolves to nothing.
	 *
	 * Aliasing the un-hyphenated names here makes both ends meet without
	 * renaming the slugs (which would force re-seeding every page).
	 */
	--wp--preset--spacing--2xs: var(--wp--preset--spacing--2-xs);
	--wp--preset--spacing--2xl: var(--wp--preset--spacing--2-xl);
	--wp--preset--spacing--3xl: var(--wp--preset--spacing--3-xl);
}

/* ============================================================
 * Base reset + body
 * ============================================================ */
html, body { min-height: 100%; }
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Defensive: prevent any rogue child from pushing horizontal scroll
	 * (header CTAs, embeds, etc.). Items inside main-content cards still
	 * clip cleanly at the viewport edge instead of triggering a sideways
	 * scrollbar that breaks the mobile layout perception. */
	overflow-x: clip;
}

body {
	font-family: var(--bpta-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--butler-navy);
	background: var(--butler-cream);
}

/* Headings — exact spec from preview */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--bpta-font-display);
	color: var(--butler-navy);
	letter-spacing: -0.01em;
	line-height: 1.15;
}
h1, .wp-block-heading.is-style-h1 { font-size: 48px; font-weight: 600; }
h2 { font-size: 32px; font-weight: 500; }
h3 { font-size: 20px; font-weight: 600; }

/* Body links — navy, underlined w/ 2px offset, red on hover */
:where(.bpta-main) a:not(.wp-element-button):not(.bpta-card a):not(.bpta-footer a):not(.bpta-nav-links a) {
	color: var(--butler-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 150ms ease-out;
}
:where(.bpta-main) a:not(.wp-element-button):hover { color: var(--butler-red); }

/* ============================================================
 * Sticky-footer layout
 * ============================================================ */
.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.wp-site-blocks > .bpta-nav { flex: 0 0 auto; }
.wp-site-blocks > .bpta-main,
.wp-site-blocks > main { flex: 1 0 auto; }
.wp-site-blocks > .bpta-footer { flex: 0 0 auto; }

/* ============================================================
 * Top nav (header template part)
 * ============================================================ */
.bpta-nav {
	background: var(--butler-cream) !important;
	border-bottom: 1px solid var(--butler-border-soft);
	padding: var(--bpta-space-md) var(--bpta-space-xl) !important;
	margin-top: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--bpta-space-md) !important;
}
.bpta-nav-brand { display: flex; align-items: center; gap: var(--bpta-space-sm); }
.bpta-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.bpta-logo {
	height: 44px;
	width: auto;
	max-width: none;
	aspect-ratio: 1538 / 400;
	display: block;
	object-fit: contain;
}
.bpta-logo--footer { height: 36px; filter: brightness(0) invert(1) opacity(0.95); }

/* Header nav links — custom replacement for wp:navigation
 * (the WP overlay was a styling dead-end; markup is in parts/header.html). */
.bpta-nav-links {
	display: flex;
	align-items: center;
}
.bpta-nav-links-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--bpta-space-lg);
}
.bpta-nav-links-list a {
	font-family: var(--bpta-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--butler-navy);
	text-decoration: none;
	padding: var(--bpta-space-xs) 0;
	transition: color 150ms ease-out;
}
.bpta-nav-links-list a:hover { color: var(--butler-red); }

/* Hamburger button — hidden on desktop, shown on mobile */
.bpta-menu-toggle {
	display: none;
	background: transparent;
	border: none;
	color: var(--butler-navy);
	cursor: pointer;
	padding: 6px;
	border-radius: var(--bpta-radius-sm);
	transition: color 150ms ease-out;
}
.bpta-menu-toggle:hover { color: var(--butler-red); }
.bpta-menu-toggle:focus-visible {
	outline: 2px solid var(--butler-red);
	outline-offset: 2px;
}

/* Nav right side wrapper holds the nav links + the promoted CTA button */
.bpta-nav-right {
	display: flex !important;
	align-items: center !important;
	gap: var(--bpta-space-lg) !important;
}

/* Promoted CTA button in the header (and mobile) */
.bpta-nav-cta {
	display: inline-block;
	font-family: var(--bpta-font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 8px 14px;
	border-radius: var(--bpta-radius-sm);
	background-color: var(--butler-red);
	color: var(--butler-cream) !important;
	text-decoration: none !important;
	border: 1.5px solid var(--butler-red);
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
	white-space: nowrap;
}
.bpta-nav-cta:hover {
	background-color: var(--butler-red-hover);
	border-color: var(--butler-red-hover);
	color: var(--butler-cream) !important;
}

/* ============================================================
 * Main content area — kill default WP root padding
 * ============================================================ */
.bpta-main {
	padding-left: var(--bpta-space-xl) !important;
	padding-right: var(--bpta-space-xl) !important;
	padding-top: var(--bpta-space-3xl) !important;
	padding-bottom: var(--bpta-space-3xl) !important;
}

/* Page title — inline-block, full-text-width 2px red bottom border.
 * Matches preview's .page-title pattern: the rule spans the title's text. */
.bpta-page-title {
	display: inline-block !important;
	font-family: var(--bpta-font-display);
	font-size: 36px !important;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--butler-navy);
	padding-bottom: var(--bpta-space-sm) !important;
	margin-bottom: var(--bpta-space-lg) !important;
	border-bottom: 2px solid var(--butler-red) !important;
	width: auto !important;
	max-width: 100%;
}

/* ============================================================
 * Buttons (Gutenberg's .wp-element-button + .wp-block-button)
 * ============================================================ */
.wp-element-button,
.wp-block-button__link {
	font-family: var(--bpta-font-body) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	padding: 10px 18px !important;
	border-radius: var(--bpta-radius-sm) !important;
	border: 1.5px solid transparent !important;
	background-color: var(--butler-red) !important;
	color: var(--butler-cream) !important;
	text-decoration: none !important;
	transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
}
/* Cards have narrow widths — let their CTA buttons use smaller padding */
.bpta-main .wp-block-column .wp-block-button__link {
	padding: 10px 14px !important;
	font-size: 14px !important;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: var(--butler-red-hover) !important;
	border-color: var(--butler-red-hover) !important;
}

/* Secondary button — transparent w/ navy border. Detect via inline transparent bg. */
.wp-block-button .wp-block-button__link[style*="transparent"] {
	background-color: transparent !important;
	color: var(--butler-navy) !important;
	border-color: var(--butler-navy) !important;
}
.wp-block-button .wp-block-button__link[style*="transparent"]:hover {
	background-color: var(--butler-navy) !important;
	color: var(--butler-cream) !important;
	border-color: var(--butler-navy) !important;
}

/* ============================================================
 * Home cards — entire card is a single <a> so it's fully clickable
 * ============================================================ */
a.bpta-home-card {
	display: block;
	padding: var(--bpta-space-lg);
	background: var(--butler-cream-surface);
	border-radius: var(--bpta-radius-md);
	border-top: 3px solid var(--butler-red);
	color: var(--butler-navy);
	text-decoration: none !important;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
	height: 100%;
	cursor: pointer;
}
a.bpta-home-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(27,54,93,0.04), 0 8px 24px rgba(27,54,93,0.08);
}
.bpta-home-card-h {
	font-family: var(--bpta-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--butler-navy);
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 var(--bpta-space-sm);
}
.bpta-home-card-p {
	font-family: var(--bpta-font-body);
	font-size: 15px;
	color: var(--butler-text-muted);
	line-height: 1.55;
	margin: 0 0 var(--bpta-space-md);
}
.bpta-home-card-cta {
	font-family: var(--bpta-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--butler-red);
	display: inline-block;
}
a.bpta-home-card:hover .bpta-home-card-cta {
	text-decoration: underline;
}

/* ============================================================
 * Cards (.wp-block-column groups inside home/board/donate)
 *
 * The home cards have a single CTA link inside; we expand that link's
 * ::before to fill the whole card so any click on the card surface
 * follows the CTA href. Other interactive elements inside the card
 * (none today) would need position: relative + z-index: 2 to stay
 * clickable on top.
 * ============================================================ */
.bpta-main .wp-block-column .wp-block-group.has-cream-surface-background-color {
	padding: var(--bpta-space-lg) !important;
	border-top: 3px solid var(--butler-red);
	border-radius: var(--bpta-radius-md);
	background-color: var(--butler-cream-surface) !important;
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
	position: relative;
}
.bpta-main .wp-block-column .wp-block-group.has-cream-surface-background-color:hover {
	box-shadow: 0 1px 0 rgba(27,54,93,0.04), 0 8px 24px rgba(27,54,93,0.08);
	transform: translateY(-1px);
	cursor: pointer;
}
/* Block-level click: stretch the card's CTA link to cover the whole card */
.bpta-main .wp-block-column .wp-block-group.has-cream-surface-background-color a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* The CTA link itself stays in normal flow; only its ::before fills */
.bpta-main .wp-block-column .wp-block-group.has-cream-surface-background-color a {
	position: static;
}
.bpta-main .wp-block-column .wp-block-group.has-cream-surface-background-color > * {
	position: relative;
	z-index: 0;
}
.bpta-main .wp-block-column .wp-block-group.has-cream-surface-background-color h3 {
	font-family: var(--bpta-font-display);
	font-size: 22px !important;
	font-weight: 600;
	margin-bottom: var(--bpta-space-sm) !important;
}
.bpta-main .wp-block-column .wp-block-group.has-cream-surface-background-color p {
	font-size: 15px !important;
	color: var(--butler-text-muted);
	margin-bottom: var(--bpta-space-md);
	line-height: 1.55;
}
.bpta-main .wp-block-column .wp-block-group.has-cream-surface-background-color a {
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	color: var(--butler-red);
	transition: text-decoration 150ms ease-out;
}
.bpta-main .wp-block-column .wp-block-group.has-cream-surface-background-color a:hover {
	text-decoration: underline;
}

/* The eyebrow paragraph inside a card (used on Board roles, Donate grade labels) */
.bpta-main .has-butler-red-color {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: var(--bpta-space-xs) !important;
}

/* ============================================================
 * Board page — hierarchical structure
 *   Executive Leadership / Administrative Officers (leader rows)
 *   Vice Presidents & Committees (VP cards w/ chair rows)
 *
 * One wp:html block in seed_board_grid emits the markup; these rules
 * style it. Editable by the board via the Visual editor's HTML view.
 * ============================================================ */
.bpta-board-year {
	font-family: var(--bpta-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--butler-red);
	margin: 0 0 var(--bpta-space-md);
}
.bpta-board-footnote {
	font-family: var(--bpta-font-body);
	font-size: 13px;
	font-style: italic;
	color: var(--butler-text-muted);
	margin: var(--bpta-space-lg) 0 0;
}
.bpta-board-footnote span { margin-right: 2px; }

.bpta-board-section {
	margin-top: var(--bpta-space-3xl);
}
.bpta-board-section:first-of-type {
	margin-top: var(--bpta-space-xl);
}
.bpta-board-section-h2 {
	font-family: var(--bpta-font-display);
	font-size: 26px;
	font-weight: 500;
	color: var(--butler-navy);
	letter-spacing: -0.01em;
	display: inline-block;
	border-bottom: 2px solid var(--butler-red);
	padding-bottom: var(--bpta-space-2xs);
	margin: 0 0 var(--bpta-space-lg);
}

.bpta-leader-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bpta-space-lg);
}
.bpta-leader-card {
	background: var(--butler-cream-surface);
	border-radius: var(--bpta-radius-md);
	padding: var(--bpta-space-lg);
}
.bpta-leader-role {
	font-family: var(--bpta-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--butler-red);
	margin: 0 0 var(--bpta-space-xs);
}
.bpta-leader-name {
	font-family: var(--bpta-font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--butler-navy);
	margin: 0;
	line-height: 1.2;
}

.bpta-vp-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bpta-space-lg);
}
.bpta-vp-card {
	background: var(--butler-cream-surface);
	border-radius: var(--bpta-radius-md);
	padding: var(--bpta-space-lg);
	display: flex;
	flex-direction: column;
}
.bpta-vp-header {
	padding-bottom: var(--bpta-space-sm);
	margin-bottom: var(--bpta-space-sm);
	border-bottom: 1px solid var(--butler-border-soft);
}
/* VPs with no committee chairs (1st VP, 3rd VP this year): drop the rule
 * + bottom margin so the card doesn't render an empty trailing band. */
.bpta-vp-header--solo {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
.bpta-vp-role {
	font-family: var(--bpta-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--butler-red);
	margin: 0 0 2px;
}
.bpta-vp-subrole {
	font-family: var(--bpta-font-body);
	font-size: 13px;
	color: var(--butler-text-muted);
	margin: 0 0 var(--bpta-space-2xs);
	line-height: 1.4;
}
.bpta-vp-name {
	font-family: var(--bpta-font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--butler-navy);
	margin: 0;
	line-height: 1.2;
}
.bpta-vp-chairs {
	list-style: none;
	padding: 0;
	margin: 0;
}
.bpta-vp-chairs li {
	display: flex;
	justify-content: space-between;
	gap: var(--bpta-space-md);
	font-family: var(--bpta-font-body);
	font-size: 14px;
	padding: 4px 0;
	line-height: 1.45;
}
.bpta-vp-chair-role {
	color: var(--butler-text-muted);
}
.bpta-vp-chair-name {
	font-weight: 600;
	color: var(--butler-navy);
	text-align: right;
	flex-shrink: 0;
}

@media (max-width: 860px) {
	.bpta-leader-row,
	.bpta-vp-grid {
		grid-template-columns: 1fr;
	}
}

/* Donate's Grade Level Donations card now uses the same membership-style
 * wp:group + wp:button markup (red top border, cream-surface, button CTA).
 * No bespoke .bpta-donate-* styles needed — the rules already in place
 * for membership cover both. */

/* ============================================================
 * Separators (the 60px red rule beneath hero h1 + mission h2)
 *
 * Default WP constrained layout sets margin-left/right: auto on children,
 * which centers the separator. Force left-aligned + 60px wide so it
 * matches preview's .hero-rule pattern.
 * ============================================================ */
.wp-block-separator.has-butler-red-background-color {
	background-color: var(--butler-red) !important;
	border: none !important;
	height: 2px !important;
	width: 60px !important;
	max-width: 60px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-top: var(--bpta-space-md) !important;
	margin-bottom: var(--bpta-space-lg) !important;
	opacity: 1;
}

/* ============================================================
 * Hero (homepage opening section)
 * ============================================================ */
.bpta-main h1.wp-block-heading,
.bpta-page-title {
	letter-spacing: -0.015em;
}
.bpta-main h1.wp-block-heading {
	font-size: 56px !important;
	font-weight: 600;
	line-height: 1.1;
	margin-bottom: var(--bpta-space-md) !important;
}
.bpta-main .has-muted-text-color { color: var(--butler-text-muted) !important; }
.bpta-main p.has-lead-font-size,
.bpta-main p[style*="font-size:19px"] {
	font-size: 19px !important;
	color: var(--butler-text-muted);
	max-width: 640px;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: var(--bpta-space-xl);
}
/* Buttons row in hero — left-align the row */
.bpta-main .wp-block-buttons {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ============================================================
 * Mission block (prose section)
 * ============================================================ */
.bpta-main h2.wp-block-heading {
	font-size: 32px !important;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin-top: 0;
	margin-bottom: var(--bpta-space-sm) !important;
}

/* Section h2 with text-width red underline (Our mission and similar) */
.bpta-main h2.wp-block-heading.bpta-section-h2 {
	display: inline-block !important;
	padding-bottom: var(--bpta-space-sm) !important;
	border-bottom: 2px solid var(--butler-red) !important;
	margin-bottom: var(--bpta-space-lg) !important;
	width: auto !important;
	max-width: 100%;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.bpta-main p[style*="font-size:17px"] {
	font-size: 17px !important;
	line-height: 1.6 !important;
	margin-bottom: var(--bpta-space-md);
}

/* ============================================================
 * Footer (footer template part)
 * ============================================================ */
.bpta-footer {
	background-color: var(--butler-navy) !important;
	color: var(--butler-cream) !important;
	padding: var(--bpta-space-2xl) var(--bpta-space-xl) !important;
	font-size: 14px;
	margin-top: 0 !important;
}
.bpta-footer-inner {
	max-width: var(--bpta-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--bpta-space-xl);
}
.bpta-footer-wordmark {
	display: inline-block;
	font-family: var(--bpta-font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--butler-cream) !important;
	text-decoration: none !important;
	letter-spacing: -0.005em;
	line-height: 1;
}
.bpta-footer-wordmark:hover { opacity: 0.85; }
.bpta-footer-tagline {
	margin-top: var(--bpta-space-sm);
	opacity: 0.7;
	font-size: 13px;
	font-family: var(--bpta-font-display);
	font-style: italic;
	color: var(--butler-cream);
}
.bpta-footer-h4 {
	font-family: var(--bpta-font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--butler-cream) !important;
	opacity: 0.6;
	margin: 0 0 var(--bpta-space-md);
	line-height: 1.2;
}
.bpta-footer-list { list-style: none; padding: 0; margin: 0; }
.bpta-footer-list li { margin-bottom: 6px; }
.bpta-footer a {
	color: var(--butler-cream) !important;
	text-decoration: none !important;
	opacity: 0.85;
	transition: opacity 150ms ease-out;
}
.bpta-footer a:hover { opacity: 1; text-decoration: underline !important; }
.bpta-footer-baseline {
	max-width: var(--bpta-max);
	margin: var(--bpta-space-xl) auto 0;
	padding-top: var(--bpta-space-md);
	border-top: 1px solid rgba(244,240,232,0.15);
	font-size: 12px;
	color: rgba(244,240,232,0.6);
}

/* ============================================================
 * Form fields (contact, magic-link request)
 * ============================================================ */
/* Form inputs — match preview spec exactly: 15px Source Sans, 10/14 padding,
 * 1.5px soft border, 4px radius, cream bg. No min-height (natural ~40px). */
.bpta-main input[type="text"],
.bpta-main input[type="email"],
.bpta-main input[type="password"],
.bpta-main input[type="search"],
.bpta-main textarea,
.bpta-input {
	font-family: var(--bpta-font-body) !important;
	font-size: 15px !important;
	padding: 10px 14px !important;
	border: 1.5px solid var(--butler-border-soft) !important;
	border-radius: var(--bpta-radius-sm) !important;
	background: var(--butler-cream) !important;
	color: var(--butler-navy) !important;
	width: 100% !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	transition: border-color 150ms ease-out;
	box-sizing: border-box;
}
.bpta-main textarea { line-height: 1.55 !important; min-height: 120px !important; }
.bpta-main input:focus,
.bpta-main textarea:focus,
.bpta-input:focus { outline: none !important; border-color: var(--butler-red) !important; }

/* Labels — compact gap between label text and input */
.bpta-main form label {
	gap: 6px !important;
}

/* Form layout — column with comfortable gaps between fields */
.bpta-form {
	display: flex;
	flex-direction: column;
	gap: var(--bpta-space-md);
	margin-top: var(--bpta-space-md);
}
/* Inline form variant (legacy) — email field + submit on one row */
.bpta-form--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--bpta-space-sm);
	align-items: flex-start;
}
.bpta-form--inline input[type="email"] {
	flex: 1;
	min-width: 240px;
}
.bpta-form--inline .bpta-form-submit { margin-top: 0; }

/* Magic-link request form — fills its parent section (560px) so the input
 * lines up with the intro copy above it; submit aligned right under the input. */
.bpta-form--magic {
	width: 100%;
}
.bpta-form--magic .bpta-form-submit {
	align-self: flex-end;
}
.bpta-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bpta-form-label {
	font-family: var(--bpta-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--butler-navy);
	line-height: 1.4;
}
.bpta-form-submit {
	align-self: flex-start;
	font-family: var(--bpta-font-body);
	font-weight: 600;
	font-size: 15px;
	padding: 10px 18px;
	border-radius: var(--bpta-radius-sm);
	border: 1.5px solid var(--butler-red);
	background-color: var(--butler-red);
	color: var(--butler-cream);
	cursor: pointer;
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
	margin-top: var(--bpta-space-xs);
}
.bpta-form-submit:hover {
	background-color: var(--butler-red-hover);
	border-color: var(--butler-red-hover);
}

/* ============================================================
 * Social icons (used in footer + header)
 * ============================================================ */
.bpta-footer-social {
	display: flex;
	gap: var(--bpta-space-md);
	margin-top: var(--bpta-space-md);
}
.bpta-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--butler-cream) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	text-decoration: none !important;
	transition: color 150ms ease-out, opacity 150ms ease-out, transform 150ms ease-out;
	line-height: 1;
}
.bpta-social-link svg { width: 24px; height: 24px; display: block; }
.bpta-social-link:hover {
	opacity: 1;
	transform: translateY(-1px);
}
/* Footer social: cream icon on navy bg, hover to softer cream */
.bpta-footer-social .bpta-social-link:hover { color: var(--butler-red-soft) !important; }

/* Header social: navy icon on cream bg, hover to red */
.bpta-nav .bpta-social-link { color: var(--butler-navy) !important; }
.bpta-nav .bpta-social-link:hover { color: var(--butler-red) !important; }

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 760px) {
	.bpta-nav { padding: var(--bpta-space-sm) var(--bpta-space-md) !important; flex-wrap: wrap; }
	.bpta-logo { height: 36px; }
	.bpta-main { padding: var(--bpta-space-2xl) var(--bpta-space-md) !important; }
	.bpta-main h1.wp-block-heading { font-size: 36px !important; }
	.bpta-footer-inner { grid-template-columns: 1fr !important; gap: var(--bpta-space-lg); }
	.bpta-footer { padding: var(--bpta-space-xl) var(--bpta-space-md) !important; }

	/* Mobile header: just logo + hamburger. The horizontal nav, Facebook
	 * icon, and Directory CTA all move into the overlay below. */
	.bpta-nav-links-list { display: none; }
	.bpta-nav .bpta-social-link { display: none !important; }
	.bpta-nav-cta { display: none; }
	.bpta-menu-toggle { display: inline-flex; }
	.bpta-nav-right { gap: var(--bpta-space-sm) !important; }

	/* When wp-block-columns stacks vertically, give a generous vertical
	 * gap so cards (with their bold red top border) read as distinct
	 * tiles rather than a single connected band. WP's flex `gap` is
	 * unreliable across the cascade here — using margin-bottom on the
	 * .wp-block-column children is the simplest, most predictable fix.
	 * Last child gets no margin so the section's own padding-bottom
	 * still defines the gap to the footer. */
	.bpta-main .wp-block-columns > .wp-block-column {
		margin-bottom: var(--bpta-space-2xl);
	}
	.bpta-main .wp-block-columns > .wp-block-column:last-child {
		margin-bottom: 0;
	}
}

/* ============================================================
 * Mobile menu overlay (full-screen, fades in)
 *
 * Markup in parts/header.html, behavior in assets/menu.js.
 * Header on top (wordmark + red rule + close X), big-tap link list
 * in the middle, red Directory CTA + Facebook link at the bottom.
 * Hidden by default on every viewport; menu.js sets .is-open when
 * the hamburger is tapped.
 * ============================================================ */
.bpta-mobile-overlay {
	position: fixed;
	inset: 0;
	background: var(--butler-cream);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 180ms ease-out, visibility 0s linear 180ms;
	overflow-y: auto;
}
.bpta-mobile-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 180ms ease-out;
}
.bpta-mobile-overlay[hidden] { display: none; }
html.bpta-menu-locked { overflow: hidden; }

.bpta-mobile-overlay-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: var(--bpta-space-lg) var(--bpta-space-lg) var(--bpta-space-xl);
	max-width: 480px;
	margin: 0 auto;
	box-sizing: border-box;
}

.bpta-mobile-overlay-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bpta-space-md);
	padding-bottom: var(--bpta-space-sm);
	border-bottom: 2px solid var(--butler-red);
}
.bpta-mobile-overlay-brand {
	font-family: var(--bpta-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--butler-navy);
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.bpta-menu-close {
	background: transparent;
	border: none;
	color: var(--butler-navy);
	cursor: pointer;
	padding: 4px;
	margin: -4px -4px 0 0;
	border-radius: var(--bpta-radius-sm);
	transition: color 150ms ease-out;
	flex-shrink: 0;
}
.bpta-menu-close:hover { color: var(--butler-red); }
.bpta-menu-close:focus-visible {
	outline: 2px solid var(--butler-red);
	outline-offset: 2px;
}

.bpta-mobile-overlay-list {
	list-style: none;
	padding: 0;
	margin: var(--bpta-space-lg) 0 0;
}
.bpta-mobile-overlay-list li + li {
	border-top: 1px solid var(--butler-border-soft);
}
.bpta-mobile-overlay-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--bpta-space-md) 0;
	font-family: var(--bpta-font-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--butler-navy);
	text-decoration: none;
	letter-spacing: -0.01em;
	transition: color 150ms ease-out;
}
.bpta-mobile-overlay-list a::after {
	content: "→";
	font-family: var(--bpta-font-body);
	font-size: 18px;
	color: var(--butler-text-muted);
	transition: color 150ms ease-out, transform 150ms ease-out;
}
.bpta-mobile-overlay-list a:hover,
.bpta-mobile-overlay-list a:active {
	color: var(--butler-red);
}
.bpta-mobile-overlay-list a:hover::after {
	color: var(--butler-red);
	transform: translateX(2px);
}

.bpta-mobile-overlay-cta {
	display: block;
	margin-top: var(--bpta-space-xl);
	padding: 14px 18px;
	background: var(--butler-red);
	color: var(--butler-cream);
	font-family: var(--bpta-font-body);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	border-radius: var(--bpta-radius-sm);
	transition: background 150ms ease-out;
}
.bpta-mobile-overlay-cta:hover { background: var(--butler-red-hover); }

.bpta-mobile-overlay-fb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: var(--bpta-space-lg);
	color: var(--butler-navy);
	text-decoration: none;
	font-family: var(--bpta-font-body);
	font-size: 14px;
	font-weight: 500;
	align-self: center;
	transition: color 150ms ease-out;
}
.bpta-mobile-overlay-fb:hover { color: var(--butler-red); }