/* Full-viewport hero: page copy left, estimate form right.
 *
 * The mirror ships a 500px "coverpic" band holding nothing but an <h1>, with a
 * grey breadcrumb strip immediately under it — so the first screen is a
 * headline, a breadcrumb and half a paragraph, and the only form on the page is
 * the Gravity Forms remnant down in the sidebar. This turns that band into the
 * whole first screen and puts the form in it.
 *
 * Nothing is re-parented. #dc_coverpic_text_area_flex is already a flex row, so
 * the injected form card simply becomes its second child and the existing
 * #dc_text_box becomes the first column.
 *
 * Loaded last, so it wins over Divi on source order. It does NOT win over the
 * per-page hero CSS by source order alone: 40 of the target pages carry that
 * CSS in an inline <style> inside <body>, which comes after any <head>
 * stylesheet. Every rule that collides with the per-page block is therefore
 * written with #dc_coverpic_wrapper prepended — two ids beats the per-page
 * block's one — rather than reaching for !important. The single exception is
 * the mobile block at the bottom, which has to out-shout a plugin.
 */

/* ---- the band becomes the screen ---------------------------------------
   Height comes off --sos-herotop, which hero-form.js publishes as the hero's own
   distance from the top of the document - i.e. the height of the whole header
   stack, whatever it is made of at that width. The fallback is the one-row
   desktop header.
   svh, not vh: on mobile Safari and Chrome, vh is the *largest* viewport, so a
   100vh hero hides its own bottom edge behind the retracting toolbar. */

#dc_coverpic_wrapper #dc_coverpic_text_wrapper {
  height: calc(100vh - var(--sos-herotop, 82px));
  height: calc(100svh - var(--sos-herotop, 82px));
  /* The child theme gives this z-index:99, which makes it a stacking context -
     so the form card's own z-index cannot lift it past the site's fixed
     "Leave a Review" badge (.floating_btn), also 99 and later in the DOM. On a
     phone that badge lands on the Continue button. Raising the context is the
     only lever that reaches; the badge is still above everything below the
     hero, and the header (99999) is untouched. */
  z-index: 100;
  /* A left-weighted gradient instead of the flat rgba(0,0,0,.5) wash the
     per-page CSS ships. The wash was sized for white text over the whole
     frame; with a white card on the right it just makes the photo muddy behind
     it. Dark where the copy sits, clearing before it reaches the card. */
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.68) 38%,
    rgba(0, 0, 0, 0.34) 62%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

/* .container is Divi's, and it is what actually holds the two columns apart at
   the same gutters as the header and footer. */
#dc_coverpic_wrapper #dc_coverpic_text_wrapper > .container {
  height: 100%;
}

/* top/bottom instead of a height: the per-page rule pins this to 500px, and an
   absolutely positioned box with both edges set sizes itself to the parent
   whatever that parent's height turns out to be. */
#dc_coverpic_wrapper #dc_coverpic_image {
  top: 0;
  bottom: 0;
  height: auto;
}

/* flex-end + a full-width text box is the stock layout — copy bottom-left
   across the whole frame. Centre it and let the two columns share the row. */
#dc_coverpic_wrapper #dc_coverpic_text_area_flex {
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

#dc_coverpic_wrapper #dc_text_box {
  width: auto;
  flex: 1 1 auto;
  max-width: 46rem;
  padding: 0;
}

/* ---- hero copy ---------------------------------------------------------- */

/* 50px flat is the per-page value; it overruns two lines on the longer service
   names once the form takes a third of the row. */
#dc_coverpic_wrapper #dc_text_box h1 {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  margin: 0 0 18px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* The page's own first body heading, moved up here by scripts/rebuild-hero.py.
   It is the sentence the page already led with, so nothing is invented. */
#dc_coverpic_wrapper .sos-hero-sub {
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  max-width: 46ch;
  margin: 0 0 26px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* Same pill as the header's phone button, deliberately — both are on screen at
   once and two different oranges next to each other read as a mistake. */
#dc_coverpic_wrapper .sos-hero-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #dd5c26;
  color: #fff;
  border-radius: 6px;
  padding: 14px 26px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
}

#dc_coverpic_wrapper .sos-hero-call:hover {
  background: #b8481b;
  color: #fff;
  transform: translateY(-1px);
}

#dc_coverpic_wrapper .sos-hero-call svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ---- trust banner ------------------------------------------------------
   Three cards under the hero copy: Google reviews, Yelp, years in business.
   Every number in here comes from Trevor or a verified source - see the
   comments in the markup. Nothing about this bar may be invented.

   Scoped to .sos-trustbar rather than the hero id, because the home slider
   carries the same bar and is not a coverpic block. */

