/*
Theme Name: Roden Gray Landscaping
Theme URI: https://example.com/oasis-landscaping
Author: Roden Gray Landscaping
Description: A warm, earthy (#8A765A / #F2EBDD / #A3A380) lightweight theme for landscaping companies in Abu Dhabi and the UAE. Every page, the header and the footer are built with the FREE Elementor page builder, so all text, images, buttons and sections can be edited visually. Includes a one-click demo importer (Appearance > Oasis Setup), a contact form shortcode, a mobile menu and a floating WhatsApp button.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oasis-landscaping
Tags: custom-menu, custom-logo, full-width-template, one-column, threaded-comments, translation-ready
*/

:root {
	--oasis-green: #3f3528;
	--oasis-green-2: #5c4e3b;
	--oasis-leaf: #8a765a;
	--oasis-gold: #8a765a;
	--oasis-gold-dark: #6f5e46;
	--oasis-sand: #f2ebdd;
	--oasis-sage: #a3a380;
	--oasis-text: #5a5146;
	--oasis-heading-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--oasis-body-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: #fff;
	color: var(--oasis-text);
	font-family: var(--oasis-body-font);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--oasis-leaf);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--oasis-green);
	font-family: var(--oasis-heading-font);
	line-height: 1.25;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	background: #fff;
	color: var(--oasis-green);
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
}

.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* ---------- Menu shortcode ([oasis_menu]) ---------- */

.oasis-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--oasis-heading-font);
}

.oasis-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oasis-nav .oasis-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.oasis-nav .oasis-menu > li {
	position: relative;
}

.oasis-nav .oasis-menu a {
	display: block;
	padding: 10px 16px;
	color: var(--oasis-green);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s;
}

.oasis-nav .oasis-menu a:hover,
.oasis-nav .oasis-menu .current-menu-item > a,
.oasis-nav .oasis-menu .current_page_item > a {
	color: var(--oasis-gold-dark);
}

.oasis-nav .oasis-menu > .current-menu-item > a::after {
	content: "";
	display: block;
	width: 18px;
	height: 2px;
	margin: 4px auto 0;
	background: var(--oasis-gold);
}

/* dropdowns */
.oasis-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 220px;
	padding: 8px 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 14px 40px rgba(63, 53, 40, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all 0.2s;
}

.oasis-nav li:hover > .sub-menu,
.oasis-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.oasis-nav .sub-menu a {
	padding: 8px 20px;
	font-size: 14px;
}

.oasis-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--oasis-green);
	color: #fff;
	cursor: pointer;
}

.oasis-menu-toggle span,
.oasis-menu-toggle span::before,
.oasis-menu-toggle span::after {
	display: block;
	position: relative;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: all 0.25s;
}

.oasis-menu-toggle span::before,
.oasis-menu-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
}

.oasis-menu-toggle span::before {
	top: -7px;
}

.oasis-menu-toggle span::after {
	top: 7px;
}

.oasis-nav.is-open .oasis-menu-toggle span {
	background: transparent;
}

.oasis-nav.is-open .oasis-menu-toggle span::before {
	top: 0;
	transform: rotate(45deg);
}

.oasis-nav.is-open .oasis-menu-toggle span::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (max-width: 1024px) {
	.oasis-nav--primary {
		justify-content: flex-end;
	}

	.oasis-nav--primary .oasis-menu-toggle {
		display: inline-flex;
	}

	.oasis-nav--primary .oasis-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		flex-direction: column;
		gap: 0;
		padding: 10px 20px 20px;
		background: #fff;
		box-shadow: 0 20px 40px rgba(63, 53, 40, 0.15);
	}

	.oasis-nav--primary.is-open .oasis-menu {
		display: flex;
	}

	.oasis-nav--primary .oasis-menu a {
		padding: 14px 4px;
		border-bottom: 1px solid #ece5d6;
	}

	.oasis-nav--primary .oasis-menu > .current-menu-item > a::after {
		display: none;
	}

	.oasis-nav--primary .sub-menu {
		position: static;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding-left: 16px;
	}

	/* let the dropdown span the full header width, not just its column */
	.site-header .elementor-section,
	.site-header .elementor-column,
	.site-header .elementor-widget-wrap,
	.site-header .elementor-widget-shortcode,
	.site-header .elementor-shortcode {
		position: static;
	}

	.site-header .elementor-section {
		position: relative;
	}
}

/* vertical list style, used in the footer */
.oasis-nav--list {
	justify-content: flex-start;
}

.oasis-nav--list .oasis-menu {
	flex-direction: column;
	gap: 0;
}

.oasis-nav--list .oasis-menu a {
	padding: 5px 0;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--oasis-body-font);
	font-size: 15px;
	font-weight: 400;
}

.oasis-nav--list .oasis-menu a:hover,
.oasis-nav--list .oasis-menu .current-menu-item > a {
	color: var(--oasis-sage);
}

