/* Mobile-specific styles to fix issues on actual mobile devices */

/* Fix for iOS and Android viewport issues */
@media screen and (max-width: 767px) {
  /* Prevent content overflow */
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Fix for mobile menu positioning */
  #mobile-menu {
    position: fixed;
    top: var(--header-height, 60px);
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    z-index: 1000;
    overscroll-behavior: contain;
  }
  
  /* Improve touch targets for better mobile usability */
  a, button, input, select, textarea {
    touch-action: manipulation;
  }
  
  /* Fix for mobile scrolling when menu is open */
  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  /* Ensure proper rendering of fixed elements */
  #main-header {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1001;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Fix for iOS momentum scrolling */
  .scrollable-area {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  
  /* Fix for tap highlight on mobile */
  * {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}

/* Fix for iOS Safari notch and safe areas */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  #main-header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
  }
}