.sos-trustbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.sos-trustcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(12, 12, 12, 0.62);
  border: 1px solid rgba(221, 92, 38, 0.55);
  /* The bar sits on a photo, so it needs its own ground rather than relying on
     the hero gradient, which has already thinned out this far down. */
  backdrop-filter: blur(3px);
  color: #fff;
  text-decoration: none;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

/* Only the two review cards are links; the years card is a statement. */
a.sos-trustcard:hover {
  border-color: #dd5c26;
  background: rgba(12, 12, 12, 0.78);
  transform: translateY(-1px);
  color: #fff;
}

/* The white plate the platform marks sit on, so the logos read at their own
   contrast instead of fighting the photo. */
.sos-trustcard .sos-tc-mark {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sos-trustcard .sos-tc-mark svg {
  width: 30px;
  height: 30px;
}

/* The Yelp mark is a wordmark, roughly 2.5:1. In the square plate above it gets
   squashed and the burst lands on top of the "y", so the plate goes wide.
   Height auto rather than a paired number - the file is 225x89 and letting the
   ratio come from the image is one less thing to keep in step with it. */
.sos-trustcard .sos-tc-mark.is-wide {
  width: 64px;
}

.sos-trustcard .sos-tc-mark.is-wide img {
  width: 52px;
  height: auto;
}

.sos-trustcard .sos-tc-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sos-trustcard .sos-tc-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff;
}

.sos-trustcard .sos-tc-meta {
  font-size: 0.78rem;
  color: #d8d3cf;
  line-height: 1.1;
}

.sos-trustcard .sos-tc-stars {
  display: flex;
  gap: 2px;
  line-height: 0;
}

.sos-trustcard .sos-tc-stars svg {
  width: 14px;
  height: 14px;
  /* Star gold, not brand orange - a five-star row in the CTA colour reads as a
     button and steals attention from the actual one. */
  fill: #f5a623;
}

/* The years card leads with the number instead of a logo. */
.sos-trustcard .sos-tc-years {
  font-family: 'Poppins', 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
}

.sos-trustcard .sos-tc-icon {
  flex: none;
  width: 30px;
  height: 30px;
  stroke: #dd5c26;
  fill: none;
  stroke-width: 2;
}

/* ---- the home page -----------------------------------------------------
   The home hero is a Divi slider, not a coverpic block, so it needs its own
   sizing — but it takes the same form card as its second column and the same
   --sos-herotop, so the fold lands in the same place.

   The slider has no declared height at all: Divi gives .et_pb_slide_description
   `padding:16% 8%` and the hero is however tall that makes it, which is why it
   grows and shrinks with the window width. That padding has to go for the two
   columns to sit side by side, so the height comes back as a min-height here. */

.main-slider .et_pb_slider,
.main-slider .et_pb_slide,
.main-slider .et_pb_slider .et_pb_container {
  min-height: calc(100vh - var(--sos-herotop, 82px));
  min-height: calc(100svh - var(--sos-herotop, 82px));
}

/* Divi lays the slide out as a table so it can vertical-align:middle a single
   column. Two columns want a flex row. */
.main-slider .et_pb_slider .et_pb_container {
  display: flex;
  align-items: center;
}

.main-slider .et_pb_slider_container_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}

/* !important throughout: the customizer floats this 60% wide, the wj-xbrowser
   plugin overrides that to 80%!important under 1466px and 100%!important under
   980px, and Divi's own deferred style sets padding-left:0px!important. Every
   one of those is already !important, so nothing weaker reaches. */
.main-slider .et_pb_slide_description {
  float: none !important;
  width: auto !important;
  flex: 1 1 auto;
  max-width: 46rem;
  padding: 0 !important;
  text-align: left !important;
}

/* 72px from the customizer, set when the headline had the full width. Against a
   form card it wraps to five lines; this is the same scale the service-page h1
   uses, so the two heroes read as one design. */
.main-slider .et_pb_slide_description .et_pb_slide_title,
.main-slider .et_pb_slide_description .main-title {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
}

.main-slider .et_pb_slide_description .et_pb_slide_title {
  margin-bottom: 14px;
}

/* The slide carries .et_pb_bg_layout_dark, and Divi paints every heading inside
   it white with !important - which on the home page includes the headings in
   the form card, on white. Only !important reaches an !important. */
.main-slider .sos-heroform h3,
.main-slider .sos-heroform h4 {
  color: #1a1a1a !important;
}

