/**
 * ClearHomeWater — palette override (colour / depth only)
 * Drop in AFTER style.css (+ v3-hero.css). Does not change layout.
 * Brand direction: navy #071827 + green #2BB673 accents + aqua, with AA-safe button greens.
 */
:root {
  /* Core */
  --chw-navy: #071827;
  --chw-navy-mid: #0d2a3d;
  --chw-teal-deep: #0a4a52;
  --chw-green-brand: #2BB673;
  --chw-green-btn: #157a49;
  --chw-green-btn-hover: #0f5f3a;
  --chw-green-text: #157a49;
  --chw-green-soft: #e8f8f0;
  --chw-aqua: #3db8c9;
  --chw-aqua-bright: #5ec8d8;
  --chw-aqua-soft: #e6f7fa;
  --chw-aqua-tint: #f0fbfd;
  --chw-bg: #ffffff;
  --chw-bg-alt: #f3faf8;
  --chw-card: #ffffff;
  --chw-glass: rgba(255, 255, 255, 0.72);
  --chw-text: #071827;
  --chw-text-2: #3a4a57;
  --chw-muted: #5a6b78;
  --chw-border: #6b8794;
  --chw-border-soft: #c5d9e0;
  --chw-link: #157a49;
  --chw-link-hover: #0f5f3a;
  --chw-focus: #157a49;
  --chw-wa: #0f766c;
  --chw-wa-hover: #0a5c54;
  --chw-wa-bright: #25d366;
  --chw-success-bg: #e8f8f0;
  --chw-success-text: #146c41;
  --chw-warn-bg: #fff7ed;
  --chw-warn-text: #92400e;

  /* Live stylesheet also uses these. Keep them AA with white or on white. */
  --colour-green: #0f766c;
  --colour-green-dark: #0a5c54;

  /* Gradients */
  --chw-grad-navy-teal: linear-gradient(145deg, #071827 0%, #0d2a3d 48%, #0a4a52 100%);
  --chw-grad-aqua-green: linear-gradient(135deg, #3db8c9 0%, #2BB673 55%, #157a49 100%);
  /* Lightest stop stays at or darker than #167d4c (white contrast 5.16).
     #2BB673 is glow only — it fails AA behind white text. */
  --chw-grad-btn: linear-gradient(135deg, #167d4c 0%, #157a49 42%, #0f5f3a 100%);
  --chw-grad-btn-hover: linear-gradient(135deg, #157a49 0%, #126840 55%, #0f5f3a 100%);
  --chw-grad-hero-veil: linear-gradient(90deg, rgba(240,251,253,.96) 0%, rgba(232,248,240,.88) 28%, rgba(240,251,253,.35) 52%, transparent 72%);
  --chw-grad-page: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(61,184,201,.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(43,182,115,.12), transparent 50%), #ffffff;

  /* Shadows (tinted, layered) */
  --chw-shadow-sm: 0 2px 8px rgba(7, 24, 39, 0.06), 0 1px 2px rgba(10, 74, 82, 0.04);
  --chw-shadow-md: 0 8px 24px rgba(7, 24, 39, 0.10), 0 2px 8px rgba(61, 184, 201, 0.10);
  --chw-shadow-lg: 0 20px 50px rgba(7, 24, 39, 0.14), 0 8px 20px rgba(10, 74, 82, 0.10), 0 0 0 1px rgba(61, 184, 201, 0.12);
  --chw-shadow-glow: 0 8px 28px rgba(21, 122, 73, 0.35), 0 2px 8px rgba(43, 182, 115, 0.25);
  --chw-shadow-glow-hover: 0 12px 36px rgba(21, 122, 73, 0.45), 0 0 24px rgba(61, 184, 201, 0.25);

  /* Map existing site tokens → new palette */
  --colour-white: var(--chw-bg);
  --colour-blue: var(--chw-green-btn);
  --colour-blue-dark: var(--chw-green-btn-hover);
  --colour-blue-soft: var(--chw-aqua-soft);
  --colour-grey-900: var(--chw-text);
  --colour-grey-700: var(--chw-text-2);
  --colour-grey-500: var(--chw-muted);
  --colour-grey-100: var(--chw-bg-alt);
  --colour-border: var(--chw-border-soft);
  --shadow-soft: var(--chw-shadow-lg);
  --shadow-card: var(--chw-shadow-md);
}

/* ---------- Base ---------- */
body {
  color: var(--chw-text);
  background: var(--chw-grad-page);
}

a:where(:not(.btn):not(.button):not([class*="btn"])) {
  color: var(--chw-link);
}
a:where(:not(.btn):not(.button):not([class*="btn"])):hover {
  color: var(--chw-link-hover);
}

:focus-visible {
  outline: 3px solid var(--chw-focus);
  outline-offset: 3px;
}

/* ---------- Header / glass ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom-color: rgba(197, 217, 224, 0.85) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--chw-shadow-sm);
}

/* ---------- Primary buttons (gradient + glow) ---------- */
.btn-primary,
.button-primary,
a.btn-primary,
button.btn-primary,
.hero .btn-primary,
.cta .btn-primary,
.nav-cta,
.hardness-check-button,
[class*="btn"][class*="primary"] {
  background: var(--chw-grad-btn) !important;
  background-color: var(--chw-green-btn) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--chw-shadow-glow);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.btn-primary:hover,
.button-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.nav-cta:hover,
.nav-cta:focus-visible,
.hardness-check-button:hover,
.hardness-check-button:focus-visible {
  background: var(--chw-grad-btn-hover) !important;
  background-color: var(--chw-green-btn-hover) !important;
  box-shadow: var(--chw-shadow-glow-hover);
  filter: brightness(1.03);
}

/* Generic blue→green button backgrounds used across the live CSS */
.btn,
.button,
button[type="submit"] {
  transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

/* Hardcoded live blues → green system */
.site-header .btn,
.navbar .btn,
.quote-btn,
.request-quote,
a[href*="quote"] .btn {
  background: var(--chw-grad-btn) !important;
  color: #fff !important;
  box-shadow: var(--chw-shadow-glow);
}

/* ---------- WhatsApp ---------- */
.btn-whatsapp,
.whatsapp-btn,
.wa-btn,
a[href*="wa.me"],
a[href*="whatsapp"],
.floating-whatsapp,
.fab-whatsapp {
  background: var(--chw-wa) !important;
  background-image: none !important;
  color: #fff !important;
}
.btn-whatsapp:hover,
.whatsapp-btn:hover,
a[href*="wa.me"]:hover,
.floating-whatsapp:hover {
  background: var(--chw-wa-hover) !important;
  box-shadow: 0 10px 28px rgba(15, 118, 108, 0.4);
}

/* Specific hardcoded greens/teals from style.css */
[style*="#128c7e"],
[style*="#25d366"] { /* inline rare */ }

/* Override frequent hardcoded hex via attribute selectors is limited;
   use class-level remaps below. */

/* Live CSS uses #128c7e / #0f766c directly on WA buttons */
.btn-wa,
.whatsapp,
.contact-whatsapp {
  background: var(--chw-wa) !important;
  color: #fff !important;
}

/* ---------- Cards / glass ---------- */
.card,
.service-card,
.review-card,
.feature-card,
.postcode-card,
.panel,
.box {
  background: var(--chw-glass) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: var(--chw-shadow-md) !important;
}

/* ---------- Sections ---------- */
.section-muted,
.bg-muted,
.band-muted,
.alt-section {
  background: var(--chw-bg-alt) !important;
}

.section-dark,
.footer,
.site-footer,
.band-dark,
.reviews-dark {
  background: var(--chw-grad-navy-teal) !important;
  color: #fff;
}

/* ---------- Links & accents formerly blue ---------- */
.text-blue,
.accent,
.eyebrow,
.section-label {
  color: var(--chw-green-text) !important;
}

/* Cyan accents → aqua */
.hero-accent,
.highlight {
  color: var(--chw-aqua) !important;
}

/* ---------- Borders / inputs ---------- */
input, select, textarea {
  border-color: var(--chw-border) !important;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--chw-aqua) !important;
  box-shadow: 0 0 0 4px rgba(61, 184, 201, 0.22) !important;
  outline: none;
}

/* ---------- Success / warning badges ---------- */
.badge-success, .success, .ok-badge {
  background: var(--chw-success-bg) !important;
  color: var(--chw-success-text) !important;
}
.badge-warn, .warning, .hardness-hard, .band-hard {
  background: var(--chw-warn-bg) !important;
  color: var(--chw-warn-text) !important;
}

/* ---------- Remap hardcoded blues in common patterns via filter-free overrides ---------- */
/* Gradients that used logo blue */
[class*="gradient"],
.hero-panel,
.promo-band {
  /* soft nudge: prefer navy-teal when dark */
}

/* Explicit hex replacements for rules that don't use variables.
   These selectors mirror structures found in css_style.css. */
.btn-primary,
.primary-cta {
  background-image: var(--chw-grad-btn) !important;
}

/* Floating WA often hardcodes #25d366 — force AA green */
.whatsapp-float,
.float-wa,
#whatsapp-float,
a.whatsapp-float {
  background: var(--chw-wa) !important;
  color: #fff !important;
  box-shadow: var(--chw-shadow-glow);
}

/* ---------- V3 Hero (#chw-v3-hero) — isolated revert styles, override carefully ---------- */
#chw-v3-hero {
  color: var(--chw-text) !important;
  background: var(--chw-aqua-tint) !important;
}
#chw-v3-hero .eyebrow { color: var(--chw-green-text) !important; }
#chw-v3-hero h1 { color: var(--chw-navy) !important; }
#chw-v3-hero h1 em { color: var(--chw-green-text) !important; }
#chw-v3-hero .intro { color: var(--chw-text-2) !important; }
#chw-v3-hero .postcode {
  background: var(--chw-glass) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: var(--chw-shadow-lg) !important;
  backdrop-filter: blur(14px) saturate(1.2);
}
#chw-v3-hero .postcode button {
  background: var(--chw-grad-btn) !important;
  background-color: var(--chw-green-btn) !important;
  color: #fff !important;
  box-shadow: var(--chw-shadow-glow) !important;
}
#chw-v3-hero .postcode button:hover {
  background: var(--chw-grad-btn-hover) !important;
  box-shadow: var(--chw-shadow-glow-hover) !important;
}
#chw-v3-hero .postcode input {
  border-color: var(--chw-border) !important;
}
#chw-v3-hero .postcode small,
#chw-v3-hero .trust small,
#chw-v3-hero .check-note small,
#chw-v3-hero .steps small {
  color: var(--chw-muted) !important;
}
#chw-v3-hero .steps b { color: var(--chw-green-text) !important; }
#chw-v3-hero .steps i { color: var(--chw-aqua) !important; }
#chw-v3-hero .check {
  background: var(--chw-glass) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: var(--chw-shadow-lg) !important;
  backdrop-filter: blur(16px);
}
#chw-v3-hero .check-note strong {
  background: var(--chw-green-btn) !important;
  color: #fff !important;
}
#chw-v3-hero .metric { color: var(--chw-text-2) !important; }
#chw-v3-hero .benefits span,
#chw-v3-hero .trust > span,
#chw-v3-hero .steps {
  background: var(--chw-glass) !important;
  backdrop-filter: blur(12px);
  box-shadow: var(--chw-shadow-md) !important;
  border: 1px solid rgba(255,255,255,.65);
}
#chw-v3-hero .veil {
  background: var(--chw-grad-hero-veil) !important;
}
#chw-v3-hero input:focus-visible,
#chw-v3-hero button:focus-visible {
  outline: 3px solid var(--chw-focus) !important;
  outline-offset: 4px;
}

