/* =====================================================
   MOBILE OVERFLOW FIX - ALL PAGES
   Prevents horizontal scrolling on mobile devices
   ===================================================== */

/* Prevent horizontal overflow on mobile */
@media (max-width: 1024px) {
  
  /* Ensure body doesn't overflow */
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  
  /* Ensure nav and menu are not affected by overflow */
  nav,
  .nav-menu-wrapper,
  .menu-dropdown {
    overflow: visible !important;
  }
  
  /* Ensure all sections stay within viewport - EXCEPT frameworks section */
  section:not(.frameworks-premium-section):not(#solution) {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  #solution {
    overflow: visible !important;
  }
  
  /* Frameworks section needs special handling */
  .frameworks-premium-section {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    /* Don't override height or position */
  }
  
  .frameworks-sticky-container {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    /* Don't override position: sticky or height */
  }
  
  /* Container fixes */
  .container {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  /* Main content wrapper */
  main {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Grid layouts - prevent overflow */
  [style*="display:grid"],
  [style*="display: grid"] {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Flex layouts - prevent overflow */
  [style*="display:flex"],
  [style*="display: flex"] {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Images and media */
  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }
  
  /* Cards and content blocks */
  .stripe-card,
  .service-card,
  .industry-card,
  .process-card {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Ensure padding doesn't cause overflow */
  * {
    box-sizing: border-box;
  }
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  
  /* Reduce padding on mobile to prevent overflow */
  section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Fix for wide content */
  [style*="padding:"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Ensure no element extends beyond viewport */
  body > * {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Fix for absolute positioned elements */
  [style*="position:absolute"],
  [style*="position: absolute"] {
    max-width: 100vw;
  }
  
  /* Tables - make scrollable */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  
  /* Pre and code blocks */
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
  }
}

/* Small mobile fixes */
@media (max-width: 480px) {
  
  /* Further reduce padding */
  section {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Specific page fixes */

/* Hero section */
@media (max-width: 768px) {
  #hero {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .hero-two-col {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Services section */
@media (max-width: 768px) {
  #services,
  .services-reference-section {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .services-reference-grid {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Industries section */
@media (max-width: 768px) {
  #industries {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .industries-grid {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Process section */
@media (max-width: 768px) {
  #process,
  .process-video-section {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Footer */
@media (max-width: 768px) {
  footer {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .footer-grid {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Risk calculator */
@media (max-width: 768px) {
  #ai-risk-calculator,
  .risk-calc-premium-section {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .risk-calc-container {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* CTA section */
@media (max-width: 768px) {
  #cta,
  .cta-premium-section {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .cta-premium-container {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* About page */
@media (max-width: 768px) {
  #about {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Service pages */
@media (max-width: 768px) {
  .service-hero,
  .service-content {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Industry pages */
@media (max-width: 768px) {
  .industry-hero,
  .industry-content {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Blogs page */
@media (max-width: 768px) {
  .blog-grid {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Careers page */
@media (max-width: 768px) {
  .careers-section {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Prevent specific problematic elements from causing overflow */
@media (max-width: 768px) {
  
  /* Wide buttons */
  .btn-primary,
  .btn-ghost {
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
  }
  
  /* Long text */
  h1, h2, h3, h4, h5, h6,
  p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Prevent long URLs from causing overflow */
  a {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}