/* Mobile horizontal-overflow fixes.
   30 of 76 pages scrolled sideways at 390px. Four separate causes, all scoped
   to phone widths so the desktop layout is untouched. */

@media (max-width: 767px) {

  /* 1. ElementsKit grid rows carry -15px side margins for gutters, but their
        container has less padding than that, so every row pushed 5-15px past
        the viewport. At phone width the columns are full-bleed anyway, so the
        gutter has nothing to do. */
  .ekit-wid-con .ekit-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ekit-wid-con .ekit-row > [class*="ekit-col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2. The OET/IELTS score comparison tables are ~500px wide. Let the table
        scroll inside its own box rather than dragging the page with it. */
  .elementor-widget-container table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 3. Long unbroken tokens — names, URLs, and text pasted out of Word with
        its SCXW/BCX wrapper spans — must wrap instead of widening the page. */
  .elementor-widget-text-editor,
  .elementor-widget-text-editor * {
    /* overflow-wrap only breaks a word that genuinely cannot fit.
       word-break: break-word was tried and rejected — it split ordinary
       words mid-heading ("Here' s What the NMC"). */
    overflow-wrap: break-word;
  }

  /* Headings shrink-wrap to their longest word, and plain break-word is
     excluded from intrinsic sizing, so a name like "ShenshaSainulabdeen"
     still forced the box wider than the screen. "anywhere" does feed into
     intrinsic sizing, while still only breaking when a word cannot fit. */
  .elementor-heading-title,
  .elementor-heading-title *,
  .ekit-heading--title,
  .ekit-heading--title *,
  .ekit-wid-con h1, .ekit-wid-con h2, .ekit-wid-con h3,
  .ekit-wid-con h1 *, .ekit-wid-con h2 *, .ekit-wid-con h3 * {
    overflow-wrap: anywhere;
  }

  /* 4. Some heading widgets hardcode a pixel width inline, measured at desktop
        size, which then exceeds a phone viewport. */
  .elementor-heading-title [style*="width"],
  .ekit-heading--title [style*="width"],
  .elementor-widget-container [style*="width"] > span[style*="width"] {
    max-width: 100% !important;
  }

}