/* ============================================================================
   Water Softener Quotes — shared design system
   Tokens, resets, chrome hover/responsive rules, and reusable components.
   Page-specific layout lives inline on each page (fast first paint), matching
   the design mockups; this file carries what must be shared or interactive.
   ============================================================================ */

:root{
  --brand:#1E40AF; --brand-d:#1e3a8a; --brand-l:#EFF6FF; --brand-b:#DBEAFE;
  --cta:#A4DB4C; --cta-ink:#1B3309; --amber:#E8740A;
  --txt:#1e293b; --muted:#64748b; --bg-soft:#F0F5FF;
  --ok:#16A34A; --err:#DC2626;
  --wrap:1180px; --read:820px;
  --r-card:18px; --r-btn:12px;
  --sh-rest:0 6px 18px rgba(30,58,138,.06);
  --sh-hover:0 14px 30px rgba(30,58,138,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff;font-family:'Inter',sans-serif;color:var(--txt);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{font-family:'Nunito Sans',sans-serif;letter-spacing:-.01em;line-height:1.15;margin:0}

/* Accessibility */
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.wsq-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--brand);
  font-weight:800;padding:12px 18px;border-radius:0 0 12px 0}
.wsq-skip:focus{left:0}

/* Keyframes */
@keyframes wsqpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes wsqshine{0%{left:-60%}60%,100%{left:130%}}
@keyframes wsqfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes wsqchatpop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes wsqreveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* Scroll reveal (JS sets [data-reveal=in]; no-JS shows content) */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .5s ease}
[data-reveal="in"]{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* FAQ accordions (native <details>) */
details[data-faq] summary{list-style:none;cursor:pointer}
details[data-faq] summary::-webkit-details-marker{display:none}
details[data-faq] [data-faq-ic]{transition:transform .2s ease}
details[data-faq][open] [data-faq-ic]{transform:rotate(45deg)}

/* ---- Chrome hover states (inline styles handle the base look) ---- */
[data-desk-nav] a:hover{color:var(--brand)!important}
header a[href*="get-quotes"]:hover,[data-sticky] a[href*="get-quotes"]:hover,
footer a[href*="get-quotes"]:hover{filter:brightness(.96)}
[data-sticky] a[href^="tel"]:hover{border-color:var(--brand)!important}
footer a:hover{color:#fff!important}
.wsq-ellie-panel{animation:wsqchatpop .3s ease}
[data-ellie-open]:hover{background:var(--brand-b)!important}
[data-ellie-input] input:focus{outline:none;border-color:var(--brand)!important;background:#fff!important}

/* Ellie chat bubbles (rendered by site.js) */
.ellie-bot{background:#fff;border:1px solid var(--brand-b);border-radius:15px 15px 15px 5px;
  padding:11px 14px;font-size:14.5px;line-height:1.5;color:var(--txt);max-width:88%;
  align-self:flex-start;box-shadow:0 2px 6px rgba(30,58,138,.05)}
.ellie-user{background:var(--brand);color:#fff;border-radius:15px 15px 5px 15px;
  padding:11px 14px;font-size:14.5px;line-height:1.5;max-width:88%;align-self:flex-end}
.ellie-chip{font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:14px;color:var(--brand);
  background:var(--brand-l);border:1.5px solid #C9DCF5;border-radius:11px;padding:10px 17px;cursor:pointer}
.ellie-chip:hover{background:var(--brand-b)}
.ellie-prompt{font-size:12px;color:#94a3b8;font-weight:600;margin-bottom:9px}
.ellie-field{width:100%;font-size:15px;color:var(--txt);border:2px solid var(--brand-b);
  border-radius:11px;padding:11px 13px;background:#F7FAFF}
.ellie-field.err{border-color:var(--err)}
.ellie-label{display:block;font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:13px;color:var(--brand-d);margin-bottom:5px}
.ellie-error{color:var(--err);font-size:12.5px;margin-top:4px}
.ellie-submit{width:100%;margin-top:14px;font-family:'Nunito Sans',sans-serif;font-weight:900;font-size:17px;
  color:var(--cta-ink);background:var(--cta);border:none;border-radius:12px;padding:15px;cursor:pointer;
  box-shadow:0 10px 22px rgba(164,219,76,.45)}
.ellie-submit:hover{filter:brightness(.96)}

/* ---- Reusable components (opt-in classes for content pages) ---- */
.wsq-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wsq-read{max-width:var(--read);margin:0 auto;padding:0 24px}
.wsq-sec{padding:60px 0}
/* Section spacing modifiers — use these instead of inline padding overrides so a
   coloured section never ends up flush to the top. */
.wsq-sec--tight{padding-top:30px}      /* first section after a hero */
/* Wraps a self-spaced CTA band: no own padding, and pulled into the neighbouring
   sections' padding so the band sits with a balanced, moderate gap (not a full
   section gap above + flush below). */
.wsq-sec--band{padding:0;margin:-22px 0}
.wsq-eyebrow{font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.wsq-h1{font-family:'Nunito Sans',sans-serif;font-weight:900;font-size:46px;line-height:1.12;
  letter-spacing:-.02em;color:var(--txt)}
.wsq-h2{font-family:'Nunito Sans',sans-serif;font-weight:900;font-size:34px;color:var(--txt)}
.wsq-lead{font-size:18px;line-height:1.65;color:#475569}
.wsq-card{background:#fff;border:1px solid var(--brand-b);border-radius:var(--r-card);
  padding:26px 24px;box-shadow:var(--sh-rest);transition:transform .2s ease,box-shadow .2s ease}
.wsq-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.wsq-btn-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'Nunito Sans',sans-serif;font-weight:900;color:var(--cta-ink);background:var(--cta);
  border:none;border-radius:13px;padding:15px 28px;font-size:16.5px;cursor:pointer;
  box-shadow:0 12px 26px rgba(164,219,76,.4);animation:wsqpulse 2.8s ease-in-out infinite}
.wsq-btn-cta:hover{filter:brightness(.96)}
/* Shine sweep across the primary CTA (design: hero pulse + shine) */
.wsq-btn-cta::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);animation:wsqshine 4.6s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .wsq-btn-cta{animation:none}
  .wsq-btn-cta::before{display:none}
}
.wsq-btn-ghost{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'Nunito Sans',sans-serif;font-weight:800;color:var(--brand);background:#fff;
  border:2px solid var(--brand-b);border-radius:13px;padding:13px 24px;font-size:16px}
.wsq-btn-ghost:hover{border-color:var(--brand)}
.wsq-chip{display:inline-flex;align-items:center;gap:7px;background:#DCFCE7;color:#166534;
  border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px}
.wsq-insted{background:var(--brand-l);border:1px solid var(--brand-b);border-radius:16px;
  padding:20px 22px;font-size:16.5px;line-height:1.6;color:#334155}
.wsq-insted strong{color:var(--brand-d)}

/* Inline CTA band — spread conversion prompts down long content pages */
.wsq-ctaband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:var(--brand-l);border:1px solid var(--brand-b);border-radius:16px;padding:18px 24px;margin:28px 0}
.wsq-ctaband .t{font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:16.5px;color:#1e3a8a}
/* When the band is the sole content of a band-section, don't add its own margin
   (the section rhythm handles spacing) — avoids a double gap. */
.wsq-sec--band .wsq-ctaband{margin:0}
.wsq-ctaband .r{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wsq-ctaband a.call{text-decoration:none;font-weight:700;color:var(--brand);white-space:nowrap}
.wsq-ctaband a.call:hover{text-decoration:underline}

/* In-short / AEO answer block */
.wsq-inshort{background:var(--brand-l);border-left:4px solid var(--brand);border-radius:0 14px 14px 0;
  padding:18px 22px;font-size:17px;line-height:1.6;color:#334155;margin:0 0 8px}

/* ---- Responsive (mirrors the mockups' [data-*] breakpoints) ---- */
[data-mnav]{display:none}
@media (max-width:980px){
  [data-desk-nav]{display:none !important}
  [data-burger]{display:flex !important}
  [data-mnav].open{display:block !important}
  [data-foot]{grid-template-columns:1fr !important;gap:28px !important}
  [data-hero-grid]{grid-template-columns:1fr !important;gap:36px !important}
  [data-split]{grid-template-columns:1fr !important}
  [data-cols-3],[data-3]{grid-template-columns:1fr !important}
  [data-cols-2]{grid-template-columns:1fr !important}
  .wsq-h1{font-size:35px}
  .wsq-h2{font-size:28px}
  .wsq-sec{padding:54px 0}
  .wsq-ellie-panel{left:12px !important;right:12px !important;bottom:84px !important;width:auto !important}
  [data-ellie-sub]{display:none !important}
}
@media (max-width:560px){
  [data-cols-4]{grid-template-columns:1fr 1fr !important}
  .wsq-h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
}