/*
Theme Name: TBHA 2026
Theme URI: https://www.texas-business-home-auto-insurance.com/
Author: Texas Business Home Auto Insurance
Description: Block theme for Texas Business Home Auto Insurance. Quote-focused layouts for business, home and auto insurance, built on WordPress block templates with no page builder dependency.
Version: 3.3.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tbha
Tags: block-theme, business, insurance, one-column, custom-colors, custom-logo, editor-style, full-site-editing, wide-blocks, accessibility-ready
*/

/*
 * Design tokens live in theme.json. This file is the component layer.
 *
 * House rules this stylesheet is built to:
 *   - Elevation is hairline borders. Shadows are only for things that float
 *     above the page (the hero panel, an open FAQ, the stuck header).
 *   - No decorative gradients. The one gradient here is the scrim over the
 *     hero photograph, which exists so white text stays legible on it.
 *   - Motion is 140-220ms, ease-out, on transform/opacity/color only.
 *   - Neutrals are tuned: off-white background, near-black ink, one grey ramp.
 */

/* ===============================================================
 * Aliases for the theme.json tokens
 * =============================================================== */

:root {
	--tbha-radius-sm: var(--wp--custom--tbha--radius--sm);
	--tbha-radius-md: var(--wp--custom--tbha--radius--md);
	--tbha-radius-lg: var(--wp--custom--tbha--radius--lg);
	--tbha-radius-xl: var(--wp--custom--tbha--radius--xl);
	--tbha-radius-pill: var(--wp--custom--tbha--radius--pill);

	--tbha-shadow-sm: var(--wp--custom--tbha--shadow--sm);
	--tbha-shadow-md: var(--wp--custom--tbha--shadow--md);
	--tbha-shadow-lg: var(--wp--custom--tbha--shadow--lg);
	--tbha-shadow-xl: var(--wp--custom--tbha--shadow--xl);

	--tbha-brand: var(--wp--preset--color--primary);
	--tbha-brand-deep: var(--wp--preset--color--primary-dark);
	--tbha-accent: var(--wp--preset--color--accent);
	--tbha-ink: var(--wp--preset--color--contrast);
	--tbha-muted: var(--wp--preset--color--muted-text);
	--tbha-line: var(--wp--preset--color--hairline);
	--tbha-paper: var(--wp--preset--color--base);

	--tbha-out: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--tbha-in: 140ms cubic-bezier(0.55, 0.06, 0.68, 0.19);

	/* One small z-index scale. Nothing else in the theme sets z-index. */
	--tbha-z-sticky: 100;
	--tbha-z-overlay: 200;
}

/* ===============================================================
 * Base
 * =============================================================== */

/*
 * WordPress core does not ship a universal box-sizing reset, and neither did
 * this theme. Anything combining `width: 100%` with padding therefore
 * overflowed its container by exactly the padding: the quote form's inputs
 * spilled into the next grid column, and every row of the mobile menu ran
 * 48px past its own band. Both were patched locally before; this closes the
 * class of bug.
 *
 * :where() keeps specificity at zero so a component can still opt out with a
 * plain `box-sizing: content-box` and no specificity fight.
 */
