/* ==========================================================================
   HVACR Site Fixes — main banner + footer
   Target: Astra theme + Elementor content (homepage hero #hero-banner,
   footer HTML widget .hvacr-exact-footer).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MAIN BANNER — duplicate / tiling background
   --------------------------------------------------------------------------
   Root cause: the hero section was built in Elementor with
   background-size: auto + background-repeat: repeat. The 1922x820 banner
   image then TILES whenever the hero box is larger than the image (screens
   wider than 1922px, viewports where 80vh > 820px, browser zoom), which
   renders as stacked/side-by-side "duplicate" banners.

   Fix: one single covering background at every breakpoint. On a standard
   1920px-wide desktop the visual result is identical to the current look.
   -------------------------------------------------------------------------- */
#hero-banner {
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center center !important;
}

/* Never let the hero produce a horizontal scrollbar. */
#hero-banner {
	max-width: 100% !important;
	overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   2. MAIN BANNER — mobile "zoomed and cropped"
   --------------------------------------------------------------------------
   background-size: auto displayed the 1922px-wide image at 1:1 scale, so a
   ~390px phone only ever saw a narrow centre slice. `cover` scales the whole
   image to fill the hero. Additionally the hero CSS snippet sets
   background-attachment: fixed, which iOS Safari cannot honour and renders as
   a badly zoomed background — force scroll on touch devices.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 921px) {
	#hero-banner {
		background-attachment: scroll !important;
	}
}

/* --------------------------------------------------------------------------
   3. FOOTER — column alignment + overflow protection
   --------------------------------------------------------------------------
   The generated CSS used fixed pixel columns (205/205/205/234 + 49px gaps =
   1028px) that overflow their container on screens just under 1100px wide.
   Four fluid, equal columns can never overflow and stay aligned.
   -------------------------------------------------------------------------- */
/* Four fluid, equal columns can never overflow and stay aligned.
   Scoped to desktop: below 851px the widget's own media queries switch the
   grid to 2 columns (tablet) and 1 column (phone) and must keep winning. */
@media only screen and (min-width: 851px) {
	.hvacr-exact-footer .hvacr-exact-columns {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		column-gap: 40px !important;
		align-items: start !important;
	}
}

/* Keep the fixed min-heights from stretching the footer on small screens. */
@media only screen and (max-width: 850px) {
	.hvacr-exact-footer,
	.hvacr-exact-footer .hvacr-exact-inner {
		min-height: auto !important;
	}
}

/* --------------------------------------------------------------------------
   4. FOOTER — social icons (cropped Facebook "f")
   --------------------------------------------------------------------------
   The Facebook SVG (viewBox 0 0 23 27) was squeezed into a 16x18px box while
   the LinkedIn SVG uses a 24x24 viewBox, so the "f" rendered distorted and
   looked clipped next to "in". Give every icon the same square, centred box.
   -------------------------------------------------------------------------- */
.hvacr-exact-footer .hvacr-exact-socials {
	gap: 12px !important;
}

.hvacr-exact-footer .hvacr-exact-social-link {
	width: 22px !important;
	height: 22px !important;
	flex: 0 0 22px !important;
}

.hvacr-exact-footer .hvacr-exact-social-icon {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	max-width: none !important;
	fill: currentColor !important;
}

/* --------------------------------------------------------------------------
   5. FOOTER — newsletter email field
   --------------------------------------------------------------------------
   The widget's own CSS targets `.hvacr-exact-form`, but the markup has no
   such element (the opening <form> tag is missing), so the field fell back
   to browser defaults. Style the elements that actually exist.
   Required: white background, 25px radius, 7px 30px padding.
   -------------------------------------------------------------------------- */
#colophon .hvacr-exact-newsletter input[type="email"],
#colophon .hvacr-exact-newsletter input#hvacr-footer-email {
	display: block !important;
	width: 234px !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 0 12px !important;
	padding: 7px 30px !important;
	color: #434343 !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 25px !important;
	outline: 0 !important;
	box-shadow: none !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

#colophon .hvacr-exact-newsletter input[type="email"]::placeholder {
	color: #808080 !important;
	opacity: 1 !important;
}

#colophon .hvacr-exact-newsletter input[type="email"]:focus {
	box-shadow: 0 0 0 2px #00a58c !important;
}

