/* ==========================================================================
   mobile-lock.css — 2026-11-07 (fix: page draggable left/right on iPhone)
   v2 2026-11-08: lock moved to the ROOT element only.
     v1 put overflow-x:hidden on html AND body. Per the CSS spec, setting one
     overflow axis to hidden computes the other axis to auto — which turned
     BODY into a NESTED vertical scroll port: two vertical scrollbars (inner
     one on body, outer one on the viewport). On touch devices the browser
     then decides which port a drag feeds ("vertical scroll wedged for a
     while, then suddenly works again"). The root element's overflow
     propagates to the viewport, so html alone locks the page without
     creating a second scroll port.
   ========================================================================== */

/* 1) Page-width lock (all pages) — on the ROOT element only, so it applies
      to the viewport and does NOT create a nested scroll container:
      overflow-x: hidden          - kills real horizontal document scrolling:
                                    anything wider than the viewport can no
                                    longer extend the page's scroll area
                                    (works on all iOS versions; vertical
                                    scrolling is unaffected).
      overscroll-behavior-x: none - iOS 16+ / modern browsers: also suppresses
                                    the horizontal rubber-band ("momentary
                                    drag that snaps back"). Gracefully ignored
                                    on older iOS.
   body: overflow-x: CLIP (not hidden) — belt-and-braces for engines where
   the html clip would be ignored. 'clip' does not create a scroll container
   (unlike hidden, which would again compute overflow-y to auto), so it
   cannot reintroduce the double-scrollbar. Unsupported on old engines ->
   simply ignored. */
html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body {
  overflow-x: clip;
}

/* 2) Root-cause fix for a 15px overflow on the home page: the htmlbox tab
      menu (raw HTML stored in the module's DB content) nests a Bootstrap
      .row (its -15px side margins assume a padded parent) inside
      .tab-content-html-menu, which has NO padding. The row therefore
      poked 15px past the right viewport edge. Zero the margins here. */
.tab-content-html-menu > .row {
  margin-left: 0;
  margin-right: 0;
}