/* ==========================================================================
   Certified Mechanical (CL-0002) - design audit r2 - site-wide CSS fixes
   Source: Creative Studio audit r2, 2026-11-12 ET. Not deployed; for Web.
   Boss (9:37 PM ET, Nov 12, via Jaxx): "Have creative studio do a full and
   thorough audit of all cerified mechanical blocks on all pages to make sure
   everything is properly layed out and designed across all devices and fix
   any issues it finds."
   Where: the live site is a static build. Load this file once, site-wide,
   AFTER /assets/css/site.min.css and the page CSS (e.g. as
   /assets/css/fixes-r2.css, last <link> in <head>). If Web rebuilds from
   Elementor instead, paste it in Site Settings > Custom CSS.
   No copy, prices, claims or images are changed by this file.
   Breakpoints follow Elementor defaults: mobile <=767px, tablet <=1024px.
   Each fix id (FX01...) matches r2/web-fix-list-r2.md.
   ========================================================================== */

/* FX01 [High] Decorative grey gears sit ON TOP of content (phone pills in the
   offer band, the Repair-or-Replace dock text and number, the booking block,
   the brand stat card). A gear from the NEXT section can also reach up over
   the pill, so section isolation alone is not enough: put every gear on
   layer 0, stop it catching taps, and lift content widgets to layer 1.
   Pages: 72 (all templates). Widths: all. Old ids r1 B2, D1, BR1, G1. */
.elementor-element.elementor-absolute.elementor-widget-image:has(img[src*="Gear-Gear"]) {
  z-index: 0 !important;
  pointer-events: none;
}
.elementor-widget-button:not(.elementor-absolute):not(.elementor-fixed):not(.elementor-sticky),
.elementor-widget-heading:not(.elementor-absolute):not(.elementor-fixed):not(.elementor-sticky),
.elementor-widget-text-editor:not(.elementor-absolute):not(.elementor-fixed):not(.elementor-sticky),
.elementor-widget-icon-list:not(.elementor-absolute):not(.elementor-fixed):not(.elementor-sticky),
.elementor-widget-icon-box:not(.elementor-absolute):not(.elementor-fixed):not(.elementor-sticky),
.elementor-widget-image-box:not(.elementor-absolute):not(.elementor-fixed):not(.elementor-sticky),
.elementor-widget-form:not(.elementor-absolute):not(.elementor-fixed):not(.elementor-sticky),
.elementor-widget-html:not(.elementor-absolute):not(.elementor-fixed):not(.elementor-sticky) {
  position: relative;
  z-index: 1;
}

/* FX02 [High] Phone numbers must never break over two lines, and phone pills
   must not be squeezed by long band headings (Toronto city offer band at
   1440: "1-866- / 492-4959"; dock line at 768/1440: "1-866-492- / 4959").
   Keeps the number on one line; the heading wraps instead. Pill text stays
   vertically centred (Boss rule: numbers in CTA pills vertically centred). */
a[href^="tel:"],
a[href^="tel:"] .elementor-button-text,
a[href^="tel:"] .elementor-icon-list-text {
  white-space: nowrap;
}
.elementor-widget-button:has(a[href^="tel:"]) {
  flex-shrink: 0;
}
a[href^="tel:"].elementor-button .elementor-button-content-wrapper {
  align-items: center;
}

/* FX03 [Medium] Booking block: hide the "peeking man" cut-out image. It is
   clipped by the card edge and covers the hours line and the phone icon at
   768 and 1440. Pages: 58 (every page with the booking block). r1 K1. */
.elementor-element.elementor-absolute.elementor-widget-image:has(img[src*="image-1030"]) {
  display: none !important;
}

/* FX04 [Medium] Booking block on tablet and phone: show the form first, then
   the team photo and contact details (today the form starts about 690-790px
   into the block). r1 K1, Jaxx M6. */
@media (max-width: 1024px) {
  .e-con:has(> .elementor-widget-form) { order: -1; }
}

/* FX05 [High] Toronto and Mississauga "Our Appliance Repair Services in
   <City>" image accordion is blank (lazy-load leaves inline
   background-image:inherit). Re-apply the five existing images.
   Pages: toronto, mississauga. Widths: all. r1 B1.
   Root fix for Web: exclude the EAEL image accordion from Smush lazy-load. */
#eael-img-accordion-76a2003 .eael-image-accordion-item { background-image: url(/wp-content/uploads/2026/01/Dryer-Repair-done-by-Certified-Mechanical.png) !important; }
#eael-img-accordion-391ad81 .eael-image-accordion-item { background-image: url(/wp-content/uploads/2026/01/Dishwasher-Repair-done-by-Certified-Mechanical2-1.png) !important; }
#eael-img-accordion-13e887b .eael-image-accordion-item { background-image: url(/wp-content/uploads/2026/01/Refrigerator-Repair-done-by-Certified-Mechanical.png) !important; }
#eael-img-accordion-4345585 .eael-image-accordion-item { background-image: url(/wp-content/uploads/2026/01/Stove-Repair-done-by-Certified-Mechanical2-4.png) !important; }
#eael-img-accordion-a5bbbcf .eael-image-accordion-item { background-image: url(/wp-content/uploads/2026/01/Washing-Machine-Repair-done-by-Certified-Mechanical2.png) !important; }
.elementor-element-f799b9c .eael-img-accordion .eael-image-accordion-item {
  background-size: cover !important;
  background-position: center !important;
}

