/*
Theme Name: Clanyeco
Theme URI: https://example.com
Author: Your Name
Description: Fast, custom-coded cleaning services theme. No page builder, no bloat.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: clanyeco
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  --cream:#f7f5ea;
  --cream-2:#eef2df;
  --green-dark:#1f3d1f;
  --green:#3f7d20;
  --green-mid:#5c9c34;
  --yellow:#f4d21c;
  --yellow-soft:#fbe98a;
  --ink:#1c1c16;
  --ink-soft:#54544a;
  --white:#ffffff;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(31,61,31,.08);
  --container:1180px;
  --font-head:'Poppins', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-head);margin:0 0 .5em;line-height:1.2;font-weight:600;color:var(--green-dark);}
p{margin:0 0 1em;color:var(--ink-soft);}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;font-weight:600;font-size:15px;
  border:2px solid transparent;transition:transform .15s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--yellow);color:var(--green-dark);}
.btn-primary:hover{background:var(--yellow-soft);}
.btn-outline{background:transparent;border-color:var(--green-dark);color:var(--green-dark);}
.btn-outline:hover{background:var(--green-dark);color:var(--white);}
.btn-light{background:var(--white);color:var(--green-dark);}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.site-topbar{background:var(--green-dark);color:var(--white);font-size:13px;}
.site-topbar .container{display:flex;justify-content:flex-end;padding-top:6px;padding-bottom:6px;}
.site-header{padding:18px 0;background:var(--white);position:sticky;top:0;z-index:50;border-bottom:1px solid #eee;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.site-logo{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--green-dark);display:flex;align-items:center;gap:8px;}
.site-logo span{color:var(--yellow);}
.main-nav ul{display:flex;gap:28px;}
.main-nav a{font-weight:500;font-size:15px;}
.main-nav a:hover{color:var(--green);}
.header-actions{display:flex;align-items:center;gap:16px;}
.header-phone{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;}
.header-phone .icon{background:var(--yellow);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;}
.menu-toggle{display:none;background:none;border:none;font-size:26px;color:var(--green-dark);}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{background:var(--green-dark);position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;min-height:520px;}
.hero-copy{padding:60px 0;position:relative;z-index:2;}
.hero-copy .eyebrow{display:inline-block;background:var(--cream);color:var(--green-dark);padding:8px 18px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:18px;}
.hero-copy h1{color:var(--white);font-size:clamp(30px,4vw,46px);max-width:520px;}
.hero-copy p{color:#d9e3d0;max-width:440px;}
.hero-actions{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap;}
.hero-badges{display:flex;gap:22px;margin-top:28px;flex-wrap:wrap;}
.hero-badges span{color:#cfe0c3;font-size:14px;display:flex;align-items:center;gap:6px;}
.hero-media{position:relative;height:100%;min-height:420px;}
.hero-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg) 0 0 var(--radius-lg);}
.hero-rating{position:absolute;bottom:24px;right:24px;background:var(--white);border-radius:var(--radius-md);padding:12px 18px;box-shadow:var(--shadow);font-size:13px;font-weight:600;}

/* ==========================================================================
   6. SECTION HEADERS
   ========================================================================== */
.section{padding:90px 0;}
.section-head{text-align:center;max-width:640px;margin:0 auto 50px;}
.section-head .eyebrow{color:var(--green);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.section-head h2{font-size:clamp(26px,3vw,38px);}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;text-align:center;}
.step-icon{width:88px;height:88px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:34px;}
.step h3{font-size:19px;}

/* Who we are */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;background:var(--cream-2);border-radius:var(--radius-lg);padding:50px;}
.split img{border-radius:var(--radius-md);}
.split ul{margin:18px 0;}
.split ul li{display:flex;gap:10px;margin-bottom:10px;color:var(--ink-soft);}
.split ul li::before{content:"✓";background:var(--green);color:var(--white);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}

/* Why choose us (green band) */
.band{background:var(--green);color:var(--white);border-radius:var(--radius-lg);padding:70px 40px;text-align:center;}
.band h2{color:var(--white);}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px;text-align:left;}
.band-card{background:rgba(255,255,255,.08);border-radius:var(--radius-md);padding:28px;}
.band-card h3{color:var(--white);font-size:18px;}
.band-card p{color:#dcecd2;}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.service-card{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow);background:var(--white);}
.service-card img{aspect-ratio:4/3;object-fit:cover;}
.service-card-body{padding:20px;}
.service-card-body h3{font-size:17px;}
.service-link{font-size:14px;font-weight:600;color:var(--green-dark);display:inline-flex;align-items:center;gap:6px;margin-top:6px;}

/* Testimonials */
.testimonials{background:var(--cream-2);border-radius:var(--radius-lg);padding:60px 40px;}
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.testi-card{background:var(--white);border-radius:var(--radius-md);padding:28px;}
.testi-quote{font-size:32px;color:var(--yellow);line-height:1;}
.testi-person{display:flex;align-items:center;gap:10px;margin-top:16px;}
.testi-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;}

