/*
Theme Name: SA Home Battery Child
Theme URI: https://sahomebattery.com.au
Description: GeneratePress child theme for SA Home Battery - SA solar + battery rebate lead-gen site. Holds custom styles, lead-form shortcode, and programmatic city-page template.
Author: Neoterik
Template: generatepress
Version: 1.3.0
*/

:root {
  --sb-navy: #0a2a43;       /* trust / header */
  --sb-sun: #f4a623;        /* solar accent / CTA */
  --sb-green: #1f8a4c;      /* savings / battery */
  --sb-ink: #1c2b36;
  --sb-grey: #5a6b78;
  --sb-line: #e3e8ec;
  --sb-bg-soft: #f5f8fa;
}

/* ---------- Lead form (the product) ---------- */
.sb-leadform {
  background: var(--sb-bg-soft);
  border: 1px solid var(--sb-line);
  border-radius: 12px;
  padding: 28px;
  max-width: 560px;
  box-shadow: 0 6px 24px rgba(10,42,67,.08);
}
.sb-leadform h3 { margin-top: 0; color: var(--sb-navy); font-size: 1.4rem; }
.sb-leadform .sb-sub { color: var(--sb-grey); margin: 4px 0 18px; font-size: .95rem; }
.sb-leadform label { display:block; font-weight:600; color:var(--sb-ink); margin:12px 0 4px; font-size:.9rem; }
.sb-leadform input, .sb-leadform select {
  width:100%; padding:12px 14px; border:1px solid var(--sb-line);
  border-radius:8px; font-size:1rem; background:#fff;
}
.sb-leadform .sb-cta {
  width:100%; margin-top:18px; padding:15px; border:0; border-radius:8px;
  background:var(--sb-sun); color:#1c1300; font-weight:800; font-size:1.05rem;
  cursor:pointer; transition:transform .05s ease, filter .15s ease;
}
.sb-leadform .sb-cta:hover { filter:brightness(1.05); }
.sb-leadform .sb-cta:active { transform:translateY(1px); }
.sb-leadform .sb-consent { font-size:.78rem; color:var(--sb-grey); margin-top:12px; line-height:1.4; }

/* ---------- Rebate / payback callouts ---------- */
.sb-stack { display:grid; gap:14px; margin:24px 0; }
@media (min-width:640px){ .sb-stack { grid-template-columns:repeat(3,1fr); } }
.sb-stack-item {
  background:#fff; border:1px solid var(--sb-line); border-top:4px solid var(--sb-sun);
  border-radius:10px; padding:18px;
}
.sb-stack-item .sb-amt { font-size:1.6rem; font-weight:800; color:var(--sb-green); }
.sb-stack-item .sb-lbl { font-weight:700; color:var(--sb-navy); margin:4px 0; }
.sb-stack-item .sb-note { font-size:.85rem; color:var(--sb-grey); }

.sb-callout {
  background:var(--sb-bg-soft); border-left:4px solid var(--sb-green);
  padding:16px 20px; border-radius:0 8px 8px 0; margin:22px 0;
}
.sb-urgency {
  background:#fff6e6; border:1px solid #f4d59a; color:#7a5300;
  padding:14px 18px; border-radius:8px; margin:22px 0; font-weight:600;
}

/* ---------- Tables / FAQ ---------- */
.sb-table { width:100%; border-collapse:collapse; margin:20px 0; }
.sb-table th, .sb-table td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--sb-line); }
.sb-table th { background:var(--sb-navy); color:#fff; }
.sb-faq { margin:24px 0; }
.sb-faq details { border:1px solid var(--sb-line); border-radius:8px; padding:14px 18px; margin-bottom:10px; }
.sb-faq summary { font-weight:700; color:var(--sb-navy); cursor:pointer; }
.sb-faq p { margin:10px 0 0; color:var(--sb-ink); }

/* ============================================================
   HOME PAGE — Trust & Authority design (Lexend + Source Sans 3)
   Full-width sections via full-bleed technique.
   ============================================================ */

/* Typography */
body { font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h1, h2, h3, .sb-hero h1, .entry-title { font-family: 'Lexend', -apple-system, sans-serif; letter-spacing: -0.02em; }

/* --- Full-width front page: strip GeneratePress container constraints --- */
.home .site-content > .container,
.home .content-area,
.home .site-main,
.home .inside-article,
.home .entry-content { max-width: 100% !important; width: 100%; padding: 0 !important; margin: 0; }
.home .site-content { padding: 0 !important; }
.home .inside-article { border: 0 !important; box-shadow: none !important; }
.home .entry-content > * { margin-top: 0; margin-bottom: 0; }

/* Full-bleed section: spans the viewport regardless of any parent width */
.sb-section { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; }
.sb-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sb-section-pad { padding: 84px 0; }
@media (max-width: 768px){ .sb-section-pad { padding: 56px 0; } }

.sb-eyebrow { display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sb-sun); margin-bottom:18px; }
.sb-h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--sb-navy); margin: 0 0 12px; line-height:1.15; }
.sb-section-intro { color: var(--sb-grey); font-size:1.08rem; max-width:680px; line-height:1.6; margin: 0 0 40px; }
.sb-center { text-align:center; }
.sb-center .sb-section-intro { margin-left:auto; margin-right:auto; }

