/*!
Theme Name: Prestonwood Landscape
Theme URI: 
Template: gardon
Author: Small Crowd Marketing
Author URI: https://smallcrowdmarketing.com
Description: This is a Child theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gardon-child
*/

/* ------------------------------------------------------------------
   Megamenu dropdown
   Menu items with the "megamenu" CSS class (Appearance > Menus) get a
   full-header-width, multi-column panel instead of the narrow dropdown.

   The live header is the Elementor theme-builder template
   (elementor-location-header) using the Nav Menu widget — rules for it
   are below. The .main-menu rules right here cover the gardon theme's
   own header markup, which is still configured as the fallback.
------------------------------------------------------------------- */
.stricky-header .main-menu__list > li.megamenu {
	position: static;
}

.main-menu .main-menu__list > li.megamenu > ul.sub-menu,
.stricky-header .main-menu__list > li.megamenu > ul.sub-menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	min-width: 0;
	background-color: var(--gardon-white, #fff);
	padding: 25px 20px 24px;
	border-bottom-left-radius: var(--gardon-bdr-radius);
	border-bottom-right-radius: var(--gardon-bdr-radius);
	box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
}

.main-menu .main-menu__list > li.megamenu > ul.sub-menu > li,
.stricky-header .main-menu__list > li.megamenu > ul.sub-menu > li {
	flex: 0 0 33.333%;
	width: 33.333%;
	max-width: 33.333%;
}

/* --- Elementor header (theme-builder template, Nav Menu widget) ---
   SmartMenus positions the dropdown with inline styles, so the
   geometry overrides need !important. Scoped to the desktop nav
   (--main); the mobile hamburger dropdown is left untouched.
   The panel anchors to the header's inner flex container (.e-con),
   so it spans the full header row. */
/* Desktop only: below Elementor's 1025px nav breakpoint the hamburger
   dropdown must keep the widget as its positioning anchor, or the
   stretched mobile menu opens shifted off-screen. */
@media (min-width: 1025px) {
	.elementor-location-header .elementor-widget-nav-menu,
	.elementor-location-header .elementor-nav-menu--main,
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu,
	.elementor-location-header .elementor-nav-menu--main li.megamenu {
		position: static !important;
	}
}

.elementor-location-header .elementor-nav-menu--main li.megamenu > ul.sub-menu {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: 100% !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 24px;
	padding-right: calc(38% + 24px);
	column-count: 2;
	column-gap: 12px;
	min-height: 460px;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
}

.elementor-location-header .elementor-nav-menu--main li.megamenu > ul.sub-menu > li {
	break-inside: avoid;
	width: 100% !important;
	margin: 0 0 6px !important;
	/* rows must not be positioned: the feature pane anchors to the panel */
	position: static !important;
}

/* Service row (left columns). Row + feature-pane spans are injected by
   pw_megamenu_card_output() in functions.php. SmartMenus forces
   white-space:nowrap inline, hence the !importants. */
.elementor-location-header .elementor-nav-menu--main li.megamenu > ul.sub-menu a {
	display: flex !important;
	align-items: center;
	gap: 16px;
	padding: 12px 14px !important;
	border-radius: 10px;
	white-space: normal !important;
	transition: background-color 200ms ease;
	/* keep rows unpositioned so the feature pane anchors to the panel */
	position: static !important;
}

.pw-mega-card__media {
	flex: 0 0 auto;
}

.pw-mega-card__media img {
	display: block;
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: 10px !important;
}

.pw-mega-card__body {
	display: block;
	min-width: 0;
}

