/* ============================================================
   RCS Remodeling — static-export fixes
   This WordPress/Divi site was exported without its JavaScript,
   which broke the photo gallery (salvattore grid), the mobile
   menu, and left some hero images pointing at missing files.
   These rules restore correct display with no dependency on the
   original Divi/jQuery scripts.
   ============================================================ */

/* ---------- 1. PHOTO GALLERY ----------
   Without salvattore.js the Divi gallery collapsed to a single
   visible tile. Render it as a responsive CSS grid instead. */
.et_pb_gallery .et_pb_gallery_items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  width: 100% !important;
  max-width: 100%;
  float: none !important;
  transform: none !important;
}
.et_pb_gallery .et_pb_gallery_item {
  display: block !important;   /* Divi slider hides all but the first item */
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.et_pb_gallery .et_pb_gallery_image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.et_pb_gallery .et_pb_gallery_image a {
  display: block;
  width: 100%;
  height: 100%;
}
.et_pb_gallery .et_pb_gallery_image img {
  display: block !important;
  width: 100% !important;
  height: 250px !important;
  object-fit: cover !important;
  margin: 0 !important;
  transition: transform 0.45s ease;
}
.et_pb_gallery .et_pb_gallery_image:hover img {
  transform: scale(1.06);
}
/* Hide the now-defunct slider pagination/controls that needed JS */
.et_pb_gallery .et_pb_slider_dots,
.et_pb_gallery .et-pb-controllers,
.et_pb_gallery .et_pb_gallery_pagination {
  display: none !important;
}

/* ---------- 2. HERO: full-bleed video to the very top ----------
   The theme-builder header is floated over the hero (instead of taking
   layout space above it) so the background video reaches the top edge of
   the page on desktop & mobile. */
.et-l--header {
  position: fixed !important;   /* sticks to the top of the viewport on scroll */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}
/* Hero video fills its section and sits behind the header + overlay */
.custom_header_image .et_pb_section_video_bg {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden;
}
.custom_header_image .et_pb_section_video_bg video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover !important;
  object-position: center center;
}
/* Subtle dark overlay so the white headline stays readable over the video */
.custom_header_image .et_pb_section_video_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.42));
  pointer-events: none;
}
/* Frosted translucent header bar: the video shows through at the very top,
   while the (dark) logo + navigation stay legible. This matches the site's
   original design intent (it already used a backdrop blur). */
