/**
 * assets/city-page.css
 *
 * Spot-check-phase styling for /city/{slug}/ and /city/. Deliberately
 * plain — just enough structure/spacing to read the resolved data
 * clearly. The real visual design (matching the brand's skew/transform
 * language, #E3562F accent, Instrument Sans tokens from bpro-2026.css)
 * comes in the next pass once the content itself is verified.
 */

.bpro-city-page {
	width: 100%;
	margin: 0;
	padding: 0;
}

.bpro-city-hero {
	margin-bottom: 0;
}

.bpro-city-hero h1 {
	margin-bottom: 0.5rem;
}

.bpro-city-subhead {
	opacity: 0.75;
}
.bpro-city-page .bpro-2026-city-header .bpro-title-h2-2026 h2 {
	color: #fcfcfa;
}

/* ── Data sections (shipping/registration/picks/faq/nearby/cta) ─────────── */

.bpro-city-section {
	padding: 2% 4%;
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.bpro-city-section:last-of-type {
	border-bottom: none;
}

/* ── Page-heading hero ─────────────────────────────────────────────────────
 * bpro-2026.css (confirmed uploaded — this is the site's real global
 * stylesheet, loaded on every page) already fully styles
 * .bpro-title-2026-h1 h1 and .bpro-title-h2-2026 h2/.elementor-widget-container
 * (fonts, colors, and their OWN padding/margin — the h1 uses margin-top:18%
 * + padding-left directly on the tag, the h2 widget-container has its own
 * padding: 1% 55% 4% 4%). Do NOT add padding or color here — that was the
 * double-padding bug last round, stacking our own padding on top of
 * padding those rules already apply.
 *
 * The ONE thing genuinely missing: this template renders on a virtual URL
 * with no real WP post ID, so it never gets the per-post CSS file
 * Elementor normally generates for a section's configured min-height —
 * that's why bpro-2026.css has min-height rules scoped per page-type
 * (.bpro-2026-cleared-header, etc.) but nothing for a "city" page type,
 * since that never existed as a real edited post. .bpro-2026-city-header
 * supplies just that value (confirmed 25vh, matching every other
 * pageheading variant Daniel checked), plus the overlay's absolute
 * positioning so the background-image inline style has an actual box to
 * paint into. */
 
 .bpro-city-page .home-2026-steps-cols {
	 padding: 2% 4%;
 }

.bpro-city-page .bpro-2026-pageheading {
	position: relative;
	overflow: hidden;
	background-color: #231F20; /* fallback for cities without an uploaded hero image yet — keeps the white/#FCFCFA heading text (set by bpro-2026.css) readable */
}

.bpro-city-page .bpro-2026-pageheading .elementor-background-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bpro-city-page .bpro-2026-pageheading .elementor-container {
	position: relative;
	z-index: 1;
	width: 100%;
}

.bpro-city-page .bpro-2026-city-header > .elementor-container {
	min-height: 25vh;
}

/* 4-column how-it-works: no override needed — bpro-2026.css already
 * handles this via .home-2026-steps-cols .elementor-column (1em padding
 * + border + corner marks per column, not section-level 2% 4%). The
 * "missing padding" turned out to be this template not loading
 * bpro-2026.css's real column rules at all, not a genuine gap in them. */

.bpro-city-shipping-cost {
	font-size: 1.15rem;
	font-weight: 600;
}

.bpro-city-estimated {
	font-weight: 400;
	opacity: 0.65;
	font-size: 0.85em;
}

.bpro-city-hub {
	opacity: 0.8;
}

.bpro-city-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35rem 1rem;
	margin: 1rem 0;
}

.bpro-city-facts dt {
	font-weight: 600;
	opacity: 0.7;
}

.bpro-city-facts dd {
	margin: 0;
}

.bpro-city-insurance {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
}

.bpro-city-insurance li {
	padding: 0.4rem 0;
}

.bpro-city-ins-note {
	opacity: 0.65;
	font-size: 0.9em;
}

.bpro-city-picks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.bpro-city-pick-card {
	border: 1px solid rgba(128, 128, 128, 0.25);
	border-radius: 8px;
	padding: 1rem;
}

.bpro-city-pick-card h3 {
	margin: 0 0 0.15rem;
	font-size: 1.05rem;
}

