/* 
* Mobile Boundary System
* Enforces strict boundaries for all content to prevent horizontal overflow on mobile devices
*/

/* Core boundary container - apply to any container that may contain overflowing content */
.boundary-container {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Force all images to respect container boundaries */
.boundary-container img {
  max-width: 100%;
  height: auto;
}

/* Special handling for links - especially important for long URLs */
.boundary-container a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* Source URL class - apply to elements containing full URLs */
.source-url {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all; /* More aggressive breaking for URLs */
  max-width: 100%;
  display: inline-block;
}

/* Alternative: Truncate URL display but keep full href */
.truncated-url {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

/* Chart containers */
.boundary-chart {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* Lists with potential overflowing content */
.boundary-container ul,
.boundary-container ol {
  padding-left: 1.5rem;
  box-sizing: border-box;
  max-width: 100%;
}

.boundary-container li {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Tables - prevent overflow */
.boundary-container table {
  max-width: 100%;
  table-layout: fixed;
  width: 100%;
}

.boundary-container td,
.boundary-container th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Source sections */
.boundary-sources {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  box-sizing: border-box;
}

/* Specific behaviors for source lists */
.boundary-sources ul {
  padding-left: 1.2rem;
}

.boundary-sources li {
  margin-bottom: 0.75rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Mobile-specific enhancements */
@media (max-width: 576px) {
  /* Apply boundary container properties to specific elements only on mobile */
  .newsletter-card,
  .newsletter-form,
  .form-group,
  .container,
  .modal-content,
  .modal {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  .boundary-sources a {
    word-break: break-all; /* More aggressive breaking at mobile sizes */
  }
  
  .boundary-container ul,
  .boundary-container ol {
    padding-left: 1.2rem; /* Smaller padding on mobile */
  }
}