.oasis-nav--list .oasis-menu > .current-menu-item > a::after {
	display: none;
}

.oasis-nav--list .oasis-menu-toggle {
	display: none !important;
}

/* ---------- Floating WhatsApp button (Elementor button with class "oasis-whatsapp-float") ---------- */

.oasis-float-holder {
	height: 0;
	padding: 0 !important;
	overflow: visible;
}

.elementor-widget.oasis-whatsapp-float {
	position: fixed !important;
	right: 22px;
	bottom: 22px;
	z-index: 998;
	width: auto !important;
	margin: 0 !important;
}

.oasis-whatsapp-float .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 30px !important;
	box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
	animation: oasis-pulse 2.4s infinite;
}

.oasis-whatsapp-float .elementor-button-icon {
	margin: 0 !important;
}

.oasis-whatsapp-float .elementor-button-icon svg {
	width: 30px;
	fill: currentColor;
}

.oasis-whatsapp-float .elementor-button-text:empty {
	display: none;
}

@keyframes oasis-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

/* ---------- Contact form shortcode ([oasis_contact_form]) ---------- */

.oasis-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 10px;
}

.oasis-form .oasis-field--full {
	grid-column: 1 / -1;
}

.oasis-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--oasis-green);
	font-family: var(--oasis-heading-font);
	font-size: 14px;
	font-weight: 500;
}

.oasis-form input,
.oasis-form select,
.oasis-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #e2d9c7;
	border-radius: 8px;
	background: #fbf8f2;
	color: #2e271d;
	font-family: var(--oasis-body-font);
	font-size: 15px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.oasis-form input:focus,
.oasis-form select:focus,
.oasis-form textarea:focus {
	outline: none;
	border-color: var(--oasis-gold);
	box-shadow: 0 0 0 3px rgba(138, 118, 90, 0.22);
}

.oasis-form textarea {
	min-height: 140px;
	resize: vertical;
}

.oasis-form .oasis-hp {
	position: absolute;
	left: -9999px;
}

.oasis-form button {
	padding: 16px 34px;
	border: 0;
	border-radius: 6px;
	background: var(--oasis-gold);
	color: #fff;
	font-family: var(--oasis-heading-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.oasis-form button:hover {
	background: var(--oasis-gold-dark);
}

.oasis-notice {
	margin: 10px 0 18px;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 15px;
}

.oasis-notice--success {
	background: #eef0e4;
	color: #4f5636;
}

.oasis-notice--error {
	background: #fbeaea;
	color: #8a1f1f;
}

@media (max-width: 767px) {
	.oasis-form {
		grid-template-columns: 1fr;
	}
}

/* ---------- Fallback header/footer (shown before the demo is imported) ---------- */

.oasis-fallback-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 16px 20px;
	position: relative;
}

.oasis-fallback-header .site-title {
	color: var(--oasis-green);
	font-family: var(--oasis-heading-font);
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
}

.oasis-fallback-header .custom-logo {
	max-height: 60px;
	width: auto;
}

.oasis-fallback-footer {
	padding: 30px 20px;
	background: #2e271d;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	font-size: 14px;
}

/* ---------- Basic content (blog posts, pages not built with Elementor) ---------- */

.oasis-content {
	max-width: 860px;
	margin: 0 auto;
	padding: 70px 20px;
}

.oasis-content .entry-title {
	margin-top: 0;
	font-size: 40px;
}

.oasis-content .entry-meta {
	margin-bottom: 24px;
	color: #857a6c;
	font-size: 14px;
}

.oasis-content article + article {
	margin-top: 60px;
	padding-top: 60px;
	border-top: 1px solid #ece5d6;
}

.oasis-content .wp-post-image {
	margin-bottom: 24px;
	border-radius: 12px;
}

.oasis-content .more-link,
.oasis-content .button {
	display: inline-block;
	margin-top: 10px;
	padding: 12px 26px;
	border-radius: 6px;
	background: var(--oasis-gold);
	color: #fff;
	font-family: var(--oasis-heading-font);
	font-weight: 600;
	text-decoration: none;
}

.oasis-content .nav-links {
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

.alignwide {
	max-width: 1200px;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ---------- Simple motion ---------- */

/* gentle zoom on service-card and gallery images */
.elementor-widget-image-box .elementor-image-box-img,
.elementor-image-gallery .gallery-icon {
	overflow: hidden;
	border-radius: 10px;
}

.elementor-widget-image-box .elementor-image-box-img img,
.elementor-image-gallery .gallery-icon img {
	transition: transform 0.5s ease;
}

.elementor-widget-image-box:hover .elementor-image-box-img img,
.elementor-image-gallery .gallery-icon:hover img {
	transform: scale(1.06);
}

/* respect visitors who turn off animations in their device settings */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
	}

	.animated,
	.oasis-whatsapp-float .elementor-button {
		animation: none !important;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}