/**
 * Mobile Zoom Fix
 * 
 * This CSS ensures that the website content stays centered and properly sized
 * when users pinch to zoom on mobile devices.
 */

/* Apply to the body element and all direct containers */
html, body, #page, .site, main, .site-content {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Ensure header spans full width */
.site-header {
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

/* Fix for zooming issues */
@media (max-width: 767px) {
  /* Prevent content from shifting left */
  body {
    position: relative;
    min-height: 100vh;
    min-width: 100%;
  }
  
  /* Force content to stay centered */
  .site-content, 
  .entry-content, 
  .alignfull, 
  .wp-block-cover {
    transform: translateX(0);
    position: relative;
    left: auto;
    right: auto;
  }
  
  /* Disable horizontal scrolling but allow vertical */
  html {
    overflow-x: hidden;
    overflow-y: visible;
  }
}