/* 
 * Mobile Fixes CSS
 * This file contains fixes for mobile devices, particularly for scrolling issues
 */

/* Remove custom scrollbars and enable native scrolling */
.ps {
  overflow: auto !important;
}

/* Hide perfect-scrollbar elements */
.ps__rail-x,
.ps__rail-y,
.ps__thumb-x,
.ps__thumb-y {
  display: none !important;
}

/* Ensure proper overflow behavior */
body, 
html, 
.main-content,
.sidenav {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Fix for Firefox mobile */
@-moz-document url-prefix() {
  body, 
  html, 
  .main-content,
  .sidenav {
    scrollbar-width: auto;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
}

/* Ensure content is properly scrollable */
.scroll-content {
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Fix for skill cards container */
.skill-cards-container {
  overflow: visible;
}

/* Fix for testimonials container */
#testimonials-container {
  overflow: visible;
}

/* Fix for medium and larger screens (768px or more) */
@media (min-width: 768px) {
  body, 
  html {
    overflow: auto !important;
    height: auto !important;
  }
  
  .main-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
  }
  
  /* Ensure the PS container doesn't interfere with scrolling */
  .ps {
    overflow: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  
  /* Fix for the main content container */
  .main-content > .container-fluid {
    min-height: calc(100vh - 100px);
    padding-bottom: 100px;
  }
  
  /* Override any transform styles that might be interfering with scrolling */
  .main-content .ps__rail-y,
  .main-content .ps__rail-x {
    display: none !important;
  }
  
  /* Ensure the scroll-content doesn't interfere with scrolling */
  .scroll-content {
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}