:where(*, *::before, *::after) {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Body copy gets a measure. Long lines are the fastest way to make a page
   feel like a document rather than a designed page. */
:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible,
:where(summary):focus-visible,
:where(.wp-block-button__link):focus-visible {
	outline: 3px solid var(--tbha-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.tbha-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;
}

/* ===============================================================
 * Masthead
 * =============================================================== */

.tbha-masthead {
	position: sticky;
	top: 0;
	z-index: var(--tbha-z-sticky);
	isolation: isolate;
}

/* --- Utility strip --------------------------------------------- */

.tbha-utility {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.01em;
}

.tbha-utility p {
	margin: 0;
}

.tbha-utility a {
	color: inherit;
	text-decoration: none;
	opacity: 0.88;
	transition: opacity var(--tbha-out);
}

.tbha-utility a:hover {
	opacity: 1;
	text-decoration: underline;
}

.tbha-utility .tbha-contact-link svg {
	width: 0.9rem;
	height: 0.9rem;
}

/* The utility bar renders the address on one line via the block attribute,
   so it aligns with the rest of the strip. */
.tbha-utility .tbha-contact-link--address {
	align-items: center;
}

.tbha-utility .tbha-contact-link--address svg {
	margin-block-start: 0;
}

.tbha-utility__hours,
.tbha-utility__parent {
	opacity: 0.88;
}

@media (max-width: 900px) {
	.tbha-utility {
		display: none;
	}
}

/* --- Main bar --------------------------------------------------- */

.tbha-header {
	background-color: var(--tbha-paper);
	border-bottom: 1px solid var(--tbha-line);
}

.tbha-brand .wp-block-site-logo img {
	height: auto;
	max-height: 58px;
	width: auto;
}

/* The text title is a fallback for before a logo is uploaded. */
.wp-block-site-logo + .tbha-brand__fallback {
	display: none;
}

.tbha-header__end {
	gap: clamp(1rem, 0.2rem + 1.6vw, 2.25rem) !important;
}

/* --- Navigation -------------------------------------------------- */

.tbha-nav {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1rem;
}

.tbha-nav a:where(:not(.wp-element-button)) {
	position: relative;
	padding-block: 0.4rem;
	text-decoration: none;
	color: var(--tbha-ink);
	transition: color var(--tbha-out);
}

.tbha-nav a:where(:not(.wp-element-button))::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: var(--tbha-brand);
	transition: left var(--tbha-out), right var(--tbha-out);
}

.tbha-nav a:where(:not(.wp-element-button)):hover::after,
.tbha-nav .current-menu-item > a::after {
	left: 0;
	right: 0;
}

/* --- Call box ---------------------------------------------------- */

.tbha-callbox {
	gap: 0.7rem !important;
	align-items: center;
}

.tbha-callbox__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: var(--tbha-radius-pill);
	background: var(--wp--preset--color--brand-tint);
	color: var(--tbha-brand);
}

.tbha-callbox__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.tbha-callbox__text {
	line-height: 1.25;
}

/* Block layout adds a top margin to the first child; the label sits tight
   against the top of the box instead. */
.tbha-callbox__text > * {
	margin-block: 0;
}

.tbha-callbox__label {
	margin: 0 0 0.1rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--tbha-muted);
}

.tbha-callbox__number,
a.tbha-callbox__number {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	white-space: nowrap;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--tbha-ink);
	text-decoration: none;
	transition: color var(--tbha-out);
}

.tbha-callbox__number:hover {
	color: var(--tbha-brand);
}

/* Superseded below: the callbox stays, it just gets narrower. */

/* ===============================================================
 * Section furniture
 * =============================================================== */

.tbha-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.9rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* At 17px/700 this is below the large-text threshold, so it needs 4.5:1.
	   The brand orange is 4.28:1 on the surface tint; primary-dark is 6.19:1. */
	color: var(--tbha-brand-deep);
}

.tbha-eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	margin-inline-end: 0.15rem;
	background: currentColor;
}

/* Over a photograph the rule reads as a stray mark, so it is dropped. */
.tbha-eyebrow--light::before {
	display: none;
}

/* Centred intros drop the rule, which only reads well left-aligned. */
.tbha-section-intro {
	text-align: center;
}

.tbha-section-intro .tbha-eyebrow::before {
	display: none;
}

.tbha-section-intro h2 {
	text-wrap: balance;
}

.tbha-eyebrow--light {
	color: color-mix(in srgb, var(--tbha-paper) 92%, transparent);
}

/* ===============================================================
 * Hero
 * =============================================================== */

.tbha-hero {
	position: relative;
	isolation: isolate;
}

/* The inner container above is the gutter; the cover's own global padding
   would double it. */
.tbha-hero .wp-block-cover__inner-container.has-global-padding,
.tbha-page-hero .wp-block-cover__inner-container.has-global-padding {
	padding-inline: 0;
}

