/* ============================================================
   Responsive fixes — Local Roofing Contractor site
   The original Elementor export only tuned layouts for "mobile"
   (<=767px) and desktop; the tablet/small-laptop gap in between
   (roughly 768–1500px) was left inheriting desktop values that
   don't fit, causing real horizontal-scroll/overlap bugs. This
   file patches that gap without touching the desktop design.
   ============================================================ */

/* Belt-and-braces: never allow a horizontal scrollbar from a
   stray fixed-width element we haven't found yet. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Home page "About / Our Services" grid (element a043efe): the
   desktop rule pins a 171px left margin plus a 2-column grid that
   doesn't fit between 768–1500px, shoving the block off the right
   edge and forcing the whole page to scroll horizontally. Fall
   back to the same single-column, no-margin layout the site
   already uses below 767px. */
@media (max-width: 1500px) {
  .elementor-12 .elementor-element.elementor-element-a043efe {
    --e-con-grid-template-columns: repeat(1, 1fr);
    --margin-left: 0px;
    --margin-right: 0px;
  }
}

/* Header phone-number button: once the nav collapses to the
   burger (see the dropdown-tablet class change in the HTML), keep
   its text on one line and let it shrink gracefully instead of
   stacking "407 / 505 / ROOF" on narrow header widths. */
.elementor-location-header .elementor-button {
  white-space: nowrap;
}
@media (max-width: 360px) {
  .elementor-location-header .elementor-button-text { font-size: 0.85em; }
}