/* Request a quote header button often teal */
.navbar a.btn,
.navbar .cta-btn,
.header-cta {
  background: var(--chw-grad-btn) !important;
  color: #fff !important;
  box-shadow: var(--chw-shadow-glow);
}

/* Dark panels that used blue gradients */
.band-navy,
.cta-band,
.final-cta {
  background: var(--chw-grad-navy-teal) !important;
}

/* Soft blue chips → aqua soft */
.chip, .pill, .tag {
  background: var(--chw-aqua-soft) !important;
  color: var(--chw-navy) !important;
}


/* ===== Hardcoded hex remaps from css_style.css (colour only) ===== */
/* Blues → green / navy system */
* {
  /* cannot remap all; target known utility classes below */
}

/* Replace common blue fills used as backgrounds via attribute-less class hooks */
.btn,
.button,
.cta-button,
.check-btn,
.postcode button,
button.primary {
  /* if they used solid blue var already remapped via :root */
}

/* Direct color property overrides for elements that used light cyan accents */
.hero-kicker,
.kicker,
.eyebrow,
.section-eyebrow {
  color: var(--chw-green-text) !important;
}

/* #7fd0ff / #66c7ff accents → aqua */
.accent-cyan,
.metric-accent {
  color: var(--chw-aqua-bright) !important;
  border-color: var(--chw-aqua) !important;
}

