/* ====== MOBILE SCROLL FIX ====== */
/* This file fixes mobile vertical scroll issues */

/* ====== GLOBAL SCROLL FIXES ====== */
html {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* Ensure vertical scroll is enabled */
  -webkit-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
}

body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* Ensure vertical scroll is enabled */
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important; /* Ensure body takes full viewport height */
  -webkit-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
}

/* ====== MOBILE SPECIFIC SCROLL FIXES ====== */
@media (max-width: 768px) {
  html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Force vertical scroll */
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
  }
  
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Force vertical scroll */
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important; /* Ensure body takes full viewport height */
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
  }
  
  /* Ensure main containers allow vertical scroll */
  .card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important; /* Ensure full height */
    box-sizing: border-box !important;
  }
  
  .card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important; /* Ensure full height */
    box-sizing: border-box !important;
  }
  
  /* Ensure all sections allow vertical scroll */
  section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure content containers allow vertical scroll */
  .hero-content,
  .section-content,
  .contact-container,
  .about-container,
  .mentorship-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure navigation doesn't interfere with scroll */
  .mobile-nav,
  .desktop-nav {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 15px !important;
  }
  
  /* Force all text elements to allow vertical scroll */
  h1, h2, h3, h4, h5, h6, p, span, div, a {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
  }
  
  /* Ensure images don't interfere with scroll */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
  }
  
  /* Ensure buttons don't interfere with scroll */
  button, .cta-button, .btn {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
  }
  
  /* Ensure forms don't interfere with scroll */
  input, textarea, select {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
  }
  
  /* Ensure tables don't interfere with scroll */
  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
  }
  
  /* Ensure flex containers don't interfere with scroll */
  .flex-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
    box-sizing: border-box !important;
  }
  
  /* Ensure grid containers don't interfere with scroll */
  .grid-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
    box-sizing: border-box !important;
  }
  
  /* Ensure absolute positioned elements don't interfere with scroll */
  .absolute-element {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
    box-sizing: border-box !important;
  }
  
  /* Ensure fixed positioned elements don't interfere with scroll */
  .fixed-element {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
    box-sizing: border-box !important;
  }
  
  /* Force all elements with specific widths to allow vertical scroll */
  [style*="width"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
  }
  
  /* Force all elements with specific max-widths to allow vertical scroll */
  [style*="max-width"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical scroll */
  }
}

/* ====== EXTRA SMALL SCREENS ====== */
@media (max-width: 480px) {
  section,
  .hero-content,
  .section-content,
  .contact-container,
  .about-container,
  .mentorship-container {
    padding: 0 10px !important;
  }
  
  .mobile-nav,
  .desktop-nav {
    padding: 0 10px !important;
  }
}

/* ====== VIEWPORT FIXES ====== */
/* Ensure viewport meta tag works correctly */
@supports (-webkit-touch-callout: none) {
  /* iOS specific fixes */
  html {
    -webkit-overflow-scrolling: touch !important;
  }
  
  body {
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ====== LOADING STATE FIXES ====== */
/* Ensure content is visible during loading */
body.loading {
  overflow-y: auto !important;
}

/* ====== CONTENT HEIGHT FIXES ====== */
/* Ensure content takes full height */
.landing-hero,
.hero-section,
.cta-section,
.contact-section,
.about-section,
.mentorship-section {
  min-height: auto !important;
  height: auto !important;
}