/*
  Targeted homepage fixes only.
  Keep selectors narrowly scoped to avoid side effects in other sections.
*/

/* Ensure custom navy utility used by the hero email CTA renders correctly. */
.bg-navy-steel\/80,
.bg-navy-steel\/80:hover,
.bg-navy-steel,
.hover\:bg-navy-steel:hover {
  background-color: rgba(28, 46, 74, 0.85) !important;
}

/* Hero translucent info cards: keep readable white text/icons. */
.hero-info-box,
.hero-info-box h1,
.hero-info-box h2,
.hero-info-box h3,
.hero-info-box h4,
.hero-info-box p,
.hero-info-box span,
.hero-info-box li,
.hero-info-box small,
.hero-info-box strong,
.hero-info-box i,
.hero-info-box svg,
.hero-info-box [class*="bg-white/10"] h1,
.hero-info-box [class*="bg-white\\/10"] h1,
.hero-info-box [class*="bg-white/10"] h2,
.hero-info-box [class*="bg-white\\/10"] h2,
.hero-info-box [class*="bg-white/10"] h3,
.hero-info-box [class*="bg-white\\/10"] h3,
.hero-info-box [class*="bg-white/10"] h4,
.hero-info-box [class*="bg-white\\/10"] h4,
.hero-info-box [class*="bg-white/10"] p,
.hero-info-box [class*="bg-white\\/10"] p,
.hero-info-box [class*="bg-white/10"] span,
.hero-info-box [class*="bg-white\\/10"] span,
.hero-info-box [class*="bg-white/10"] li,
.hero-info-box [class*="bg-white\\/10"] li,
.hero-info-box [class*="bg-white/10"] i,
.hero-info-box [class*="bg-white\\/10"] i,
.hero-info-box [class*="bg-white/10"] svg,
.hero-info-box [class*="bg-white\\/10"] svg,
.hero-info-box [class*="bg-white/20"] h1,
.hero-info-box [class*="bg-white\\/20"] h1,
.hero-info-box [class*="bg-white/20"] h2,
.hero-info-box [class*="bg-white\\/20"] h2,
.hero-info-box [class*="bg-white/20"] h3,
.hero-info-box [class*="bg-white\\/20"] h3,
.hero-info-box [class*="bg-white/20"] h4,
.hero-info-box [class*="bg-white\\/20"] h4,
.hero-info-box [class*="bg-white/20"] p,
.hero-info-box [class*="bg-white\\/20"] p,
.hero-info-box [class*="bg-white/20"] span,
.hero-info-box [class*="bg-white\\/20"] span,
.hero-info-box [class*="bg-white/20"] li,
.hero-info-box [class*="bg-white\\/20"] li,
.hero-info-box [class*="bg-white/20"] i,
.hero-info-box [class*="bg-white\\/20"] i,
.hero-info-box [class*="bg-white/20"] svg,
.hero-info-box [class*="bg-white\\/20"] svg {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Keep home hero detail box above decorative wave and prevent cutoff at default zoom. */
.hero-info-box {
  position: relative;
  z-index: 20;
  margin-bottom: 1rem !important;
}

@media (min-width: 1200px) {
  .hero-home-section .hero-content-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(16rem, 20rem));
    column-gap: 1rem;
    row-gap: 1rem;
    align-items: start;
    justify-content: center;
    width: 100%;
    max-width: 76rem !important;
  }

  .hero-home-section .hero-content-layout > h1,
  .hero-home-section .hero-content-layout > p {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 54rem !important;
  }
  .hero-home-section .hero-content-layout > h1 {
    grid-row: 1;
  }
  .hero-home-section .hero-content-layout > p {
    grid-row: 2;
  }

  .hero-home-section .hero-call-row {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    width: 100%;
    max-width: 20rem !important;
  }

  .hero-home-section .hero-email-button {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    width: 100%;
    max-width: 20rem !important;
    margin: 0 !important;
  }

  .hero-home-section .hero-content-layout > .hero-info-box {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: center;
    margin: 0.5rem 0 0 !important;
    max-width: 100% !important;
    width: 100%;
    align-self: center;
  }

  .hero-home-section .hero-call-row a.mobile-touch-button,
  .hero-home-section .hero-email-button {
    min-height: 3.25rem;
  }

  .hero-home-section .hero-content-layout > h1,
  .hero-home-section .hero-content-layout > p {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 54rem !important;
  }
  .hero-home-section .hero-content-layout > h1 {
    grid-row: 1;
  }
  .hero-home-section .hero-content-layout > p {
    grid-row: 2;
  }

  .hero-home-section .hero-call-row {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    width: 100%;
    max-width: 20rem !important;
  }

  .hero-home-section .hero-email-button {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    width: 100%;
    max-width: 20rem !important;
    margin: 0 !important;
  }

  .hero-home-section .hero-content-layout > .hero-info-box {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: center;
    margin: 0.5rem 0 0 !important;
    max-width: 100% !important;
    width: 100%;
    align-self: center;
  }

  .hero-home-section .hero-call-row a.mobile-touch-button,
  .hero-home-section .hero-email-button {
    min-height: 3.25rem;
  }
}

/* Hide decorative white wave on homepage hero per latest design request. */
.hero-home-section .hero-bottom-wave {
  display: none !important;
}

/* Hide decorative white wave on homepage hero per latest design request. */
.hero-home-section .hero-bottom-wave {
  display: none !important;
}

/* Do not alter link layout/positioning; only keep phone link underline removed. */
.hero-info-box a[href^="tel:"] {
  text-decoration: none;
}

/* Explicit email CTA contrast safety. */
.hero-info-box a[href^="mailto:"] {
  color: #ffffff !important;
}

/* Keep map links reliably clickable above overlays/animations. */
.hero-info-box a[href*="google.com/maps"] {
  position: relative;
  z-index: 30;
  pointer-events: auto !important;
}

/* Tire guide: let multi-digit badges (e.g., 215) fit inside marker bubble. */
h4 .w-7.h-7.rounded-full.bg-orange-500 {
  width: auto !important;
  min-width: 2.1rem;
  padding: 0 0.35rem;
}

/* Remove footer social links globally. */
footer a.w-10.h-10.rounded-full {
  display: none !important;
}

/* Remove redundant "Our Services" column only on /services page. */
body.page-services footer .grid > div:nth-child(2) {
  display: none !important;
}


.hero-info-box a.mobile-touch-button {
  display: inline-flex !important;
  width: 100% !important;
  max-width: 36rem;
  pointer-events: auto !important;
  position: relative;
  z-index: 25;
}

.hero-home-section .hero-email-button {
  display: inline-flex !important;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 25;
}

/* Ensure home "Call Now" controls remain interactive above decorative layers. */
a.mobile-touch-button,
.hero-info-box .mobile-touch-button,
.hero-info-box button,
.hero-info-box [role="link"] {
  pointer-events: auto !important;
  position: relative;
  z-index: 35;
}

/* Contact page: center Get In Touch icons in their circular badges. */
a.flex.items-center i.w-8.h-8.rounded-full.bg-lightBg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center;
  font-size: 0.95rem;
  padding: 0 !important;
}