/* --------------------------------------------------------------------------
   6. FOOTER — "Sign In" button
   --------------------------------------------------------------------------
   Same dead-selector problem as the field: Astra's global
   `input[type="submit"]` rule was styling this button with the site accent
   colour (pink). Re-style per spec: green background, white text, 25px
   radius, 10px 25px padding, uppercase — and NO colour inversion on hover.
   -------------------------------------------------------------------------- */
#colophon .hvacr-exact-newsletter button[type="submit"] {
	display: inline-block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 10px 25px !important;
	color: #ffffff !important;
	background: #00a58c !important;
	background-color: #00a58c !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 25px !important;
	outline: 0 !important;
	box-shadow: none !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 14px !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

/* Hover: keep the same green background and white text — no inversion. */
#colophon .hvacr-exact-newsletter button[type="submit"]:hover,
#colophon .hvacr-exact-newsletter button[type="submit"]:focus,
#colophon .hvacr-exact-newsletter button[type="submit"]:active {
	color: #ffffff !important;
	background: #00a58c !important;
	background-color: #00a58c !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 25px !important;
	box-shadow: none !important;
	transform: none !important;
}

/* --------------------------------------------------------------------------
   7. FOOTER — newsletter responsiveness
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 850px) {
	#colophon .hvacr-exact-newsletter input[type="email"],
	#colophon .hvacr-exact-newsletter input#hvacr-footer-email {
		width: 100% !important;
		max-width: 320px !important;
	}
}

@media only screen and (max-width: 600px) {
	.hvacr-exact-footer .hvacr-exact-columns {
		gap: 40px !important;
	}

	#colophon .hvacr-exact-newsletter input[type="email"],
	#colophon .hvacr-exact-newsletter input#hvacr-footer-email {
		width: 100% !important;
		max-width: 360px !important;
	}
}

/* ==========================================================================
   Phase 2/3 — Global polish, interior banners, buttons
   ========================================================================== */

