/*
Theme Name: EverGreen
Theme URI: https://evergreen.vamtam.com
Text Domain: evergreen
Description: Welcome to EverGreen, a modern WordPress theme crafted specifically for the landscaping and gardening industry. This professionally designed theme is perfect for residential and commercial landscaping companies, garden design studios, lawn care services, hardscaping specialists, and outdoor maintenance providers looking to showcase their expertise. Whether you focus on sustainable landscaping, irrigation systems, seasonal maintenance, or full-service outdoor design, EverGreen offers everything you need. The theme is fully compatible with Elementor and Elementor Pro, allowing you to build a visually stunning and fully customizable website with ease. Get started today and grow your landscaping business with EverGreen!
Author: VamTam
Author URI: https://vamtam.com
Version: 21
Tested Up To: 6.1
Requires PHP: 7.4
License: Envato
License URI: https://themeforest.net/licenses
Tags: Landscaping, Gardening, Lawncare, Hardscaping, Irrigation, Maintenance, Design, Green, Outdoor, Landscape, Garden, Sustainable, Elementor, Ecofriendly, WordPress
*/


/* ======================================================================
 * Legend Services: inner-page hero banner (added 2026-10-17)
 * Loaded only on inner pages (see functions.php, legend_inner_hero_assets).
 * Design reference: oakshs.ca inner-page hero — full-bleed photo inset by a
 * page gutter, 36% black overlay, breadcrumbs, large light uppercase title,
 * short intro text, "scroll down" glass button. Fluid vw sizing like the
 * reference, with tablet/mobile overrides. Only the hero container of the
 * Elementor "single" templates is targeted (class .lh-hero is added by PHP).
 * ====================================================================== */

.legend-inner-hero {
	--lh-gutter: 2.0833vw;
	--lh-pad-x: 3.125vw;
}

/* --- Hero container -------------------------------------------------- */
.legend-inner-hero .lh-hero.e-con,
.legend-inner-hero .lh-hero {
	position: relative !important;
	overflow: hidden !important;
	box-sizing: border-box;
	width: auto !important;
	max-width: none !important;
	margin: 0 var(--lh-gutter) var(--lh-gutter) !important;
	padding: 10.4166vw var(--lh-pad-x) 8.5vw !important;
	min-height: min(calc((100vw - 2 * var(--lh-gutter)) * 0.743), calc(100vh - 90px)) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 0 !important;
	background-color: #0b1a0f !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	border-radius: 0 !important;
}

/* Overlay (reference: rgba(0,0,0,.36)) */
.legend-inner-hero .lh-hero::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, 0.36) !important;
	opacity: 1 !important;
	z-index: 1 !important;
	pointer-events: none;
	transition: none !important;
}

