/**
 * iOS-Specific Fixes for Scroll Freezing Issues
 * This file overrides problematic styles that cause scroll freezing on iOS devices
 * Load this AFTER all other CSS files
 */

/* =========================================
   iOS VIEWPORT FIX
   ========================================= */

@supports (-webkit-touch-callout: none) {
  /* Fix 100vh issue on iOS - use -webkit-fill-available instead */
  .hero-section {
    min-height: 100vh;
    min-height: -webkit-fill-available !important;
  }

  /* Prevent body scroll locking */
  body {
    position: relative !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
  }

  html {
    position: relative !important;
    overflow-y: visible !important;
    height: auto !important;
    /* Remove smooth scrolling on iOS */
    scroll-behavior: auto !important;
  }

  /* Fix modal backgrounds to not block scroll */
  .w3-modal {
    /* Allow scroll when modal is open */
    pointer-events: none;
  }

  .w3-modal-content {
    pointer-events: auto;
  }

  /* Disable problematic touch actions */
  * {
    /* Remove touch-action restrictions */
    touch-action: auto !important;
  }

  /* Only apply touch-action to specific elements that need it */
  .testimonials-carousel,
  .portfolio-carousel {
    touch-action: pan-y !important;
  }

  /* Remove all will-change properties on iOS */
  * {
    will-change: auto !important;
  }

  /* Remove 3D transforms used for hardware acceleration */
  * {
    -webkit-transform: none !important;
    transform: none !important;
  }

  /* Allow transforms only where absolutely necessary */
  .hero-animation *,
  .carousel-slide {
    -webkit-transform: initial !important;
    transform: initial !important;
  }

  /* Fix position:fixed elements */
  .quick-contact,
  .back-to-top {
    position: absolute !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: 20px !important;
  }

  /* Ensure forms don't zoom on iOS */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Prevent double-tap zoom without blocking scroll */
  button, a, [role="button"] {
    touch-action: manipulation !important;
  }

  /* But allow pan on the body */
  body, main, section, article {
    touch-action: pan-y !important;
  }

  /* Fix overflow issues on containers */
  .w3-content,
  .container,
  .portfolio-container,
  .testimonials-container {
    overflow: visible !important;
  }

  /* Prevent horizontal scroll */
  body > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Fix modal scrolling */
  .portfolio-modal-content,
  .w3-modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Disable animations that can cause jank */
  @media (max-width: 768px) {
    * {
      animation-duration: 0.3s !important;
      animation-delay: 0s !important;
      transition-duration: 0.2s !important;
    }
  }

  /* Fix sticky position elements */
  .sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
  }

  /* Ensure touch events work properly */
  a, button, input, select, textarea, [onclick], [role="button"] {
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  /* But allow text selection in content areas */
  p, span, h1, h2, h3, h4, h5, h6, li, td, th {
    -webkit-user-select: text !important;
    user-select: text !important;
  }

  /* Fix carousel/slider touch handling */
  .carousel, .slider {
    -webkit-overflow-scrolling: auto !important;
    scroll-snap-type: none !important;
  }

  /* Disable scroll-snap on iOS (causes freezing) */
  * {
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
  }

  /* Fix backdrop-filter performance issues */
  .has-backdrop-filter {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Reduce blur effects on iOS */
  .blur {
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* Ensure modals don't break scroll */
  body.modal-open {
    position: relative !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
  }

  /* Fix touch-callout on interactive elements */
  a, button, input, select, textarea {
    -webkit-touch-callout: none !important;
  }

  /* But allow on content */
  p, span, div:not([onclick]) {
    -webkit-touch-callout: default !important;
  }
}

/* =========================================
   IPHONE-SPECIFIC FIXES
   ========================================= */

@supports (-webkit-touch-callout: none) {
  @media only screen and (max-width: 768px) {
    /* iPhone-specific viewport handling */
    .hero-section {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Fix for iPhone notch/dynamic island */
    header {
      padding-top: max(20px, env(safe-area-inset-top));
    }

    /* Bottom safe area for iPhone gesture bar */
    footer,
    .quick-contact {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    /* Prevent rubber-band scrolling issues */
    body {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .main-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: auto !important;
    }
  }
}

/* =========================================
   EMERGENCY OVERRIDES
   ========================================= */

/* Force enable scrolling if all else fails */
@supports (-webkit-touch-callout: none) {
  html.ios-scroll-fix,
  body.ios-scroll-fix {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
    transform: none !important;
    will-change: auto !important;
  }
}