/* Zenith Eco Energy - front page only.
   Enqueued by zenith_enqueue_home_styles() in functions.php, which fires
   on is_front_page() alone, so no other page pays for these bytes. */
/* =====================================================================
   Home page imagery  -  11 August 2026

   Selectors hang off Elementor's element ids (zhx0006, zhxr01, ...)
   rather than custom classes. Elementor 4 drops the _css_classes value
   on containers, but it always prints elementor-element-<id>, and those
   ids are ours - we authored the page JSON - so they are stable.
   ===================================================================== */

/* ---- Hero ------------------------------------------------------------
   Golden-hour photograph: bright sky top-left, branded van on the right.
   White text needs a dark ground, but blanketing the frame would bury the
   photograph. The scrim is therefore horizontal - near-opaque where the
   words sit, clear over the van and the house. */
.elementor-10735 .elementor-element-zhx0006 {
	position: relative;
	isolation: isolate;
	background-color: var(--zen-blue-900);
	background-image: url("https://zenitheco.ca/heating-cooling/wp-content/uploads/2026/08/file_000000007818820ab649deca13d5d62a-1.webp");
	background-size: cover;
	background-position: center 42%;
	background-repeat: no-repeat;
	min-block-size: clamp(28rem, 22rem + 18vw, 38rem);
	justify-content: center;
}

.elementor-10735 .elementor-element-zhx0006::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		100deg,
		rgba(11, 37, 69, 0.95) 0%,
		rgba(11, 37, 69, 0.91) 30%,
		rgba(11, 37, 69, 0.66) 50%,
		rgba(11, 37, 69, 0.22) 74%,
		rgba(11, 37, 69, 0.04) 100%
	);
}

.elementor-10735 .elementor-element-zhx0006 > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Keep the copy inside the dark half. Left to itself the headline would
   span the container and its last words would land on bright sky. */
.elementor-10735 .elementor-element-zhx0006 > .e-con-inner > * {
	max-inline-size: 34rem;
}

.elementor-10735 .elementor-element-zhx0001 .elementor-heading-title {
	text-wrap: balance;
}

/* Phones crop the van and the house out of frame anyway, so a sideways
   gradient would leave text sitting on whatever is left. Darken top to
   bottom instead and centre the crop on the technician. */
@media (max-width: 767px) {

	.elementor-10735 .elementor-element-zhx0006 {
		background-position: 58% center;
		min-block-size: 0;
	}

	.elementor-10735 .elementor-element-zhx0006::before {
		background: linear-gradient(
			180deg,
			rgba(11, 37, 69, 0.88) 0%,
			rgba(11, 37, 69, 0.82) 45%,
			rgba(11, 37, 69, 0.94) 100%
		);
	}

	.elementor-10735 .elementor-element-zhx0006 > .e-con-inner > * {
		max-inline-size: none;
	}
}

/* ---- Photograph beside copy ------------------------------------------ */
.elementor-10735 .elementor-element-zhxr01 > .e-con-inner,
.elementor-10735 .elementor-element-zhx0022 > .e-con-inner {
	align-items: center;
}

.elementor-10735 .elementor-element-zhxi11 img,
.elementor-10735 .elementor-element-zhxi21 img,
.elementor-10735 .elementor-element-zhxi31 img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--zen-radius-lg);
	box-shadow: var(--zen-shadow-lg);
}

/* Single column on tablets and below, picture first: a reader meets the
   technician's face before the paragraph about him. */
@media (max-width: 900px) {

	.elementor-10735 .elementor-element-zhxr01 > .e-con-inner,
	.elementor-10735 .elementor-element-zhx0022 > .e-con-inner {
		flex-direction: column;
	}

	.elementor-10735 .elementor-element-zhxc12,
	.elementor-10735 .elementor-element-zhxc21 {
		order: -1;
	}
}

/* ---- Booking section -------------------------------------------------- */
/* 'We answer 24/7' is a claim; someone actually picking up the phone is
   the evidence. It sits directly under the promise. */
.elementor-10735 .elementor-element-zhxi31 {
	margin-block-start: var(--zen-space-5);
}

@media (max-width: 900px) {
	.elementor-10735 .elementor-element-zhxi31 { display: none; }
}

/* The hero widgets are centred by their own Elementor settings. Left-align
   them here instead of editing every widget: the copy then sits in the
   dark end of the gradient and the van stays visible on the right. */
.elementor-10735 .elementor-element-zhx0006 > .e-con-inner {
	align-items: flex-start;
	text-align: start;
}

.elementor-10735 .elementor-element-zhx0006 .elementor-widget-heading,
.elementor-10735 .elementor-element-zhx0006 .elementor-widget-text-editor,
.elementor-10735 .elementor-element-zhx0006 .elementor-widget-container {
	text-align: start;
}

