/*
Theme Name: Baltzer Marketing
Theme URI: https://baltzermarketing.com
Description: Custom block theme for Baltzer Marketing, a legal marketing agency. Child of Twenty Twenty-Five, built entirely with native core blocks and patterns for full control in Claude Code.
Author: Baltzer Marketing
Author URI: https://baltzermarketing.com
Template: twentytwentyfive
Version: 1.24.2
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baltzer-child
*/

/*
 * Styling for this theme lives primarily in theme.json.
 * Add only small CSS tweaks here that the block settings can't express.
 */

/*
 * Header services dropdown. Core supplies the open/close behaviour; these rules
 * give the panel a real surface instead of a bare bordered box.
 */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	min-width: max-content;
	padding: 0.5rem 0;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14);
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
}
.wp-block-navigation
	.has-child
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item:hover
	> .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}
.wp-block-navigation
	.has-child
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .has-child > .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .wp-block-navigation-submenu__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * Mobile overlay menu. The header nav is right-justified on desktop, and that
 * alignment leaks into the full-screen overlay, where it pins every label to a
 * padding-free right edge and clips the long service names. Reset it to a
 * left-aligned, padded panel and let the labels wrap.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.25rem, 5vw, 2.5rem);
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	align-items: flex-start;
	text-align: left;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	min-width: 0;
	padding-left: 1rem;
	border: 0;
	border-left: 2px solid #e2e8f0;
	border-radius: 0;
	box-shadow: none;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 0;
	white-space: normal;
}

/* Phone menu, Brent 2026-09-04 ("too busy"): children stay hidden until the parent's chevron is
 * tapped. Core shows every submenu expanded in the overlay and hides the chevron; this reverses
 * both. The chevron button carries aria-expanded from core's own click handler, so no script. The
 * parent label is still a link to the parent page; only the chevron expands. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.5rem;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	transition: transform 0.15s ease;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	display: none;
	flex-basis: 100%;
	width: 100%;
	margin-top: 0.5rem;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
}

/* Smooth scroll for in-page anchor CTAs */
html {
	scroll-behavior: smooth;
}