.main-slider .et_pb_button_wrapper {
  margin-top: 22px;
}

/* ---- the form card -----------------------------------------------------
   Ported from the two-step .leadform on the PPC landing page
   (landing-pages/residential-demolition-lexington-nc), which is where this
   pattern was built and verified. Palette swapped to the mirror's orange. */

.sos-heroform {
  flex: 0 0 clamp(330px, 32%, 410px);
  /* The site floats a "Leave a Review" badge (.floating_btn, z-index 99) over
     the bottom-left of every page. On a phone the hero stacks and the badge
     lands squarely on the Continue button. Stacking above it puts the badge
     behind the card instead of over its only control. */
  position: relative;
  z-index: 100;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
  padding: 26px 24px 20px;
  color: #222;
  text-align: left;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
}

.sos-heroform h3 {
  font-size: 1.45rem;
  text-align: center;
  color: #1a1a1a;
  margin: 0 0 6px;
  line-height: 1.15;
  padding: 0;
}

.sos-heroform .lf-sub {
  text-align: center;
  color: #666;
  font-size: 0.93rem;
  margin: 0 0 14px;
  padding: 0;
}

.sos-heroform .lf-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.sos-heroform .lf-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dcdcdc;
  transition: background 0.15s ease;
}

.sos-heroform .lf-dots i.on {
  background: #dd5c26;
}

.sos-heroform .lf-step {
  display: none;
}

.sos-heroform .lf-step.on {
  display: block;
}

.sos-heroform .field {
  margin-bottom: 13px;
}

.sos-heroform .field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.sos-heroform .field label .req {
  color: #c0392b;
}

/* Gravity Forms' legacy reset is linked on every page and styles bare inputs
   site-wide (5px padding, no radius). These are scoped inside the card so they
   land on top of it without touching the sidebar form. */
.sos-heroform .field input {
  width: 100%;
  padding: 13px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: #222;
}

.sos-heroform .field input::placeholder {
  color: #a5a5a5;
}

.sos-heroform .field input:focus {
  outline: none;
  border-color: #dd5c26;
  box-shadow: 0 0 0 3px rgba(221, 92, 38, 0.18);
}

.sos-heroform .lf-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  padding: 14px 24px;
  border: none;
  border-radius: 6px;
  background: #dd5c26;
  color: #fff;
  transition: background 0.15s ease, transform 0.12s ease;
}

.sos-heroform .lf-btn:hover {
  background: #b8481b;
  transform: translateY(-1px);
}

.sos-heroform .lf-btn[disabled] {
  opacity: 0.75;
  cursor: default;
  transform: none;
}

.sos-heroform .lf-back {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 6px;
  background: #fff;
  color: #222;
  border: 1px solid #d9d9d9;
  margin-bottom: 10px;
}

.sos-heroform .lf-back:hover {
  background: #f7f7f7;
}

.sos-heroform .lf-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 0.8rem;
  color: #666;
  margin: 12px 0 0;
  padding: 0;
}

.sos-heroform .lf-note svg {
  width: 13px;
  height: 13px;
  flex: none;
  stroke: #1c1c1c;
}

.sos-heroform a {
  color: #dd5c26;
  font-weight: 600;
  text-decoration: underline;
}

.sos-heroform .lf-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 0.72rem;
  color: #666;
  line-height: 1.5;
}

.sos-heroform .lf-consent input {
  flex: none;
  margin-top: 3px;
  width: 15px;
  height: 15px;
  accent-color: #dd5c26;
}

.sos-heroform .lf-err {
  display: none;
  color: #c0392b;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.sos-heroform .lf-err.on {
  display: block;
}

/* The success panel is a step inside the form rather than a replacement for it,
   so the card keeps its width and the hero does not jump on submit. */
.sos-heroform .lf-done {
  text-align: center;
  padding: 10px 0 6px;
}

.sos-heroform .lf-done .lf-check {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #dd5c26;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sos-heroform .lf-done h4 {
  font-size: 1.2rem;
  margin: 0 0 8px;
  color: #1a1a1a;
  padding: 0;
}

.sos-heroform .lf-done p {
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.92rem;
  color: #666;
}

/* ---- narrow desktop ----------------------------------------------------
   Between 981 and 1200 the copy and a 330px card stop coexisting comfortably;
   give the card the floor it needs and let the copy take what is left. */

@media all and (min-width: 981px) and (max-width: 1200px) {
  #dc_coverpic_wrapper #dc_coverpic_text_area_flex {
    gap: 30px;
  }
  .sos-heroform {
    flex-basis: 320px;
    padding: 20px 18px 16px;
  }
  .sos-heroform h3 {
    font-size: 1.25rem;
  }
}