:root {
	--hvacr-brand-green: #00a58c;
	--hvacr-brand-green-dark: #008f7a;
	--hvacr-brand-navy: #0f3a52;
	--hvacr-brand-blue: #124a68;
	--hvacr-radius-pill: 25px;
	--hvacr-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   A. Broken Smart Slider shells (interior page banners)
   All interior pages embed a Smart Slider 3 (ssid 3/4/5/7/8) whose slides no
   longer exist — the empty shell renders as a large blank block. JS
   (fixes.js) hides empty sliders; this rule is the no-JS fallback for the
   known-empty sliders.
   -------------------------------------------------------------------------- */
.elementor-shortcode .n2-section-smartslider { display: none !important; }

/* --------------------------------------------------------------------------
   B. Interior page banner — exact match of the LIVE Salient page header
   Live spec (all interior pages): 400px full-width band, page-specific
   1920x410 photo, background-position bottom|center, #000 base, white
   Open Sans 28px/300 subheader at bottom-center. No page title in the band.
   -------------------------------------------------------------------------- */
body:not(.home) article.page .entry-header {
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	width: 100vw;
	max-width: 100vw;
	height: 400px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	overflow-x: clip;
	padding: 0 24px 42px;
	background-color: #000000;
	background-image: var(--hvacr-banner-img) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: var(--hvacr-banner-pos, center) !important;
	text-align: center;
}

/* LIVE gradient panel behind the hero text: full-width bottom strip,
   teal -> blue -> deep sea at 80% opacity. The ::after tagline sits above it.
   (Matches the old Salient .row::before band: 90px desktop / 70px mobile.) */
body:not(.home) article.page .entry-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background-image: linear-gradient(90deg, #00a58c, #0088c7, #045f7f);
	opacity: 0.8;
	pointer-events: none;
}

/* The band carries no visible title on LIVE — keep the H1 in the DOM
   (SEO) but visually hidden. */
body:not(.home) article.page .entry-header .entry-title {
	font-size: 0 !important;
	margin: 0;
	color: transparent !important;
}

/* LIVE subheader line, bottom-center of every interior banner, above the bar. */
body:not(.home) article.page .entry-header::after {
	content: "We are all about building a partnership of trust and support.";
	position: relative;
	z-index: 1;
	font-family: "Open Sans", sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 1.3;
	color: #ffffff;
	max-width: 90%;
	text-wrap: balance;
}
@media only screen and (max-width: 1300px) {
	body:not(.home) article.page .entry-header::after {
		font-size: 24px;
	}
}

/* Tablet / mobile hero: fitted photo + attached bar (LIVE mobile reference).
   Fixed pixel heights + `cover` slice wide photos into a cropped strip, so
   here the banner is: 1) ::before = photo at its TRUE aspect ratio (full
   width visible, zero crop) with circles overlay left; 2) ::after tagline
   INSIDE a full-width gradient bar attached directly beneath the photo.
   The `html` prefix outranks the Section J banner rule regardless of file
   order, so only ONE photo can ever render. Desktop above 1024px untouched. */
@media only screen and (max-width: 1024px) {
	html body:not(.home) article.page .entry-header {
		display: block !important;
		height: auto;
		padding: 0;
		background: #ffffff !important;
		background-image: none !important;
		overflow: hidden;
	}
	html body:not(.home) article.page .entry-header::before {
		content: "";
		display: block;
		position: static;
		width: 100%;
		min-height: 80px;
		aspect-ratio: 2000 / 532;
		background-image:
			url("/wp-content/themes/hvacr/assets/images/inner-banner-circles.png"),
			var(--hvacr-banner-img) !important;
		background-repeat: no-repeat, no-repeat !important;
		background-size: contain, cover !important;
		background-position: left center, center center !important;
		opacity: 1;
	}
	html body.page-id-1636:not(.home) article.page .entry-header::before,
	html body.page-id-1989:not(.home) article.page .entry-header::before {
		aspect-ratio: 1920 / 410;
	}
	html body:not(.home) article.page .entry-header::after {
		display: block;
		max-width: none;
		margin: 0;
		padding: 18px 32px 20px;
		font-size: 22px;
		text-align: center;
		color: #ffffff;
		background-image: linear-gradient(90deg, rgba(0, 165, 140, 0.8), rgba(0, 136, 199, 0.8), rgba(4, 95, 127, 0.8));
	}
}
@media only screen and (max-width: 768px) {
	html body:not(.home) article.page .entry-header::after {
		font-size: 20px;
		padding: 16px 20px 18px;
	}
}
@media only screen and (max-width: 544px) {
	html body:not(.home) article.page .entry-header::after {
		font-size: 18px;
		line-height: 1.4;
		padding: 14px 16px 16px;
	}
}

/* About/Contact hero sections return to their original white title-band
   styling below the banner (no longer serving as the banner itself). */
section.hvs-about-hero,
section.hvs-contact-hero {
	background: #ffffff !important;
	color: #16324a;
	padding: clamp(48px, 7vw, 80px) 24px clamp(16px, 3vw, 24px) !important;
	text-align: center;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
.hvs-about-hero .hvs-about-eyebrow,
.hvs-contact-hero .hvs-contact-eyebrow { color: #00a58c; }
.hvs-about-hero .hvs-about-title,
.hvs-contact-hero .hvs-contact-title { color: #16324a; }

/* --------------------------------------------------------------------------
   C. Button system — unify Elementor buttons to the brand pill style
   -------------------------------------------------------------------------- */
.elementor a.elementor-button,
.elementor .elementor-button {
	background-color: var(--hvacr-brand-green) !important;
	color: #ffffff !important;
	border-radius: var(--hvacr-radius-pill) !important;
	padding: 13px 30px !important;
	font-family: inherit;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.elementor a.elementor-button:hover,
.elementor .elementor-button:hover,
.elementor a.elementor-button:focus,
.elementor .elementor-button:focus {
	background-color: var(--hvacr-brand-green-dark) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   D. Home hero — readability + heading refinement (Phase 3)
   LIVE reference: bright teal globe left, deep-blue text area right, NO
   dark veil and NO glossy sphere. The photo (main_banner1.jpg) already
   carries the gradient + line-art globe, so no overlay is painted on
   desktop — text contrast comes from the artwork itself plus text-shadow.
   -------------------------------------------------------------------------- */
#hero-banner {
	position: relative;
}
#hero-banner h3,
#hero-banner .e-heading-base {
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	line-height: 1.25 !important;
	text-shadow: 0 1px 8px rgba(9, 38, 56, 0.35);
}
#hero-banner .elementor-element-4f156c0,
#hero-banner > .e-con-inner {
	z-index: 1;
}

/* --------------------------------------------------------------------------
   D2. Homepage hero — reference artwork only (matches LIVE screenshot)
   Elementor layers circles.png + bluegreen-sphere.png on top of
   main_banner1.jpg, but the photo already contains the finished artwork
   (teal gradient + white line-art globe, globe left, clear text area
   right). Strip the extra overlay layers back to the photo so desktop
   matches the reference exactly; globe graphics then cannot mis-scale.
   -------------------------------------------------------------------------- */
body.home #hero-banner,
body.home .elementor-element.e-dccf50a {
	background-image: url("/wp-content/uploads/2026/09/main_banner1.jpg") !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center center !important;
}

/* Tablet (incl. 922–1024px gap where Elementor serves 1:1 `auto` tiles):
   keep photographic cover so the globe never tiles or over-zooms. */
@media only screen and (max-width: 1024px) {
	body.home #hero-banner,
	body.home .elementor-element.e-dccf50a {
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-attachment: scroll !important;
		background-position: center center !important;
	}
}

/* Mobile: frame the clean gradient side (LIVE mobile reference shows no
   globe) while the text sits on top; desktop/tablet keep the full artwork. */
@media only screen and (max-width: 767px) {
	body.home #hero-banner,
	body.home .elementor-element.e-dccf50a {
		background-position: right center !important;
	}
	body.home #hero-banner::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(9, 38, 56, 0.18), rgba(9, 38, 56, 0.05));
		pointer-events: none;
	}
}

/* --------------------------------------------------------------------------
    E. Mobile drawer — apply brand colours to the custom off-canvas menu
    -------------------------------------------------------------------------- */
html.hs-active,
html.hs-closing,
html.hs-active body,
html.hs-closing body {
	background: var(--hvacr-brand-navy) !important;
}
#hsMenu {
	background: var(--hvacr-brand-navy) !important;
}
html body button.hs-burger:hover { color: var(--hvacr-brand-green) !important; }

/* --------------------------------------------------------------------------
   F. Phase 3 keyframes + reduced-motion guard
   -------------------------------------------------------------------------- */
@keyframes hvacrFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	article.page .entry-header,
	.hvs-about-hero,
	.hvs-contact-hero {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   G. Elementor atomic buttons (e-button-base) — same brand pill system
   The hero "Learn More" uses Elementor v4 atomic markup, not .elementor-button.
   -------------------------------------------------------------------------- */
.elementor .e-button-base {
	background-color: var(--hvacr-brand-green) !important;
	color: #ffffff !important;
	border-radius: var(--hvacr-radius-pill) !important;
	padding: 13px 30px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.elementor .e-button-base:hover,
.elementor .e-button-base:focus {
	background-color: var(--hvacr-brand-green-dark) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   H. Brands carousel cards — stop mobile overflow
   Cards are flex-shrink:0 with no max width; on phones they exceed the
   viewport. Force one full-width card per view on small screens.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
	.brand-card {
		width: calc(100vw - 32px) !important;
		max-width: calc(100vw - 32px) !important;
	}
}

/* --------------------------------------------------------------------------
   I. Mobile menu — restore the hidden toggle
   The custom off-canvas menu CSS hides Astra's entire mobile header bar
   (which contains the menu toggle) but never injects its own burger button,
   leaving no way to open the menu on phones. Re-show the bar; the custom
   drawer JS hooks the toggle's click event.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 921px) {
	#ast-mobile-header {
		display: block !important;
	}
}

@media only screen and (max-width: 921px) {
	#ast-mobile-header .ast-button-wrap .menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 10px !important;
		background: transparent !important;
		border: 0 !important;
		color: #16324a !important;
		box-shadow: none !important;
	}
	#ast-mobile-header .ast-button-wrap .menu-toggle svg {
		fill: currentColor;
	}
}

@media only screen and (max-width: 921px) {
	#ast-mobile-header .ast-builder-grid-row {
		align-items: center !important;
	}
	#ast-mobile-header .site-header-primary-section-right {
		align-self: center !important;
		position: static !important;
		top: auto !important;
		transform: none !important;
		margin-top: 0 !important;
	}
}

@media only screen and (max-width: 921px) {
	#ast-mobile-header .ast-builder-grid-row {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		align-items: center !important;
	}
	#ast-mobile-header .site-header-primary-section-left {
		flex: 0 1 auto !important;
		min-width: 0 !important;
	}
	#ast-mobile-header .site-header-primary-section-right {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
	}
}


@media only screen and (max-width: 921px) {
	#ast-mobile-header .site-primary-header-wrap,
	#ast-mobile-header .ast-builder-grid-row-container {
		max-width: 100% !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	#ast-mobile-header .ast-builder-grid-row {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	#ast-mobile-header .site-header-primary-section-right {
		margin-left: auto !important;
	}
}

@media only screen and (max-width: 921px) {
	#ast-mobile-header .ast-primary-header-bar {
		position: relative !important;
	}
	#ast-mobile-header .ast-button-wrap {
		position: absolute !important;
		top: 50% !important;
		right: 12px !important;
		transform: translateY(-50%) !important;
		margin: 0 !important;
		z-index: 10 !important;
		display: flex !important;
	}
}



/* Mobile menu toggle — the layout rules only match the mobile header, which
   Astra only displays at its breakpoint, so they are inert on desktop. The
   display:block IS scoped: on desktop the widget CSS keeps this header
   hidden and showing it would duplicate the desktop header. */
@media only screen and (max-width: 921px) {
	#ast-mobile-header {
		display: block !important;
	}
}
#ast-mobile-header .ast-builder-grid-row {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: center !important;
}
#ast-mobile-header .site-header-primary-section-left {
	flex: 0 1 auto !important;
	min-width: 0 !important;
}
#ast-mobile-header .site-header-primary-section-right {
	flex: 0 0 auto !important;
	width: auto !important;
	margin-left: auto !important;
	position: static !important;
	transform: none !important;
}
#ast-mobile-header .ast-primary-header-bar {
	position: relative !important;
}
#ast-mobile-header .ast-button-wrap {
	position: absolute !important;
	top: 50% !important;
	right: 12px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	z-index: 10 !important;
	display: flex !important;
}
#ast-mobile-header .ast-button-wrap .menu-toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 10px !important;
	background: transparent !important;
	border: 0 !important;
	color: #16324a !important;
	box-shadow: none !important;
}
#ast-mobile-header .ast-button-wrap .menu-toggle svg {
	fill: currentColor;
}
@media only screen and (max-width: 480px) {
	#ast-mobile-header .site-primary-header-wrap,
	#ast-mobile-header .ast-builder-grid-row-container {
		max-width: 100% !important;
		padding-left: 15px !important;
		padding-right: 70px !important;
	}
}

