/**
* Theme Name: Xclean Child
* Description: This is a child theme of xclean
* Author: themesion
* Template: xclean
* Version: 1.0
*/

/* --------------------------------------------------------------------------
   Homepage hero
   Replaces the Slider Revolution module that used to render here. Sizes match
   what SR7 produced: it laid the slide out on a fixed grid and scaled the whole
   thing by min(1, viewport / gridWidth), switching grid at each breakpoint.

   --gl-u is that scale expressed as a length - one grid pixel, shrunk once the
   viewport is narrower than the grid - so every measurement below is written as
   a multiple of it and the hero shrinks exactly as before rather than reflowing.
   Grid, colours and type values all come from slider-demo-04.
   -------------------------------------------------------------------------- */

.gl-hero {
	--gl-grid-w: 1460;
	--gl-grid-h: 850;
	--gl-title: 75;
	--gl-title-w: 1183;
	--gl-btn-size: 24;
	--gl-btn-pad-y: 21;
	--gl-btn-pad-x: 34;

	--gl-u: min(1px, 100vw / var(--gl-grid-w));

	position: relative;
	overflow: hidden;
	width: 100%;

	/* Centres the content, and lets the hero grow rather than clip when it has to. */
	display: flex;
	align-items: center;
	justify-content: center;

	/*
	 * Height is set outright rather than via aspect-ratio: a ratio plus a max-height lets the
	 * browser shrink the width to keep the ratio once the height is capped, which left the
	 * hero narrower than the window. This is SR7's own sizing, gridHeight * the scale.
	 */
	height: calc(var(--gl-grid-h) * var(--gl-u));

	/* Sits under the photograph so the white heading is legible from first paint. */
	background-color: #001837;
}

.gl-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

/*
 * The slide's two stacked overlays: solid tint over gradient. Colours are set in Appearance >
 * Customize > Homepage Banner (see xclean_child_hero_colour_css); the fallbacks are the originals.
 */
.gl-hero__scrim {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--gl-hero-tint, rgba(0, 24, 55, 0.4)), var(--gl-hero-tint, rgba(0, 24, 55, 0.4))),
		linear-gradient(
			var(--gl-hero-gradient-angle, 125deg),
			var(--gl-hero-gradient-from, rgba(0, 0, 56, 0.7)) 0%,
			var(--gl-hero-gradient-to, rgba(67, 138, 176, 0.5)) 100%
		);
}

/*
 * SR7 anchored the heading 29px above the module's middle and the buttons 159px below it.
 * Centring the stack and nudging it down by 23px puts both in the same place, and survives
 * the text changing length in a way absolute offsets would not.
 */
.gl-hero__content {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(46 * var(--gl-u));
	padding: 0 20px;
	transform: translateY(calc(23 * var(--gl-u)));
	text-align: center;
}

