/* OrthoBoost cutover fixes, 2026-08-31.
 *
 * Loaded last so it wins without !important where possible. Everything here is
 * a layout or hit-area correction: no colour, type, spacing or copy is changed,
 * so the site looks identical to the 1:1 snapshot.
 */

/* ---------------------------------------------------------------------------
 * 1. Horizontal overflow at 320px
 *
 * Three pages scrolled sideways on a 320px screen. The cause is flex default
 * `min-width: auto`, which stops an Elementor container shrinking below its
 * content and pushes it past the viewport. Only the three offending containers
 * are targeted, so no other layout can shift.
 * ------------------------------------------------------------------------ */
@media (max-width: 480px) {
  .elementor-element-66b8eb08,   /* services/biological-dentistry */
  .elementor-element-65615c97,   /* services/clear-aligners */
  .elementor-element-61d2f582 {  /* iaomt-smart-certification */
    min-width: 0;
    max-width: 100%;
  }

  .elementor-element-66b8eb08 > .elementor-widget-container,
  .elementor-element-65615c97 > .elementor-widget-container,
  .elementor-element-61d2f582 > .elementor-widget-container {
    margin-left: 0;
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Tap targets under 44px
 *
 * The header CTA and phone button measured 42px and the logo link 31.7px. The
 * hit area is expanded with an absolutely positioned ::after rather than by
 * resizing the control, so nothing moves on screen.
 * ------------------------------------------------------------------------ */
header .elementor-button,
header a[href^="tel:"],
header a[href="/"] {
  position: relative;
}

header .elementor-button::after,
header a[href^="tel:"]::after,
header a[href="/"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  /* Sits behind the label so it never covers text or blocks a nested control. */
  z-index: 0;
}

/* ---------------------------------------------------------------------------
 * 3. Keep long headings inside the viewport on very narrow screens.
 * ------------------------------------------------------------------------ */
@media (max-width: 480px) {
  .elementor-heading-title {
    overflow-wrap: break-word;
  }
}