/* --------------------------------------------------------------------------
   J. Interior page banner imagery
   The migration left every interior page with an empty Smart Slider banner.
   Layer each page's intended banner photo under a light neutral wash (kept
   faint so photos stay clearly visible) plus the Section B gradient bar.
   Mobile: `cover` + center crop keeps focal content; files are 78–220 KB.
   -------------------------------------------------------------------------- */
/* LIVE banner photos — 2021/04 set exactly as referenced by the live site.
   All supplier child pages use suppliers-banner.jpg (verified on live). */
body:not(.home) {
	--hvacr-banner-img: url("/wp-content/uploads/2021/04/suppliers-banner.jpg");
}
body.page-id-1636 { /* About Us */
	--hvacr-banner-img: url("/wp-content/uploads/2021/04/about-banner.jpg");
	--hvacr-banner-pos: bottom;
}
body.page-id-2048 { /* Suppliers */
	--hvacr-banner-img: url("/wp-content/uploads/2021/04/suppliers-banner.jpg");
}
body.page-id-1604 { /* Services */
	--hvacr-banner-img: url("/wp-content/uploads/2021/04/services-banner.jpg");
	--hvacr-banner-pos: bottom;
}
body.page-id-1989 { /* Why Choose Us */
	--hvacr-banner-img: url("/wp-content/uploads/2021/04/why-choose-us-banner.jpg");
	--hvacr-banner-pos: bottom;
}
body.page-id-1650 { /* Contact Us */
	--hvacr-banner-img: url("/wp-content/uploads/2021/04/contact-banner.jpg");
}
body.page-id-1443, /* Baltimore Aircoil */
body.page-id-1895, /* Carel */
body.page-id-1911, /* Siemens */
body.page-id-1934, /* Recuporator */
body.page-id-1935, /* Aero Textile Concepts (ATC) */
body.page-id-1947, /* Aercon */
body.page-id-1954 { /* Smart Temp */
	--hvacr-banner-img: url("/wp-content/uploads/2021/04/suppliers-banner.jpg");
}

