/* === Prevent horizontal scroll on all screen sizes === */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}
.container, .wrapper, [class*="container"], [class*="wrapper"] {
  max-width: 100% !important;
}

/* Hide "Why Us" nav item without touching JS */
.nav-item a[href="#why-choose-us"],
.mobile-nav-item a[href="#why-choose-us"] {
  display: none !important;
}
.nav-item a[href="#why-choose-us"] + *,
.nav-item:has(a[href="#why-choose-us"]) {
  display: none !important;
}
/* Target the parent li */
li:has(a[href="#why-choose-us"]) {
  display: none !important;
}

/* CLIENT PORTAL button: identical to INSTANT QUOTE */
.header-btn-portal-new {
  margin-right: 4px !important;
}

/* Phone number: hidden from header entirely */
.header-btn-phone {
  display: none !important;
}

/* === Hero gradient: match specialistroofing.com exactly ===
   Strong blue left, smooth wide fade, photo visible right */
.hero-overlay {
  background-image: linear-gradient(
    90deg,
    rgba(75, 175, 255, 0.92) 0%,
    rgba(75, 175, 255, 0.80) 25%,
    rgba(107, 193, 255, 0.55) 45%,
    rgba(140, 210, 255, 0.20) 60%,
    rgba(255, 255, 255, 0.00) 75%
  ) !important;
}

/* Background image: cover full hero so photo shows through */
.hero-section:before {
  background-size: cover !important;
  background-position: center right !important;
}

/* Hide truck on desktop, keep on mobile */
@media (min-width: 769px) {
  .hero-truck {
    display: none !important;
  }
}

/* Hide phone mockup on mobile */
@media (max-width: 768px) {
  .testimonials-phone,
  .phone-roof-container {
    display: none !important;
  }
}

/* Hide features bar on mobile */
@media (max-width: 768px) {
  .features {
    display: none !important;
  }
}

/* Footer logo: centered on mobile */
@media (max-width: 768px) {
  .footer-brand {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .footer-logo-link {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .footer-logo-img {
    max-width: 180px !important;
    margin: 0 auto !important;
  }
}

/* Mobile: hide Read More, center CTA */
@media (max-width: 768px) {
  .trust-read-more {
    display: none !important;
  }
  .trust-cta-btn {
    display: block !important;
    margin: 16px auto 0 !important;
    text-align: center !important;
    width: fit-content !important;
  }
  .trust-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* Mobile menu: Client Portal - exact same style as Schedule Free Roof Inspection */
a.mobile-nav-btn-portal {
  display: block !important;
  background-color: #003fbe !important;
  color: #fff !important;
  font-family: Nexa, sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 16px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  margin: 0 !important;
  letter-spacing: 0.5px !important;
}

/* Why Choose section: center "Read More" on mobile */
@media (max-width: 768px) {
  .why-read-more-btn {
    display: block !important;
    margin: 10px auto 0 !important;
    text-align: center !important;
    width: fit-content !important;
  }
  .why-choose-text,
  .why-choose-content {
    text-align: center !important;
  }
}

/* Why Choose: center "Read More" summary button on mobile */
@media (max-width: 768px) {
  .why-accordion > summary,
  .why-accordion-title {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    list-style: none !important;
  }
  .why-accordion > summary::-webkit-details-marker {
    display: none !important;
  }
}