/* Subtle lift on service / card group hover */
.is-style-card-lift {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.is-style-card-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
/*
 * Equal-height card rows. Put svc-cards on a columns block whose columns each
 * hold one card group; the cards then fill the row instead of ragging out.
 */
.svc-cards .wp-block-column {
	display: flex;
}
.svc-cards .wp-block-column > .wp-block-group {
	flex: 1 1 auto;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.svc-cards .wp-block-column > .wp-block-group:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/*
 * Service-page building blocks.
 * Shared by every service and practice-area page via the service-* patterns.
 * Block settings cannot size or align raw inline SVG, so it is handled here.
 */
.svc-icon {
	line-height: 0;
	margin-bottom: 0.25rem;
}
.svc-icon svg {
	display: block;
	width: 60px;
	height: 60px;
}
.svc-check {
	line-height: 0;
	flex: 0 0 auto;
	margin-top: 0.28rem;
}
.svc-check svg {
	display: block;
	width: 24px;
	height: 24px;
}
/*
 * Hero banner variant. The artwork is 2:1 with the subject on the right, so on
 * narrow screens it is scaled and shifted to keep the face and the headline in
 * frame rather than letting both shrink into nothing.
 */
.svc-hero-banner {
	margin: 0;
}
/* Specificity note: core's .wp-block-image img sets height:auto and loads after
   the theme sheet, so these rules have to out-specify it, not just follow it. */
.wp-block-image.svc-hero-banner img {
	display: block;
	width: 100%;
	height: clamp(300px, 38vw, 560px);
	object-fit: cover;
	/* Bias the crop upward: his head sits high in the frame and the dead navy
	   and lower torso at the bottom are what we can afford to lose. */
	object-position: center 22%;
}
@media (max-width: 781px) {
	/* No crop below tablet. The artwork puts the headline hard left and the
	   subject hard right, so any crop tight enough to keep his face loses the
	   start of the word. Showing the whole 2:1 frame keeps both, small. */
	.wp-block-image.svc-hero-banner img {
		height: auto;
		object-fit: fill;
	}
}

/*
 * Plate hero. The same banner composition as .svc-hero-banner, except the words
 * are live text instead of pixels. assets/service-hero-plate.jpg is Brent's
 * banner with the painted-in "Legal PPC." erased off the navy. Two plates are
 * derived from it by tools/build-plates.py, and no page loads the source:
 *
 *   service-hero-plate-wide.jpg  2300x908, the figure on a widened navy canvas
 *   home-hero-plate.jpg          1800x908, the same field with no figure
 *
 * Cover scales a plate to the band's width, so the figure's rendered size is
 * fixed by his share of the source and cannot be changed from here. Widening the
 * canvas from 1800 to 2300 is what took him down to 78% on 2026-08-14, and
 * moved the point where he starts from 53% of the plate to 63%.
 *
 * The homepage runs the figure-free plate at every width. Brent's photograph in
 * the homepage hero made the agency read as a personal brand, so that space
 * carries the call to action instead.
 */
.wp-block-cover.svc-plate-band {
	min-height: clamp(320px, 38vw, 560px);
	padding: 0;
}
/* The homepage band holds the eyebrow, a sentence headline, a supporting line
   and the call to action, where a service page holds two words. */
.wp-block-cover.svc-plate-band:has(.is-sentence) {
	min-height: clamp(480px, 44vw, 660px);
}
/* The copy sits in the navy the erased words left. The figure starts at 53% of
   the plate, so the column is capped short of that rather than trusting the
   constrained content size, which is measured off the container not the art. */
/* The copy group keeps the page's wide width so its left edge lines up with the
   body copy below; the block's own contentSize is what holds the words clear of
   the figure. Capping the group itself would let the constrained layout centre
   it instead. */
.svc-plate-headline {
	font-size: clamp(2.25rem, 6.2vw, 5.5rem);
	text-wrap: balance;
}
/* The homepage h1 is a full sentence rather than a two-word service name, so it
   runs at a sentence size and takes the full copy column instead of the display
   size the service pages use. */
.svc-plate-headline.is-sentence {
	font-size: clamp(1.5rem, 3.1vw, 2.75rem);
	letter-spacing: -0.015em;
	line-height: 1.15;
}
/*
 * The hand-drawn underline from the artwork, redrawn as a stretched SVG behind
 * the gold keyword so it sizes itself to whatever word each page marks. Data
 * URIs cannot read CSS custom properties, so the accent is the literal token
 * value here; it has to be changed with the palette.
 *
 * It hangs on the last word of the headline, never on the whole <mark>. An
 * inline box paints one background across the union of its line fragments, so a
 * gold phrase that wrapped got a single stroke stretched over two lines and
 * slashed through the second one ("Law Firm Website / Design.", reported by
 * Brent 2026-08-14). A single word cannot wrap, so the stroke always lands on
 * one line, under the last line of the headline, the way it sits under "PPC."
 * in the source artwork.
 */
.svc-plate-headline .svc-scribble {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 53' preserveAspectRatio='none'%3E%3Cpath d='M50 32 L923 5 L227 48 L673 44' fill='none' stroke='%23E99906' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 104% 0.26em;
	padding-bottom: 0.22em;
}

/* The secondary way out of the hero, for a visitor who is not ready to book a
   call. It stays a text link so it cannot compete with the gold button. */
.svc-hero-secondary a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid rgba(233, 153, 6, 0.45);
	padding-bottom: 2px;
}
.svc-hero-secondary a:hover,
.svc-hero-secondary a:focus-visible {
	border-bottom-color: var(--wp--preset--color--accent);
}
@media (max-width: 1000px) {
	/* The band narrows faster than the copy does, so the column has to give way
	   or it runs under his arm. On the wide plate he starts at 63% rather than
	   53%, so the column keeps more of the width than it used to. The homepage
	   band has no figure in it and is exempt at every width. */
	.svc-plate-band:not(:has(.is-sentence)) .svc-plate-copy > * {
		max-width: 56%;
	}
	/* The eyebrow is one unbreakable line of four labels; let it run wider than
	   the headline and drop a size rather than wrap onto a second row. */
	.svc-plate-band .svc-plate-copy > p:first-child {
		max-width: 72%;
		/* Preset font-size classes ship with !important in global styles, so an
		   override of one has to match it. */
		font-size: 0.72rem !important;
	}
}
@media (max-width: 781px) {
	/* No crop below tablet, same rule the baked-in banner needed: hold the plate
	   at its own ratio so the whole composition stays in frame, small. The wide
	   plate is 2.53:1, not the 1.98:1 the original was.
	   The ratio is a FLOOR, not a fixed height. An earlier version set
	   aspect-ratio with min-height 0, which pinned the band to its ratio and
	   clipped any headline taller than that, which is exactly what the
	   homepage's sentence h1 did on a phone. min-height lets the band grow. */
	.wp-block-cover.svc-plate-band {
		min-height: calc(100vw / 2.53);
		padding-top: var(--wp--preset--spacing--20);
		padding-bottom: var(--wp--preset--spacing--20);
	}
	.svc-plate-band img.wp-block-cover__image-background {
		object-position: 50% 50% !important;
	}
	.svc-plate-headline {
		font-size: 7.4vw;
	}
	.svc-plate-band:not(:has(.is-sentence)) .svc-plate-copy > * {
		max-width: 62%;
	}
	/* The homepage stack is four blocks deep and needs the whole width at phone
	   size, so the band drops the artwork and runs on flat navy rather than
	   putting a sentence, a paragraph and a button over a cropped field. */
	.wp-block-cover.svc-plate-band:has(.is-sentence) {
		min-height: 0;
	}
	.svc-plate-band:has(.is-sentence) img.wp-block-cover__image-background {
		display: none;
	}
	.svc-plate-headline.is-sentence {
		font-size: 6.4vw;
	}
	.svc-plate-band .svc-plate-copy:has(.is-sentence) > * {
		max-width: 100%;
	}
}
@media (max-width: 600px) {
	/* The eyebrow is illegible once the band is this short. The four words it
	   carries are all repeated in the body copy below. */
	.svc-plate-band .svc-plate-copy > p:first-child {
		display: none;
	}
}

/* Visually hidden, still read by screen readers and indexed. */
.svc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Certification badges in the proof strip. */
.svc-badge {
	display: inline-block;
	line-height: 0;
}
.svc-badge img {
	display: block;
	width: auto;
	height: 76px;
}
.svc-badge:hover img {
	opacity: 0.85;
}
@media (max-width: 600px) {
	.svc-badge img {
		height: 60px;
	}
	.svc-badge-note {
		border-left: 0 !important;
		padding-left: 0 !important;
	}
}

/*
 * Credential cards on the About page. The Google artwork is a bordered rectangle
 * and the Microsoft artwork is a shield, so a shared min-width and min-height are
 * what make the two cards a matched pair instead of two boxes of different sizes.
 */
.bm-badge-card {
	min-width: 15rem;
	min-height: 9.5rem;
}
@media (max-width: 600px) {
	.bm-badge-card {
		min-width: 0;
		width: 100%;
	}
}

/* GoHighLevel reputation widget. Third-party iframe, confirm in a real browser. */
.svc-reviews iframe {
	display: block;
	width: 100%;
	min-width: 100%;
	min-height: 460px;
	border: 0;
	border-radius: 12px;
}

/*
 * Hero media slot. Fixed 4:5 portrait so a founder video can later replace the
 * placeholder photo without the hero layout shifting.
 */
.svc-hero-media {
	margin: 0;
}
.svc-hero-media img {
	display: block;
	width: 100%;
	max-width: 360px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-left: auto;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
@media (max-width: 781px) {
	.svc-hero-media img {
		max-width: 300px;
		margin-right: auto;
	}
}

/* -------------------------------------------------------------------------
   Newsletter signup forms
   Ported from the Rinehart Bryant theme and retokenized onto the Baltzer
   palette. The submit button carries wp-element-button, so it inherits the
   gold-on-navy button styling from theme.json and needs no rules here.
   ------------------------------------------------------------------------- */

/* Honeypot: visually removed, kept out of the a11y tree by aria-hidden. */
.bm-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Checklist columns stack on phones. Only the horizontal gap is set in the patterns, so the
   vertical one fell back to the section gap and split each list in half with a seam. Any columns
   block holding checkmark rows gets a list-sized gap once stacked. */
@media (max-width: 781px) {
	.wp-block-columns:has(.svc-check) {
		row-gap: var(--wp--preset--spacing--20);
	}
}

/* Header. One row on desktop: brand left, menu and the phone-plus-button cluster right, nothing
   wraps. The row wraps only below 1024px, where the menu drops to its own centred line under the
   brand and CTA; below 600px the phone hides and core's hamburger takes over. */
.bm-header-icon img {
	width: 34px;
	height: auto;
}
.bm-header-brand a {
	text-decoration: none;
}
.bm-header .wp-block-navigation {
	margin-left: auto;
}
.bm-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.25rem 0;
}
.bm-header .bm-header-actions {
	flex-shrink: 0;
}
.bm-header .bm-header-cta .wp-block-button__link {
	padding: 0.7rem 1.35rem;
	font-size: 1rem;
	white-space: nowrap;
}
@media (min-width: 1024px) {
	.bm-header > .alignwide {
		flex-wrap: nowrap;
		gap: 2rem;
	}
}
@media (max-width: 1023px) {
	.bm-header .wp-block-navigation {
		order: 3;
		flex-basis: 100%;
		justify-content: center;
		margin-left: 0;
		margin-top: 0.25rem;
	}
}
@media (max-width: 599px) {
	.bm-header-icon img {
		width: 28px;
	}
	.bm-header .bm-header-phone {
		display: none;
	}
	.bm-header .wp-block-navigation {
		flex-basis: auto;
		margin-top: 0;
	}
	.bm-header > .alignwide {
		gap: 0.5rem;
	}
	.bm-header .wp-block-site-title {
		font-size: 0.875rem;
		white-space: nowrap;
	}
	.bm-header .bm-header-cta .wp-block-button__link {
		padding: 0.5rem 0.65rem;
		font-size: 0.8125rem;
	}
	/* Brent, 2026-09-04, from his phone: the hamburger was dropping to a second row. Brand,
	   button, and hamburger now fit one 390px row: nothing shrinks or wraps, and the
	   hamburger loses its own padding. */
	.bm-header-brand,
	.bm-header .wp-block-navigation,
	.bm-header .bm-header-actions {
		flex-shrink: 0;
	}
	.bm-header .wp-block-navigation__responsive-container-open {
		padding: 0;
	}
	.bm-header > .alignwide {
		gap: 0.4rem;
		flex-wrap: nowrap;
	}
}

/* Services menu, 2026-09-04: parents with children (SEO, PPC, Brand and visibility). Core opens a
 * nested flyout to the LEFT when the menu is right-justified, which lands it on top of the Services
 * list, so the third level opens to the right of its parent instead. */
.bm-header .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
.bm-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	left: 100%;
	right: auto;
	top: -1px;
}