/* Light neutral wash only — the photo stays clearly visible (LIVE has no
   dark overlay; contrast for the tagline comes from the gradient bar in
   Section B, not from dimming the image).
   Globe overlay (middle layer): white line-art circles, left side, above the
   photo and behind the text/bar (both ::before/::after paint above all
   background layers). `contain` keeps the full globe visible at every
   height; `left center` matches LIVE placement.
   NOTE: section.hvs-about-hero / section.hvs-contact-hero must NOT be
   listed here — they are the white title bands below the banner (Section B).
   Including them painted a second banner image = the About duplicate. */
body:not(.home) article.page .entry-header {
	background-image:
		linear-gradient(rgba(4, 32, 48, 0.14), rgba(4, 32, 48, 0.04)),
		url("/wp-content/themes/hvacr/assets/images/inner-banner-circles.png"),
		var(--hvacr-banner-img) !important;
	background-repeat: no-repeat, no-repeat, no-repeat !important;
	background-size: auto, contain, cover !important;
	background-position: center, left center, center !important;
}

/* Tablet/mobile: globe scales with band height via `contain`; keep it
   pinned left so body copy and the tagline stay readable. */
@media only screen and (max-width: 768px) {
	body:not(.home) article.page .entry-header {
		background-size: auto, auto 88%, cover !important;
		background-position: center, left center, center !important;
	}
}

