/*
Theme Name: Child Safety Pool Covers Lite
Theme URI: https://childsafetypoolcovers.co.za
Author: Gauteng Safety Swimming Pool Covers
Description: WhatsApp-first, dark-mode lead funnel for solid PVC child-safety pool covers in Gauteng.
Version: 1.0.0
Text Domain: cspc
*/

:root{--gspc-purple:#561f6d;--gspc-grey:#2f343a;--gspc-lime:#93ce3d;--gspc-soft-white:#e9ecf1;--gspc-bg:#0b0d10;--gspc-border:#171b23}*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--gspc-bg);color:var(--gspc-soft-white);line-height:1.6;-webkit-font-smoothing:antialiased}a{color:var(--gspc-lime);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto;display:block}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.site-header{position:sticky;top:0;z-index:50;background:rgba(11,13,16,0.98);border-bottom:1px solid #1c2027;backdrop-filter:blur(14px)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.75rem 0}.logo img{max-height:48px;width:auto}.site-title{font-weight:600;font-size:1.05rem;color:var(--gspc-soft-white)}.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem;font-size:0.95rem}.main-nav a{color:var(--gspc-soft-white);opacity:0.85}.main-nav a:hover,.main-nav .current-menu-item > a{opacity:1;color:var(--gspc-lime)}.header-cta{display:flex;align-items:center;gap:0.75rem}.header-phone{font-size:0.9rem;color:var(--gspc-soft-white)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.7rem 1.3rem;border-radius:999px;border:none;background:var(--gspc-lime);color:#000;font-weight:600;font-size:0.95rem;cursor:pointer;text-decoration:none;box-shadow:0 0 0 1px rgba(0,0,0,0.2),0 14px 30px rgba(0,0,0,0.45)}.btn:hover{text-decoration:none;filter:brightness(1.05)}.btn-secondary{background:transparent;color:var(--gspc-soft-white);border:1px solid #2b313b;box-shadow:none}.btn-secondary:hover{border-color:var(--gspc-lime)}.btn-small{padding:0.45rem 0.9rem;font-size:0.85rem}.hero{padding:4rem 0 3rem;background:radial-gradient(circle at top,#1e2330 0,#0b0d10 55%,#06070a 100%);border-bottom:1px solid var(--gspc-border)}.hero-inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem;align-items:center}.hero-kicker{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.16em;color:var(--gspc-lime);margin-bottom:0.7rem}.hero h1{margin:0 0 1.1rem;font-size:2.2rem;color:var(--gspc-soft-white)}.hero-subtitle{margin:0 0 1.6rem;font-size:1.02rem;opacity:0.9}.hero-cta{display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.3rem}.hero-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem}.hero-badges li{font-size:0.8rem;padding:0.3rem 0.75rem;border-radius:999px;border:1px solid #272d37;background:rgba(12,15,20,0.9)}.hero-visual{max-width:380px;margin-left:auto;border-radius:1.5rem;padding:1px;background:linear-gradient(145deg,var(--gspc-purple),var(--gspc-grey),var(--gspc-lime));box-shadow:0 20px 45px rgba(0,0,0,0.55)}.hero-card{border-radius:1.45rem;padding:1.2rem 1.1rem;background:radial-gradient(circle at top,#151827 0,#06070a 60%)}.hero-card-title{font-size:0.9rem;font-weight:600;margin-bottom:0.25rem;color:var(--gspc-soft-white)}.hero-cover-pill{display:inline-flex;padding:0.3rem 0.7rem;border-radius:999px;border:1px solid #303646;font-size:0.8rem;margin-bottom:0.9rem;color:#cbd5f5}.hero-meta{list-style:none;margin:0 0 0.9rem;padding:0;font-size:0.85rem}.hero-meta li{position:relative;padding-left:1.1rem}.hero-meta li::before{content:"•";position:absolute;left:0;color:var(--gspc-lime)}.hero-note{font-size:0.8rem;opacity:0.8}.section{padding:3rem 0;border-bottom:1px solid var(--gspc-border)}.section-alt{background:#10131a}.section-header{margin-bottom:1.5rem}.section-header-centered{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}.section-kicker{font-size:0.8rem;letter-spacing:0.16em;text-transform:uppercase;color:#9ca3af;margin:0 0 0.4rem}.section-title{margin:0 0 0.4rem;font-size:1.6rem;color:var(--gspc-soft-white)}.section-intro{max-width:620px;font-size:0.96rem;opacity:0.9;margin:0.3rem auto 0}.section-quote{background:#10131a;border-bottom:1px solid #1b1f26}.feature-grid,.product-grid,.installs-grid,.mission-grid,.faq-grid{display:grid;gap:1.5rem}.feature-grid,.product-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.feature-card,.product-card{padding:1.2rem 1.1rem;border-radius:1rem;background:#141821;border:1px solid #1c2028}.feature-card h3,.product-card h3{margin-top:0;margin-bottom:0.45rem;font-size:1.05rem}.installs-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.install-card{border-radius:1rem;overflow:hidden;background:#11141c;border:1px solid #1c2028;display:flex;flex-direction:column}.install-image{width:100%;height:190px;object-fit:cover}.install-body{padding:0.95rem 1rem 1.1rem}.install-title{margin:0 0 0.35rem;font-size:1rem}.mission-grid,.faq-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:flex-start}.values-list{margin:0.5rem 0 0;padding-left:1.1rem;font-size:0.95rem}.faq-cta{padding:1.2rem 1.1rem;border-radius:1rem;background:#151927;border:1px solid #232838}.post{padding:1.5rem 0;border-bottom:1px solid #1b1f28}.post-title{margin:0 0 0.3rem}.post-title a{color:var(--gspc-soft-white)}.post-meta{font-size:0.8rem;color:#9ca3af;margin-bottom:0.7rem}.pagination{margin-top:1.5rem}.final-cta{text-align:center}.final-cta h2{margin-top:0;margin-bottom:0.7rem}.contact-form{background-color:#1f2329;border-radius:16px;padding:2rem;border:1px solid #2b313b;box-shadow:0 18px 40px rgba(0,0,0,0.45);max-width:720px;margin:0 auto}.contact-form form{margin:0}.contact-form label{display:block;color:var(--gspc-soft-white);font-weight:500;margin-bottom:0.45rem;font-size:0.92rem}.contact-form input[type="text"],.contact-form input[type="email"],.contact-form input[type="tel"],.contact-form input[type="file"],.contact-form textarea{width:100%;padding:0.8rem 0.85rem;border-radius:10px;border:1px solid #2b313b;background-color:#151a21;color:var(--gspc-soft-white);font-size:0.95rem;margin-bottom:1.1rem;outline:none}.contact-form input[type="text"]:focus,.contact-form input[type="email"]:focus,.contact-form input[type="tel"]:focus,.contact-form input[type="file"]:focus,.contact-form textarea:focus{border-color:var(--gspc-lime);box-shadow:0 0 0 1px rgba(147,206,61,0.35)}.contact-form textarea{min-height:140px;resize:vertical}.contact-form input[type="submit"]{background-color:var(--gspc-lime);border:none;color:#000;font-size:1rem;font-weight:600;cursor:pointer;padding:0.8rem 1.7rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;margin-top:0.2rem;box-shadow:0 0 0 1px rgba(0,0,0,0.25),0 16px 32px rgba(0,0,0,0.5)}.contact-form input[type="submit"]:hover{filter:brightness(1.05)}.contact-form .wpcf7-response-output{margin-top:1rem;border-radius:10px;padding:0.75rem 1rem;border-width:1px;font-size:0.9rem}.contact-form .wpcf7-mail-sent-ok{border-color:#22c55e;background:rgba(34,197,94,0.08)}.contact-form .wpcf7-validation-errors,.contact-form .wpcf7-acceptance-missing{border-color:#f97373;background:rgba(248,113,113,0.08)}.contact-form input[type="file"]{padding:0.6rem 0.85rem;cursor:pointer}.contact-form span.wpcf7-not-valid-tip{color:#f87171;font-size:0.8rem;margin-top:-0.8rem;margin-bottom:0.8rem;display:block}.site-footer{background:#050609;margin-top:2rem}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;padding:2rem 0 1.5rem}.footer-block h4{margin-top:0;margin-bottom:0.6rem;font-size:1rem}.footer-block p{font-size:0.9rem;opacity:0.9}.footer-bottom{border-top:1px solid #181b22;padding:0.8rem 0}.footer-bottom-inner{display:flex;align-items:center;justify-content:center}.footer-bottom-inner p{margin:0;font-size:0.82rem;color:#9ca3af}@media (max-width:900px){.hero-inner{grid-template-columns:minmax(0,1fr)}.hero-visual{margin:0 auto}}@media (max-width:800px){.header-inner{flex-wrap:wrap;align-items:flex-start}.main-nav ul{flex-wrap:wrap;row-gap:0.5rem}.header-cta{margin-left:auto}.mission-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}.contact-form{padding:1.5rem}}
/* --- Child Safety additions --- */
.section[id]{scroll-margin-top:92px;}

/* Sticky mobile CTA bar (WhatsApp-first) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(11,13,16,0.98);border-top:1px solid #1c2027;backdrop-filter:blur(14px);padding:0.65rem 0;display:none}
.sticky-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:0.65rem}
.sticky-cta .btn{flex:1}
.sticky-cta .btn-secondary{flex:0 0 auto}
@media (max-width:800px){.sticky-cta{display:block}.site-footer{padding-bottom:4.75rem}}


/* ==========================================
   Neon palette (logo-friendly) — still dark-mode
   Drop this BELOW the base styles so it overrides cleanly.
   ========================================== */
:root{
  /* Keep WhatsApp green for main CTA, but use the logo's neon palette for accents */
  --gspc-purple:#6a2383;
  --gspc-grey:#444b53;
  --gspc-cyan:#20f6ff;
  --gspc-pink:#ff3dbb;
  --gspc-sun:#ffd24a;

  --gspc-accent:var(--gspc-cyan);
  --gspc-accent2:var(--gspc-pink);
}

/* Links + nav accents */
a{color:var(--gspc-accent)}
a:hover{color:var(--gspc-accent2);text-decoration:underline}

.main-nav a:hover,
.main-nav .current-menu-item > a{color:var(--gspc-accent);opacity:1}

/* Header gets a subtle neon wash, not a full rainbow mess */
.site-header{
  background:
    linear-gradient(90deg, rgba(11,13,16,0.96) 0%,
                          rgba(106,35,131,0.16) 50%,
                          rgba(11,13,16,0.96) 100%);
}

/* Make the logo feel "native" (soft glow, no harsh edges) */
.logo img{
  max-height:56px;
  width:auto;
  filter:
    drop-shadow(0 0 10px rgba(32,246,255,0.35))
    drop-shadow(0 0 18px rgba(255,61,187,0.22));
}

/* Hero colourway: purple → cyan → pink like the logo */
.hero{
  background:
    radial-gradient(circle at top,
      rgba(106,35,131,0.30) 0%,
      #0b0d10 55%,
      #06070a 100%);
}

.hero-kicker{color:var(--gspc-sun)}
.hero-meta li::before{color:var(--gspc-accent)}
.hero-visual{
  background:linear-gradient(145deg,var(--gspc-purple),var(--gspc-cyan),var(--gspc-pink));
  box-shadow:
    0 20px 45px rgba(0,0,0,0.55),
    0 0 30px rgba(32,246,255,0.12),
    0 0 36px rgba(255,61,187,0.10);
}

/* Secondary buttons: cyan border on hover */
.btn-secondary:hover{border-color:var(--gspc-accent)}

/* Form focus: cyan (matches logo), submit stays WhatsApp-green */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form input[type="file"]:focus,
.contact-form textarea:focus{
  border-color:var(--gspc-accent);
  box-shadow:0 0 0 1px rgba(32,246,255,0.35);
}

/* Little polish */
::selection{background:rgba(255,61,187,0.28)}

/* Child Safety Pool Covers - Contact Page */
.cspc-contact{
  --purple:#6a2383;
  --grey:#444b53;
  --lime:#93ce3d;
  --bg:#07070a;
  --card:#0f0f14;
  --stroke:rgba(255,255,255,.10);
  --muted:rgba(255,255,255,.70);
  background: var(--bg);
  color:#fff;
  padding: 40px 18px 70px;
}

.cspc-contact a{ color: inherit; }

.cspc-contact__hero{
  max-width: 1100px;
  margin: 0 auto 26px;
}

.cspc-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  padding:8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
}

.cspc-dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--lime);
  box-shadow: 0 0 18px rgba(147,206,61,.35);
}

