/* Critical Overflow Prevention Rules */

/* Global overflow prevention */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent any element from exceeding viewport width */
* {
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure all containers are properly contained */
.container, .container-fluid, .row, [class*="col-"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent long text from causing overflow */
p, h1, h2, h3, h4, h5, h6, span, div, a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Mobile-specific rules */
@media (max-width: 575.98px) {
  /* Ensure proper padding for mobile */
  .container, .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Remove negative margins that could cause overflow */
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  /* Ensure proper column padding */
  .row > * {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Hide potentially problematic decorative elements */
  .decorative-blob {
    display: none !important;
  }
  
  /* Ensure forms don't cause overflow */
  form, .form-control, input, textarea, select {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Ensure navigation doesn't cause overflow */
  .navbar, .navbar-brand, .navbar-nav {
    max-width: 100%;
  }
  
  /* Ensure footer doesn't cause overflow */
  footer, .footer-content {
    max-width: 100%;
  }
}