/* Hero deck: the button centred in its right-hand column on desktop (Brent, 2026-09-03), left
   under the copy once the columns stack. Two classes to beat core's own justify rule. */
@media (min-width: 782px) {
	.wp-block-buttons.svc-hero-actions {
		justify-content: center;
	}
}

/* CTA bands: heading and copy in the wide column, the button flush with the band's right edge
   on desktop. Once the columns stack, the button sits left under the copy like every other
   button on the site. */
@media (min-width: 782px) {
	/* Two classes: core prints its own justify rule for the block later in the document at
	   one class of specificity, so one class here loses. */
	.wp-block-buttons.svc-cta-actions {
		justify-content: flex-end;
	}
}

/* -------------------------------------------------------------------------
   Hub pages (Services and Practice areas indexes) and the blog list
   ------------------------------------------------------------------------- */
.bm-hub-group-title {
	font-size: 1.35rem;
}
.bm-services-index h3,
.bm-services-section h3 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	margin-top: 1.5rem;
	margin-bottom: 0.35rem;
}
.bm-services-section .wp-block-column > h3:first-child {
	margin-top: 0;
}
.bm-services-section h2 {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: 1.15rem;
}
.bm-services-index h3 a,
.bm-services-section h3 a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.bm-services-index h3 a:hover,
.bm-services-index h3 a:focus-visible,
.bm-services-section h3 a:hover,
.bm-services-section h3 a:focus-visible {
	text-decoration: underline;
}
.bm-hub-card {
	background: var(--wp--preset--color--base);
	border: 1px solid #dbe2ec;
	border-radius: 12px;
	padding: 1.5rem 1.5rem 1.6rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bm-hub-card:hover,
.bm-hub-card:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 10px 30px rgba(11, 18, 32, 0.08);
}
.bm-hub-card h3,
.bm-hub-card h4 {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	line-height: 1.25;
}
.bm-hub-card h3 a,
.bm-hub-card h4 a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.bm-hub-card h3 a:hover,
.bm-hub-card h4 a:hover {
	text-decoration: underline;
}
.bm-hub-card p {
	margin: 0;
	line-height: 1.6;
}
/* The "not listed here" card is the odd one out and reads that way: navy, with
   the same gold link colour the CTA bands use. */