.cspc-contact h1{
  margin: 14px 0 10px;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cspc-contact h1 span{ color: var(--lime); }

.cspc-contact__hero p{
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}

.cspc-cta{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.cspc-grid{
  max-width: 1100px;
  margin: 0 auto;
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px){
  .cspc-grid{ grid-template-columns: 1fr 1fr; }
}

.cspc-stack{ display:flex; flex-direction:column; gap:18px; }

.cspc-card{
  border:1px solid var(--stroke);
  background: var(--card);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.cspc-card h2{
  margin:0;
  font-size: 20px;
  font-weight: 800;
}

.cspc-card p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.cspc-box{
  margin-top: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  padding: 14px;
}

.cspc-label{ font-size: 12px; color: var(--muted); }
.cspc-strong{ margin-top: 4px; font-weight: 800; }
.cspc-small{ margin-top: 8px; font-size: 13px; color: var(--muted); }

.cspc-actions{ margin-top: 10px; }

.cspc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 18px;
  padding: 12px 16px;
  font-weight: 800;
  text-decoration: none;
  border:1px solid transparent;
  transition: .15s ease;
}

.cspc-btn--lime{
  background: var(--lime);
  color:#000;
}

.cspc-btn--purple{
  width: 100%;
  background: var(--purple);
  color:#fff;
}

.cspc-btn--ghost{
  background: rgba(255,255,255,.03);
  border-color: var(--stroke);
}

.cspc-btn:hover{ transform: translateY(-1px); opacity: .95; }

.cspc-list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

.cspc-form{ margin-top: 14px; }

.cspc-form label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.cspc-form input,
.cspc-form select,
.cspc-form textarea{
  width: 100%;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.35);
  color:#fff;
  padding: 12px 12px;
  outline: none;
}

.cspc-form input:focus,
.cspc-form select:focus,
.cspc-form textarea:focus{
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(147,206,61,.12);
}

.cspc-row{
  display:grid;
  gap:14px;
  grid-template-columns: 1fr;
  margin-bottom: 14px;
}

@media (min-width: 640px){
  .cspc-row{ grid-template-columns: 1fr 1fr; }
}

.cspc-note{
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

.cspc-link{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cspc-toast{
  margin-top: 14px;
  border-radius: 16px;
  padding: 12px 14px;
  border:1px solid var(--stroke);
  font-weight: 700;
}

.cspc-toast--ok{ background: rgba(147,206,61,.10); }
.cspc-toast--bad{ background: rgba(255,100,100,.10); }

.cspc-hp{ display:none !important; }