/* ==========================================================================
   Cable Defender static site: layout fixes (2026-10-23)
   Fixes problems inherited from the original Elementor page:
   text touching the screen edge, text overlapping images, sideways scrolling.
   Loaded last in <head> so it overrides the Elementor/theme CSS.
   ========================================================================== */

:root { --cd-gutter: clamp(20px, 5vw, 80px); }

/* 1. No sideways scrolling. Some decorative images deliberately bleed past
      the screen edge; clip them instead of widening the page. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }

/* 2. Side gutters on full-width sections so text never touches the edge.
      The section background still runs edge to edge. */
.elementor-section.elementor-section-full_width > .elementor-container {
  padding-left: var(--cd-gutter);
  padding-right: var(--cd-gutter);
  box-sizing: border-box;
}
/* Two text columns were nudged left with negative margins ("Waterproof",
   "Plan large scale installations"). Align them with the rest. */
.elementor-element-0fe9ec0 > .elementor-widget-wrap,
.elementor-element-69e701a > .elementor-widget-wrap { margin-left: 0 !important; }

/* 3. "Installed in Under 5 Minutes": the caption was pinned 94px below the
      worker icons while the icons grew with the screen, so they collided on
      wide screens and the caption ran off the right edge. Put the icons in a
      row and the caption underneath, in normal flow. */
.elementor-element-f9041b7,
.elementor-element-e53d77e { display: none !important; }            /* spacers that only served the old pinned layout */
.elementor-element-1cb01e3 {
  position: relative !important; inset: auto !important;
  width: 100% !important; max-width: 100% !important;
  margin-top: 32px !important;
}
@media (min-width: 1025px) {
  .elementor-element-81527c5 > .elementor-widget-wrap {
    display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: space-between;
  }
  .elementor-element-93e53f3, .elementor-element-9e4bc86, .elementor-element-f3e992e {
    position: relative !important; inset: auto !important;
    width: 31% !important; max-width: 31% !important; margin: 0 !important;
  }
  .elementor-element-93e53f3 img, .elementor-element-9e4bc86 img, .elementor-element-f3e992e img {
    width: 100% !important; max-width: 220px; height: auto;
  }
  /* breathing room between the two columns */
  .elementor-element-81527c5 > .elementor-widget-wrap { padding-left: clamp(24px, 4vw, 64px) !important; }
}
/* the install-kit photo was sized at 105% of its column and poked into the
   caption's column; keep it inside its own column */
.elementor-element-97e8cfc img { max-width: 100% !important; height: auto; }

/* 4. Image collages ("Access From Anywhere", "Built for Enterprise") used
      fixed pixel offsets, so on narrower desktops the images slid over the
      text. Same composition, expressed as percentages of the column (and of
      each image's own height) so it scales with the screen. Values measured
      at the widths where the original looked right (1366px / 1536px). */
@media (min-width: 1025px) {
  .elementor-element-aacd129 { left: 35.36% !important; top: 0 !important; translate: 0 -36.22%; }
  .elementor-element-7cd2fc0 { left: -1.54% !important; top: 0 !important; translate: 0 -42.59%; }

  .elementor-element-4330bd9 { left: -24.63% !important; top: 0 !important; translate: 0 -142.35%; }
  .elementor-element-5bc64f6 { left: -3.15% !important;  top: 0 !important; translate: 0 -72.53%; }
  .elementor-element-0c503fe { left: -13.13% !important; top: 0 !important; translate: 0 -74.58%; }
  .elementor-element-2b71122 { left: 22.68% !important;  top: 0 !important; translate: 0 -21.11%; }
}

/* 5. Two photos were set to z-index:-2, which drew them *behind* their own
      section's background, so they never appeared (on the original site too):
      the "Waterproof to 6 meters" photo and the install-kit photo under
      "Installed in Under 5 Minutes". Bring them back in front. */
.elementor-element-abd0621,
.elementor-element-97e8cfc { z-index: 0 !important; }

/* 6. Line spacing. Every heading was set to line-height 1.0, so lines nearly
      touched. Display headings get a little room; the medium-weight text the
      page uses as paragraphs gets normal reading spacing. */
.elementor-widget-heading .elementor-heading-title { line-height: 1.15 !important; }
.elementor-element-0e029ed .elementor-heading-title,
.elementor-element-1687354 .elementor-heading-title,
.elementor-element-1b21bb6 .elementor-heading-title,
.elementor-element-1cb01e3 .elementor-heading-title,
.elementor-element-2fd0667 .elementor-heading-title,
.elementor-element-48fdefa .elementor-heading-title,
.elementor-element-4a5fcd0 .elementor-heading-title,
.elementor-element-6707469 .elementor-heading-title,
.elementor-element-687587b .elementor-heading-title,
.elementor-element-6ac83c0 .elementor-heading-title,
.elementor-element-6c5a24a .elementor-heading-title,
.elementor-element-907ee77 .elementor-heading-title,
.elementor-element-a0107a6 .elementor-heading-title,
.elementor-element-a4dd492 .elementor-heading-title,
.elementor-element-a517a0e .elementor-heading-title,
.elementor-element-aa42607 .elementor-heading-title,
.elementor-element-acee582 .elementor-heading-title,
.elementor-element-b4a78ab .elementor-heading-title,
.elementor-element-d7c1f57 .elementor-heading-title,
.elementor-element-dd46c19 .elementor-heading-title,
.elementor-element-ec98962 .elementor-heading-title,
.elementor-element-f069c8e .elementor-heading-title,
.elementor-element-f70a1d3 .elementor-heading-title,
.elementor-element-fb4f43e .elementor-heading-title { line-height: 1.45 !important; }

/* 7. Text + photo sections: a gap between the text column and the photo
      column so photos never touch the end of a line of text. */
@media (min-width: 1025px) {
  .elementor-element-fb954fe > .elementor-widget-wrap,   /* Waterproof photo */
  .elementor-element-acf3d77 > .elementor-widget-wrap,   /* Battery photo */
  .elementor-element-db7ce20 > .elementor-widget-wrap {  /* Install planner photo */
    padding-left: clamp(24px, 3vw, 56px) !important;
  }
}
/* On phones/tablets the worker icons are hidden, so drop the extra space
   above the caption that followed the install-kit photo. */
@media (max-width: 1024px) {
  .elementor-element-81527c5.py-5 { padding-top: 0 !important; }
  .elementor-element-1cb01e3 { margin-top: 0 !important; }
}

/* 8. Collage sections ("Access From Anywhere", "Built for Enterprise"): the
      images scale with the screen but the section height was fixed, so on
      wide monitors the phone/tablet and cards ran into the next section.
      Let the section grow with the screen so there is always ~90px clear
      above and below. The original heights stay as the minimum. */
@media (min-width: 1025px) {
  .elementor-element-ea1c62e > .elementor-container { min-height: max(700px, calc(39.2vw + 84px)) !important; }
  .elementor-element-70dee2f > .elementor-container { min-height: max(798px, calc(47.7vw + 84px)) !important; }
}