/* Why Choose Us (page-id-1989): its banner photo already contains globe
   artwork, so the circles overlay is skipped on this page only — desktop
   and mobile/tablet alike. Desktop rule is min-width scoped so it can
   never fight the mobile stacked layout (that would re-duplicate the
   photo); the mobile ::before override below handles small screens. */
@media only screen and (min-width: 1025px) {
	body.page-id-1989:not(.home) article.page .entry-header {
		background-image:
			linear-gradient(rgba(4, 32, 48, 0.14), rgba(4, 32, 48, 0.04)),
			var(--hvacr-banner-img) !important;
		background-repeat: no-repeat, no-repeat !important;
		background-size: auto, cover !important;
		background-position: center, center !important;
	}
}
@media only screen and (max-width: 1024px) {
	html body.page-id-1989:not(.home) article.page .entry-header::before {
		background-image: var(--hvacr-banner-img) !important;
		background-repeat: no-repeat !important;
		background-size: cover !important;
		background-position: center center !important;
	}
}

/* (Supplier separator removed per request — no divider rules remain. A
   replacement scoped to the Suppliers page partner/connect gap lives below.) */

/* Suppliers index only: low-opacity full-width separator between the
   "We partner with our suppliers" row and the "Find out more / connect"
   block (per LIVE reference). Top border on the connect section = always
   in the gap, full-width by layout, no overflow risk. */
body.page-id-2048 [data-id="f7eaaf4"] {
	border-top: 1px solid rgba(228, 228, 228, 0.8);
}

/* --------------------------------------------------------------------------
   K. Header logo — replace the text site-title with the brand logo image
   Applied to both the desktop and mobile header title areas; layout and
   link behaviour preserved. PNG is 297x98, displayed at ~150px (≈2x sharp).
   -------------------------------------------------------------------------- */
#masthead .site-title a,
#masthead .site-title a:visited {
	display: inline-block !important;
	width: 150px !important;
	height: 49px !important;
	background-image: url("/wp-content/uploads/2021/04/logo.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
}
@media only screen and (max-width: 544px) {
	#masthead .site-title a,
	#masthead .site-title a:visited {
		width: 130px !important;
		height: 43px !important;
	}
}

/* --------------------------------------------------------------------------
   L. LIVE breadcrumbs (inserted by fixes.js below the banner) + mobile zoom
   reduction for interior banners and the home hero.
   -------------------------------------------------------------------------- */
#hvacr-breadcrumbs {
	max-width: 1200px;
	margin: 12px auto 0;
	padding: 0 20px;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #6f6f6f;
}
#hvacr-breadcrumbs a {
	color: #6f6f6f;
	text-decoration: none;
}
#hvacr-breadcrumbs a:hover {
	color: #00a58c;
}

/* LIVE keeps 400px desktop. On phones `cover` on a 1920x410 photo inside a
   400px-tall band over-zooms the crop — reduce band height so more of the
   image fits the viewport width and key content stays visible. */
@media only screen and (max-width: 921px) {
	body:not(.home) article.page .entry-header {
		height: 320px;
	}
}
@media only screen and (max-width: 480px) {
	body:not(.home) article.page .entry-header {
		height: 230px;
		padding-bottom: 38px;
	}
	body:not(.home) article.page .entry-header::before {
		height: 70px;
	}
	body:not(.home) article.page .entry-header::after {
		font-size: 16px;
		max-width: 94%;
	}
}

/* Home hero: cap the mobile height so the background photo is not
   over-zoomed by the 50vh minimum. */
@media only screen and (max-width: 480px) {
	/* LIVE mobile hero fills ~60% of the viewport height */
	#hero-banner {
		min-height: 60vh !important;
	}
}

#hvacr-breadcrumbs a,
#hvacr-breadcrumbs span {
	font-weight: 400;
}