/* Everything inside sits above the overlay and spans the full hero width */
.legend-inner-hero .lh-hero > .e-con-inner,
.legend-inner-hero .lh-hero > .elementor-element {
	position: relative !important;
	z-index: 2 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.legend-inner-hero .lh-hero > .e-con-inner > .e-con,
.legend-inner-hero .lh-hero > .e-con-inner > .elementor-element {
	position: relative !important;
	z-index: 2 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 0 !important;
}
/* The templates' own photo blocks and decorative flower icon are replaced by the full-bleed photo */
.legend-inner-hero .lh-hero .elementor-element-f0d467e,
.legend-inner-hero .lh-hero .elementor-element-5c7c348,
.legend-inner-hero .lh-hero .elementor-widget-icon.elementor-absolute {
	display: none !important;
}

/* --- Breadcrumbs ----------------------------------------------------- */
.legend-inner-hero .lh-hero .legend-hero-crumbs {
	margin: 0 0 1.25vw;
	font-size: 0.8333vw;
	line-height: 1.2;
	color: #fff;
}
.legend-inner-hero .lh-hero .legend-hero-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.legend-inner-hero .lh-hero .legend-hero-crumbs li {
	margin: 0;
	padding: 0;
	text-transform: capitalize;
	white-space: nowrap;
	color: #fff;
}
.legend-inner-hero .lh-hero .legend-hero-crumbs li:not(:last-child) {
	color: #8ca095;
}
.legend-inner-hero .lh-hero .legend-hero-crumbs li:not(:last-child)::after {
	content: "/";
	margin: 0 0.4em;
	color: #8ca095;
}
.legend-inner-hero .lh-hero .legend-hero-crumbs a {
	color: #8ca095;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.legend-inner-hero .lh-hero .legend-hero-crumbs a:hover {
	color: #fff;
	border-bottom-color: #fff;
}

/* --- Typography ------------------------------------------------------ */
.legend-inner-hero .lh-hero .elementor-widget-theme-post-title,
.legend-inner-hero .lh-hero .elementor-widget-heading,
.legend-inner-hero .lh-hero .elementor-widget-theme-post-excerpt,
.legend-inner-hero .lh-hero .elementor-widget-button {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	text-align: left !important;
}
.legend-inner-hero .lh-hero .elementor-widget-theme-post-title .elementor-widget-container,
.legend-inner-hero .lh-hero .elementor-widget-heading .elementor-widget-container,
.legend-inner-hero .lh-hero .elementor-widget-theme-post-excerpt .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

/* Title (reference: 5.2vw, weight 400, uppercase, light) */
.legend-inner-hero .lh-hero h1.elementor-heading-title,
.legend-inner-hero .lh-hero .elementor-widget-theme-post-title .elementor-heading-title {
	font-size: 5.2083vw !important;
	line-height: 1.1 !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0 !important;
	color: #fff !important;
	margin: 0 0 1.25vw !important;
	max-width: 47.4vw;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Small label (e.g. "Services", "Position") */
.legend-inner-hero .lh-hero h6.elementor-heading-title,
.legend-inner-hero .lh-hero .elementor-widget-heading .elementor-heading-title:not(h1):not(h2):not(h3) {
	font-size: 0.8333vw !important;
	line-height: 1.2 !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.85) !important;
	margin: 0 0 1vw !important;
}
.legend-inner-hero .lh-hero .elementor-heading-title a {
	color: inherit !important;
	text-decoration: none !important;
}

/* Intro text (reference: 1.04vw, 160%, white, max 47vw) */
.legend-inner-hero .lh-hero h2.elementor-heading-title,
.legend-inner-hero .lh-hero h3.elementor-heading-title,
.legend-inner-hero .lh-hero .elementor-widget-theme-post-excerpt .elementor-widget-container,
.legend-inner-hero .lh-hero .elementor-widget-theme-post-excerpt .elementor-widget-container p {
	font-size: 1.0416vw !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #fff !important;
	max-width: 47.4vw;
	margin: 0 0 0.8333vw !important;
}
.legend-inner-hero .lh-hero .elementor-widget-theme-post-excerpt .elementor-widget-container p:last-child {
	margin-bottom: 0 !important;
}

/* Button (glass outline, like the reference's glass controls) */
.legend-inner-hero .lh-hero .elementor-widget-button {
	margin-top: 1.6vw !important;
}
.legend-inner-hero .lh-hero .elementor-button-wrapper {
	text-align: left !important;
}
.legend-inner-hero .lh-hero .elementor-button,
.legend-inner-hero .lh-hero .elementor-button:visited {
	display: inline-flex !important;
	align-items: center;
	background: rgba(255, 255, 255, 0.12) !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.75) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 0.9vw 2vw !important;
	font-size: 0.9vw !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: none !important;
	transition: background-color 0.3s ease, color 0.3s ease !important;
}
.legend-inner-hero .lh-hero .elementor-button:hover,
.legend-inner-hero .lh-hero .elementor-button:focus {
	background: #fff !important;
	color: #0b1a0f !important;
}
.legend-inner-hero .lh-hero .elementor-button .elementor-button-text,
.legend-inner-hero .lh-hero .elementor-button .elementor-button-icon {
	color: inherit !important;
}

/* --- Scroll-down glass button (bottom centre of the hero) ------------ */
.legend-inner-hero .legend-hero-scroll {
	position: relative;
	height: 0;
	z-index: 5;
	pointer-events: none;
}
.legend-inner-hero .legend-hero-scroll__btn {
	pointer-events: auto;
	position: absolute;
	left: 50%;
	bottom: calc(var(--lh-gutter) + 1.6vw);
	transform: translateX(-50%);
	width: 4.84375vw;
	height: 4.84375vw;
	min-width: 76px;
	min-height: 76px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(2px) brightness(1) saturate(1.1);
	backdrop-filter: blur(2px) brightness(1) saturate(1.1);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.3s ease;
}
.legend-inner-hero .legend-hero-scroll__btn:hover,
.legend-inner-hero .legend-hero-scroll__btn:focus {
	background: rgba(255, 255, 255, 0.18);
	outline: none;
}
.legend-inner-hero .legend-hero-scroll__text {
	font-size: 0.8333vw;
	line-height: 1.2;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
}
.legend-inner-hero .legend-hero-scroll__icon {
	width: 1.25vw;
	height: 1.25vw;
	min-width: 16px;
	min-height: 16px;
	stroke: #fff;
}