.bpro-city-pick-chassis {
	opacity: 0.6;
	font-size: 0.85rem;
	margin: 0 0 0.6rem;
}

.bpro-city-pick-specs {
	list-style: none;
	padding: 0;
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
}

.bpro-city-pick-specs li {
	padding: 0.1rem 0;
}

.bpro-city-pick-price {
	font-weight: 600;
	margin: 0;
}

.bpro-city-nearby-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.2rem;
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
}

.bpro-city-cta {
	text-align: center;
	border-bottom: none;
}

.bpro-city-cta-btn {
	display: inline-block;
	padding: 0.85rem 2rem;
	border-radius: 6px;
	background: #E3562F;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

/* ── Hub page (/city/) ─────────────────────────────────────────────────── */

.bpro-city-hub {
	max-width: 860px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
	text-align: center;
}

/* ── Background color override ───────────────────────────────────────────
 * Elementor sections on this page inherit whatever background the
 * .bpro-2026-* classes define elsewhere, but the brief asks for a flat
 * #fcfcfa across these sections specifically. */

.bpro-city-page,
.bpro-city-page .elementor-section:not(.bpro-2026-pageheading) {
	margin-top: 0 !important;
	background-color: #fcfcfa;
}
html[data-theme="dark"] .bpro-city-page,
html[data-theme="dark"] .bpro-city-page .elementor-section:not(.bpro-2026-pageheading) {
	background-color: #231f20;
}

/* ── FAQ accordion ──────────────────────────────────────────────────────
 * Self-contained styling + toggle behavior (see city-page.js). This
 * template renders outside Elementor's own document pipeline, so
 * Elementor's widget-specific accordion.min.css/js bundle isn't
 * guaranteed to be enqueued here even though the classnames match —
 * these rules make the accordion work correctly on its own regardless.
 */

.bpro-2026-faqs .elementor-accordion-item {
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.bpro-2026-faqs .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 0;
	cursor: pointer;
	font-weight: 600;
}

.bpro-2026-faqs .elementor-tab-title .elementor-accordion-title {
	order: 1;
}

.bpro-2026-faqs .elementor-tab-title .elementor-accordion-icon {
	order: 2;
	flex-shrink: 0;
	width: 1em;
	text-align: center;
}

.bpro-2026-faqs .elementor-accordion-icon-opened {
	display: none;
}

.bpro-2026-faqs .elementor-tab-title.elementor-active .elementor-accordion-icon-closed {
	display: none;
}

.bpro-2026-faqs .elementor-tab-title.elementor-active .elementor-accordion-icon-opened {
	display: inline;
}

.bpro-2026-faqs .elementor-accordion-title {
	text-decoration: none;
	color: inherit;
}

.bpro-2026-faqs .elementor-tab-content {
	padding: 0 0 1rem;
	opacity: 0.85;
}

/* ── New generic sections (why-us, testimonials, steps, shipping methods,
 * inventory banner, timeline, lowest-price, why-local) ─────────────────── */

.bpro-city-checklist {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
}

.bpro-city-checklist li {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.4rem;
}

.bpro-city-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75rem;
	width: 8px;
	height: 8px;
	background: #E3562F;
}

.bpro-city-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.bpro-city-testimonial {
	margin: 0;
	padding: 1.2rem;
	border-left: 3px solid #E3562F;
	background: rgba(227, 86, 47, 0.04);
}

.bpro-city-testimonial p {
	margin: 0 0 0.75rem;
	font-size: 0.92rem;
	opacity: 0.85;
}

.bpro-city-testimonial cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	font-size: 0.85rem;
}

.bpro-city-steps-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}

.bpro-city-step {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1.25rem;
	border: 1px solid rgba(128, 128, 128, 0.25);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	flex: 1 1 160px;
}

.bpro-city-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: #E3562F;
	color: #fff;
	font-weight: 600;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.bpro-city-step-label {
	font-weight: 600;
}

.bpro-city-invbanner,
.bpro-city-lowestprice {
	text-align: center;
}

.bpro-city-invbanner .bpro-city-cta-btn {
	margin-top: 0.75rem;
}

.bpro-city-whylocal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
	margin-top: 1rem;
}

.bpro-city-whylocal-grid h3 {
	margin-bottom: 0.5rem;
}