@media (max-width: 1240px) {
	.tbha-hero .wp-block-cover__inner-container.has-global-padding,
	.tbha-page-hero .wp-block-cover__inner-container.has-global-padding {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

.tbha-hero .wp-block-cover__image-background {
	object-position: center 38%;
}

/* The one gradient in the theme: a scrim so white type stays legible over a
   photograph. Core's cover rules outrank a theme-added overlay, so it is
   applied to the block's own background layer. */
.wp-block-cover.tbha-hero .wp-block-cover__background,
.wp-block-cover.tbha-hero span.wp-block-cover__background {
	background: linear-gradient(
		100deg,
		rgba(10, 14, 22, 0.94) 0%,
		rgba(10, 14, 22, 0.82) 40%,
		rgba(10, 14, 22, 0.48) 74%,
		rgba(10, 14, 22, 0.3) 100%
	);
	background-color: transparent !important;
	opacity: 1 !important;
}

.tbha-hero h1 {
	text-wrap: balance;
}

.tbha-hero .wp-block-column p,
.tbha-hero .wp-block-column h1 {
	margin-inline: 0 !important;
}

/* Trust badges under the hero copy. */
.tbha-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.tbha-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.9rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--tbha-paper);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--tbha-radius-pill);
}

.tbha-badge svg {
	width: 1rem;
	height: 1rem;
	opacity: 0.9;
}

/* The quote panel floats over the photograph, so it earns a shadow. */
.tbha-hero-panel {
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--tbha-radius-lg);
	background: rgba(10, 14, 22, 0.72);
	box-shadow: var(--tbha-shadow-xl);
}

/* ===============================================================
 * Stats
 * =============================================================== */

.tbha-stat__figure {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--tbha-brand);
}

.tbha-stat__label {
	margin-block-start: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--tbha-muted);
}

.tbha-card--dark .tbha-stat__figure,
.has-contrast-background-color .tbha-stat__figure {
	color: var(--tbha-paper);
}

.tbha-card--dark .tbha-stat__label,
.has-contrast-background-color .tbha-stat__label {
	color: color-mix(in srgb, var(--tbha-paper) 72%, transparent);
}

/* ===============================================================
 * Cards — hairline borders, no resting shadow
 * =============================================================== */

.tbha-card,
.is-style-tbha-card {
	position: relative;
	height: 100%;
	background: var(--tbha-paper);
	border: 1px solid var(--tbha-line);
	border-radius: var(--tbha-radius-lg);
	transition: transform var(--tbha-out), border-color var(--tbha-out);
}

.tbha-card:hover,
.is-style-tbha-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--tbha-brand) 45%, transparent);
}

.tbha-card--flat,
.tbha-card--flat:hover {
	transform: none;
}

/* Coverage cards: the photograph bleeds to the card edge. */
.tbha-card--media {
	overflow: hidden;
}

.tbha-card__media {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--40);
	overflow: hidden;
}

.tbha-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tbha-card:hover .tbha-card__media img {
	transform: scale(1.04);
}

.tbha-card--media > :not(.tbha-card__media) {
	padding-inline: var(--wp--preset--spacing--50);
}

/* Chip naming the line of cover, sitting on the photo. */
.tbha-card__tag {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tbha-paper);
	background: var(--tbha-brand);
	border-radius: var(--tbha-radius-pill);
}

/* Next-step link, which reads as an action rather than body text. */
.tbha-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--tbha-brand);
}

.tbha-arrow-link::after {
	content: "→";
	transition: transform var(--tbha-out);
}

.tbha-card:hover .tbha-arrow-link::after,
.tbha-arrow-link:hover::after {
	transform: translateX(4px);
}

/* Icon chip. */
.tbha-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--tbha-radius-md);
	background: var(--wp--preset--color--brand-tint);
	color: var(--tbha-brand);
}

.tbha-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.tbha-icon--accent {
	background: var(--wp--preset--color--accent-tint);
	color: var(--tbha-accent);
}

.tbha-card--dark .tbha-icon {
	background: rgba(255, 255, 255, 0.14);
	color: var(--tbha-paper);
}

/* ===============================================================
 * Numbered process
 * =============================================================== */

.tbha-step {
	position: relative;
	padding-top: 4rem;
	text-align: center;
}

