/*
 * 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 "multiple brand reds" drift the 2026-09-08
 * color audit found across the whole codebase (--jr-color-primary itself
 * had drifted to an invented #D12731; the real brand red, per
 * Colores_y_Tipografia_2026-09-08.html, is #BF121A): this button uses the
 * token, so a future correction to the stored value applies here too.
 */
.jr-home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 2026-09-07: shrunk from 860px to 780px so the ticker band right
     below would clear the fold on common laptop heights. 2026-09-09:
     bumped to 100vh to restore the full-screen feel ("anteriormente
     cabia en todo el alto de pantalla"). Owner: too much -- "reduce a
     la mitad todo lo que agregaste". Halved the increase instead of
     picking a new guessed constant: exactly midway between the old
     780px and the 100vh version, still scaling with the real screen
     (not a fixed px), just half as aggressively. */
  min-height: calc(390px + 50vh);
  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.
     Was 85%, tuned for the shorter 780px box -- now that the box is a
     full 100vh again there's real vertical room, so pulled back toward
     center to bring the roofline/ladders back into frame at the top
     (owner, 2026-09-09: "no se ve la parte de arriba de la foto"). */
  background-position: center 60%;
  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;
}

/* Real pieces pulled out of the reviews band (Google wordmark + score +
   stars only -- see jr_render_rating_badge()'s own comment) into a
   standalone floating card, bottom-left of the hero, sitting right above
   the trust band below it (owner, 2026-09-09: "arriba sobre la banda de
   confianza a lado inferior izquierdo... como una vitrina acabada de
   limpiar, brillando"). Anchored inside the hero's own box (not
   overflowing past it) -- .jr-home-hero keeps overflow:hidden for the
   Ken Burns photo layer above, so this stays a corner accent rather than
   straddling the section seam. The "vitrina brillando" (shining display
   case) read: a bright glass card with a soft diagonal sheen sweep,
   layered shadow lifting it off the photo behind it. */
/* Same dark-glass card as the reviews band's own rating badge
   (google-reviews-band.css .lib-reviews-band__intro) -- owner, 2026-09-09:
   "ese diseño... lo quería arriba en el hero... ese box debe tener el
   mismo diseño elegante". Same content as before (Google wordmark + score
   + stars, 2 rows), only the card's own visual treatment changes to match:
   graphite gradient + red-tinted hairline border instead of the earlier
   white-glass version. */
.jr-rating-badge {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.9rem 1.25rem;
  border-radius: var(--jr-radius-lg);
  background: linear-gradient(155deg, color-mix(in srgb, var(--jr-color-graphite) 85%, white 15%) 0%, color-mix(in srgb, var(--jr-color-graphite) 97%, black 3%) 100%);
  border: 1px solid color-mix(in srgb, var(--jr-color-primary) 30%, transparent);
  /* "Floating phone" read (owner, 2026-09-09: "que se note que es
     flotante, que se pueda levantar, como telefono") -- a tight contact
     shadow close under the card plus a much softer, wider ambient shadow
     further out reads as real lift/elevation, not just a flat drop
     shadow; same values at every width so desktop reads identically to
     mobile instead of the effect thinning out at the hero's larger
     desktop scale. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 10px 16px rgba(0, 0, 0, 0.3),
    0 28px 56px rgba(0, 0, 0, 0.42);
}

/* 2 rows only (owner, 2026-09-09: "necesita estar solo en dos filas,
   Google 4.9 arriba y abajo las estrellas, no 3") -- wordmark + score
   share a row instead of each stacking on its own line. */
.jr-rating-badge__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.jr-rating-badge .lib-reviews-band__google-wordmark {
  width: 3.4rem;
}

.jr-rating-badge__score {
  margin: 0;
  font-family: var(--jr-font-heading);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--jr-color-text-inverse);
}

.jr-rating-badge .lib-rating-stars {
  position: relative;
  display: flex;
  gap: 0.15rem;
}

.jr-rating-badge .lib-rating-stars__item {
  width: 1rem;
  height: 1rem;
  fill: var(--lib-color-star, #facc15);
  stroke: var(--lib-color-star-stroke, #b45309);
  /* Same warm glow as the reviews band's own stars -- one consistent
     "lit glass" read wherever this rating shows up. */
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--lib-color-star, #facc15) 65%, transparent));
}

@media (max-width: 767px) {
  .jr-rating-badge {
    /* Mobile hero stacks title/subtitle/CTA with the CTA pinned to the
       very bottom (margin-top:auto) -- a plain bottom-left corner here
       collided with that button (real overlap, caught live: CTA's own
       box is ~68px tall including the hero's own bottom padding). Fixed
       92px clears it with real room to spare instead of guessing a
       smaller number. */
    bottom: 92px;
    padding: 0.7rem 0.9rem;
    gap: 0.25rem;
  }

  .jr-rating-badge__row {
    gap: 0.35rem;
  }

  .jr-rating-badge .lib-reviews-band__google-wordmark {
    width: 2.8rem;
  }

  .jr-rating-badge__score {
    font-size: 1.4rem;
  }

  .jr-rating-badge .lib-rating-stars__item {
    width: 0.85rem;
    height: 0.85rem;
  }
}

@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: var(--jr-color-text-inverse);
  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: var(--jr-color-text-inverse);
  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. 2026-09-09: bumped to 150px -- hiding the
       subtitle (below) freed up real vertical space in the title block,
       and the title sat too close to the header for that freed space to
       read as intentional (owner: "el titulo debe ir mas abajo... ya
       que liberamos espacio puede bajar mas abajo y verse mejor"). The
       CTA still anchors to the bottom via margin-top:auto, so this only
       moves the title/subtitle-slot down, not the button. */
    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: 150px 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;
  }

  /* Visually hidden on mobile, not removed -- this line ("Storm Repair
     Specialists / Insurance Claims Help / Fair, Upfront Pricing") is
     real descriptive copy with its own SEO value, so it stays in the
     actual HTML for crawlers/screen readers instead of display:none
     (owner, 2026-09-09: "en caso de ser seo... o de lo contrario
     esconderlo en mobile" -- keeping it present covers the "if it's
     SEO" case without needing a second content location). Standard
     clip-based visually-hidden technique, not display:none, so it's
     genuinely still there for anything reading the page, just not
     taking up visual space crowding the title on a small screen. */
  .jr-home-hero__subtitle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .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;
  }
}