/**
 * Application-Specific Styles
 * Main application overrides and custom styles
 */

/* Custom scrollbar for main content */
.main-content::-webkit-scrollbar {
  width: 8px;
}

.main-content::-webkit-scrollbar-track {
  background: var(--color-surface-secondary);
  border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-cta-purple);
}

/* Firefox scrollbar */
.main-content {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-surface-secondary);
}

/* Selection color */
::selection {
  background: var(--color-cta-purple);
  color: var(--color-white);
}

::-moz-selection {
  background: var(--color-cta-purple);
  color: var(--color-white);
}

/* Focus visible styles */
*:focus-visible {
  outline: 2px solid var(--color-cta-purple);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* Remove outline for mouse users (only show for keyboard) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ===== CONTENT LAYOUT ===== */

/* Main content wrapper with centered text column */
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
}

/* Chapter container - centered with flex, constrained width */
#chapter-container {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Ensure chapter content and articles never exceed container */
.chapter-content,
article.chapter-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* All child elements within chapter content must be constrained */
.chapter-content > *,
article.chapter-content > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Mobile: all content fills width naturally and respects container */
@media (max-width: 767px) {
  /* Ensure chapter container respects parent width */
  #chapter-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* All content elements must respect parent constraints */
  .main-content article,
  .main-content section,
  .main-content .chapter-header,
  .main-content .chapter-content,
  .main-content p,
  .main-content h1,
  .main-content h2,
  .main-content h3,
  .main-content h4,
  .main-content ul,
  .main-content ol,
  .main-content blockquote,
  .main-content pre,
  .main-content code,
  .main-content img:not(.theme-icon):not(.hamburger-icon),
  .main-content .warning-box,
  .main-content .note-box,
  .main-content div:not(.table-scroll-wrapper),
  .chapter-content > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Images must be fully contained */
  .main-content img:not(.theme-icon):not(.hamburger-icon) {
    height: auto !important;
    object-fit: contain !important;
  }

  .main-content h2 {
    font-size: 22px !important;
    line-height: 30px !important;
    margin-top: 20px !important;
  }
  .main-content .chapter-header {
    margin-bottom: 20px !important;
  }
  /* Pre/code blocks with overflow handling */
  .main-content pre {
    overflow-x: auto !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
  }

  /* Catch-all: ensure ALL elements within main-content respect constraints */
  .main-content * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Table wrapper special case - already has overflow handling */
  .main-content .table-scroll-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

/* Print styles */
@media print {
  .main-nav,
  .mobile-header,
  .theme-toggle-btn,
  .annotations-container {
    display: none !important;
  }

  .main-content {
    border: none;
    max-width: 100%;
  }

  body {
    background: white;
    color: black;
  }
}