/* FX06 [Medium] Widgets wider than the screen on tablet and phone, and the
   commercial brand grid wider than the page on desktop:
   - brands band be99c24 has 5% side margins on top of width 100% at tablet
     (subtitle a39fd3d cut at "surroundin" on 768);
   - its heading f2a4698 is set to 111.6% width;
   - service brand grid 0d99d6b has a 100px left pad (desktop) and 87% width;
   - commercial brand grid 0d99d6b has a 50px left margin plus 100% width,
     so the note and last column are cut at 390 and run past 1440.
   Pages: 34 service/commercial/city templates. Widths: all. r2 new. */
.elementor-element.elementor-element-f2a4698 {
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
}
.elementor-element.elementor-element-0d99d6b {
  --margin-left: 0px !important;
  margin-left: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.elementor-element.elementor-element-0d99d6b > .e-con-inner > *,
.elementor-element.elementor-element-0d99d6b > .e-con {
  min-width: 0;
  max-width: 100%;
}
.elementor-element.elementor-element-0d99d6b .elementor-icon-list-text {
  overflow-wrap: anywhere;
}
@media (max-width: 1024px) {
  .elementor-element.elementor-element-be99c24 {
    --margin-left: 0px !important;
    --margin-right: 0px !important;
    max-width: 100% !important;
  }
  .elementor-element.elementor-element-0d99d6b {
    --width: 100% !important;
    --padding-left: 0px !important;
  }
  .elementor-widget__width-initial,
  .e-con.e-grid,
  .elementor-element-10e21fa {
    max-width: 100% !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-0d99d6b.e-grid > .e-con-inner {
    --e-con-grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
  }
}

/* FX07 [Medium] Tap targets: footer, "Our Locations" and A-Z brand links are
   23-27px tall on phone and tablet (need 44px). Every row of a list that
   holds links gets the same 44px height, so linked and plain brand names
   stay evenly spaced. Pages: 72. r1 T1, N1. */
@media (max-width: 1024px) {
  .elementor-widget-icon-list:has(a) .elementor-icon-list-item {
    min-height: 44px;
    align-items: center;
  }
  .elementor-widget-icon-list .elementor-icon-list-item > a,
  [data-elementor-type="footer"] .elementor-nav-menu a,
  [data-elementor-type="footer"] .elementor-widget-text-editor a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* FX08 [Medium] Forms: 14px inputs make iPhone zoom in when a field is
   tapped. Use 16px on phone. Pages: 66 (booking forms). r2 new. */
@media (max-width: 767px) {
  .elementor-form input,
  .elementor-form select,
  .elementor-form textarea {
    font-size: 16px !important;
  }
}

/* FX09 [Low] Long centred paragraphs on phone (testimonial quotes, intro
   notes, check lists) are hard to read. Left-align body text inside the
   testimonial carousel and check lists only; headings and CTAs stay centred.
   Pages: 64. Jaxx M5. */
@media (max-width: 767px) {
  .elementor-widget-n-carousel .elementor-widget-text-editor,
  .elementor-widget-icon-list .elementor-icon-list-items {
    text-align: left;
  }
}

/* FX10 [Medium] Page H1 runs 5-7 lines on phone and pushes the CTA down
   (commercial, gas and washing machine heroes; 24 pages). Cap the H1 size on
   phones. r1 M1. */
@media (max-width: 480px) {
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(28px, 8.4vw, 34px) !important;
    line-height: 1.15 !important;
  }
}

/* FX11 [Low] Off-screen gears and the off-canvas menu widen the document
   (full-page width up to 1,619px at 1440 and 1,511px at 390; hidden today
   by overflow-x:hidden). clip stops any sideways drag on older iOS without
   breaking sticky headers. Pages: 72. r1 G1, NV. */
html, body {
  overflow-x: clip;
}

/* FX12 [Low] Privacy and Terms run about 1,340px wide (about 170 characters a
   line). Cap the reading width. Jaxx L6. */
.page-id-3321 .elementor-widget-text-editor,
.page-id-3302 .elementor-widget-text-editor {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* FX15 [Low] Last contrast stragglers.
   - "$149" strike-through price is #999999 on white (2.85:1): use #767676
     (4.54:1). Price, strike-through and wording unchanged. 26 pages.
   - Footer social icons #69727D on navy (1.91:1, needs 3:1 for icons).
   The focused skip-link colour rule was dropped (Boss D2, 6:02 AM ET Nov 13:
   "No, keep Certified's current colours"). The link keeps the site's existing
   focus colour. */
[style*="#999999" i][style*="line-through" i],
[style*="#999" i][style*="line-through" i] {
  color: #767676 !important;
}
[data-elementor-type="footer"] .elementor-social-icon i,
[data-elementor-type="footer"] .elementor-social-icon svg {
  color: #D5DEE6 !important;
  fill: #D5DEE6 !important;
}

/* FX13, FX14 and W09 are held for Boss colour decision D2 and are not in this file. */

/* W10 [Medium] Reserve height for the Our Work job list (container d5012b3) to limit CLS. */
.elementor-element-d5012b3 {
  min-height: 640px;
}
@media (max-width: 1024px) {
  .elementor-element-d5012b3 { min-height: 720px; }
}

/* W18 [Low] FAQ eyebrow divider (widget 5f0e5a8) left a short orange line under
   the first letter of the heading at 1440 (evidence E16). The desktop separator
   is a left-aligned 131px rule; tighten it on desktop so the line stays with
   the "FAQ" label and does not run under the H2. Tablet/phone rules unchanged. */
@media (min-width: 1025px) {
  .elementor-element-5f0e5a8 .elementor-divider-separator {
    width: auto !important;
    max-width: 90px;
  }
}