/* ---- stacked ------------------------------------------------------------
   Divi's own tablet breakpoint. A two-step form squeezed into a phone viewport
   is unusable, so below this the hero stops being exactly one screen: it keeps
   a one-screen minimum and grows past it for the form. The copy still leads.

   !important on height: wp-content/plugins/wj-xbrowser/dist/styles.css ships
   `height:400px !important` on this trio at 480px and under, and nothing but
   !important outranks !important. */

@media all and (max-width: 980px) {
  #dc_coverpic_wrapper #dc_coverpic_image,
  #dc_coverpic_wrapper #dc_coverpic_text_wrapper,
  #dc_coverpic_wrapper #dc_coverpic_text_area_flex {
    height: auto !important;
  }
  #dc_coverpic_wrapper #dc_coverpic_image {
    top: 0;
    bottom: 0;
  }
  #dc_coverpic_wrapper #dc_coverpic_text_wrapper {
    min-height: calc(100vh - var(--sos-herotop, 167px));
    min-height: calc(100svh - var(--sos-herotop, 167px));
    padding: 34px 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.6) 45%,
      rgba(0, 0, 0, 0.72) 100%
    );
  }
  #dc_coverpic_wrapper #dc_coverpic_text_area_flex {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 26px;
  }
  #dc_coverpic_wrapper #dc_text_box {
    max-width: none;
    text-align: center;
  }
  /* Same stack on the home slider. */
  .main-slider .et_pb_slider_container_inner {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
  }
  .main-slider .et_pb_slide_description {
    max-width: none;
    text-align: center !important;
  }
  /* Divi's slider JS measures the tallest slide and writes that height inline
     on the slider, the slide and the container, and .et_pb_slider clips to it
     with overflow:hidden. On a phone the slide stacks into a column - heading,
     copy, button, trust cards, then the whole estimate form - which came to
     876px inside a 524px content box. align-items:center splits the overflow
     evenly, so 176px of it went off the TOP: the first line of the heading was
     clipped away and the rest sat under the header.

     The hero is meant to be at least one screen tall, not exactly one screen.
     min-height above still guarantees the fold; height:auto lets a stacked
     phone layout have the room it actually needs. !important because the
     height Divi writes is inline, and it rewrites it on resize.

     Bottom padding was 76px to clear the plugin's HOURS/MAP bar, which is gone
     - back to matching the top. */
  .main-slider .et_pb_slider,
  .main-slider .et_pb_slides,
  .main-slider .et_pb_slide,
  .main-slider .et_pb_slider .et_pb_container {
    height: auto !important;
  }
  .main-slider .et_pb_slider .et_pb_container {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  #dc_coverpic_wrapper .sos-hero-sub {
    max-width: none;
  }
  /* Centred to match the stacked copy above it. */
  .sos-trustbar {
    justify-content: center;
    margin-top: 22px;
  }
  .sos-heroform {
    flex: 0 0 auto;
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
  }
}

@media all and (max-width: 600px) {
  #dc_coverpic_wrapper .sos-hero-call {
    width: 100%;
    justify-content: center;
  }
  /* Three cards will not sit on one line on a phone, and wrapping leaves a
     lonely third. Two up, then one. */
  .sos-trustbar {
    gap: 8px;
  }
  .sos-trustcard {
    flex: 1 1 calc(50% - 4px);
    /* A flex item defaults to min-width:auto, so it refuses to shrink past its
       own min-content however small the basis says. The Yelp card's plate plus
       "Read our reviews" measured 24px wider than half the row, and the whole
       bar ran off the right edge of the phone rather than wrapping. */
    min-width: 0;
    padding: 10px 12px;
    gap: 9px;
  }
  .sos-trustcard .sos-tc-mark {
    width: 38px;
    height: 38px;
  }
  .sos-trustcard .sos-tc-mark svg {
    width: 24px;
    height: 24px;
  }
  .sos-trustcard .sos-tc-mark.is-wide {
    width: 54px;
  }
  .sos-trustcard .sos-tc-mark.is-wide img {
    width: 44px;
  }
  .sos-trustcard .sos-tc-label {
    font-size: 0.72rem;
  }
  .sos-trustcard .sos-tc-meta {
    font-size: 0.7rem;
  }
  .sos-trustcard .sos-tc-years {
    font-size: 1.1rem;
  }
  .sos-heroform {
    padding: 22px 18px 18px;
  }
}