/* The rule runs behind the number and stops at the column edges. */
.tbha-step::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--tbha-line);
}

.tbha-step__number {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--tbha-paper);
	background: var(--tbha-brand);
	border-radius: var(--tbha-radius-pill);
	/* A ring in the section colour, so the rule appears to pass behind it. */
	box-shadow: 0 0 0 8px var(--wp--preset--color--surface);
}

/* The heading and copy are siblings of the number inside the column, so the
   column is what gets centred. */
.tbha-process .wp-block-column {
	text-align: center;
}

.tbha-process .wp-block-column p {
	margin-inline: auto;
	max-width: 34ch;
}

/* ===============================================================
 * Testimonials
 * =============================================================== */

.tbha-quote {
	position: relative;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--tbha-ink);
}

.tbha-quote::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.5rem;
	line-height: 0.7;
	color: color-mix(in srgb, var(--tbha-brand) 34%, transparent);
	margin-block-end: 0.75rem;
}

/* The featured quote is deliberately bigger than the two beside it. */
.tbha-quote--lead {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.45;
}

.tbha-rating {
	margin: 0 0 0.5rem;
	color: #c9791f;
	letter-spacing: 0.18em;
	font-size: 1rem;
}

.tbha-attribution {
	font-size: var(--wp--preset--font-size--small);
	color: var(--tbha-muted);
}

.tbha-attribution strong {
	display: block;
	color: var(--tbha-ink);
}

/* ===============================================================
 * FAQ
 * =============================================================== */

.tbha-faq details,
details.is-style-tbha-faq {
	padding: 1.35rem 1.5rem;
	background: var(--tbha-paper);
	border: 1px solid var(--tbha-line);
	border-radius: var(--tbha-radius-md);
	transition: border-color var(--tbha-out);
}

.tbha-faq details + details {
	margin-top: 0.75rem;
}

/* An open panel is the one thing on the page that floats. */
.tbha-faq details[open] {
	border-color: color-mix(in srgb, var(--tbha-brand) 35%, transparent);
	box-shadow: var(--tbha-shadow-md);
}

.tbha-faq summary,
details.is-style-tbha-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.4;
	list-style: none;
}

.tbha-faq summary::-webkit-details-marker {
	display: none;
}

.tbha-faq summary::after {
	content: "";
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: var(--tbha-radius-pill);
	background-color: var(--wp--preset--color--brand-tint);
	background-image: linear-gradient(var(--tbha-brand), var(--tbha-brand)),
		linear-gradient(var(--tbha-brand), var(--tbha-brand));
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.7rem 2px, 2px 0.7rem;
	transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tbha-faq details[open] summary::after {
	transform: rotate(135deg);
}

.tbha-faq details > :not(summary) {
	margin-block-start: 0.85rem;
	color: var(--tbha-muted);
	max-width: 68ch;
}

/* ===============================================================
 * Page hero (inner pages)
 * =============================================================== */

.tbha-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.tbha-page-hero .wp-block-cover__image-background {
	object-position: center 45%;
}

.wp-block-cover.tbha-page-hero .wp-block-cover__background,
.wp-block-cover.tbha-page-hero span.wp-block-cover__background {
	/* Weighted to the left, where the copy sits, and clearing by the middle
	   so the photograph is actually visible. */
	background: linear-gradient(
		90deg,
		rgba(10, 14, 22, 0.92) 0%,
		rgba(10, 14, 22, 0.82) 30%,
		rgba(10, 14, 22, 0.45) 58%,
		rgba(10, 14, 22, 0.12) 100%
	);
	background-color: transparent !important;
	opacity: 1 !important;
}

/* The cover is full-bleed, but its contents belong in the same 1200px box as
   the rest of the site. The inner container becomes that box; the copy then
   starts at the box's left edge rather than the viewport's. */
.tbha-page-hero .wp-block-cover__inner-container,
.tbha-hero .wp-block-cover__inner-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: 0;
}