.bm-hub-card--more {
	background: var(--wp--preset--color--navy-deep);
	border-color: var(--wp--preset--color--navy-deep);
}
.bm-hub-card--more h3 a {
	color: var(--wp--preset--color--accent);
}
.bm-hub-card--more p {
	color: #cdd8e6 !important;
}
/* Every card in a grid row runs the same height, so the row reads as a row. */
.bm-hub-grid > .bm-hub-card {
	height: 100%;
}

/* A hero that holds a headline and a deck but no button runs shorter than
   the homepage band. */
.wp-block-cover.svc-plate-band.is-short:has(.is-sentence) {
	min-height: clamp(300px, 30vw, 420px);
}

/* Blog index rows. One post per row so the list reads the same with one
   post or forty, instead of a three-column grid with two empty cells. */
.bm-post-row {
	padding: 1.75rem 0;
	border-bottom: 1px solid #dbe2ec;
}
.bm-post-list > .bm-post-row:first-child {
	padding-top: 0;
}
.bm-post-row .wp-block-post-title a {
	text-decoration: none;
}
.bm-post-row .wp-block-post-title a:hover {
	text-decoration: underline;
}
.bm-post-row .wp-block-post-excerpt__more-link {
	font-weight: 600;
}

/* Screen-reader-only text: form labels behind placeholders, and section headings cut visually. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Shared input treatment.

   The 1rem font-size is not cosmetic. Safari on iOS zooms the whole page in when a
   focused field is under 16px, which is what the stock Contact Form 7 install did
   (13.33px Arial) before the contact page moved onto this system. Never drop any
   field in .bm-form below 1rem. */