.et_pb_row_0_tb_header,
.et_pb_row_1_tb_header {
  background-color: rgba(252, 251, 244, 0.6) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- 2b. MOBILE HEADER: shorter, hamburger aligned on one row ---------- */
@media (max-width: 980px) {
  .et_pb_section_0_tb_header { padding-top: 0 !important; margin-bottom: 0 !important; }
  .et_pb_section_0_tb_header .et_pb_row_0_tb_header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    margin-top: 0 !important;
    padding: 6px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .et_pb_section_0_tb_header .et_pb_row_0_tb_header > .et_pb_column {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .et_pb_section_0_tb_header .et_pb_column_0_tb_header { flex: 0 1 auto; min-width: 0; }
  .et_pb_section_0_tb_header .et_pb_column_1_tb_header { flex: 0 0 auto; }
  .et_pb_section_0_tb_header .et_pb_column_2_tb_header { flex: 0 0 auto; }
  /* fix logo/badge to a short, consistent height (explicit height keeps the
     square Terrell badge from collapsing when its column shrinks) */
  .et_pb_section_0_tb_header .et_pb_column_0_tb_header img,
  .et_pb_section_0_tb_header .et_pb_column_1_tb_header img {
    height: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    max-width: none !important;
  }
  .et_pb_section_0_tb_header .et_pb_column_0_tb_header .et_pb_image,
  .et_pb_section_0_tb_header .et_pb_column_0_tb_header .et_pb_image_wrap,
  .et_pb_section_0_tb_header .et_pb_column_1_tb_header .et_pb_image,
  .et_pb_section_0_tb_header .et_pb_column_1_tb_header .et_pb_image_wrap {
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* vertically center the hamburger with the logo/badges */
  .et_pb_section_0_tb_header .et_pb_menu_0_tb_header,
  .et_pb_section_0_tb_header .et_pb_menu_inner_container,
  .et_pb_section_0_tb_header .et_pb_menu__wrap,
  .et_pb_section_0_tb_header .et_mobile_nav_menu,
  .et_pb_section_0_tb_header .mobile_nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  .et_pb_section_0_tb_header .mobile_menu_bar {
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
}

/* ---------- 2c. HOMEPAGE SERVICE CARDS: equal image size ---------- */
/* Remodeling card photo is portrait; crop all four cards to the same size.
   The wrapper spans are forced to full width via inline styles in the HTML
   (no :has() dependency), so a portrait image no longer renders narrow. */
img.wp-image-78,
img.wp-image-69,
img.wp-image-141,
img.wp-image-61 {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block;
}

/* ---------- 3. MOBILE MENU ----------
   The export dropped the mobile <ul>; rcs-fixes.js rebuilds it
   from the desktop menu. These rules show/hide it on tap. */
.et_pb_menu__wrap { position: relative; }
.et_mobile_menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 230px;
  margin-top: 8px;
  background: #FCFBF4;
  border: 2px solid #000;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 999;
  padding: 6px 0;
  list-style: none;
}
.mobile_nav.opened .et_mobile_menu { display: block !important; }
.et_mobile_menu li { padding: 0; margin: 0; list-style: none; }
.et_mobile_menu li a {
  display: block;
  padding: 11px 20px;
  color: #000 !important;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.2;
}
.et_mobile_menu li a:hover { background: rgba(0, 0, 0, 0.07); }
.et_mobile_menu .sub-menu {
  display: block;
  list-style: none;
  padding-left: 14px;
}
.et_mobile_menu .sub-menu a { font-size: 13px; opacity: 0.85; }
/* Give the tappable hamburger a sensible hit area/cursor */
.mobile_nav .mobile_menu_bar { cursor: pointer; }

/* ---------- 4. MOBILE: float the sticky header with a little margin ---------- */
@media (max-width: 980px) {
  .et-l--header {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }
  .et_pb_section_0_tb_header .et_pb_row_0_tb_header {
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
}

/* ---------- 5. HOMEPAGE HERO: headline clears the fixed header ----------
   At ~981-1010px the desktop nav wraps to two rows (taller bar); give the
   hero headline extra top clearance on desktop so it never tucks under it. */
@media (min-width: 981px) {
  .home .et_pb_row_0.et_pb_row { margin-top: 150px !important; }
}

/* ---------- 6. HOMEPAGE "About US" section ---------- */
/* Desktop: align the photo with the body text (drop its 100px top offset)
   so the left (text) and right (image) columns line up. */
@media (min-width: 981px) {
  .home .et_pb_image_0 { margin-top: 0 !important; }
}
/* Tighten the gap between the "About US" title and the body text on BOTH
   desktop (rows 6/7) and mobile (rows 10/11); mobile also drops the empty
   spacer column. */
.home .et_pb_column_22 { display: none !important; }
/* The title row has a min-height:142px that forces empty space below the
   heading; remove it and set a small, tidy gap to the body text. */
.home .et_pb_row_6.et_pb_row,
.home .et_pb_row_10.et_pb_row {
  min-height: 0 !important;
  padding-bottom: 14px !important;
  margin-bottom: 0 !important;
}
.home .et_pb_row_7.et_pb_row,
.home .et_pb_row_11.et_pb_row { padding-top: 0 !important; margin-top: 0 !important; }
.home .et_pb_text_12,
.home .et_pb_text_19 { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.home .et_pb_column_11,
.home .et_pb_column_21 { margin-bottom: 0 !important; }

/* ---------- 7. DESKTOP: keep all header menu items on ONE line ---------- */
@media (min-width: 981px) {
  /* column split: [logo] | [BBB + Terrell group] | [menu].
     Logo image was split from the combined logo/BBB PNG so the BBB badge can
     sit next to Terrell, away from the logo. Heights stay below the menu
     module (~54px) so the header height does not grow. */
  .et_pb_column_3_tb_header { width: 13% !important; }
  .et_pb_column_4_tb_header { width: 20% !important; }
  .et_pb_column_5_tb_header { width: 67% !important; }
  /* logo (logo-only crop) */
  .et_pb_image_2_tb_header { width: 100% !important; max-width: 100% !important; }
  .et_pb_image_2_tb_header img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 48px !important;
  }
  /* BBB + Terrell grouped close together and vertically centered; the gap
     from the logo comes from the column split (clears the old -182px margin) */
  .et_pb_column_4_tb_header .et_pb_image_3_tb_header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 0 20px !important;   /* guaranteed gap from the logo at all widths */
  }
  .et_pb_column_4_tb_header .et_pb_image_3_tb_header a {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .et_pb_column_4_tb_header .et_pb_image_3_tb_header img {
    height: 44px !important;
    width: auto !important;
    max-width: none !important;
  }
  /* never wrap the top row; flex-wrap (not white-space) keeps items on one
     line so nowrap does NOT inherit into the dropdown submenu. */
  .et_pb_menu_1_tb_header .et-menu-nav > ul.et-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
  }
  .et_pb_menu_1_tb_header .et-menu-nav > ul.et-menu > li {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* shrink the pills just enough; nowrap here only keeps each link's own
     text from breaking (it is not an ancestor of the submenu). */
  .et_pb_menu_1_tb_header .et-menu-nav > ul.et-menu > li > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 15px !important;
    white-space: nowrap;
  }
  /* Dropdown submenu must stack vertically (guard against any inherited
     white-space:nowrap and Divi's inline-block submenu items). */
  .et_pb_menu_1_tb_header .et-menu .sub-menu { white-space: normal !important; }
  .et_pb_menu_1_tb_header .et-menu .sub-menu li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    white-space: normal !important;
  }
}

/* ---------- 8. MOBILE MENU: reveal the Services sub-items ----------
   Divi hides submenus in the mobile menu (they normally expand via the
   missing JS) with a high-specificity !important rule; match its specificity
   so the service links (Remodeling, Debris, etc.) are shown indented. */
.et-db #et-boc .et-l .mobile_nav ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l .mobile_nav ul.et_mobile_menu .sub-menu {
  display: block !important;
  visibility: visible !important;
  padding-left: 16px;
}
.et-db #et-boc .et-l .mobile_nav ul.et_mobile_menu .sub-menu li,
.et-db #et-boc .et-l .mobile_nav ul.et_mobile_menu .sub-menu li a {
  visibility: visible !important;
}
.et_mobile_menu .sub-menu li a { font-size: 15px; opacity: 0.9; }

