/* ====== HORIZONTAL SCROLL FIX ====== */
/* This file fixes horizontal scroll issues on mobile */

/* ====== GLOBAL OVERFLOW PREVENTION ====== */
html {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ====== MOBILE SPECIFIC FIXES ====== */
@media (max-width: 768px) {
  /* Force all containers to fit within viewport */
  .card-wrapper,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Force all sections to fit */
  section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  
  /* Force content containers to fit */
  .hero-content,
  .section-content,
  .contact-container,
  .about-container,
  .mentorship-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  
  /* Force navigation to fit */
  .mobile-nav,
  .desktop-nav {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 15px !important;
  }
  
  /* Force navigation links to fit */
  .nav-links {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Force all text elements to wrap */
  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;
  }
  
  /* Force images to scale down */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  
  /* Force buttons to fit */
  button, .cta-button, .btn {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
  
  /* Force forms to fit */
  input, textarea, select {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Force tables to fit */
  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }
  
  /* Force flex containers to fit */
  .flex-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Force grid containers to fit */
  .grid-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Force absolute positioned elements to stay within viewport */
  .absolute-element {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Force fixed positioned elements to stay within viewport */
  .fixed-element {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Force all elements with specific widths to respect viewport */
  [style*="width"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Force all elements with specific max-widths to respect viewport */
  [style*="max-width"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ====== 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;
  }
}