/*
Theme Name: Washley Services
Theme URI: https://washley.com.au/
Author: Washley Services
Author URI: https://washley.com.au/
Description: Custom WordPress theme for Washley Services — professional cleaning, grounds & maintenance across Australia. Includes hero, services list, and an "Our Work" slider matching the live preview.
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: washley
Tags: business, cleaning, services, australia, custom-colors, custom-menu, featured-images
*/

:root{
  --deep:#0A2540;
  --primary:#0E5FD9;
  --cyan:#00B8FF;
  --bg:#ffffff;
  --fg:#0A2540;
  --muted:#5b6b80;
  --soft:#f3f6fb;
  --border:#e4ebf3;
  --grad-brand:linear-gradient(135deg,#0E5FD9,#00B8FF);
  --grad-hero:linear-gradient(135deg,rgba(10,37,64,.88),rgba(14,95,217,.78));
  --shadow-brand:0 10px 30px -10px rgba(14,95,217,.35);
  --shadow-card:0 10px 30px -15px rgba(10,37,64,.25);
  --font-h:"Poppins",system-ui,sans-serif;
  --font-b:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-b);color:var(--fg);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-h);color:var(--deep);letter-spacing:-.01em;margin:0 0 .5em}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--deep)}
.brand img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.main-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.main-nav a{color:var(--fg);font-weight:500;font-size:14px}
.main-nav a:hover{color:var(--primary)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-weight:600;font-size:14px;border:0;cursor:pointer;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-brand{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn-light{background:#fff;color:var(--deep)}
.menu-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--deep)}

/* Hero */
.hero{position:relative;color:#fff;overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:var(--grad-hero)}
.hero-inner{position:relative;z-index:2;padding:90px 20px}
.eyebrow{letter-spacing:.25em;color:var(--cyan);font-weight:600;font-size:13px;margin-bottom:14px}
.hero h1{color:#fff;font-size:clamp(34px,5vw,60px);font-weight:800;line-height:1.1;margin-bottom:20px}
.hero p{color:rgba(255,255,255,.9);max-width:640px;margin:0 auto 28px;font-size:17px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Section title */
.section{padding:80px 0}
.section-title{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 50px}
.section-title h2{margin:0;font-size:clamp(26px,3.4vw,36px);text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.section-title .bar{height:4px;width:80px;background:var(--primary);border-radius:99px}

/* Services */
.svc-group{display:grid;grid-template-columns:140px 1fr;gap:30px;align-items:flex-start;margin-bottom:50px}
.svc-icon{width:96px;height:96px;border-radius:50%;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-brand)}
.svc-icon svg{width:42px;height:42px}
.svc-body h3{font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:14px}
.svc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.svc-list li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.svc-list li::before{content:"";flex:0 0 18px;height:18px;margin-top:6px;background:var(--primary);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") no-repeat center/contain}

/* Our Work slider */
.work-section{background:var(--soft)}
.swiper{padding:10px 0 50px}
.work-card{position:relative;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-card);background:#fff}
.work-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.work-card .label{position:absolute;left:0;right:0;bottom:0;background:var(--deep);color:#fff;text-align:center;padding:12px;font-weight:700;letter-spacing:.25em}
.swiper-pagination-bullet-active{background:var(--primary)!important}
.swiper-button-next,.swiper-button-prev{color:var(--deep)!important;background:#fff;width:40px!important;height:40px!important;border-radius:50%;box-shadow:var(--shadow-card)}
.swiper-button-next:after,.swiper-button-prev:after{font-size:16px!important;font-weight:800}

/* Why */
.why{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.why h2{font-size:clamp(28px,3.4vw,38px);font-weight:800;margin-bottom:14px}
.why p{color:var(--muted);font-size:18px}
.why .img{aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card)}
.why .img img{width:100%;height:100%;object-fit:cover}

/* CTA */
.cta{background:var(--grad-hero);color:#fff;text-align:center;padding:70px 20px}
.cta h2{color:#fff;font-size:clamp(26px,3vw,36px);font-weight:800}
.cta-info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:760px;margin:24px auto 28px;font-size:14px}
.cta-info span{display:inline-flex;align-items:center;gap:8px;justify-content:center}
.cta-info svg{width:16px;height:16px;color:var(--cyan)}

/* Footer */
.site-footer{background:var(--deep);color:rgba(255,255,255,.82);padding:36px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14px}
.foot a{color:var(--cyan)}
.foot .links{display:flex;gap:22px}

/* Mobile */
@media (max-width:900px){
  .main-nav{display:none}
  .main-nav.open{display:block;position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:14px 20px}
  .main-nav.open ul{flex-direction:column;gap:14px}
  .menu-toggle{display:inline-flex}
  .svc-group{grid-template-columns:1fr;text-align:center}
  .svc-icon{margin:0 auto}
  .svc-list li{text-align:left}
  .why{grid-template-columns:1fr}
  .cta-info{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════
   NEW FEATURES – v2.0
   ═══════════════════════════════════════════════════ */

/* ─── What We Do section ─────────────────────────── */
.what-we-do-section { background: var(--soft); }
.what-we-do-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.wwd-card { background:#fff; border-radius:14px; padding:28px 22px; text-align:center; box-shadow:var(--shadow-card); border-top:4px solid var(--primary); transition:transform .2s; }
.wwd-card:hover { transform:translateY(-4px); }
.wwd-icon { width:72px; height:72px; border-radius:50%; background:var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:var(--shadow-brand); }
.wwd-card h3 { font-size:17px; font-weight:700; margin-bottom:10px; color:var(--deep); }
.wwd-card p { color:var(--muted); font-size:14px; line-height:1.6; margin:0; }

/* ─── Booking section ────────────────────────────── */
.booking-outer { padding:0; }
.booking-section { padding:80px 0; }
.booking-section .container { padding:0; }
.booking-wrap { display:grid; grid-template-columns:1fr 2fr; gap:48px; align-items:flex-start; }
.booking-info { background:var(--deep); color:#fff; border-radius:16px; padding:36px; }
.booking-info h3 { color:#fff; font-size:22px; margin-bottom:20px; }
.booking-info ul { list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:12px; }
.booking-info ul li { color:rgba(255,255,255,.85); font-size:15px; }
.booking-payment h4 { color:var(--cyan); font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; }
.payment-icons { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.pay-badge { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:4px 12px; font-size:12px; font-weight:500; }
.pay-note { color:rgba(255,255,255,.6); font-size:12px; line-height:1.5; margin:0; }

.booking-form-wrap { background:#fff; border-radius:16px; padding:36px; box-shadow:var(--shadow-card); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-group label { font-size:13px; font-weight:600; color:var(--deep); }
.form-group input,
.form-group select,
.form-group textarea { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:9px; font-family:var(--font-b); font-size:15px; color:var(--fg); background:#fff; transition:border-color .15s; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--primary); }
.req { color:#e53935; }

.captcha-wrap { margin-bottom:22px; }
.captcha-wrap label { display:block; font-size:13px; font-weight:600; color:var(--deep); margin-bottom:8px; }
.captcha-row { display:flex; align-items:center; gap:14px; }
.captcha-q { background:var(--soft); border:1.5px solid var(--border); border-radius:9px; padding:11px 18px; font-weight:700; font-size:18px; color:var(--deep); letter-spacing:.05em; }
.captcha-input { width:90px !important; text-align:center; font-size:20px !important; font-weight:700 !important; }

.btn-full { width:100%; justify-content:center; padding:14px 24px; font-size:16px; border-radius:10px; }
.booking-msg { padding:14px 18px; border-radius:10px; font-size:15px; margin-bottom:18px; background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.booking-error { background:#f8d7da; color:#721c24; border-color:#f5c6cb; }

/* ─── Float buttons (WhatsApp + FB) ─────────────── */
.float-buttons { position:fixed; bottom:28px; right:24px; z-index:999; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.float-btn { display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:50px; color:#fff; font-weight:600; font-size:14px; text-decoration:none; box-shadow:0 4px 18px rgba(0,0,0,.22); transition:transform .2s, box-shadow .2s; }
.float-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.28); color:#fff; }
.whatsapp-btn { background:#25D366; }
.facebook-btn { background:#1877F2; padding:13px; border-radius:50%; }

/* ─── Responsive tweaks ──────────────────────────── */
@media (max-width:1024px) {
  .what-we-do-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .main-nav{display:none}
  .main-nav.open{display:block;position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:14px 20px}
  .main-nav.open ul{flex-direction:column;gap:14px}
  .menu-toggle{display:inline-flex}
  .svc-group{grid-template-columns:1fr;text-align:center}
  .svc-icon{margin:0 auto}
  .svc-list li{text-align:left}
  .why{grid-template-columns:1fr}
  .cta-info{grid-template-columns:1fr}
  .booking-wrap { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .what-we-do-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:500px) {
  .what-we-do-grid { grid-template-columns:1fr; }
  .float-btn span { display:none; }
  .whatsapp-btn { padding:14px; border-radius:50%; }
}

/* ─── Page template styles ───────────────────────── */
.page-hero { background:var(--grad-hero); color:#fff; padding:60px 0 50px; }
.page-hero-inner h1 { color:#fff; font-size:clamp(28px,4vw,48px); font-weight:800; margin-bottom:12px; }
.breadcrumb { color:rgba(255,255,255,.7); font-size:14px; }
.breadcrumb a { color:var(--cyan); text-decoration:none; }
.page-content-wrap { min-height:400px; }