.bm-form input[type="text"],
.bm-form input[type="email"],
.bm-form input[type="tel"],
.bm-form textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 8px;
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--heebo);
	font-size: 1rem;
	line-height: 1.4;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.bm-form textarea {
	resize: vertical;
	min-height: 8rem;
}

.bm-form input::placeholder,
.bm-form textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.bm-form input:focus-visible,
.bm-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}

/* Inline form: one email field and a button on a single row. Used both on the
   full-width navy band and inside the light card at the end of a post. */
.bm-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 520px;
	margin-top: 1.5rem;
}

.bm-newsletter-form input[type="email"] {
	flex: 1 1 240px;
}

/* On the navy band the form is centered and the input border lightens so it
   reads against the gradient. The surface-grey border disappears there. */
.has-navy-depth-gradient-background .bm-newsletter-form {
	margin-left: auto;
	margin-right: auto;
}

.has-navy-depth-gradient-background .bm-newsletter-form input[type="email"] {
	border-color: rgba(255, 255, 255, 0.4);
}

.bm-newsletter-form .wp-element-button {
	flex: 0 0 auto;
	cursor: pointer;
	border: none;
}

/* Card layout: the stacked panel on the dedicated newsletter page. */
.bm-newsletter-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bm-newsletter-card .bm-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.bm-newsletter-card .bm-field {
	/* Two fields in a narrow card: stack them rather than splitting the card in
	   half, which leaves each input too short to read a typed address in. */
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.bm-newsletter-card label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.bm-newsletter-card label span[aria-hidden="true"] {
	color: var(--wp--preset--color--primary);
}

.bm-newsletter-card .wp-element-button {
	align-self: flex-start;
	cursor: pointer;
	border: none;
}

/* Contact card: the stacked panel on the contact page. Same field treatment as the
   newsletter card, but every field is its own full-width row, because a two-up row of
   half-width fields inside the card is what made the old form read as broken on a
   phone. Name, email, phone, firm, and message all stack. */
.bm-contact-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bm-contact-card .bm-field-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bm-contact-card .bm-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.bm-contact-card label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.bm-contact-card label span[aria-hidden="true"] {
	color: var(--wp--preset--color--primary);
}

.bm-contact-card .wp-element-button {
	align-self: flex-start;
	cursor: pointer;
	border: none;
}

/* Fine print under the card form. */
.bm-form-fineprint {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Error notice, shown when the submission comes back with bm_form_error. */
.bm-form-notice {
	flex: 1 1 100%;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 0.9rem;
	margin: 0;
}

.bm-form-notice--error {
	background: #fdecea;
	color: #8a1c11;
	border: 1px solid #f3c0bb;
}

@media (max-width: 600px) {
	.bm-newsletter-form .wp-element-button,
	.bm-newsletter-card .wp-element-button,
	.bm-contact-card .wp-element-button {
		width: 100%;
	}
}

/* Consent line under the inline form. Smaller and quieter than the card's. */
.bm-newsletter-consent {
	font-size: 0.8125rem;
	line-height: 1.5;
	margin-top: 0.75rem;
}

/* Hub graphic on the website design page: the site at the center with the six services feeding
 * it. Vector, so it stays sharp at any width. Two versions ship: the ring beside the copy on a
 * desktop, and a portrait version below the copy on a phone, where six cards around a circle
 * would put every label under 7px. The breakpoint matches the one WordPress stacks columns at.
 * The type rules live here because SVG text takes none of the block editor typography settings. */
.bm-hub {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
}

.bm-hub--wide {
	max-width: 660px;
}

.bm-hub--tall {
	display: none;
	max-width: 400px;
}

@media (max-width: 781px) {
	.bm-hub--wide { display: none; }
	.bm-hub--tall { display: block; }
}

.bm-hub .bm-hub-label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.05em;
	fill: var(--wp--preset--color--contrast);
}

.bm-hub .bm-hub-center {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0.12em;
	fill: #ffffff;
}

.bm-hub--tall .bm-hub-label { font-size: 15px; }
.bm-hub--tall .bm-hub-center { font-size: 12px; letter-spacing: 0.1em; }

/* Funnel graphic on the PPC page (Brent's Canva design, 2026-09-04). Two files: the landscape one
 * beside the copy on desktop, and a stacked one, funnel over card, on phones. */
.bm-funnel-figure { margin: 0; }
.bm-funnel-figure--tall { display: none; max-width: 420px; margin-inline: auto; }
/* Brent, 2026-09-04: no funnel on phones. The stacked file was stitched from the landscape export
 * and showed seams, so under 782px neither file renders. Restore the phone version by setting
 * .bm-funnel-figure--tall back to display: block here. */
@media (max-width: 781px) {
	.bm-funnel-figure--wide { display: none; }
	.bm-funnel-figure--tall { display: none; }
}