.gl-hero__title {
	/* 100% guard so the line never runs past the hero on a narrow phone. */
	max-width: min(calc(var(--gl-title-w) * var(--gl-u)), 100%);
	margin: 0;
	color: var(--gl-hero-title, #fff);
	font-family: "Quicksand", sans-serif;
	font-size: calc(var(--gl-title) * var(--gl-u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

.gl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(30 * var(--gl-u));
}

/*
 * The sr7-btn class on the markup picks up the theme's own arrow animation.
 *
 * Unlike the heading, the buttons do not scale all the way down with the grid. SR7 shrank them
 * along with everything else, which left roughly 11px text on a phone; the max() floors below
 * hold them at a legible, thumb-sized minimum once the scaled value drops beneath it.
 */
.gl-hero__btn {
	display: inline-flex;
	align-items: center;
	border-radius: 50px;
	font-family: "Quicksand", sans-serif;
	font-size: max(17px, calc(var(--gl-btn-size) * var(--gl-u)));
	font-weight: 700;
	line-height: 1;
	padding:
		max(16px, calc(var(--gl-btn-pad-y) * var(--gl-u)))
		max(26px, calc(var(--gl-btn-pad-x) * var(--gl-u)));
	white-space: nowrap;
	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

.gl-hero__btn--light {
	background-color: var(--gl-hero-btn1-bg, #fff);
	color: var(--gl-hero-btn1-text, #001837);
}

.gl-hero__btn--accent {
	background-color: var(--gl-hero-btn2-bg, #45a0b7);
	color: var(--gl-hero-btn2-text, #fff);
}

/* Hover colours are also set in the Customizer. These selectors outrank the theme's a:hover rule. */
.gl-hero__btn--light:hover,
.gl-hero__btn--light:focus-visible {
	background-color: var(--gl-hero-btn1-hover-bg, #45a0b7);
	color: var(--gl-hero-btn1-hover-text, #fff);
}

.gl-hero__btn--accent:hover,
.gl-hero__btn--accent:focus-visible {
	background-color: var(--gl-hero-btn2-hover-bg, #fff);
	color: var(--gl-hero-btn2-hover-text, #001837);
}

@media (max-width: 1023px) {
	.gl-hero {
		--gl-grid-w: 1024;
		--gl-grid-h: 650;
		--gl-title: 65;
		--gl-btn-size: 21;

		/* Height of the collapsed logo-and-burger header, which is laid over the hero. */
		--gl-header: 98px;

		/* Clear space wanted above the heading and below the buttons. Tune these two. */
		--gl-space-top: 46px;
		--gl-space-bottom: 76px;
	}

	/*
	 * The header is laid over the hero rather than above it. On a full-height desktop hero that
	 * goes unnoticed, but once the hero shrinks the centred heading ends up jammed against the
	 * menu bar, so the top padding carries the header's height on top of the gap we actually
	 * want. Stating both gaps outright rather than letting the leftover space divide itself
	 * keeps the top clearance fixed while the bottom one is free to be larger.
	 */
	.gl-hero__content {
		padding-top: calc(var(--gl-header) + var(--gl-space-top));
		padding-bottom: var(--gl-space-bottom);
	}
}

@media (max-width: 777px) {
	.gl-hero {
		--gl-grid-w: 778;
		--gl-grid-h: 550;
		--gl-title: 55;
		--gl-btn-size: 20;
		--gl-btn-pad-y: 20;
		--gl-btn-pad-x: 32;

		/*
		 * Below the tablet grid the buttons stop shrinking while the hero keeps doing so, and
		 * two stacked pills need more room than SR7's fixed height allowed. Treating that
		 * height as a minimum keeps the design where it fits and grows instead of clipping.
		 */
		height: auto;
		min-height: calc(var(--gl-grid-h) * var(--gl-u));
	}

	/* Top padding is inherited from the rule above; only the gap needs a floor here. */
	.gl-hero__content {
		gap: max(28px, calc(46 * var(--gl-u)));
	}
}

@media (max-width: 479px) {
	.gl-hero {
		--gl-grid-w: 480;
		--gl-grid-h: 500;
		--gl-title: 45;
		--gl-title-w: 356;
		--gl-btn-pad-y: 19;
		--gl-btn-pad-x: 30;
	}
}

/*
 * Footer "Get In Touch": the WhatsApp line comes from the widget's Address field, which renders
 * first in the markup. Ordered last so it sits below the phone number and email.
 */
.site-footer .pbmit-contact-widget-lines .pbmit-contact-widget-whatsapp {
	order: 1;
	margin: 15px 0 0;
}

.site-footer .pbmit-contact-widget-whatsapp a {
	text-decoration: underline;
}

/*
 * Service cards: hold every image at the theme's 840x1040 card shape. WordPress can only crop
 * that size from a photo at least 1040px tall; a shorter one (such as a 1500x750 upload) comes
 * out shorter and made its card a different height from the rest.
 */
.pbmit-service-style-2 .pbmit-featured-wrapper img {
	width: 100%;
	height: auto;
	aspect-ratio: 840 / 1040;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Square image carousel
   Add the class "gl-square-carousel" to any Elementor Image Carousel (Advanced
   > CSS Classes) to crop its slides to a square. Done in CSS rather than by
   choosing a square image size, because the slides here range from 768x1024 to
   1448x1086 - a square crop larger than the smallest source cannot be generated,
   and WordPress would silently fall back to the uncropped original.
   -------------------------------------------------------------------------- */

.gl-square-carousel .swiper-slide-inner {
	display: block;
	margin: 0;
	line-height: 0;
}

.gl-square-carousel .swiper-slide-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center center;
}

/* --------------------------------------------------------------------------
   Square media columns (tablet and below)
   The service pages show their body photo as an Elementor column background
   sized by a spacer widget - 320px on tablet, 240px on mobile - so once the
   columns stack the photo becomes a short, full-width strip. Adding the class
   "gl-square-media" to such a column zeroes that spacer below 1025px and lets
   the aspect ratio set the height instead, giving a true square.

   Elementor paints a column background onto its .elementor-element-populated
   wrapper, not the column itself, so the ratio has to go on the wrapper.

   Both selectors are qualified with .elementor-column deliberately. This
   stylesheet is enqueued before Elementor's, so a tie on specificity would lose
   - in particular Elementor sets the spacer height from
   `.elementor-column .elementor-spacer-inner`, which is two classes. Overriding
   the height directly rather than the --spacer-size variable also avoids the
   per-widget rule Elementor writes for each page, which is more specific again.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.elementor-column.gl-square-media > .elementor-element-populated {
		aspect-ratio: 1 / 1;
	}

	.elementor-column.gl-square-media .elementor-spacer-inner {
		height: 0;
	}
}