/* Font Responsiveness for Accessibility */
html {
  font-size: 100%;
}

/* Ensure text doesn't overflow containers */
p, h1, h2, h3, h4, h5, h6, span, a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

/* Adjust font size for different screens while maintaining readability */
@media (max-width: 768px) {
  html {
    font-size: 95%;
  }
  
  /* Apply responsive styles to .new-container except on index.html */
  body:not(.page-index) .new-container,
  body:not(.page-index) section {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 90%;
  }
  
  h1 {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }
  
  h2 {
    font-size: clamp(1.25rem, 4vw, 2rem);
  }
  
  h3 {
    font-size: clamp(1.1rem, 3.5vw, 1.75rem);
  }
  
  p {
    font-size: clamp(0.875rem, 3vw, 1rem);
  }
}

/* Maintain readability when user sets larger font sizes */
@media screen and (max-width: 480px) and (min-font-size: 16px) {
  /* Apply responsive styles to .new-container except on index.html */
  body:not([data-page="index"]) .new-container,
  body:not([data-page="index"]) section {
    width: 100%;
    padding-left: max(15px, 3%);
    padding-right: max(15px, 3%);
  }
  
  body:not([data-page="index"]) .feature-item,
  body:not([data-page="index"]) .crm-content {
    flex-direction: column;
  }
}