/* --- Tablet ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.legend-inner-hero .lh-hero.e-con,
	.legend-inner-hero .lh-hero {
		padding: 12vw 5vw 16vw !important;
		min-height: 72vw !important;
	}
	.legend-inner-hero .lh-hero .legend-hero-crumbs {
		font-size: 1.5vw;
		margin-bottom: 2vw;
	}
	.legend-inner-hero .lh-hero h1.elementor-heading-title,
	.legend-inner-hero .lh-hero .elementor-widget-theme-post-title .elementor-heading-title {
		font-size: 7.2vw !important;
		max-width: 80%;
		margin-bottom: 2vw !important;
	}
	.legend-inner-hero .lh-hero h6.elementor-heading-title,
	.legend-inner-hero .lh-hero .elementor-widget-heading .elementor-heading-title:not(h1):not(h2):not(h3) {
		font-size: 1.5vw !important;
		margin-bottom: 1.5vw !important;
	}
	.legend-inner-hero .lh-hero h2.elementor-heading-title,
	.legend-inner-hero .lh-hero h3.elementor-heading-title,
	.legend-inner-hero .lh-hero .elementor-widget-theme-post-excerpt .elementor-widget-container,
	.legend-inner-hero .lh-hero .elementor-widget-theme-post-excerpt .elementor-widget-container p {
		font-size: 2vw !important;
		max-width: 80%;
	}
	.legend-inner-hero .lh-hero .elementor-button,
	.legend-inner-hero .lh-hero .elementor-button:visited {
		padding: 1.4vw 3.2vw !important;
		font-size: 1.6vw !important;
	}
	.legend-inner-hero .legend-hero-scroll__btn {
		bottom: calc(var(--lh-gutter) + 2.5vw);
	}
	.legend-inner-hero .legend-hero-scroll__text {
		font-size: 1.3vw;
	}
	.legend-inner-hero .legend-hero-scroll__icon {
		width: 2.2vw;
		height: 2.2vw;
	}
}

/* --- Mobile ---------------------------------------------------------- */
@media (max-width: 767px) {
	.legend-inner-hero {
		--lh-gutter: 12px;
	}
	.legend-inner-hero .lh-hero.e-con,
	.legend-inner-hero .lh-hero {
		margin: 0 var(--lh-gutter) var(--lh-gutter) !important;
		padding: 18vw 20px 26vw !important;
		min-height: 118vw !important;
	}
	.legend-inner-hero .lh-hero .legend-hero-crumbs {
		font-size: 12px;
		margin-bottom: 14px;
	}
	.legend-inner-hero .lh-hero .legend-hero-crumbs li {
		white-space: normal;
	}
	.legend-inner-hero .lh-hero h1.elementor-heading-title,
	.legend-inner-hero .lh-hero .elementor-widget-theme-post-title .elementor-heading-title {
		font-size: 10vw !important;
		line-height: 1.08 !important;
		max-width: 100%;
		margin-bottom: 14px !important;
	}
	.legend-inner-hero .lh-hero h6.elementor-heading-title,
	.legend-inner-hero .lh-hero .elementor-widget-heading .elementor-heading-title:not(h1):not(h2):not(h3) {
		font-size: 11px !important;
		margin-bottom: 10px !important;
	}
	.legend-inner-hero .lh-hero h2.elementor-heading-title,
	.legend-inner-hero .lh-hero h3.elementor-heading-title,
	.legend-inner-hero .lh-hero .elementor-widget-theme-post-excerpt .elementor-widget-container,
	.legend-inner-hero .lh-hero .elementor-widget-theme-post-excerpt .elementor-widget-container p {
		font-size: 15px !important;
		line-height: 1.55 !important;
		max-width: 100%;
		margin-bottom: 10px !important;
	}
	.legend-inner-hero .lh-hero .elementor-widget-button {
		margin-top: 18px !important;
	}
	.legend-inner-hero .lh-hero .elementor-button,
	.legend-inner-hero .lh-hero .elementor-button:visited {
		padding: 12px 24px !important;
		font-size: 13px !important;
	}
	.legend-inner-hero .legend-hero-scroll__btn {
		bottom: calc(var(--lh-gutter) + 16px);
		width: 68px;
		height: 68px;
		min-width: 68px;
		min-height: 68px;
	}
	.legend-inner-hero .legend-hero-scroll__text {
		font-size: 9px;
	}
	.legend-inner-hero .legend-hero-scroll__icon {
		width: 14px;
		height: 14px;
	}
}
/* ==================== /Legend Services inner-page hero ==================== */