/* =================================================
   WISE ENERGY WATCH — MOBILE RESPONSIVE STYLES
   Loaded via functions.php enqueue (not inline)
   ================================================= */

/* Base */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 768px) {
  body, html { overflow-x: hidden; max-width: 100vw; }
  img { max-width: 100% !important; height: auto !important; }
  a { min-height: 44px; }
}

/* Fix: 100vw trick causes horizontal overflow */
@media (max-width: 768px) {
  .wew-hero,
  .wew-trust,
  .wew-section,
  .wew-savings-section,
  .wew-final-cta {
    width: 100% !important;
    margin-left: 0 !important;
    overflow-x: hidden;
  }
  .wew-section-inner {
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* Hero */
@media (max-width: 768px) {
  .wew-hero { min-height: 100svh; padding: 90px 20px 50px; }
  .wew-hero-content { max-width: 100%; }
  .wew-hero h1 { font-size: 1.9rem; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 14px; }
  .wew-hero-sub { font-size: 0.95rem; line-height: 1.6; padding: 0; }
  .wew-hero-badge { font-size: 0.72rem; padding: 6px 12px; margin-bottom: 18px; }
  .wew-hero-ctas { flex-direction: column !important; align-items: center !important; gap: 10px !important; margin-bottom: 32px !important; }
  .wew-cta-primary, .wew-cta-secondary {
    width: 100% !important; max-width: 300px !important;
    text-align: center !important; justify-content: center !important;
    display: flex !important; padding: 13px 20px !important; border-radius: 12px !important;
  }
  .wew-scroll { display: none !important; }
}

/* Hero stats — 2x2 grid */
@media (max-width: 768px) {
  .wew-hero-stats { flex-wrap: wrap !important; max-width: 100% !important; border-radius: 14px !important; }
  .wew-hero-stat { flex: 1 1 50% !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding: 14px 10px !important; }
  .wew-hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08) !important; }
  .wew-hero-stat:nth-last-child(-n+2) { border-bottom: none !important; }
  .wew-hero-stat .num { font-size: 1.4rem !important; }
  .wew-hero-stat .lbl { font-size: 0.68rem !important; }
}

/* Trust bar — 2x2 grid */
@media (max-width: 768px) {
  .wew-trust { padding: 10px 16px !important; }
  .wew-trust-inner { flex-wrap: wrap !important; flex-direction: row !important; gap: 0 !important; }
  .wew-trust-item {
    flex: 1 1 50% !important; width: auto !important; border-right: none !important;
    border-bottom: 1px solid #e5e7eb !important; padding: 9px 8px !important;
    font-size: 0.78rem !important; justify-content: flex-start !important;
  }
  .wew-trust-item:nth-child(odd) { border-right: 1px solid #e5e7eb !important; }
  .wew-trust-item:nth-last-child(-n+2) { border-bottom: none !important; }
}

/* How It Works section — headings and text */
@media (max-width: 768px) {
  .wew-section { padding: 48px 20px !important; }
  .wew-how-head { margin-bottom: 24px !important; text-align: left !important; }

  /* HEADING FIX */
  .wew-h2 {
    font-size: 1.5rem !important;
    letter-spacing: -0.3px !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    color: #0a1f14 !important;
    hyphens: none !important;
  }
  .wew-h2 span { color: #1a7a5e !important; }

  /* BODY TEXT CONTRAST FIX */
  .wew-sub {
    color: #374151 !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  .wew-label {
    font-size: 0.7rem !important;
    padding: 5px 12px !important;
    margin-bottom: 12px !important;
  }
}

/* How-it-works steps */
@media (max-width: 768px) {
  .wew-how-grid { grid-template-columns: 1fr !important; border-radius: 16px !important; }
  .wew-how-step { padding: 24px 20px !important; }
  .wew-step-number {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
    background: linear-gradient(135deg, #b0bec5, #cfd8dc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  .wew-how-step h3 { font-size: 1.05rem !important; color: #0a1f14 !important; }
  .wew-how-step p { font-size: 0.92rem !important; color: #374151 !important; line-height: 1.65 !important; }
}

/* Savings section */
@media (max-width: 768px) {
  .wew-savings-section { padding: 48px 20px !important; }
  .wew-savings-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .wew-savings-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .wew-savings-card { padding: 16px 14px !important; border-radius: 14px !important; }
  .wew-savings-card-value { font-size: 1.4rem !important; }
}
@media (max-width: 380px) {
  .wew-savings-cards { grid-template-columns: 1fr !important; }
}

/* Features grid */
@media (max-width: 600px) {
  .wew-features-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .wew-feature-card { padding: 20px 18px !important; border-radius: 14px !important; }
}

/* Blog grid */
@media (max-width: 600px) {
  .wew-blog-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .wew-blog-card-body { padding: 16px !important; }
}

/* Final CTA */
@media (max-width: 768px) {
  .wew-final-cta { padding: 56px 20px !important; }
  .wew-final-cta .wew-h2 { font-size: 1.5rem !important; }
  .wew-cta-btns { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .wew-cta-btns a {
    width: 100% !important; max-width: 300px !important; text-align: center !important;
    justify-content: center !important; display: flex !important;
    padding: 13px 20px !important; border-radius: 12px !important;
  }
}

/* Footer */
@media (max-width: 768px) {
  .wew-footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .wew-footer-bottom { flex-direction: column !important; gap: 6px !important; text-align: center !important; font-size: 0.76rem !important; }
}

/* Logo size fix */
@media (max-width: 768px) {
  .wew-logo-wrap img {
    height: 28px !important;
    width: auto !important;
  }
  .wew-logo-name {
    font-size: 0.88rem !important;
  }
  .wew-logo-tag {
    font-size: 0.6rem !important;
  }
  .wew-nav {
    padding: 12px 16px !important;
  }
}

/* Feature cards text contrast fix */
@media (max-width: 768px) {
  .wew-feature {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .wew-feature h3 {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #0a1f14 !important;
    margin-bottom: 8px !important;
    margin-top: 12px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .wew-feature p {
    font-size: 0.9rem !important;
    color: #374151 !important;
    line-height: 1.65 !important;
  }
  .wew-feature-icon {
    font-size: 1.6rem !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    margin-bottom: 4px !important;
  }
  .wew-features-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}