/* ---------- 9. CONTACT FORM: reveal it ----------
   Divi hid the reCAPTCHA-protected form with an inline display:none that its
   (missing) JS was meant to remove. Force it visible on every page's footer. */
#et_pb_contact_form_0,
.et_pb_contact_form_0_tb_footer.et_pb_contact_form_container {
  display: block !important;
}

/* ---------- 10. "WHY CHOOSE US": single-frame image carousel ----------
   One photo at a time with prev/next arrows (cycling handled by rcs-fixes.js).
   Lives in the homepage gallery_0 module slot. */
.rcs-carousel {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.rcs-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s ease;
  will-change: transform;
}
.rcs-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rcs-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  z-index: 2;
  transition: background 0.2s ease;
}
.rcs-carousel-arrow:hover { background: rgba(0, 0, 0, 0.78); }
.rcs-carousel-prev { left: 14px; }
.rcs-carousel-next { right: 14px; }
@media (max-width: 980px) { .rcs-carousel { height: 420px; } }
/* Desktop: align the image's top with the section's title text. The image's
   inner row carries a large top margin; trim it to match the title's offset
   (the text column has ~108px of top padding above the heading). */
@media (min-width: 981px) {
  .home .et_pb_section_6 .et_pb_column_34 .et_pb_row_inner {
    margin-top: 108px !important;
    padding-top: 0 !important;
  }
}