/* Dark hero / footer blue gradients → navy-teal */
.hero-dark,
.footer-top,
.site-footer,
footer.site-footer,
.reviews-section,
.cta-section--dark {
  background: var(--chw-grad-navy-teal) !important;
}

/* Soft blue page bands */
.section--soft,
.band--soft {
  background: var(--chw-aqua-soft) !important;
}

/* WhatsApp green family (#25d366, #21c765, #1fc45c, #159e54) as BUTTON fills → AA wa */
.whatsapp-button,
.btn--whatsapp,
.wa-cta,
.fixed-whatsapp,
.float-button.whatsapp {
  background: var(--chw-wa) !important;
  color: #fff !important;
  box-shadow: var(--chw-shadow-glow);
}

/* Cards lift */
.card:hover,
.service-card:hover,
.feature-card:hover {
  box-shadow: var(--chw-shadow-lg) !important;
}

/* Footer text links on navy. WhatsApp buttons stay white on #0f766c. */
.site-footer a:not([href*="wa.me"]),
footer a:not([href*="wa.me"]) {
  color: var(--chw-aqua-bright) !important;
}
.site-footer a:not([href*="wa.me"]):hover,
footer a:not([href*="wa.me"]):hover {
  color: #fff !important;
}


/* Stronger depth on V3 after all:revert — re-assert glass + glow */
#chw-v3-hero .postcode,
#chw-v3-hero .check,
#chw-v3-hero .steps,
#chw-v3-hero .benefits span,
#chw-v3-hero .trust > span {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  box-shadow: 0 20px 50px rgba(7,24,39,.14), 0 8px 20px rgba(10,74,82,.12), 0 0 0 1px rgba(61,184,201,.14) !important;
}
#chw-v3-hero .postcode button {
  background-image: var(--chw-grad-btn) !important;
  background-color: #157a49 !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(21,122,73,.4), 0 2px 8px rgba(43,182,115,.3) !important;
  border: 0 !important;
}
#chw-v3-hero h1 em {
  color: #157a49 !important;
  background: none !important;
}
.navbar a.btn,
.header-cta,
a.btn[href*="contact"],
.site-header .btn {
  background-image: var(--chw-grad-btn) !important;
  background-color: #157a49 !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(21,122,73,.38) !important;
}

