/* ==========================================================================
   Certified Mechanical (CL-0002) - design r2b patch (follow-up to r2)
   Creative Studio, Thu Nov 12 2026, ET. Not deployed; for Web.
   Load AFTER /assets/css/fixes-r2-20261112.css. No copy changes.
   Boss (9:37 PM ET, Nov 12, via Jaxx): "...make sure everything is properly
   layed out and designed across all devices and fix any issues it finds."
   ========================================================================== */

/* FX11b [Low] Full-page width 1,491-1,619px at 1440 (and up to 1,511px at
   390) on 68 of 72 pages. Cause: absolutely positioned decorative gear
   images hanging off the right edge of full-width page sections, e.g.
   4812020 in e59941d (right edge 1,619px), 8f9f53c in b980aee (1,556),
   e331b70 in 695bd76 (1,554), 4ecf6b9 in f7e8b90, 327b7c7 in 5f50a20,
   f568b5d in 04fff73, e996437 in 97a8536; brand pages 27f965b6, 665e606e,
   42f19eb0, 5729e31, 26378a19; home 8855cfb, 762d8f9, cd9a0fb, 07b4b5e,
   7987d76, 791ba2b, 1e75c70. FX11 (overflow-x:clip on html/body) already
   stops sideways scrolling (window.scrollX stays 0, documentElement
   scrollWidth = viewport) but body.scrollWidth and full-page captures still
   report the extra width. Clip each top-level page/footer section on the
   x axis only. Sections are full viewport width, so nothing visible
   changes; gears still hang over section tops and bottoms (y stays
   visible); clip does not make a scroll container, so sticky still works.
   The header is NOT clipped (nav dropdown and off-canvas menu live there). */
[data-elementor-type]:not([data-elementor-type="header"]) > .e-con,
.e-con.e-parent:not([data-elementor-type="header"] .e-con) {
  overflow-x: clip;
}

/* FX16 [High] About Us at tablet (768-1024): row 7909aaf keeps two 100%-wide
   columns side by side, so the photo column (c776981, the kitchen photo
   beside "Our Commitment to Customer Satisfaction") sits off screen (left
   758px, right 1,474px) and is invisible. Stack the columns at 1024 and
   below so the photo shows under the text. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-7909aaf {
    --flex-direction: column !important;
    flex-direction: column !important;
    --flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/* FX17 [Medium] Phone + Request Callback pair at tablet: FX02 keeps the
   phone pill full width, so in narrow pair rows (e.g. e0abbee on
   washing-machine-repair and washing-machine-repair-toronto at 768) the
   callback button b0eace8 is squeezed to 34px and pushed past the edge
   (right 791px). Let pair rows wrap at 1024 and below. Gap is left to the
   container's own setting so stacked pairs keep their spacing. */
@media (max-width: 1024px) {
  .e-con:has(> .elementor-widget-button a[href^="tel:"]):has(> .elementor-widget-button a:not([href^="tel:"])) {
    --flex-wrap: wrap;
    flex-wrap: wrap !important;
  }
}

/* FX18 [Low] Brand "Common Problems" tab bar at 390 (seen on Sub-Zero,
   widget 13bd4876; .cem-tabs-nav is a 4-column grid): the 4th tab runs off
   the right edge (329-401px on a 390 screen). Use a 2 x 2 grid on phones. */
@media (max-width: 767px) {
  .cem-tabs-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 8px;
  }
}

/* FX19 [Low] Gear overlaps left on the live site after r2 (re-measured
   Nov 12, 11 PM ET):
   - contact-us at 1440: gear 2bd97cb sits over the map zoom buttons
     (map is a shortcode widget, not in the FX01 lift list);
   - our-work at 390/768/1440: the custom .ow-gear images in widget 2e15f75
     sit over the edge of the "Open photo" links (.ow-shot__link).
   Gears already ignore taps (FX01); this puts them visually behind. */
.elementor-widget-shortcode:not(.elementor-absolute):not(.elementor-fixed):not(.elementor-sticky) {
  position: relative;
  z-index: 1;
}
.ow-gear {
  z-index: 0 !important;
  pointer-events: none;
}
.ow-shot__link {
  position: relative;
  z-index: 1;
}