/* =========================================================
   HERO BADGE BANNER — static row of certifications/awards
   pinned to the bottom edge of the hero section (no scrolling).

   Loaded ONLY on: index.html, free-estimates.html, free-quote.html
   (page-scoped on purpose — never added to css/style.css so the
   ~180+ other pages that also use #hero/.hero-content are completely
   unaffected). Nothing in this file overrides existing hero copy,
   headline, buttons, or the existing .trust-badges pill row — it only
   adds a small amount of bottom clearance to #hero (padding-bottom)
   so this new banner has room to sit below everything else without
   overlapping any existing hero content.
   ========================================================= */

/* Small amount of extra breathing room at the bottom of the hero so
   the badge band never overlaps the existing headline/buttons/pills
   above it. This ONLY takes effect on pages that load this stylesheet. */
#hero {
  padding-bottom: 164px;
}

.hero-badge-banner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 3; /* above .hero-bg overlay (z-index:0) and .hero-content (z-index:2) */
  overflow: hidden;
  background: #F7F7F7;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 14px 0;
}

.hero-badge-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}

.hero-badge-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-badge-item img {
  height: 100px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}

/* Mobile reorder: Google Guaranteed + Yelp Guaranteed appear on their own
   top row, with GAF / Nextdoor / CertainTeed on a row below. Achieved with
   flex "order" — no HTML markup order changes needed. */
@media (max-width: 900px) {
  #hero { padding-bottom: 176px; }
  .hero-badge-banner { padding: 14px 0; }
  .hero-badge-track { gap: 18px 24px; }
  .hero-badge-item img { height: 80px; }

  .hero-badge-item:nth-child(1) { order: 1; } /* Google Guaranteed */
  .hero-badge-item:nth-child(5) { order: 2; } /* Yelp Guaranteed */
  .hero-badge-item:nth-child(2) { order: 4; } /* GAF Master Elite */
  .hero-badge-item:nth-child(3) { order: 5; } /* Nextdoor Fave */
  .hero-badge-item:nth-child(4) { order: 6; } /* CertainTeed */
  .hero-badge-track::after {
    content: "";
    flex-basis: 100%;
    order: 3;
  }
}

@media (max-width: 480px) {
  #hero { padding-bottom: 168px; }
  .hero-badge-banner { padding: 11px 0; }
  .hero-badge-track { gap: 14px 16px; }
  .hero-badge-item img { height: 64px; }
}