/* 3R Outdoor clone preview overrides */
html { scroll-behavior: smooth; }

/* Fix dark tiled strip between nav and first section (global, all pages).
   The captured body carries an inline background-image (a dark repeating pattern
   from the source CMS). That image tiles through any gap in the content and
   also shows through transparent-background sections elsewhere on the page.
   Clearing it makes the body background transparent → html (#fff) shows through,
   which is invisible against the white nav and white content sections. */
body { background-image: none !important; }

/* Map container — allow Google Maps embeds / Leaflet through.
   isolation: isolate creates a stacking context that scopes Leaflet's
   internal z-indexes (200–600) inside #map so they don't bleed into the
   global context and cover the sticky nav (z-50) or the .service-areas
   city-list overlay (z-10). */
#map {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Hero content column.
   The captured markup constrains this column to sm:w-1/2 with a large
   lg:pl-72 (18rem) left padding. At laptop/desktop widths that left the
   headline only ~220px wide, so every word wrapped onto its own line.
   These rules give the column a fluid width + padding and make the headline
   font fluid, so the text always fits without one-word-per-line breakage at
   any device scale. Plain CSS (not Tailwind classes) so it always applies. */
[data-heap-component-name="hero"] main > div {
  width: 100%;
  max-width: 40rem;
  box-sizing: border-box;
  padding-left: clamp(1.5rem, 5vw, 6rem);
  padding-right: 1.5rem;
  padding-top: clamp(4rem, 11vh, 9rem);
}
@media (min-width: 640px) {
  [data-heap-component-name="hero"] main > div {
    width: 62%;
    max-width: 46rem;
  }
}
@media (min-width: 1280px) {
  [data-heap-component-name="hero"] main > div {
    width: 55%;
    max-width: 52rem;
  }
}

/* Fluid headline: scales with the viewport so it fills the column nicely and
   never collapses to one word per line, replacing the text-4xl→text-7xl jumps. */
[data-heap-component-name="hero"] h2 {
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  line-height: 1.05;
}

/* Space between eyebrow h1 and headline h2 */
[data-heap-component-name="hero"] h1 {
  margin-bottom: 1.5rem;
}

/* Prevent third-party floating widgets from covering preview QA. */
iframe[src*="facebook.com/plugins"] {
  max-width: 100%;
}