/* Content Width and Text Flow Fixes */

/* Main content area */
main {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Article and chapter content */
article,
.chapter,
.chapter-content {
  max-width: 100%;
  width: 100%;
}

/* Paragraphs and text blocks */
p, li, td, th {
  max-width: 80ch; /* Optimal reading length */
  line-height: 1.6;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Code blocks should not be constrained */
pre, 
.code-block,
.code-editor,
.interactive-block {
  max-width: 100%;
  overflow-x: auto;
}

/* Tables */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* Lists */
ul, ol {
  max-width: 80ch;
  padding-left: 2em;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Interactive blocks should use full width */
.interactive-block {
  max-width: 100%;
  margin: 2rem 0;
}

.interactive-block .code-output {
  max-width: 100%;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* Ensure navigation doesn't cut off */
.chapter-nav {
  max-width: 100%;
  padding: 1rem 0;
}

/* Mobile responsiveness */
@media (width <= 768px) {
  main {
    padding: 0 1rem;
  }
  
  p, li, ul, ol {
    max-width: 100%;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  /* Ensure readability in dark mode */
  p, li {
    color: #e0e0e0;
  }
}