/* Below the box width the copy needs a gutter of its own. */
@media (max-width: 1240px) {
	.tbha-page-hero .wp-block-cover__inner-container,
	.tbha-hero .wp-block-cover__inner-container {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

/* Core centres constrained children with !important, so the hero copy needs
   the same weight to sit left inside that box. */
.tbha-page-hero .wp-block-cover__inner-container > .wp-block-group {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
	max-width: 38rem;
}

.tbha-page-hero .wp-block-cover__inner-container > .wp-block-group > * {
	margin-inline: 0 !important;
}

.tbha-breadcrumb {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--tbha-paper) 70%, transparent);
}

.tbha-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.tbha-breadcrumb a:hover {
	color: var(--tbha-paper);
	text-decoration: underline;
}

/* ===============================================================
 * Trust strip
 * =============================================================== */

.tbha-trust {
	border-block: 1px solid var(--tbha-line);
	background: var(--tbha-paper);
}

.tbha-trust__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}

.tbha-trust__item svg {
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	color: var(--tbha-brand);
}

/* ===============================================================
 * Lists
 * =============================================================== */

.tbha-checklist,
.tbha-watchlist,
.is-style-tbha-plain-list {
	list-style: none;
	padding-left: 0;
}

.tbha-checklist li,
.tbha-watchlist li {
	position: relative;
	padding-left: 2.1rem;
	margin-bottom: 0.9rem;
	line-height: 1.6;
}

.tbha-checklist li::before,
.tbha-watchlist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: var(--tbha-radius-pill);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.85rem;
}

.tbha-checklist li::before {
	background-color: var(--wp--preset--color--brand-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d93908'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E");
}

/* Caution items read differently from the things that are covered. */
.tbha-watchlist li::before {
	background-color: var(--wp--preset--color--accent-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234b66db'%3E%3Cpath d='M12 3 1.5 21h21zm0 4.8 6.6 10.7H5.4zM11 11v4h2v-4zm0 5.2v2h2v-2z'/%3E%3C/svg%3E");
}

/* ===============================================================
 * Photography
 * =============================================================== */

.tbha-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tbha-radius-lg);
}

/* ===============================================================
 * Buttons
 * =============================================================== */

.wp-block-button__link {
	transition: background-color var(--tbha-out), transform var(--tbha-out),
		color var(--tbha-out);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--tbha-brand) 10%, transparent);
}

/* ===============================================================
 * CTA band — flat brand colour, no gradient
 * =============================================================== */

.tbha-cta a:where(:not(.wp-element-button)) {
	color: var(--tbha-paper);
	text-decoration: none;
}

.tbha-cta a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

.tbha-cta .tbha-contact-link {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

/* ===============================================================
 * Footer
 * =============================================================== */

/* Block layout puts a gap between the last section and the footer; the two
   should meet edge to edge. */
.wp-site-blocks > .wp-block-template-part:last-child,
.wp-site-blocks > main + .wp-block-template-part {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	margin-block-end: 0;
}

.tbha-footer__logo img {
	max-width: 220px;
	height: auto;
	/* The logo is drawn for light backgrounds; a white plate keeps the red
	   and blue true rather than dimming them against the dark footer. */
	padding: 0.7rem 0.9rem;
	background: var(--tbha-paper);
	border-radius: var(--tbha-radius-md);
}

.tbha-footer a:where(:not(.wp-element-button)) {
	color: var(--tbha-paper);
	opacity: 0.82;
	text-decoration: none;
	transition: opacity var(--tbha-out);
}

.tbha-footer a:where(:not(.wp-element-button)):hover {
	opacity: 1;
	text-decoration: underline;
}

.tbha-footer .wp-block-heading {
	margin-block-end: 1rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--tbha-paper) 60%, transparent);
}

/* Contact icons carry the brand colour rather than washed-out white. */
.tbha-footer__contact .tbha-contact-link svg {
	color: var(--tbha-brand);
	opacity: 1;
}

.tbha-footer__contact .tbha-contact-link {
	align-items: flex-start;
	gap: 0.65rem;
}

.tbha-footer__contact .tbha-contact-link svg {
	margin-block-start: 0.2rem;
}

/* Opening hours as a term / value pair, so the times line up. */
.tbha-hours {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.tbha-hours > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	padding-block: 0.3rem;
}