.elementor-10735 .elementor-element-zhx0005 > .e-con-inner {
	justify-content: flex-start;
}

/* A soft shadow keeps the headline readable if the photograph is ever
   swapped for a lighter one. Cheap insurance, invisible when not needed. */
.elementor-10735 .elementor-element-zhx0001 .elementor-heading-title {
	text-shadow: 0 1px 12px rgba(11, 37, 69, 0.45);
}

@media (max-width: 767px) {

	.elementor-10735 .elementor-element-zhx0006 > .e-con-inner {
		align-items: center;
		text-align: center;
	}

	.elementor-10735 .elementor-element-zhx0006 .elementor-widget-heading,
	.elementor-10735 .elementor-element-zhx0006 .elementor-widget-text-editor {
		text-align: center;
	}

	.elementor-10735 .elementor-element-zhx0005 > .e-con-inner {
		justify-content: center;
	}
}

/* Elementor 4 ignores the flex_direction we set on these containers in the
   page JSON, so the two-column rows are declared here instead. Photograph
   and copy share the row evenly; min-inline-size:0 stops a long unbroken
   word in the copy from pushing the picture out of the row. */
@media (min-width: 901px) {

	.elementor-10735 .elementor-element-zhxr01 > .e-con-inner,
	.elementor-10735 .elementor-element-zhx0022 > .e-con-inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--zen-space-7);
	}

	.elementor-10735 .elementor-element-zhxc11,
	.elementor-10735 .elementor-element-zhxc12,
	.elementor-10735 .elementor-element-zhxc21,
	.elementor-10735 .elementor-element-zhxc22 {
		flex: 1 1 0;
		min-inline-size: 0;
	}

	/* The intro paragraph is centred by its own widget setting; beside a
	   photograph it should read as a column, not a caption. */
	.elementor-10735 .elementor-element-zhxc11 .elementor-widget-text-editor {
		text-align: start;
	}
}

/* Cap the picture height so a wide monitor does not turn one photograph
   into a full screen of its own. */
.elementor-10735 .elementor-element-zhxi11 img,
.elementor-10735 .elementor-element-zhxi21 img,
.elementor-10735 .elementor-element-zhxi31 img {
	max-block-size: 26rem;
}

/* Boxed containers wrap their children in .e-con-inner; full-width inner
   containers do not. zhxr01 is the second kind, zhx0022 the first, so both
   the element and the possible wrapper are addressed. */
@media (min-width: 901px) {

	.elementor-10735 .elementor-element-zhxr01,
	.elementor-10735 .elementor-element-zhx0022 > .e-con-inner {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--zen-space-7);
	}

	.elementor-10735 .elementor-element-zhxr01 > .elementor-element,
	.elementor-10735 .elementor-element-zhx0022 > .e-con-inner > .elementor-element {
		flex: 1 1 0;
		min-inline-size: 0;
	}
}

@media (max-width: 900px) {

	.elementor-10735 .elementor-element-zhxr01,
	.elementor-10735 .elementor-element-zhx0022 > .e-con-inner {
		display: flex;
		flex-direction: column;
	}
}

/* ---- Corrections after looking at the rendered page ------------------ */

/* The About and Expect blocks were authored as side-by-side columns. Now
   that they are stacked in one half of a row they were shrinking to about
   300px and running 700px tall. Let them use the full column. */
.elementor-10735 .elementor-element-zhxc22 > .elementor-element {
	inline-size: 100%;
	max-inline-size: none;
}

/* These paragraphs carry inline text-align:center and margin:0 auto from
   when they were full-width intros. Beside a photograph that reads as a
   caption. Inline styles need !important to lose - the alternative is
   rewriting the stored HTML, which costs an Elementor cache rebuild for a
   purely presentational change. */
@media (min-width: 901px) {

	.elementor-10735 .elementor-element-zhx0013 p,
	.elementor-10735 .elementor-element-zhxc22 p {
		text-align: start !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}

	.elementor-10735 .elementor-element-zhxc22 .elementor-widget-heading,
	.elementor-10735 .elementor-element-zhxc11 .elementor-widget-heading {
		text-align: start;
	}
}

/* Photograph and copy rarely run to the same height. Top-aligning reads as
   deliberate; centring leaves the picture floating in the middle of a much
   taller text block. */
@media (min-width: 901px) {
	.elementor-10735 .elementor-element-zhx0022 > .e-con-inner {
		align-items: flex-start;
	}

	.elementor-10735 .elementor-element-zhxc21 {
		position: sticky;
		top: var(--zen-space-8);
	}
}