/* Quote CTA */
.quote-band{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--yellow-soft);}
.quote-copy{padding:60px;}
.quote-media{position:relative;}
.quote-media img{height:100%;object-fit:cover;}
.guarantee{position:absolute;bottom:20px;left:20px;right:20px;background:var(--white);border-radius:var(--radius-md);padding:16px 20px;box-shadow:var(--shadow);font-size:14px;font-weight:600;}

/* FAQ */
.faq-item{border-bottom:1px solid #e6e6da;}
.faq-question{width:100%;text-align:left;background:none;border:none;padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px;color:var(--green-dark);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.active .faq-answer{max-height:300px;}
.faq-answer p{padding-bottom:18px;}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card img{border-radius:var(--radius-md);aspect-ratio:4/3;object-fit:cover;}
.blog-card h3{font-size:17px;margin-top:14px;}

/* Footer CTA */
.footer-cta{background:var(--green);border-radius:var(--radius-lg);padding:60px;color:var(--white);}
.footer-cta h2{color:var(--white);}
.newsletter{display:flex;gap:10px;margin-top:20px;max-width:420px;}
.newsletter input{flex:1;padding:14px 18px;border-radius:999px;border:none;}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:50px;}
.footer-cols h4{color:var(--white);font-size:15px;}
.footer-cols a{color:#d9e3d0;font-size:14px;line-height:2;}
.footer-bottom{display:flex;justify-content:space-between;padding:24px 0;font-size:13px;color:var(--ink-soft);}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{min-height:320px;}
  .hero-media img{border-radius:0;}
  .steps,.band-grid,.services-grid,.testi-grid,.blog-grid{grid-template-columns:repeat(2,1fr);}
  .split,.quote-band{grid-template-columns:1fr;padding:30px;}
  .footer-cols{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .main-nav{display:none;}
  .main-nav.is-open{
    display:block;position:absolute;top:100%;left:0;right:0;background:var(--white);
    box-shadow:var(--shadow);padding:20px 24px;
  }
  .main-nav.is-open ul{flex-direction:column;gap:16px;}
  .header-phone span{display:none;}
  .menu-toggle{display:block;}
  .steps,.band-grid,.services-grid,.testi-grid,.blog-grid,.footer-cols{grid-template-columns:1fr;}
  .section{padding:60px 0;}
  .quote-copy,.footer-cta,.band{padding:36px 24px;}
}
.btn-whatsapp{background:#25D366;color:#ffffff;}
.btn-whatsapp:hover{background:#1ebe57;}
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.area-chip{background:var(--cream-2);border-radius:var(--radius-sm);padding:16px;text-align:center;font-weight:600;color:var(--green-dark);}
@media(max-width:640px){.areas-grid{grid-template-columns:repeat(2,1fr);}}
.header-phone {
	display: none !important;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.btn-whatsapp {
	background: #25D366 !important;
	color: #fff !important;
	border-color: #25D366 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.btn-whatsapp:hover {
	background: #1ebe5d !important;
	color: #fff !important;
	border-color: #1ebe5d !important;
}/* ── Service card images: consistent size + crop ────────── */
.service-card {
	overflow: hidden;
	border-radius: 14px;
}

.service-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* ── Hero image ───────────────────────────────────────── */
.hero-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 7;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* ── About section image ─────────────────────────────── */
.split img {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* ── Contact/quote section image ─────────────────────── */
.quote-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 6 / 5;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* ── Testimonial avatar ───────────────────────────────── */
.testi-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

/* ── Blog card image ──────────────────────────────────── */
.blog-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 14px 14px 0 0;
}/* ── Hero image: force full-bleed right side coverage ─────── */
.hero {
	position: relative;
	overflow: hidden;
	min-height: 620px;
}

.hero .container {
	position: relative;
}

.hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
}

.hero-copy {
	position: relative;
	z-index: 3;
	max-width: 600px;
}

.hero-media {
	position: absolute !important;
	top: 0;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border-radius: 0;
}

.hero-media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 0;
	display: block;
}

/* smooth blend into green on the left edge of the image */
.hero-media::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 100%;
	background: linear-gradient(to right, rgba(19, 59, 30, 1) 0%, rgba(19, 59, 30, 0) 100%);
	z-index: 1;
	pointer-events: none;
}

.hero-rating {
	position: absolute;
	z-index: 3;
}

@media (max-width: 992px) {
	.hero-media {
		position: relative;
		width: 100%;
		height: 320px;
	}
	.hero-media::before {
		display: none;
	}
	.hero {
		min-height: auto;
	}
}