.tbha-hours dt {
	min-width: 5rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--tbha-paper) 70%, transparent);
}

.tbha-hours dd {
	margin: 0;
}

.tbha-footer__legal {
	color: color-mix(in srgb, var(--tbha-paper) 62%, transparent);
}

.tbha-footer__legal p {
	margin: 0;
}

/* ===============================================================
 * Contact links (plugin block)
 * =============================================================== */

.tbha-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	line-height: 1.45;
}

.tbha-contact-link svg {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
	opacity: 0.75;
}

.tbha-contact-link--address {
	align-items: flex-start;
}

.tbha-contact-link--address svg {
	margin-block-start: 0.2rem;
}

/* ===============================================================
 * Motion preferences
 * =============================================================== */

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

	.tbha-card:hover,
	.wp-block-button__link:hover,
	.tbha-card:hover .tbha-card__media img {
		transform: none;
	}
}

/* ===============================================================
 * Section rhythm
 * =============================================================== */

/* Sections alternate paper / surface. Where two paper sections touch, a
   hairline keeps them from reading as one long block. */
.tbha-section-divided {
	border-top: 1px solid var(--tbha-line);
}

/* Credit line under the section photograph. Sits with the image rather than
   at the end of the copy column, where it read as part of the argument. */
.tbha-photo-note {
	max-width: 34rem;
	line-height: 1.5;
}

.tbha-photo-note a {
	color: var(--tbha-brand-deep);
	text-underline-offset: 0.18em;
}

/* ===============================================================
 * Dark section
 * ===============================================================
 * One dark band mid-page. It breaks a long run of light sections and
 * gives the strongest claim on the page somewhere to land.
 */

.tbha-section-dark {
	--tbha-on-dark: rgba(252, 252, 253, 0.74);
	isolation: isolate;
}

.tbha-section-dark .wp-block-column p,
.tbha-section-dark .tbha-section-intro p:not(.tbha-eyebrow) {
	color: var(--tbha-on-dark);
}

.tbha-section-dark .wp-block-heading {
	color: var(--wp--preset--color--base);
}

/* The eyebrow rule is drawn in the brand colour, which reads on the dark
   panel; the label itself needs lifting off the near-black. */
.tbha-section-dark .tbha-eyebrow {
	color: var(--wp--preset--color--base);
}

.tbha-section-dark a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
	text-decoration-color: rgba(252, 252, 253, 0.45);
}

.tbha-section-dark a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

/* ===============================================================
 * Map embed
 * =============================================================== */

.tbha-map {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--tbha-line);
	border-radius: var(--tbha-radius-lg);
	background: var(--wp--preset--color--surface);
}

.tbha-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 781px) {
	.tbha-map {
		aspect-ratio: 3 / 2;
	}
}

/* Hours list on a light background needs the opposite ink to the footer. */
.tbha-hours--light dt {
	color: var(--tbha-ink);
}

.tbha-hours--light dd {
	color: var(--tbha-muted);
}

/* A card's one outgoing link, set apart from the body copy above it. */
.tbha-card__link {
	margin-block-start: auto;
	padding-block-start: 0.35rem;
	font-weight: 600;
}

.tbha-card__link a {
	color: var(--tbha-brand-deep);
	text-underline-offset: 0.18em;
}

/* ===============================================================
 * Focus and fragment targets
 * ===============================================================
 * The masthead is sticky, so an un-offset jump to #what-we-cover or to a
 * field named by the form's error summary puts the target behind it.
 */

html {
	scroll-padding-top: 7rem;
}

@media (max-width: 900px) {
	html {
		scroll-padding-top: 5rem;
	}
}

/* Safari does not move focus on a fragment jump unless the target can hold
   it, which is what made the skip link a no-op there. */
main:focus {
	outline: none;
}

/* ===============================================================
 * Responsive header
 * ===============================================================
 * Core switches the navigation block to its overlay only below 600px. The
 * utility bar hides at 900px and the callbox at 1180px, which left a band
 * from 601px to 900px where six nav items, a 210px logo and a CTA button all
 * had to fit one row — they wrapped into a tall, ragged header on every
 * tablet. The hamburger now appears at the same 900px boundary.
 */

