/* =========================================================
   DentProColors — responsive QA overrides (2026-09-24)
   ========================================================= */

/* 1. Stop sideways scrolling on phones.
      Slide-in animations and decorative elements poke past the
      screen edge; `clip` hides that without breaking sticky/pinned
      elements the way `overflow:hidden` would. */
html,
body {
  overflow-x: clip !important;
  max-width: 100%;
}

/* 2. Full-screen texture overlay: always cover the whole screen
      (it was sized to a stale viewport, leaving an untextured band). */
.wcf-body-bg {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* 3. Schedule Estimate popup (template 5333) */
/* Calendar column was hard-set to 1600px wide */
.elementor-5333 .elementor-element.elementor-element-0c5dbe5 {
  --width: 100%;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.elementor-5333 .elementor-element.elementor-element-0c5dbe5 > .elementor-element {
  max-width: 100% !important;
}
/* Let the popup scroll when it's taller than the screen */
.aae-popup-builder {
  max-width: 100vw;
}
.elementor-5333 .elementor-element.elementor-element-ededacf {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.elementor-5333 .elementor-element.elementor-element-dde61a5 {
  height: auto !important;
  min-height: 100%;
}
/* Back-to-top button sat on top of the open popup */
body:has(.aae-popup-builder[style*="opacity: 1"]) .wcf-scroll-to-top {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 4. Header: keep the desktop menu and CTA on one line (Laptop 1025–1366) */
@media (min-width: 1025px) {
  .elementor-1890 .wcf-nav-menu-nav.menu-layout-horizontal {
    flex-wrap: nowrap !important;
  }
  .elementor-1890 .wcf-nav-menu-nav.menu-layout-horizontal > li > a {
    white-space: nowrap;
  }
  .elementor-1890 .elementor-element-45de7d1 a {
    white-space: nowrap !important;
  }
}
@media (min-width: 1025px) and (max-width: 1366px) {
  .elementor-1890 .wcf-nav-menu-nav.menu-layout-horizontal > li > a {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

/* 5. Header on phones: show the Schedule Estimate button next to the logo */
@media (max-width: 767px) {
  .elementor-1890 .elementor-element.elementor-element-cd26dba {
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px !important;
  }
  .elementor-1890 .elementor-element.elementor-element-e9ec0d0 {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    --width: auto !important;
  }
  .elementor-1890 .elementor-element-c8e2000 img {
    max-width: min(150px, 100%) !important;
    height: auto !important;
  }
  .elementor-1890 .elementor-element.elementor-element-ad654e9.elementor-hidden-mobile {
    display: flex !important;
    order: 2;
    flex: 0 0 auto;
    width: auto !important;
    --width: auto !important;
    margin-left: auto;
    padding: 0 !important;
  }
  .elementor-1890 .elementor-element-80a7f6a {
    display: none !important; /* phone block (its icon link is the placeholder number) */
  }
  .elementor-1890 .elementor-element-229480f,
  .elementor-1890 .elementor-element-eb09bfe {
    width: auto !important;
    --width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
  .elementor-1890 .elementor-element-45de7d1 a {
    padding: 9px 14px !important;
    font-size: 14px !important;
    line-height: 1.2;
    min-height: 40px;
    white-space: nowrap;
  }
  .elementor-1890 .elementor-element.elementor-element-5a45d13 {
    order: 3;
    flex: 0 0 auto;
    width: auto !important;
    --width: auto !important;
  }
}

/* 6. About Us — "What We Stand For" cards were crushed to ~110px
      columns on tablets. Stack the mission text above the values. */
@media (min-width: 768px) and (max-width: 1200px) {
  .elementor-element-d14c371 > .e-con-inner {
    flex-wrap: wrap !important;
  }
  .elementor-element.elementor-element-ef4a96b,
  .elementor-element.elementor-element-0beb0d2,
  .elementor-element.elementor-element-0beb0d2 .elementor-element.elementor-element-709a5e7 {
    --width: 100% !important;
    width: 100% !important;
  }
  .elementor-element.elementor-element-ef4a96b {
    margin-bottom: 40px;
  }
}

/* 7. About Us — certification logos collapsed to 0px on tablets
      (their row was set to 20% width) */
@media (max-width: 1200px) {
  .elementor-element.elementor-element-9989428 {
    --width: 100% !important;
    width: 100% !important;
  }
}

/* 8. Google / Yelp rating badges (About, Reviews, every service page):
      the two badges were squeezed side by side and the stars /
      "powered by" logos spilled out of the cards on small phones. */
@media (max-width: 767px) {
  .e-con:has(> .elementor-widget > .elementor-widget-container > .trustreviews > .trustreviews-list) {
    flex-wrap: wrap !important;
  }
  .e-con:has(> .elementor-widget > .elementor-widget-container > .trustreviews > .trustreviews-list) > .elementor-element {
    flex: 1 1 140px !important;
    width: auto !important;
    --width: auto !important;
    max-width: 100% !important;
    min-width: 0;
  }
}
@media (max-width: 420px) {
  .e-con:has(> .elementor-widget > .elementor-widget-container > .trustreviews > .trustreviews-list) > .elementor-element {
    flex-basis: 100% !important; /* stack them */
  }
}

/* 9. Reviews page — review grid was locked to 3 columns at every width
      (80px-wide cards on phones) by page-level custom CSS. */
@media (max-width: 767px) {
  body .elementor-4458 .elementor-element.elementor-element-da357e7 .trustreviews[data-layout="grid"] .trustreviews-reviews .trustreviews-review {
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor-4458 .elementor-element.elementor-element-da357e7 .trustreviews[data-layout="grid"] .trustreviews-reviews .trustreviews-review {
    max-width: calc(50% - 15px) !important;
    flex-basis: calc(50% - 15px) !important;
  }
}

/* 10. Footer legal links (Sitemap / Terms / Privacy): add spacing on
       tablets (they ran together) and center them once the footer
       bottom bar stacks on phones. */
@media (max-width: 1024px) {
  .elementor-1876 .elementor-element.elementor-element-67728cf .elementor-icon-list-items {
    display: flex !important;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 6px;
    justify-content: flex-end;
  }
  .elementor-1876 .elementor-element.elementor-element-f58a96e {
    flex-shrink: 0 !important; /* keep the SSL badge from collapsing */
  }
}
@media (max-width: 767px) {
  .elementor-1876 .elementor-element.elementor-element-67728cf {
    --align-self: center !important;
    width: 100%;
  }
  .elementor-1876 .elementor-element.elementor-element-67728cf .elementor-icon-list-items {
    justify-content: center !important;
    text-align: center;
  }
}

/* 11. Service pages - intro text and the "Read our reviews" column sat
       side by side on phones (each ~130px wide). Stack them. */
@media (max-width: 767px) {
  .e-con.e-parent:has(.reviews-placeholder-shortcode-wrapper) {
    --flex-direction: column !important;
    --flex-wrap: nowrap !important;
  }
}

/* 12. "Makes we service" list (services overview + every service page):
       two columns on phones instead of one long list. */
@media (max-width: 767px) {
  .elementor-widget-accordion:has(.wcf--content ul) {
    width: 100% !important;
    max-width: 100% !important;
  }
  body .elementor-widget-accordion .wcf--content ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 12px !important;
    padding-left: 20px !important; /* keep the bullets on screen */
  }
}

/* 13. Service pages - shorter hero on phones so the page title and the
       Before & After slider both fit on the first screen. (Scoped to
       heroes that have the "All Services" link above the H1.) Applies to
       phones and portrait tablets up to 880px, where the hero stacks. */
@media (max-width: 880px) {
  /* space reserved above the hero for the fixed header (was 160px) */
  .e-con-inner:has(> .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1)) {
    padding-top: 110px !important;
  }
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) {
    --padding-top: 16px !important;
    padding-top: 16px !important;
    padding-left: 0 !important; /* section gutter (rule 14) supplies the 20px */
    padding-right: 0 !important;
    --gap: 16px !important;
    gap: 16px !important;
  }
  /* title block: drop the 180px top margin and 60px bottom padding */
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) > .e-con:has(> .e-con > .elementor-widget-wcf--title h1) {
    --padding-bottom: 0px !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) > .e-con > .e-con:has(> .elementor-widget-wcf--title h1) {
    --padding-top: 0px !important;
    padding-top: 0 !important;
    --margin-top: 0px !important;
    margin-top: 0 !important;
  }
  /* Before & After block */
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) > .e-con:has(.elementor-widget-wcf--image-compare),
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .e-con:has(> .elementor-widget-wcf--image-compare) {
    height: auto !important;
    min-height: 0 !important;
    --gap: 12px !important;
    gap: 12px !important;
  }
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) > .e-con > .elementor-widget-wcf--title > .elementor-widget-container {
    margin-top: 0 !important; /* was 80px above "Before & After" */
  }
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .elementor-widget-wcf--image-compare {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .elementor-widget-wcf--image-compare > .elementor-widget-container,
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .elementor-widget-wcf--image-compare .wcf--image-compare,
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .elementor-widget-wcf--image-compare .wcf--image-compare > div,
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .elementor-widget-wcf--image-compare .slider-img,
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .elementor-widget-wcf--image-compare .wcf--image-compare-handle {
    height: clamp(240px, calc(100svh - 440px), 485px) !important;
  }
}

/* 14. Consistent side gutters on phones. Page sections used 0-15px of
       side padding, so text and bullets sat against the screen edge.
       Every top-level section now gets at least 20px (larger values
       set in Elementor are kept). */
@media (max-width: 767px) {
  [data-elementor-type="wp-page"] > .e-con {
    padding-left: max(20px, var(--padding-left, 0px)) !important;
    padding-right: max(20px, var(--padding-right, 0px)) !important;
  }
}
/*fix 14a for section on homepage that does not need it */
@media (max-width: 767px) {
  [data-elementor-type="wp-page"] > .e-con.elementor-element.elementor-element-9c3367d {
    padding-left: max(0px, var(--padding-left, 0px)) !important;
    padding-right: max(0px, var(--padding-right, 0px)) !important;
  }
}

/* Bulleted / numbered lists: keep the markers inside the content area */
.elementor-widget-text-editor :is(ul, ol),
.elementor-widget-wcf--text :is(ul, ol) {
  padding-left: 1.4em !important;
}

/* 15. "Schedule Now" call-to-action box (service pages): uneven padding
       (80px top / 100px bottom, 40px left vs 20px right) and the phone
       button wrapped onto two lines on phones. */
@media (max-width: 767px) {
  .e-con:has(> .e-con > .elementor-widget-html iframe) > .e-con:has(> .elementor-widget-wcf--title):has(> .e-con > .elementor-widget-helo--button) {
    --padding-top: 40px !important;
    --padding-bottom: 40px !important;
    --padding-left: 20px !important;
    --padding-right: 20px !important;
    padding: 40px 20px !important;
  }
  .e-con:has(> .e-con > .elementor-widget-html iframe) > .e-con:has(> .elementor-widget-wcf--title):has(> .e-con > .elementor-widget-helo--button) > .elementor-element,
  .e-con:has(> .e-con > .elementor-widget-html iframe) > .e-con:has(> .elementor-widget-wcf--title):has(> .e-con > .elementor-widget-helo--button) > .e-con > .elementor-widget-helo--button {
    width: 100% !important;
    max-width: 100% !important;
    --container-widget-width: 100% !important;
  }
  .e-con:has(> .e-con > .elementor-widget-html iframe) > .e-con:has(> .elementor-widget-wcf--title):has(> .e-con > .elementor-widget-helo--button) > .e-con > .elementor-widget-helo--button a {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }
}

/* 16. Before & After galleries (service pages, portfolio): one comparison
       per row on phones instead of two narrow 165px slivers. */
@media (max-width: 767px) {
  .e-con:has(> .elementor-widget-wcf--image-compare ~ .elementor-widget-wcf--image-compare) {
    height: auto !important;
    min-height: 0 !important;
    align-content: flex-start !important;
  }
  .e-con:has(> .elementor-widget-wcf--image-compare ~ .elementor-widget-wcf--image-compare) > .elementor-widget-wcf--image-compare {
    --container-widget-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    height: auto !important;
  }
  /* photos are 4:3 landscape - size the slider to match instead of a
     565px-tall crop */
  .e-con:has(> .elementor-widget-wcf--image-compare ~ .elementor-widget-wcf--image-compare) > .elementor-widget-wcf--image-compare > .elementor-widget-container,
  .e-con:has(> .elementor-widget-wcf--image-compare ~ .elementor-widget-wcf--image-compare) > .elementor-widget-wcf--image-compare .wcf--image-compare,
  .e-con:has(> .elementor-widget-wcf--image-compare ~ .elementor-widget-wcf--image-compare) > .elementor-widget-wcf--image-compare .wcf--image-compare > div,
  .e-con:has(> .elementor-widget-wcf--image-compare ~ .elementor-widget-wcf--image-compare) > .elementor-widget-wcf--image-compare .slider-img,
  .e-con:has(> .elementor-widget-wcf--image-compare ~ .elementor-widget-wcf--image-compare) > .elementor-widget-wcf--image-compare .wcf--image-compare-handle {
    height: calc((100vw - 40px) * 0.75) !important;
  }
  /* image-compare widgets carry an 80px bottom margin meant for desktop */
  .elementor-widget-wcf--image-compare > .elementor-widget-container {
    margin-bottom: 0 !important;
  }
}

/* 15b. "Schedule Now" section: let the blue background run edge to edge
        on phones and give it 30px of padding at the bottom. */
@media (max-width: 767px) {
  [data-elementor-type="wp-page"] > .e-con:has(> .e-con > .e-con > .elementor-widget-html iframe) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .e-con:has(> .e-con > .elementor-widget-html iframe):has(> .e-con > .elementor-widget-helo--button, > .e-con > .e-con > .elementor-widget-helo--button) {
    --padding-bottom: 30px !important;
    padding-bottom: 30px !important;
    border-radius: 0 !important;
  }
  .e-con:has(> .e-con > .elementor-widget-html iframe) > .e-con:has(> .elementor-widget-wcf--title):has(> .e-con > .elementor-widget-helo--button) {
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 17. Header on tablets (768-1024): keep the phone number right next to
       the Schedule Estimate button instead of floating ~110px away. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-1890 .elementor-element.elementor-element-ad654e9 {
    justify-content: flex-end !important;
    --justify-content: flex-end !important;
    gap: 16px !important;
    --gap: 16px !important;
  }
  .elementor-1890 .elementor-element.elementor-element-80a7f6a,
  .elementor-1890 .elementor-element.elementor-element-229480f,
  .elementor-1890 .elementor-element.elementor-element-83cd9d6,
  .elementor-1890 .elementor-element.elementor-element-eb09bfe {
    --width: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 18. Tablets (768-1024): same gutter problem as phones - several
       sections had 0-10px side padding, so text touched the screen
       edge. Minimum 30px on tablets. */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-elementor-type="wp-page"] > .e-con {
    padding-left: max(30px, var(--padding-left, 0px)) !important;
    padding-right: max(30px, var(--padding-right, 0px)) !important;
  }
}

/* 19. Service page hero: the floating extra photo overlapped the intro
       text and "Read Our Reviews" heading on tablets (incl. landscape)
       and phones. */
@media (max-width: 1200px) {
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .elementor-widget-wcf--floating-elements {
    display: none !important;
  }
}

/* 20. Tablets (768-1024): center the "Makes We Service" heading and
       the list under it (services overview + every service page), and let the service cards fill the row
       (31%-wide cards only fit two per row, leaving a gap on the right). */
@media (min-width: 768px) and (max-width: 1024px) {
  :is(.e-con, .e-con-inner):has(> .elementor-widget-accordion .wcf--content ul) > .elementor-widget-wcf--title {
    width: 100% !important;
    --container-widget-width: 100% !important;
    max-width: 100% !important;
    align-self: center !important;
    text-align: center !important;
  }
  :is(.e-con, .e-con-inner):has(> .elementor-widget-accordion .wcf--content ul) > .elementor-widget-accordion {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }
  .elementor-element.elementor-element-9a1daa6 > .e-con {
    --width: calc(50% - 20px) !important;
    width: calc(50% - 20px) !important;
  }
}

/* 20b. Services overview cards: text had a 20px left margin but none on
        the right, so descriptions ran into the card edge. */
.elementor-element.elementor-element-9a1daa6 > .e-con .elementor-widget-wcf--title > .elementor-widget-container {
  margin-right: 20px !important;
}

/* 21. Service page hero: the Before & After slider has a 125px (laptop/
       tablet) or 80px (phone) bottom margin inside its shadowed card,
       so the card's shadow box hung ~125px below the photo as an empty
       white strip. Remove it at every width. */
.e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .elementor-widget-wcf--image-compare > .elementor-widget-container {
  margin-bottom: 0 !important;
}

/* =========================================================
   APPEND BELOW RULE 21 - round 2 (2026-09-24)
   ========================================================= */

/* 22. Homepage hero: keep the big DentPro logo ~120px from the top of
       the page on every device. The hero was bottom-aligned in a 90vh
       box, so the logo slid under the fixed header on short windows and
       dropped far down on tall ones. Content now starts at the top. */
.elementor-element.elementor-element-431a361 > .e-con-inner {
  padding-top: 0 !important; /* tablet/phone had an extra 100px here */
}
.elementor-element.elementor-element-2a99bca {
  --padding-top: 100px !important; /* + the 20px gap above the logo = 120px */
  padding-top: 100px !important;
  --justify-content: flex-start !important;
  justify-content: flex-start !important;
}
.elementor-element.elementor-element-4a8243a {
  margin-bottom: 10px !important; /* a little more room above the H1 */
}
/* Tablets: the header is taller here (logo 85px high), so start a bit lower */
@media (min-width: 881px) and (max-width: 1024px) {
  .elementor-element.elementor-element-2a99bca {
    --padding-top: 140px !important;
    padding-top: 140px !important;
  }
}
@media (max-width: 880px) {
  .elementor-element.elementor-element-2a99bca {
    --padding-top: 120px !important;
    padding-top: 120px !important;
  }
}
/* Phones and portrait tablets: let the hero hug its content instead of
   leaving a tall empty band on tall screens */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-2a99bca {
    min-height: 0 !important;
    --min-height: 0px !important;
  }
}

/* 23. Homepage hero H1: full width once the floating photos are hidden
       (1024px and below) instead of a fixed-width box. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-6fa3df9 {
    --container-widget-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 24. Header on landscape tablets / small laptops (1025-1200): "Get
       Started" + phone and the Schedule Estimate button were stacked
       in a narrow column, making the header 125px tall (it covered the
       hero logo). Put them side by side and give the menu the room.
       (If you switch the Nav Menu's Mobile Menu Breakpoint to
       "Tablet Extra", the menu-link parts below simply stop applying.) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .elementor-1890 .elementor-element.elementor-element-ad654e9 {
    --flex-direction: row !important;
    flex-direction: row !important;
    --justify-content: flex-end !important;
    justify-content: flex-end !important;
    align-items: center !important;
    --gap: 14px !important;
    gap: 14px !important;
    --width: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .elementor-1890 .elementor-element.elementor-element-80a7f6a,
  .elementor-1890 .elementor-element.elementor-element-83cd9d6,
  .elementor-1890 .elementor-element.elementor-element-229480f,
  .elementor-1890 .elementor-element.elementor-element-eb09bfe {
    --width: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .elementor-1890 .elementor-element.elementor-element-5a45d13 {
    --width: auto !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0;
    align-items: center !important;
  }
  .elementor-1890 .elementor-element.elementor-element-e9ec0d0 {
    --width: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .elementor-1890 .elementor-element-c8e2000 img {
    max-width: 130px !important;
    height: auto !important;
  }
  .elementor-1890 .desktop-menu-active .wcf-nav-menu-nav.menu-layout-horizontal > li > a {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 13px !important;
  }
  .elementor-1890 .elementor-element-45de7d1 a {
    white-space: nowrap !important;
  }
}
@media (min-width: 1025px) and (max-width: 1120px) {
  .elementor-1890 .elementor-element-c8e2000 img {
    max-width: 110px !important;
  }
  .elementor-1890 .desktop-menu-active .wcf-nav-menu-nav.menu-layout-horizontal > li > a {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 12px !important;
  }
  .elementor-1890 .elementor-element-45de7d1 a {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  .elementor-1890 .elementor-element-9802afc .elementor-icon-box-title,
  .elementor-1890 .elementor-element-9802afc .elementor-icon-box-description {
    font-size: 13px !important;
  }
  .elementor-1890 .elementor-element.elementor-element-ad654e9 {
    gap: 10px !important;
    --gap: 10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* 25. Safety net if the Nav Menu's "Mobile Menu Breakpoint" is raised to
       Tablet Extra (hamburger up to 1200px): keep the off-canvas menu
       links at their normal mobile styling instead of the desktop
       tweaks from rule 4. */
@media (min-width: 1025px) {
  .elementor-1890 .mobile-menu-active .wcf-nav-menu-nav > li > a {
    padding: 15px !important;
    font-size: 16px !important;
    white-space: normal !important;
  }
}

/* 26. Header "Get Started" phone: keep the phone icon to the LEFT of the
       text at every width (it jumped above the text on tablets). */
.elementor-1890 .elementor-element-9802afc .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  text-align: start !important;
}
.elementor-1890 .elementor-element-9802afc .elementor-icon-box-icon {
  margin: 0 !important;
  flex: 0 0 auto;
}
.elementor-1890 .elementor-element-9802afc .elementor-icon-box-content {
  text-align: start !important;
}

/* 27. About Us hero H1 on tablets (881-1024): 60px type in a ~400px
       column broke "Family-Owned" mid-word. Scale it down there. */
@media (min-width: 881px) and (max-width: 1024px) {
  .elementor-element.elementor-element-1022174 h1,
  .elementor-element.elementor-element-1022174 .wcf--title {
    font-size: clamp(40px, 5.2vw, 60px) !important;
    line-height: 1.1 !important;
  }
}

/* 28. About Us - "Our Story" paragraph: left-aligned to match its
       heading (it was centered). */
.elementor-element.elementor-element-b33583c,
.elementor-element.elementor-element-b33583c :is(p, div) {
  text-align: left !important;
}

/* 29. About Us - team cards (Matt / Anna): two cards side by side left
       each name column ~44-150px wide on tablets, so names broke onto
       one-word lines and ran out of the card. One card per row. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-4c21b38,
  .elementor-element.elementor-element-74b2a39 {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 30. Service pages (1201px+, where the hero's floating photo shows):
       the photo hangs into the intro section over the right-hand column,
       and "Read Our Reviews" is bottom-aligned there, so it got covered.
       Cap the photo size and start that column's content lower, leaving
       the intro paragraph on the left where it was.
       VERIFIED (Auto Body Repair): gap between photo and "Read Our
       Reviews" is ~118px at 1366 and ~105px at 1920 (it was 0-1px);
       the first paragraph did not move. */
@media (min-width: 1201px) {
  .e-con:has(> .e-con > .e-con > .elementor-widget-helo--button + .elementor-widget-wcf--title h1) .elementor-widget-wcf--floating-elements .floating-element {
    max-width: 240px !important;
  }
  .e-con:has(> .e-con > .elementor-widget-wcf--title + .elementor-widget .reviews-placeholder-shortcode-wrapper) {
    --justify-content: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 140px !important;
  }
}

/* 31. Homepage "A Real Mom-and-Pop Shop, Not a Chain" (phones): the
       heading box is a fixed 390px wide and centered, so on phones wider
       than ~430px it sat indented from the label above and the copy
       below. Make it full width so all three line up. */
@media (max-width: 767px) {
  .elementor-element.elementor-element-55fd40d {
    --container-widget-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
}

/* 32. Schedule Estimate popup: one scrollbar, full-height calendar, and
       the close button inside the white panel.
       VERIFIED at 390x844, 820x1180 and 1366x900: popup centered, close
       button 20px from the panel's top/right, one scrollbar (the panel).
       - On phones/tablets the calendar column (0c5dbe5) is set to a fixed
         1600px width in Elementor. That stretched the page to ~490px on a
         390px phone and shoved the popup off to the right. Forced to 100%.
       - The popup box was wider than its white panel (1100px vs 888px),
         so the X sat out on the dark overlay. Size the box to the panel.
       - The child theme's style.css forces div#calendly-integration to a
         450px box with overflow-y: scroll !important (the 2nd scrollbar).
         The ID selector below is needed to beat it.
       - The Calendly div was clipped to 600px; give it 680px so the
         calendar isn't cut off. Optional: add data-resize="true" to the
         calendly-inline-widget div so Calendly sizes itself on later steps. */
.aae-popup-builder:has(.elementor-5333) {
  width: min(888px, calc(100vw - 32px)) !important;
  max-width: none !important;
}
.aae-popup-builder:has(.elementor-5333) .popup-content {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-radius: 20px;
}
.elementor-5333 .elementor-element.elementor-element-ededacf {
  --padding-left: 0px !important;
  --padding-right: 0px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.elementor-5333 .elementor-element.elementor-element-ededacf > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
}
.elementor-5333 .elementor-element.elementor-element-dde61a5,
.elementor-5333 .elementor-element.elementor-element-0c5dbe5,
.elementor-5333 .elementor-element.elementor-element-1b86af2,
.elementor-5333 div#calendly-integration {
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}
.elementor-5333 div.calendly-inline-widget {
  height: 680px !important;
  min-height: 680px !important;
}
.elementor-5333 .calendly-inline-widget iframe {
  height: 680px !important;
  display: block;
}
/* calendar column had a fixed 1600px width on mobile/tablet */
.elementor-5333 .elementor-element.elementor-element-0c5dbe5,
.elementor-5333 .elementor-element.elementor-element-1b86af2,
.elementor-5333 .elementor-element-1b86af2 > .elementor-widget-container,
.elementor-5333 div.calendly-inline-widget,
.elementor-5333 .calendly-inline-widget iframe {
  --width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
.aae-popup-builder .close-button {
  top: 20px !important;
  right: 20px !important;
  z-index: 10;
}

/* 33. About Us - "Our Story" section (1025px+): the section only had 20px
       side padding, so on laptops (1366 and below) the heading and copy
       hugged the left edge of the window. Match the header's 50px gutter.
       Verified at 1366: text now starts at 50px, image column unaffected. */
@media (min-width: 1025px) {
  .elementor-element.elementor-element-023566a {
    --padding-left: 50px !important;
    --padding-right: 50px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}
/* 34. Service tiles (flip boxes on the homepage and the services page):
       background photos were anchored top-left (0% 0%), so the crop
       favored the corner. Center them on both sides of the tile. */
.wcf__flip_box .flip-box-front,
.wcf__flip_box .flip-box-back {
  background-position: center center !important;
}
 
/* 35. "Makes we service" list (every service page + services overview),
       phones: the list block is centered while the bullets stay
       left-aligned. The accordion body had 20px padding on the right
       only, which pushed the list off-center. Verified at 390px: 41px
       of space on both sides. */
@media (max-width: 767px) {
  .elementor-widget-accordion:has(.wcf--content ul) .elementor-tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor-widget-accordion:has(.wcf--content ul) .wcf--inner--accrodion--body,
  .elementor-widget-accordion:has(.wcf--content ul) .wcf--content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor-widget-accordion .wcf--content ul {
    grid-template-columns: repeat(2, max-content) !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important; /* room for the bullets */
    padding-right: 0 !important;
    column-gap: 40px !important;
  }
  .elementor-widget-accordion .wcf--content ul li {
    text-align: left !important;
  }
}
 
/* 36. Homepage hero logo in narrow windows (880px and below, including a
       ~500px-wide desktop browser): the header is ~106px tall there and
       the logo started at 120px, so it nearly touched the header and
       looked crowded under it. Start the logo ~40px below the header
       (146px from the top of the page) and leave 40px between the logo
       and the H1 at every width (was 30px). Measured at 500px in a
       desktop browser: header 0-106, logo 146, H1 starts 40px below it. */
@media (max-width: 880px) {
  .elementor-element.elementor-element-2a99bca {
    --padding-top: 146px !important;
    padding-top: 146px !important;
  }
}
.elementor-element.elementor-element-4a8243a {
  margin-bottom: 20px !important; /* + the hero's 20px gap = 40px above the H1 */
}
 
/* 37. Homepage "Schedule Now" CTA (153cbea) and the "Ready to Get
       Started?" card below it (c659080), phones + portrait tablets: the
       sections around them have 20px (phone) / 30px (tablet) side
       padding, so the colored backgrounds stopped short of the screen
       edges. Pull them out to full width; their text keeps its inset.
       Verified: 390px -> background 0-390, text at 20px;
                 820px -> background edge to edge, text at 30px. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-153cbea,
  .elementor-element.elementor-element-c659080 {
    margin-left: -20px !important;
    margin-right: -20px !important;
    --width: calc(100% + 40px) !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.elementor-element-153cbea,
  .elementor-element.elementor-element-c659080 {
    margin-left: -30px !important;
    margin-right: -30px !important;
    --width: calc(100% + 60px) !important;
    width: calc(100% + 60px) !important;
  }
}
 
/* 38. Schedule popup - calendar never shows its own scrollbar.
       Calendly's height changes per step (date grid ~602px, time list
       and form much taller), so a fixed 680px embed scrolled inside
       itself. The small script in functions.php (dpc_calendly_autoheight)
       listens for Calendly's height message and sets --dpc-cal-h; this
       rule applies it. The #calendly-integration ID is needed to beat the
       child theme's "height: 90vh !important" rule. Falls back to 680px
       until Calendly reports. Verified at 390px: embed grew to Calendly's
       reported 1344px, only the popup body scrolls. */
.elementor-5333 div#calendly-integration div.calendly-inline-widget,
.elementor-5333 div#calendly-integration .calendly-inline-widget iframe {
  height: var(--dpc-cal-h, 680px) !important;
  min-height: 0 !important;
  max-height: none !important;
}
 
/* 39. Homepage featured review (phones + tablets):
       - The review column (6a6635ec) has the "Pin Area" scroll effect. Once
         the columns stack, the pin pushed the card ~670px down, over the
         "Ready When You Are" section. Turn the pin movement off here
         (desktop, where the columns sit side by side, keeps it).
       - The Google "G + stars" graphic (7343063) was drawn at 74% of the
         card width (~260px on a phone) on top of the reviewer's name.
         Smaller and tucked into the card's bottom-right corner.
       Verified at 390 and 820: the card and "Read All Reviews" end before
       the next section; the G sits beside the reviewer name. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-6a6635ec {
    transform: none !important;
  }
  .elementor-element.elementor-element-7343063 {
    background-size: auto 60% !important;
    background-position: right 20px bottom 20px !important;
  }
}

/* 40. Homepage "Ready When You Are" (the insurance / out-of-pocket
       section), phones + portrait tablets:
       - The intro paragraph (efed94e) was held narrower than the section
         (58-758px of an 815px tablet screen). Let the heading, copy and
         button stack use the full content width (30px gutters on tablet,
         20px on phones, same as the rest of the page).
       - The heading was 36px on every device, while "Schedule Now" is 38px
         on phones and 60px on tablets. Match those sizes.
       Measured values: Schedule Now = 38px/45.6px (phone), 60px/72px
       (tablet), weight 500, uppercase. Not re-checked in the browser after
       the change. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-9b46d4a,
  .elementor-element.elementor-element-efed94e,
  .elementor-element.elementor-element-1fc11b2 {
    --container-widget-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
  .elementor-element.elementor-element-9b46d4a h2 {
    font-size: 60px !important;
    line-height: 72px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element.elementor-element-9b46d4a h2 {
    font-size: 38px !important;
    line-height: 45.6px !important;
  }
}

@media (max-width: 767px) {
  .elementor-3888 .elementor-element.elementor-element-5c9afe1b {
    --padding-bottom:60px !important;
    padding-bottom:60px !important;
  }
}

@media (max-width: 1024px) {
  .elementor-element.elementor-element-cc84538,
  .elementor-element.elementor-element-bcafde6,
  .elementor-element.elementor-element-1dd29aa { min-width: 129px; }
  .elementor-element.elementor-element-4fe8890 { max-width: 210px !important;word-wrap: anywhere; }
}

@media screen and (min-width: 1025px) {
  .elementor-5333 .elementor-element.elementor-element-0c5dbe5 {
    width: 50% !important;
    --width: 50% !important;
  }
  .elementor-5333 div#calendly-integration .calendly-inline-widget {
    max-width: 100% !important;
  }
}

.elementor-element.elementor-element-6a6635ec.aae-pro-sticky-active {
  padding-top: 0px !important;
  margin-top: -40px !important;
  transition: margin ease 0.3s, padding ease 0.3s !important;
}

@media (min-width: 1025px) {
  .aae-gsap-popup-builder .close-button {
    padding: 0px !important;
  }
}

/* 41. Service pages - "Schedule Now" box (blue gradient with the map,
       3221a22 on Auto Body Repair; matched by structure so it works on
       every service page): rule 15b made it edge to edge on phones only.
       On portrait tablets (768-1024) it still stopped 30px short of each
       side and had no bottom padding. Same treatment here, with even 30px
       side padding on the text column (was 40px left / 20px right).
       Verified at 820: box spans the full width, text inset evenly. */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-elementor-type="wp-page"] > .e-con:has(> .e-con > .e-con > .elementor-widget-html iframe) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .e-con:has(> .e-con > .elementor-widget-html iframe):has(> .e-con > .elementor-widget-helo--button, > .e-con > .e-con > .elementor-widget-helo--button) {
    --padding-bottom: 30px !important;
    padding-bottom: 30px !important;
    border-radius: 0 !important;
  }
  .e-con:has(> .e-con > .elementor-widget-html iframe) > .e-con:has(> .elementor-widget-wcf--title):has(> .e-con > .elementor-widget-helo--button) {
    --padding-left: 30px !important;
    --padding-right: 30px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}
 
/* 42. Schedule popup (phones): safety net against sideways scrolling in
       the popup panel. One reviewer saw a horizontal scrollbar at 390px
       (content 463px in a 354px panel); I could not reproduce it once the
       popup finished opening, but this guarantees it can't happen. */
@media (max-width: 767px) {
  .elementor-5333 .elementor-element.elementor-element-ededacf,
  .aae-popup-builder:has(.elementor-5333) .popup-content {
    overflow-x: hidden !important;
  }
}
 
/* 43. Community Involvement - "Community Votes" award badges (floating
       widget cfe3175) beside the hero photo: they sit 260px / 160px left
       of the photo column, which only fits on very wide screens. At 1366
       one badge was fully off-screen and the other 84% cut off. Below
       1800px, fan them over the photo's lower-left corner instead.
       Verified at 1366: both badges fully visible (19-224px, 119-364px). */
@media (min-width: 1025px) and (max-width: 1800px) {
  .elementor-element-cfe3175 .floating-element:nth-child(1) {
    left: -30px !important;
  }
  .elementor-element-cfe3175 .floating-element:nth-child(2) {
    left: 70px !important;
  }
}
@media (max-width: 1024px) {
  .elementor-element-cfe3175 .floating-element {
    left: -20px !important;
  }
}
 
/* 44. Homepage "Ready When You Are" (insurance / out-of-pocket section) -
       the navy "Have a Question? / Send Us a Message" card (d68c739) was
       the section's only background and stayed boxed on phones/tablets
       (650px wide at 820, 20px short of each edge at 390). Run it edge to
       edge like the Schedule Now band; form content keeps its inset.
       Verified at 820: card 0-815px, heading and fields at 30px. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-d68c739 {
    margin-left: -20px !important;
    margin-right: -20px !important;
    --width: calc(100% + 40px) !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    border-radius: 0 !important;
    align-self: stretch !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.elementor-element-d68c739 {
    margin-left: -30px !important;
    margin-right: -30px !important;
    --width: calc(100% + 60px) !important;
    width: calc(100% + 60px) !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}