/* Hero — hero-bg gradient with pattern overlay, stone-texture background */

/* Ensure the estimate form anchor clears the sticky .site-top header (~5rem)
   plus breathing room. scroll-margin-top works on the element itself and
   applies even for cross-page navigation (e.g. /#estimate from another page),
   complementing the html scroll-padding-top in base.css. */
#estimate {
  scroll-margin-top: 6rem;
}

.hero-bg {
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-gray-600) 50%, var(--color-text) 100%);
  position: relative;
}

/* Warm-tinted dark variant for CTA sections — separates from footer */
.hero-bg-warm {
  background: linear-gradient(135deg, var(--color-text-warm) 0%, var(--color-text-warm-mid) 50%, var(--color-text-warm) 100%);
  position: relative;
}

/* Shared pattern overlay for both hero variants */
.hero-bg::before,
.hero-bg-warm::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.stone-texture {
  background-color: var(--color-surface-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23b8b2b1' fill-opacity='0.3' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* ========== HERO CONTAINER PADDING ========== */

/* Hero sections need generous desktop padding to accommodate the wave SVG
   divider at the bottom. On mobile the wave renders much shorter, so
   11rem of desktop padding becomes a big dead gap under the form.
   Compound selector (.container.hero-container) boosts specificity to
   beat layout.css's .container { padding: 0 var(--space-4); } shorthand,
   which otherwise wins on padding-top/padding-bottom because Propshaft's
   :app helper loads stylesheets alphabetically (layout.css after hero.css). */
.container.hero-container {
  position: relative;
  z-index: 1;
  padding-top: var(--space-12);        /* 3rem on mobile */
  padding-bottom: var(--space-16);     /* 4rem on mobile — clears the short wave */
}

@media (min-width: 768px) {
  .container.hero-container {
    padding-top: var(--space-20);      /* 5rem — matches the previous desktop value */
    padding-bottom: 11rem;             /* preserves desktop wave clearance */
  }
}

/* ========== HERO TRUST BADGES ========== */

/* Three icon+label trust items wrapped in a flex row. On narrow phones
   the natural wrap puts two items on the first row and one on the
   second — add justify-content: center so both rows align on the
   midline of the hero copy instead of left-hugging and leaving the
   orphan third item floating off-center. Tighter gap on phones keeps
   the two rows visually grouped. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
  .hero-trust {
    justify-content: center;
    gap: var(--space-3) var(--space-6);
  }
}