/* ---------- HERO ---------- */
.sb-hero {
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(244,166,35,.20), transparent 60%),
    linear-gradient(100deg, rgba(7,28,48,.96) 0%, rgba(10,42,67,.90) 38%, rgba(10,40,64,.55) 72%, rgba(10,40,64,.30) 100%),
    url(/wp-content/uploads/2026/05/hero-home.jpg) center right / cover no-repeat;
  color:#fff;
}
.sb-hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; padding: 88px 0; }
@media (max-width: 980px){ .sb-hero-grid { grid-template-columns:1fr; gap:36px; padding:56px 0; } }
.sb-hero h1 { color:#fff; font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height:1.08; margin:0 0 20px; font-weight:800; }
.sb-hero h1 .sb-hl { color:var(--sb-sun); }
.sb-lede { font-size:1.18rem; line-height:1.6; color:#cfe0ee; margin:0 0 28px; max-width:560px; }
.sb-trustrow { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; }
.sb-trustrow li { display:flex; align-items:center; gap:8px; font-weight:600; color:#eaf3fb; font-size:.98rem; }
.sb-trustrow svg { width:20px; height:20px; color:var(--sb-green); flex:0 0 auto; }
.sb-trustrow li svg { background:#fff; border-radius:50%; }

/* Hero form card override (the lead form sits in the hero) */
.sb-hero .sb-leadform { box-shadow: 0 24px 60px rgba(0,0,0,.32); border:0; }

/* ---------- STAT BAND ---------- */
.sb-stats { background:var(--sb-navy); border-top:3px solid var(--sb-sun); }
.sb-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:38px 0; text-align:center; }
@media (max-width:760px){ .sb-stats-grid { grid-template-columns:repeat(2,1fr); gap:28px 16px; } }
.sb-stat .sb-stat-num { font-family:'Lexend'; font-weight:800; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--sb-sun); line-height:1; }
.sb-stat .sb-stat-lbl { color:#bcd0e2; font-size:.92rem; margin-top:8px; }

/* ---------- AREA CARDS ---------- */
.sb-areas { background:#fff; }
.sb-area-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1000px){ .sb-area-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .sb-area-grid { grid-template-columns:1fr; } }
.sb-area-card {
  display:block; text-decoration:none; background:#fff; border:1px solid var(--sb-line);
  border-radius:14px; padding:24px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  cursor:pointer;
}
.sb-area-card:hover { border-color:var(--sb-sun); box-shadow:0 12px 30px rgba(10,42,67,.10); transform:translateY(-3px); }
.sb-area-card .sb-area-pin { width:28px; height:28px; color:var(--sb-green); margin-bottom:14px; }
.sb-area-card h3 { margin:0 0 6px; color:var(--sb-navy); font-size:1.18rem; }
.sb-area-card p { margin:0 0 14px; color:var(--sb-grey); font-size:.92rem; line-height:1.5; }
.sb-area-card .sb-area-go { color:var(--sb-sun); font-weight:700; font-size:.92rem; display:inline-flex; align-items:center; gap:6px; }
.sb-area-card:hover .sb-area-go { gap:10px; }

/* ---------- HOW IT WORKS ---------- */
.sb-how { background:var(--sb-bg-soft); }
.sb-step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:820px){ .sb-step-grid { grid-template-columns:1fr; gap:20px; } }
.sb-step { background:#fff; border:1px solid var(--sb-line); border-radius:14px; padding:30px; position:relative; }
.sb-step-ico { width:52px; height:52px; border-radius:12px; background:rgba(31,138,76,.10); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.sb-step-ico svg { width:26px; height:26px; color:var(--sb-green); }
.sb-step-num { position:absolute; top:22px; right:24px; font-family:'Lexend'; font-weight:800; font-size:2.2rem; color:var(--sb-line); line-height:1; }
.sb-step h3 { margin:0 0 8px; color:var(--sb-navy); font-size:1.2rem; }
.sb-step p { margin:0; color:var(--sb-grey); line-height:1.6; }

/* ---------- TRUST STRIP ---------- */
.sb-trust { background:#fff; }
.sb-trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:900px){ .sb-trust-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sb-trust-grid { grid-template-columns:1fr; } }
.sb-trust-item { display:flex; gap:14px; align-items:flex-start; }
.sb-trust-item svg { width:26px; height:26px; color:var(--sb-sun); flex:0 0 auto; margin-top:2px; }
.sb-trust-item h4 { margin:0 0 4px; color:var(--sb-navy); font-family:'Lexend'; font-size:1.02rem; }
.sb-trust-item p { margin:0; color:var(--sb-grey); font-size:.9rem; line-height:1.5; }

/* ---------- FINAL CTA BAND ---------- */
.sb-cta-band {
  background: linear-gradient(135deg, var(--sb-green) 0%, #176b3b 100%);
  color:#fff; text-align:center;
}
.sb-cta-band h2 { color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); margin:0 0 12px; }
.sb-cta-band p { color:#dff0e6; font-size:1.1rem; margin:0 0 26px; }
.sb-btn {
  display:inline-block; background:var(--sb-sun); color:#1c1300; font-weight:800;
  padding:16px 34px; border-radius:10px; text-decoration:none; font-size:1.05rem;
  transition: filter .15s ease, transform .05s ease; cursor:pointer;
}
.sb-btn:hover { filter:brightness(1.06); color:#1c1300; }
.sb-btn:active { transform:translateY(1px); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .sb-area-card, .sb-btn, .sb-area-card .sb-area-go { transition:none; }
}

/* ---------- Gravity Forms styling inside .sb-leadform ---------- */
.sb-leadform .gform_wrapper { margin:0; }
.sb-leadform .gform_wrapper .gform_fields { display:grid; grid-template-columns:1fr 1fr; gap:14px 14px; }
.sb-leadform .gform_wrapper .gfield { margin:0; }
.sb-leadform .gform_wrapper .gfield--width-full,
.sb-leadform .gform_wrapper .gfield--type-email,
.sb-leadform .gform_wrapper .gfield--type-select,
.sb-leadform .gform_wrapper .gfield--type-consent { grid-column:1 / -1; }
.sb-leadform .gform_wrapper .gfield_label { font-family:'Lexend'; font-weight:600; color:var(--sb-ink); font-size:.86rem; margin-bottom:5px; }
.sb-leadform .gform_wrapper input[type=text],
.sb-leadform .gform_wrapper input[type=email],
.sb-leadform .gform_wrapper input[type=tel],
.sb-leadform .gform_wrapper select {
  width:100%; padding:11px 13px !important; border:1px solid var(--sb-line) !important;
  border-radius:8px !important; font-size:1rem !important; background:#fff !important; color:var(--sb-ink) !important;
}
.sb-leadform .gform_wrapper input:focus,
.sb-leadform .gform_wrapper select:focus { border-color:var(--sb-sun) !important; outline:2px solid rgba(244,166,35,.25) !important; }
.sb-leadform .gform_wrapper .gfield--type-consent .gfield_label { display:none; }
.sb-leadform .gform_wrapper .ginput_container_consent { display:flex; gap:9px; align-items:flex-start; }
.sb-leadform .gform_wrapper .ginput_container_consent input { margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--sb-green); }
.sb-leadform .gform_wrapper .gfield_consent_label { font-size:.82rem; color:var(--sb-grey); line-height:1.4; }
.sb-leadform .gform_wrapper .gfield_description { font-size:.76rem; color:var(--sb-grey); padding-top:4px; }
.sb-leadform .gform_footer { margin:16px 0 0 !important; padding:0 !important; }
.sb-leadform .gform_footer input[type=submit],
.sb-leadform .gform_footer button {
  width:100%; background:var(--sb-sun) !important; color:#1c1300 !important; font-family:'Lexend';
  font-weight:800 !important; font-size:1.05rem !important; border:0 !important; border-radius:8px !important;
  padding:15px !important; cursor:pointer; transition:filter .15s ease;
}
.sb-leadform .gform_footer input[type=submit]:hover,
.sb-leadform .gform_footer button:hover { filter:brightness(1.06); }
.sb-leadform .gform_required_legend { display:none; }
.sb-leadform .gfield_required { color:var(--sb-sun); }
@media (max-width:520px){ .sb-leadform .gform_wrapper .gform_fields { grid-template-columns:1fr; } }