/* ---------- 11. CUSTOMER REVIEWS (replaces the empty TrustIndex widget) ---------- */
.rcs-reviews {
  column-count: 3;
  column-gap: 22px;
  max-width: 1180px;
  margin: 12px auto 0;
  padding: 0 12px;
}
@media (max-width: 1080px) { .rcs-reviews { column-count: 2; } }
@media (max-width: 700px)  { .rcs-reviews { column-count: 1; } }
.rcs-review {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  text-align: left;
}
.rcs-review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rcs-review-avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: #fff;
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.rcs-review-name { display: block; font-family: 'Poppins', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 16px; color: #131315; line-height: 1.2; }
.rcs-review-meta { display: block; font-size: 12px; color: #808080; margin-top: 2px; }
.rcs-review-stars { color: #fbbc04; font-size: 17px; letter-spacing: 1px; margin-bottom: 6px; }
.rcs-review-time { color: #808080; font-size: 12px; font-family: 'Lato', Helvetica, Arial, sans-serif; letter-spacing: 0; margin-left: 6px; }
.rcs-review-title { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; color: #131315; margin-bottom: 4px; }
.rcs-review-text { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 14.5px; line-height: 1.6; color: #333; white-space: pre-line; margin: 0; }
.rcs-review-more {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #731716;
  cursor: pointer;
}
.rcs-review-more:hover { text-decoration: underline; }

/* ---------- 13. NON-HOME PAGES: hero centering, mobile text & spacing cleanup ---------- */
/* Heroes: vertically center the content so top & bottom spacing is equal.
   Scoped per-breakpoint to the SHOWN hero (section_0 on desktop, section_1 on
   phone/tablet) so we never override the display:none that hides the other
   variant — otherwise both hero copies would stack. */
@media (min-width: 981px) {
  /* Hero: generous top (clears the floating header) + reduced bottom padding,
     so the hero is tighter at the bottom and content isn't so far from the
     next section. height:auto makes the explicit padding define the box. */
  body:not(.home) .et_pb_section_0.custom_header_image {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 140px !important;
    padding-bottom: 66px !important;
  }
  /* the desktop hero title module carries a large padding-top (~157px); zero it
     so the section padding controls the spacing */
  body:not(.home) .et_pb_section_0.custom_header_image .et_pb_text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
@media (max-width: 980px) {
  body:not(.home) .et_pb_section_1.custom_header_image {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
body:not(.home) .et_pb_section.custom_header_image > .et_pb_row {
  width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Content images stay visible and never overflow their column.
   Scoped to #main-content so it never touches the shared header/footer images
   (otherwise it overrides the header logo/badge sizing on non-home pages and
   the header stops matching the homepage). */
body:not(.home) #main-content .et_pb_image img,
body:not(.home) #main-content .et_pb_blurb .et_pb_main_blurb_image img {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 767px) {
  /* Hero: clear the floating header up top, but reduced bottom padding */
  body:not(.home) .et_pb_section_1.custom_header_image {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }
  /* Hero title sized for phones (was ~62px) */
  body:not(.home) .custom_header_image .et_pb_text_inner h1 {
    font-size: 40px !important;
    line-height: 1.12 !important;
  }
  /* Cap oversized content headings (were ~50px) */
  body:not(.home) #main-content .et_pb_section:not(.custom_header_image) .et_pb_text_inner h1 {
    font-size: 30px !important;
    line-height: 1.18 !important;
  }
  body:not(.home) #main-content .et_pb_section:not(.custom_header_image) .et_pb_text_inner h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  /* Trim excessive section padding (was ~100px) so sections aren't so far apart */
  body:not(.home) #main-content .et_pb_section:not(.custom_header_image) {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  /* Body copy: smaller text + wider columns to use the mobile screen (was 18px
     in a row inset ~39px each side, leaving lots of wasted horizontal space) */
  body:not(.home) #main-content .et_pb_section:not(.custom_header_image) p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  body:not(.home) #main-content .et_pb_section:not(.custom_header_image) .et_pb_row {
    width: 92% !important;
    max-width: 92% !important;
  }
}

/* ---------- 12. OUR SERVICES: real photo background (replaces stock jackhammer) ----------
   A real RCS interior sits behind a soft cream wash so it stays subtle and the
   existing dark heading + cards remain readable. */
.home #our-services.et_pb_section_4 {
  background-color: #FCFBF4 !important;
  background-image:
    linear-gradient(rgba(252, 251, 244, 0.82), rgba(252, 251, 244, 0.82)),
    url(/wp-content/uploads/real/room-two-windows.jpg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}