/* ============================================================================
   msera-mobile.css — site-wide mobile hardening (ADDITIVE, defensive)
   ----------------------------------------------------------------------------
   Uses low-specificity element selectors so it NEVER overrides a page's own
   class-based layout — it only catches the common things that break mobile:
   oversized media, wide tables, long unbroken words, and sideways scroll.
   Loaded last (footer.php) on storefront pages only.
   ========================================================================== */

/* Never allow the page to scroll sideways. */
html, body { max-width: 100%; }

@media (max-width: 768px) {

  /* 1) Media is always contained within its column. */
  img, svg, video, iframe, embed, object, canvas { max-width: 100%; }

  /* 2) Long words / URLs / emails wrap instead of forcing overflow. */
  body { overflow-wrap: break-word; word-wrap: break-word; }

  /* 3) Wide data tables scroll horizontally instead of stretching the page. */
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 4) Code / preformatted blocks scroll rather than overflow. */
  pre { overflow-x: auto; max-width: 100%; }

  /* 5) Comfortable minimum tap targets for bare links acting as buttons. */
  a.btn, button, .btn, input[type="submit"] { min-height: 42px; }

  /* 6) Inputs at >=16px so iOS doesn't auto-zoom the page on focus. */
  input, select, textarea { font-size: 16px; }
}