.pw-mega-card__title {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

/* Feature pane: fills the reserved right-hand area of the panel and
   shows the hovered service's photo + blurb. The first service shows
   whenever no row is hovered. */
.pw-mega-preview {
	position: absolute;
	top: 24px;
	right: 24px;
	bottom: 24px;
	width: calc(38% - 36px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border-radius: 12px;
	background-color: #F7FAF2;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 250ms ease, visibility 250ms ease;
}

.elementor-location-header .elementor-nav-menu--main li.megamenu > ul.sub-menu > li:hover .pw-mega-preview {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

/* Default state: keep the first service featured until a row is hovered
   (:has()-aware browsers), with a coarser fallback for older ones. */
.elementor-location-header .elementor-nav-menu--main li.megamenu > ul.sub-menu:not(:hover) > li:first-child .pw-mega-preview {
	opacity: 1;
	visibility: visible;
}

.elementor-location-header .elementor-nav-menu--main li.megamenu > ul.sub-menu:not(:has(> li:hover)) > li:first-child .pw-mega-preview {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.pw-mega-preview__photo {
	display: block;
}

.pw-mega-preview__photo img {
	display: block;
	width: 100%;
	height: 235px !important;
	object-fit: cover;
	border-radius: 10px !important;
}

.pw-mega-preview__title {
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.pw-mega-preview__desc {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: #4b5563;
}

@media (max-width: 1366px) {
	.pw-mega-preview__photo img {
		height: 190px !important;
	}
}

/* Ultrawide: scale the whole panel up so it stays proportionate on
   very wide screens */
@media (min-width: 1800px) {
	.elementor-location-header .elementor-nav-menu--main li.megamenu > ul.sub-menu {
		padding: 32px;
		padding-right: calc(38% + 32px);
		column-gap: 20px;
		min-height: 560px;
	}

	.elementor-location-header .elementor-nav-menu--main li.megamenu > ul.sub-menu a {
		gap: 20px;
		padding: 14px 18px !important;
	}

	.pw-mega-card__media img {
		width: 96px;
		height: 96px;
	}

	.pw-mega-card__title {
		font-size: 19px;
	}

	.pw-mega-preview {
		top: 32px;
		right: 32px;
		bottom: 32px;
		width: calc(38% - 48px);
		padding: 20px;
	}

	.pw-mega-preview__photo img {
		height: 320px !important;
	}

	.pw-mega-preview__title {
		font-size: 24px;
	}

	.pw-mega-preview__desc {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------
   Carousel overflow fix
   The parent theme unclips these owl carousels for a slide "peek"
   effect and relies on .page-wrapper { overflow: hidden } to clip
   them at the screen edge. Elementor theme-builder pages have no
   .page-wrapper, so the carousel stage caused a horizontal scrollbar.
   Clipping at the section wrapper keeps the peek effect.
------------------------------------------------------------------- */
.testimonial-one,
.testimonial-two,
.project-one,
.project-three {
	overflow: hidden;
}

/* ------------------------------------------------------------------
   Client logo scroller (homepage image-carousel 8def78a)
   Continuous linear marquee (settings put swiper on delay-0 autoplay;
   this makes the easing linear) + uniform larger logos.
------------------------------------------------------------------- */
.elementor-element.elementor-element-8def78a .swiper-wrapper {
	transition-timing-function: linear !important;
}

.elementor-element.elementor-element-8def78a .swiper-slide img {
	height: 80px;
	width: 100%;
	object-fit: contain;
}

@media (max-width: 767px) {
	.elementor-element.elementor-element-8def78a .swiper-slide img {
		height: 55px;
	}
}

/* Homepage blog widget heading: at the widget's 65.6px mobile size the
   word "Landscaping" is wider than a phone screen and scrolled the page
   sideways. */
@media (max-width: 767px) {
	.elementor-element.elementor-element-02236ae .section-title__title {
		font-size: 40px !important;
		line-height: 1.1 !important;
	}
}


/* Homepage proposal form (CF7 #115, theme "contact-one" markup).
   - The theme only styles input[type="text"]; give the Email field
     (a real email input) the same look.
   - The theme's full-width rule for the Property Type dropdown excludes
     elements whose class contains "form-control", and CF7 adds
     "wpcf7-form-control" to it, so restore the full-width layout. */
.contact-one__form-input-box input[type="email"] {
	height: 60px;
	width: 100%;
	border: none;
	background-color: var(--gardon-white);
	padding-left: 30px;
	padding-right: 30px;
	outline: none;
	font-size: 13px;
	color: var(--gardon-gray);
	display: block;
	font-weight: 400;
	border-radius: var(--gardon-bdr-radius);
}

.contact-one__form-input-box .bootstrap-select.wpcf7-form-control {
	position: relative;
	display: block;
	max-width: 100%;
	width: 100% !important;
}

.contact-one__form-input-box .bootstrap-select > .dropdown-toggle {
	padding-right: 55px;
}


/* Homepage testimonials (84a12e4): the reviewer's business logo replaces
   the theme's dashed avatar circle, in a clean white logo tile. */
.elementor-element-84a12e4 .testimonial-one__client-img-box {
	width: 96px;
	height: 60px;
	flex: 0 0 auto;
	padding: 8px 10px;
	border: 1px solid #E4E8DD;
	border-radius: 10px;
	background: #fff;
}

.elementor-element-84a12e4 .testimonial-one__img {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.elementor .elementor-element-84a12e4 .testimonial-one__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

.elementor-element-84a12e4 .testimonial-one__client-sub-title {
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 500;
	color: #5A7636;
}


/* Reviews scroller (Owl replaced by pw_reviews_unowl() in functions.php):
   free horizontal scroll, drag with the mouse or swipe, two reviews plus
   a slice of the third showing so it's clear there's more. Vertical
   padding keeps card shadows from being clipped by the scroll box. */
.testimonial-one__carousel.pw-reviews {
	display: flex;
	gap: 30px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding: 20px 4px 34px;
	margin: -20px -4px -34px;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.testimonial-one__carousel.pw-reviews::-webkit-scrollbar {
	display: none;
}

.testimonial-one__carousel.pw-reviews.is-dragging {
	cursor: grabbing;
}

.testimonial-one__carousel.pw-reviews > .item {
	flex: 0 0 calc((100% - 60px) / 2.3);
	display: flex;
}

.testimonial-one__carousel.pw-reviews .testimonial-one__single {
	width: 100%;
}

@media (max-width: 767px) {
	.testimonial-one__carousel.pw-reviews {
		gap: 16px;
	}

	.testimonial-one__carousel.pw-reviews > .item {
		flex-basis: 84%;
	}
}


/* Homepage reviews, full-width layout: heading and intro sit above the
   reviews, and the reviews row spans the browser edge to edge (with a
   small gutter). Cards keep the size they had in the content column
   (container query units), so wider screens simply show more of them.
   The Elementor section clips the overflow instead of .testimonial-one,
   which would cut the row off at the content column. */
.elementor-section:has(.elementor-element-84a12e4) {
	overflow: hidden;
}

.elementor-element-84a12e4 .testimonial-one {
	overflow: visible;
}

.elementor-element-84a12e4 .testimonial-one .row > .col-xl-4,
.elementor-element-84a12e4 .testimonial-one .row > .col-xl-8 {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}

.elementor-element-84a12e4 .testimonial-one__left {
	max-width: 760px;
	margin-bottom: 44px;
}

.elementor-element-84a12e4 .testimonial-one__right {
	container-type: inline-size;
}

.elementor-element-84a12e4 .testimonial-one__carousel.pw-reviews {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 24px;
	padding-right: 24px;
}

.elementor-element-84a12e4 .testimonial-one__carousel.pw-reviews > .item {
	flex-basis: calc((100cqi - 60px) / 2.3);
}

@media (max-width: 767px) {
	.elementor-element-84a12e4 .testimonial-one__carousel.pw-reviews > .item {
		flex-basis: 84cqi;
	}
}


/* Homepage service slider (21afbeb): photos are faded to 35% over the
   brand green so the white text reads clearly (instead of the theme's
   dark overlay on a near-black card). Titles scale with the viewport so
   two-line service names fit their cards at every width. */
.elementor-element-21afbeb .main-slider-two .item {
	background-color: #2E4526;
	border-radius: var(--gardon-bdr-radius);
	overflow: hidden;
}

.elementor-element-21afbeb .main-slider-two__bg {
	opacity: 0.35;
}

.elementor-element-21afbeb .main-slider-two__bg:before {
	background-color: transparent;
}

.elementor-element-21afbeb .main-slider-two__content {
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.elementor-element-21afbeb .main-slider-two__btn {
	text-shadow: none;
}

.elementor-229 .elementor-element.elementor-element-21afbeb .main-slider-two__title {
	font-size: clamp(2rem, 2.6vw, 3.5rem) !important;
	line-height: 1.02 !important;
}

@media (max-width: 767px) {
	.elementor-229 .elementor-element.elementor-element-21afbeb .main-slider-two__title {
		font-size: 2.2rem !important;
	}
}


/* Our Team page: smaller staff cards grouped by department, used under
   the kit's large-photo Leadership grid (.pw-team). */
.pw-staff-group + .pw-staff-group {
	margin-top: 56px;
}

.pw-staff-group__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 22px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--pw-line, #D9DECF);
	font-size: 22px;
	letter-spacing: -.01em;
}

.pw-staff-group__title small {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pw-muted, #6D756D);
}

.pw-staff {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}

.pw-staff__card {
	text-align: center;
	background: #fff;
	border-radius: 14px;
	padding: 22px 12px 20px;
	box-shadow: 0 10px 24px -20px rgba(25, 41, 25, .5);
}

.pw-staff__photo {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	margin: 0 auto 14px;
	border-radius: 50%;
	overflow: hidden;
	background: #EEF3E6;
	color: #AFC09B;
}

.pw-staff__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pw-staff__photo svg {
	width: 64%;
	height: 64%;
	margin-top: 18%;
}

.pw-staff__card h4 {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
}

.pw-staff__card span {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pw-green, #5A7636);
}

.pw-staff__card small {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--pw-muted, #6D756D);
}

@media (max-width: 1100px) {
	.pw-staff {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.pw-staff {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.pw-staff__photo {
		width: 80px;
		height: 80px;
	}
}


/* Kit modifier: less space above a page's first section when it sits
   directly under the theme's title banner (e.g. Our Team intro). */
.pw-page .pw-section.pw-section--tight-top {
	padding-top: clamp(32px, 3.5vw, 52px);
}