/* Stronger mobile overflow protection
   - Prevent horizontal panning via overflow-x:hidden and touch-action
   - Constrain common wide elements (images, cover blocks, groups)
   - Keep rules minimal and scoped to common wrappers so parent layout stays intact
*/

html, body {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
  /* Allow vertical pan only; blocks horizontal panning on supporting browsers */
  touch-action: pan-y;
  
}

/* iOS momentum scrolling stays enabled while we prevent horizontal pan */
html, body {
  -webkit-overflow-scrolling: touch;
}

/* Constrain images, covers and Gutenberg groups */
img, .wp-block-image img, .wp-block-cover, .wp-block-cover__image, .wp-block-group, .wp-block-group__inner-container, figure {
  /* max-width: 100% !important; */
  width: auto !important;
  height: auto !important;
  display: block;
}

/* Defensive wrappers */
.site, #page, .wrap, .container, .entry-content, .site-content {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* Some elements use large negative margins or transforms — ensure they can't push the viewport */
[style*="margin-left"] , [style*="margin-right"] {
  box-sizing: border-box;
}

/* Additional mobile-only safety: cap element widths to viewport to stop pan/drag */
@media (max-width: 800px) {
  html, body, .site, #page, .wrap, .wp-block-group, .wp-block-group__inner-container, .wp-block-group .wp-block-group__inner-container, .hero-container, .entry-content, .site-content, figure {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure any inline-styled width (e.g. style="width:195px") doesn't push layout */
  [style*="width:"] {
    max-width: 100% !important;
    width: auto !important;
  }
}

/* Aggressive fallback: cap all element widths to viewport on small screens.
   This can be intrusive but is effective at stopping horizontal panning.
   Keep it last so it overrides other rules if needed. */
@media (max-width: 800px) {
  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  html, body {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }
}

/* Hide native scrollbars on mobile to avoid adding visible width
   This doesn't disable scrolling — it only hides the chrome. */
@media (max-width: 800px) {
  html, body, .site, #page, .wrap {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
  }

  /* WebKit browsers */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .site::-webkit-scrollbar,
  .wrap::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}

/* Targeted fix: prevent book/figure images and any inline-styled images from adding horizontal space */
@media (max-width: 800px) {
  #hero .book-image img,
  figure.wp-block-image img,
  .wp-block-group__inner-container .wp-block-image img,
  .wp-block-image.size-full img {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(100% - 2rem) !important;
    width: auto !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Ensure hero container doesn't produce overflow from children */
  #hero .hero-container,
  #hero {
    overflow-x: hidden !important;
  }

  /* If splash CSS set a min-width on html/body, neutralize it on mobile */
  html, body {
    min-width: 0 !important;
  }
}