/* ======================================================
   MJ Foundation Layer
   Purpose:
   - Viewport safety (prevent horizontal overflow)
   - iOS safe-area baseline
   Version: v1.2 (Clean)
   ====================================================== */

/* 1) Viewport baseline */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Prefer clip when supported (cleaner than hidden) */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* 2) Main containers: prevent accidental overflow */
.mj-page-shell,
#page,
.site,
.site-content,
.site-main,
.wp-site-blocks {
  max-width: 100%;
  box-sizing: border-box;
}

/* 3) iOS Safe Area (outer containers only) */
@supports (padding: env(safe-area-inset-left)) {
  #page,
  .site,
  .wp-site-blocks {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* 4) Mobile: contain common overflow sources (tables/media) */
@media (max-width: 767px) {

  img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
  }

  /* Tables are a frequent overflow source on mobile */
  table {
    max-width: 100%;
  }

  /* If a table must be wider, allow internal scroll instead of page drift */
  .table-responsive,
  .woocommerce table.shop_table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* ======================================================
   FIX: Mobile viewport offset caused by 100vw full-width breakout
   Scope: ONLY disable alignfull breakout on mobile
   ====================================================== */
@media (max-width: 767px) {
  .mj-page-shell .alignfull,
  .mj-page-shell .mj-section.alignfull,
  .mj-page-shell .alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }
}