/*
 * Home hero -- plain code, not Elementor (see jr_hero_shortcode() in
 * functions.php for why). Uses the project's own brand tokens
 * (tokens-joes-roofing.css) directly instead of hardcoding hex values a
 * second time -- fixes the "two slightly different brand reds" drift
 * found in the 2026-08-19 brand audit (#D01D2F on the old Elementor
 * button vs --jr-color-primary #D12731 everywhere else): this button
 * uses the token, so there's only one red going forward.
 */
.jr-home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 860px;
  padding: 130px 40px 50px;
  background-color: var(--jr-color-graphite);
  box-sizing: border-box;
  /* Clips the zoomed photo layer below -- without this the slow scale
     animation would spill visibly past the hero's own edges. */
  overflow: hidden;
}

/* Photo lives on its own layer so it can animate independently of the
   overlay and the text above it. The original Elementor hero had this
   same slow zoom (a "Background Slideshow" widget, Ken Burns effect) --
   removed 2026-08-14 because it depended on JS to paint, directly hurting
   LCP. A CSS animation on `transform` is compositor-only: the image
   paints immediately at rest, the zoom is purely decorative on top, so
   the effect comes back without reintroducing the performance problem
   that got it removed the first time. */
.jr-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jr-hero-bg-url, none);
  background-size: cover;
  /* Shifted toward the bottom of the source photo (not plain center) --
     puts more of the truck/crew in frame and less empty sky at the top. */
  background-position: center 78%;
  background-repeat: no-repeat;
  animation: jr-home-hero-kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* Overlay on its own layer, above the photo, below the text. */
.jr-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(39, 37, 42, 0.14) 0%, rgba(48, 27, 27, 0.14) 100%);
}

.jr-home-hero__inner {
  position: relative;
  z-index: 1;
}

@keyframes jr-home-hero-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jr-home-hero::before {
    animation: none;
  }
}

/* Elementor gives every widget a default 20px bottom margin on its own
   wrapper div (.elementor-element-jrhero1, one level above .jr-home-hero
   itself) -- with nothing else in that widget to absorb it, it showed as
   a plain white gap between the hero and the trust strip right below it. */
.elementor-element-jrhero1 {
  margin-bottom: 0 !important;
}

.jr-home-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1400px;
  width: 100%;
}

.jr-home-hero__title {
  /* Flex items under align-items:center shrink to their own content's
     fit-content width by default -- without this, the browser's own
     line-breaking heuristic picks a narrower box than the actual
     available space, wrapping a line early for no real reason. */
  width: 100%;
  margin: 0;
  font-family: var(--jr-font-heading);
  font-size: 54px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1px;
  word-spacing: 5px;
  text-transform: uppercase;
  color: var(--jr-color-text-inverse);
  /* Overlay alone got lighter (owner wants the photo clearer, not the
     text fighting to stay readable) -- a soft drop shadow keeps the
     title legible over any part of the photo, bright sky included,
     without needing to darken the whole image back down. */
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.jr-home-hero__title .hhds-title-highlight {
  color: var(--color-title-highlight);
}

.jr-home-hero__subtitle {
  margin: 20px 20px 0;
  font-family: var(--jr-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--jr-color-text-inverse);
  max-width: 800px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Button styling itself lives in cta-buttons.css (.jr-btn / .jr-btn-primary
   / .jr-btn-secondary-*) -- the single shared source for every button on
   the site. Back to inline, centered below the subtitle (the bottom-left
   placement tried on 2026-08-19 didn't read well against a busy photo --
   reverted once the red border made the centered position work fine).
   The whole .jr-home-hero__inner group centers as one block, so growing
   the space above the button pushes title+subtitle up and settles the
   button a bit lower than the very first version. */
.jr-home-hero__cta {
  display: inline-block;
  margin-top: 68px;
}

/* Hero-only refinement (2026-08-19) -- scoped to this one button, not a
   change to .jr-btn-secondary-light itself (that class is shared with
   the address-section "Get Directions" button, which the owner asked
   not to touch here). Still a secondary CTA -- no solid red at rest,
   red stays a hover-only state -- just more defined against the photo:
   a lighter charcoal (derived from --jr-color-graphite via color-mix,
   not a new hardcoded gray), a heavier red border, and a soft external
   shadow to separate it from the busy background. */
.jr-home-hero__cta.jr-btn-secondary-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Frosted-glass CTA: transparent enough that the truck photo reads
     clearly through it, but backdrop-blur softens the photo's own
     contrast so the white label stays legible no matter which part of
     the (busy, high-contrast) photo sits behind the button. Plain
     transparency alone forced a choice between "visible" and
     "readable" here -- blur removes that trade-off. */
  background-color: color-mix(in srgb, color-mix(in srgb, var(--jr-color-graphite) 82%, white 18%) 60%, transparent 40%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-width: 2px;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(22, 22, 22, 0.35);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.jr-home-hero__cta.jr-btn-secondary-light:hover,
.jr-home-hero__cta.jr-btn-secondary-light:focus-visible {
  background-color: var(--jr-color-primary);
  border-color: var(--jr-color-primary);
  color: #fff;
  box-shadow: 0 8px 22px rgba(22, 22, 22, 0.4);
}

.jr-home-hero__cta-icon {
  /* 2026-08-20: sized off a fixed px value, not em -- at 1.1em (tied to
     the button's 15px font-size) the icon read as a barely-there mark
     next to the now-longer "Get a Free Quote" label. 22px keeps it a
     clearly legible clipboard+check, not just a decorative sliver. */
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

@media (max-width: 1023px) {
  .jr-home-hero {
    padding: 110px 40px 40px;
  }

  .jr-home-hero__title {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .jr-home-hero {
    /* padding-top was 18px -- too little to clear the transparent mobile
       header (header_main_height.mobile = 75px in Kadence's theme_mods),
       so the title rendered underneath the logo. 100px clears it with
       room to spare. */
    min-height: 78vh;
    /* Bottom padding was 50px -- with the CTA now pushed to the very
       bottom via margin-top:auto, that read as a big gap above the
       trust-strip band. 12px keeps just a hairline of breathing room. */
    padding: 100px 20px 12px;
    /* stretch (not center) so .jr-home-hero__inner fills the full hero
       height below -- needed for the CTA's margin-top:auto push further
       down to have any free space to push into. */
    align-items: stretch;
  }

  /* Mobile crops far more of the photo's width than desktop (a landscape
     photo scaled to cover a narrow, tall box) -- shifted to reveal the
     truck's front end instead of the default centered crop. */
  .jr-home-hero::before {
    background-position: 25% 78%;
  }

  .jr-home-hero__title {
    font-size: 25px;
    letter-spacing: -1px;
    word-spacing: 4px;
    line-height: 1.3;
  }

  .jr-home-hero__subtitle {
    margin: 20px 0 0;
    font-size: 16px;
  }

  .jr-home-hero__cta {
    /* Was a fixed 16px, leaving the button sitting mid-photo over the
       truck. margin-top:auto (with .jr-home-hero stretched above) eats
       all the leftover vertical space instead, so the button settles at
       the very bottom of the hero -- right above the trust-strip band --
       and the truck stays clear above it. */
    margin-top: auto;
  }
}