@media (max-width: 900px) {
	.tbha-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.tbha-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* The phone number is the primary conversion path, so it stays on every
   screen. Below 1180px it sheds the "Speak to our agency" label and the
   number itself keeps its tap target; only under 560px, where the logo and
   hamburger need the room, does it fall back to the icon alone. */
@media (max-width: 1180px) {
	.tbha-callbox__label {
		display: none;
	}
}

@media (max-width: 560px) {
	.tbha-callbox__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;
	}
}

/* ===============================================================
 * Layout stability
 * =============================================================== */

/* Without this the 185KB photo reserves no height until it has downloaded,
   which shifts everything below it. Matches the 1200x750 source. */
.tbha-photo img {
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
}

/* WebKit drops the list role when list-style is none, so these need it back.
   Applied here rather than in markup because several are raw HTML blocks. */
.tbha-checklist,
.tbha-watchlist,
.tbha-badges,
.is-style-tbha-plain-list {
	list-style: none;
}

/* ===============================================================
 * Breadcrumb
 * ===============================================================
 * Now a nav > ol for screen readers, which without these rules renders as a
 * numbered, stacked list and pushes the hero headline down the page.
 */

.tbha-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tbha-breadcrumb li {
	display: inline;
	margin: 0;
}

/* The separator is generated, so it is never read out as content. */
.tbha-breadcrumb li + li::before {
	content: "/";
	margin-inline-end: 0.5rem;
	opacity: 0.6;
}

.tbha-breadcrumb [aria-current="page"] {
	color: var(--tbha-paper);
}

/* ===============================================================
 * Mobile header and overlay menu
 * =============================================================== */

@media (max-width: 900px) {
	/* The hamburger is the last thing the thumb reaches for, so it sits at
	   the end of the row rather than before the phone number. */
	.tbha-header__end {
		justify-content: flex-end;
	}

	.tbha-header__end .tbha-nav {
		order: 2;
	}

	.tbha-header__end .tbha-callbox {
		order: 1;
	}
}

/* Three competing calls to action do not fit a phone. The number stays (it
   is the one-tap path) and the hero's own button carries the quote. */
@media (max-width: 700px) {
	.tbha-header__end .wp-block-buttons {
		display: none;
	}
}

/* --- The overlay itself ------------------------------------------ */

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	background-color: var(--tbha-paper);
	padding: 0;
	max-width: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	margin-block-start: 0;
}

/* Close button: 44px is the minimum comfortable tap target, and the default
   glyph is far smaller than that. */
.wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--tbha-radius-pill);
	background: var(--wp--preset--color--surface);
	color: var(--tbha-ink);
}

.wp-block-navigation__responsive-container-close svg {
	width: 1.75rem;
	height: 1.75rem;
}

/* Open button matches it, so the two read as the same control. */
.wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--tbha-radius-pill);
	color: var(--tbha-ink);
}

.wp-block-navigation__responsive-container-open svg {
	width: 1.6rem;
	height: 1.6rem;
}

/* --- Menu items --------------------------------------------------- */

/* Core leaves the list right-aligned, inset and hugging its content. The
   overlay rows want to run edge to edge so each one is its own band. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding: 4.5rem 0 0;
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
	align-items: stretch;
	justify-content: flex-start;
	border-block-start: 1px solid var(--tbha-line);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	width: 100%;
	display: block;
	border-block-end: 1px solid var(--tbha-line);
}

/* The band sits on the link, not the li: core sets the li to
   `background-color: inherit`, which is not worth fighting when the link
   already fills the row. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 1.15rem 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 600;
	text-align: center;
	color: var(--tbha-ink);
	text-decoration: none;
	background: var(--tbha-paper);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item:nth-child(even) .wp-block-navigation-item__content {
	background: var(--wp--preset--color--surface);
}

/* The desktop underline animation has no place in a stacked list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::after {
	content: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus-visible {
	color: var(--tbha-brand-deep);
	background: var(--wp--preset--color--brand-tint);
}