/* iOS Scroll Bug Fixes for workoutgenerator.net */

/* 1. Remove global smooth scrolling for iOS Safari */
html {
  scroll-behavior: auto;
}

/* Re-enable smooth scrolling only for non-iOS devices */
@supports not (-webkit-touch-callout: none) {
  html {
    scroll-behavior: smooth;
  }
}

/* Alternative: Enable smooth scroll only for desktop */
@media (hover: hover) and (pointer: fine) {
  html {
    scroll-behavior: smooth;
  }
}

/* 2. Fix iOS momentum scrolling */
body {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto; /* Changed from scroll to auto to allow natural scrolling */
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 3. Replace 100vh with dynamic viewport height */
.full-height,
.hero,
.section-full,
.min-h-screen,
.h-screen,
section[style*="height: 100vh"],
div[style*="height: 100vh"] {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for iOS */
  height: calc(var(--vh, 1vh) * 100); /* JavaScript fallback */
}

/* 4. Prevent rubber-band scrolling on fixed elements */
.fixed,
.fixed-element,
.modal,
.menu,
.navbar-fixed,
.header-fixed {
  position: fixed;
  overscroll-behavior: contain;
}

/* 5. Fix container scrolling issues */
.scrollable-container,
.overflow-auto,
.overflow-y-auto,
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* 6. Prevent body scroll when modal is open */
body.modal-open,
body.menu-open,
body.no-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

/* 7. iOS-specific fixes using feature detection */
@supports (-webkit-touch-callout: none) {
  /* iOS only code */
  
  /* Prevent bounce effect */
  html, body {
    overscroll-behavior: none;
    /* Remove height: 100% as it can prevent scrolling in iOS apps */
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  /* Fix position sticky issues */
  .sticky,
  .sticky-element,
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
  }
  
  /* Ensure proper touch scrolling */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Fix for modals and overlays */
  .modal-backdrop,
  .modal-overlay,
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
  }
  
  /* Fix for scroll containers */
  .modal-content,
  .modal-body,
  .drawer-content {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    max-height: 100vh;
    max-height: 100dvh;
  }
}

/* 8. Fix input zoom on iOS */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-size: 16px !important; /* Prevents zoom on focus */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 9. Safe area insets for newer iPhones */
.container,
.content,
.main-content,
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.navbar,
.header,
.top-bar {
  padding-top: env(safe-area-inset-top);
}

.footer,
.bottom-bar,
.tab-bar {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 10. Fix for specific workout generator elements */
.workout-container,
.exercise-list,
.muscle-selector {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  max-height: calc(100dvh - 200px);
}

/* 11. Fix anchor scrolling */
[id] {
  scroll-margin-top: 80px; /* Adjust based on your fixed header height */
}

/* 12. Performance optimizations for iOS */
.animated,
.transition-all {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* 13. iOS-specific class for JavaScript targeting */
.ios-device {
  /* Custom styles for iOS devices */
}

.ios-device .smooth-scroll {
  scroll-behavior: auto !important;
}

/* 14. Fix for PWA on iOS */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
  }
  
  .header,
  .navbar {
    top: env(safe-area-inset-top);
  }
}

/* 15. Fix for iOS App WebView environments */
/* Detect iOS app environment and ensure scrolling works */
@supports (-webkit-touch-callout: none) {
  /* Reset any conflicting styles for iOS app */
  html {
    height: auto !important;
    overflow: visible !important;
  }
  
  body {
    height: auto !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    overscroll-behavior: auto !important;
  }
  
  /* Remove any fixed positioning that might interfere */
  body:not(.modal-open) {
    position: relative !important;
  }
  
  /* Ensure main content can scroll */
  main,
  .main-content,
  #app,
  #root,
  .container,
  .content,
  .page-wrapper {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }
  
  /* Fix hero and full-height sections */
  .hero-section,
  .full-height,
  section {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  
  /* Ensure nav doesn't block scrolling */
  nav,
  .navbar,
  .nav-modern {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }
  
  /* Add padding to body to account for fixed nav */
  body {
    padding-top: 80px !important; /* Adjust based on nav height */
  }
  
  /* Ensure sections don't have conflicting overflow */
  section,
  .section {
    overflow: visible !important;
  }
  
  /* Fix any absolute/fixed positioned elements that might interfere */
  .animated-bg,
  .gradient-sphere,
  .floating-card {
    pointer-events: none !important;
  }
  
  /* Ensure interactive elements remain clickable */
  a,
  button,
  input,
  textarea,
  select,
  .btn,
  .clickable {
    pointer-events: auto !important;
  }
}