/* mobile-fix.css */

/* Global mobile viewport and overflow fixes */
@media (max-width: 768px) {
  html {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent; /* Prevent tap delay */
  }
  
  body {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent; /* Prevent tap delay */
  }
  
  .card-wrapper {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
  
  .card {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
  
  /* Force all sections to fit */
  section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
  }
  
  /* Remove margin from hero section to fix nav spacing */
  .landing-hero {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 20px;
  }
  
  /* Ensure nav stays within viewport */
  .mobile-nav,
  .desktop-nav {
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  /* Force content containers to fit */
  .hero-content,
  .section-content,
  .contact-container,
  .about-container,
  .mentorship-container { /* Added .mentorship-container */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0 15px; /* Default padding */
  }

  /* Adjust padding for very small screens */
  @media (max-width: 480px) {
    section,
    .hero-content,
    .section-content,
    .contact-container,
    .about-container,
    .mentorship-container {
      padding: 0 10px; /* Reduced padding for smaller screens */
    }
  }
  
  /* Force text to wrap properly */
  h1, h2, h3, h4, h5, h6, p, span, div {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  
  /* Ensure images scale down */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Ensure buttons fit */
  button, .cta-button {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }
}