/* ===== Live site hooks (colour only; layout untouched) ===== */

/* Dark-section eyebrows: #157a49 on #071827 is 3.35 and fails AA. Aqua is 9.18. */
.section-dark .eyebrow,
.hero .eyebrow,
.hero.section-dark .eyebrow {
  color: var(--chw-aqua-bright) !important;
}

.site-footer a[href*="wa.me"],
.footer-whatsapp-button,
.zh-actions a[href*="wa.me"] {
  color: #fff !important;
  background: var(--chw-wa) !important;
  background-image: none !important;
}
.site-footer a[href*="wa.me"]:hover,
.footer-whatsapp-button:hover,
.zh-actions a[href*="wa.me"]:hover {
  color: #fff !important;
  background: var(--chw-wa-hover) !important;
}

/* "Ask on WhatsApp" pills use a bright green that fails behind white text. */
#services .service-link,
#services .service-link:hover,
#services .service-link:focus-visible {
  color: #fff !important;
  background: var(--chw-wa) !important;
  background-image: none !important;
  border-color: transparent !important;
}
#services .service-link:hover,
#services .service-link:focus-visible {
  background: var(--chw-wa-hover) !important;
}

.review-stars {
  color: var(--chw-green-text) !important;
}

/* Review cards sit on the navy band. 72% white glass drops muted text below AA. */
#reviews .review-card {
  background: rgba(255, 255, 255, 0.96) !important;
}

#why {
  background: linear-gradient(180deg, rgba(232, 248, 240, 0.72) 0%, rgba(255, 255, 255, 0.97) 48%, rgba(230, 247, 250, 0.55) 100%) !important;
}

#why .feature-icon,
#why .choose-card:nth-child(2n) .feature-icon,
.sustainable-card .sustainable-icon {
  color: var(--chw-green-text) !important;
  border-color: rgba(21, 122, 73, 0.2) !important;
  background: linear-gradient(180deg, var(--chw-green-soft), #ffffff) !important;
}

.zh-page {
  background: var(--chw-grad-page);
}

.zh-section-muted {
  background: var(--chw-bg-alt) !important;
}

.zh-card,
.zh-contact-panel {
  background: #ffffff !important;
  border-color: var(--chw-border-soft) !important;
  box-shadow: var(--chw-shadow-md);
}

.zh-hero .zh-image-card {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: var(--chw-shadow-lg) !important;
}

.zh-card li::before,
.zh-list li::before {
  border-left-color: var(--chw-green-text) !important;
  border-bottom-color: var(--chw-green-text) !important;
}

.zh-footer-note {
  background: var(--chw-grad-navy-teal) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}