/* Make all text black by default (light mode) */
* {
  color: black !important;
}

/* Light mode gray elements - using HTML color name */
pre {
  background-color: gainsboro !important;
}

code {
  background-color: gainsboro !important;
}

blockquote {
  background-color: gainsboro !important;
}

table {
  background-color: gainsboro !important;
}

table th,
table td {
  background-color: gainsboro !important;
}

input[type="search"],
input[type="text"] {
  background-color: gainsboro !important;
  color: black !important;
  border-color: gainsboro !important;
}

/* Dark mode - automatically switches based on system preference */
@media (prefers-color-scheme: dark) {
  * {
    color: white !important;
  }
  
  body {
    background-color: black !important;
  }
  
  #app {
    background-color: black !important;
  }
  
  .markdown-section {
    background-color: black !important;
    color: white !important;
  }
  
  .sidebar {
    background-color: black !important;
    color: white !important;
  }
  
  .sidebar ul li a {
    color: white !important;
  }
  
  .content {
    background-color: black !important;
  }
  
  .toc-container {
    color: white !important;
  }
  
  .toc-container * {
    color: white !important;
  }
  
  .toc-container h2 {
    color: white !important;
  }
  
  .toc-item a {
    color: white !important;
  }
  
  .toc-item a * {
    color: white !important;
  }
  
  .toc-list {
    color: white !important;
  }
  
  .toc-list li {
    color: white !important;
  }
  
  .toc-list li a {
    color: white !important;
  }
  
  .markdown-section .toc-container a {
    color: white !important;
  }
  
  /* Code blocks */
  pre {
    background-color: dimgray !important;
    color: white !important;
  }
  
  code {
    background-color: dimgray !important;
    color: white !important;
  }
  
  /* Search input */
  input[type="search"],
  input[type="text"] {
    background-color: dimgray !important;
    color: white !important;
    border-color: dimgray !important;
  }
  
  /* Blockquotes and other gray elements */
  blockquote {
    background-color: dimgray !important;
    color: white !important;
  }
  
  table {
    background-color: dimgray !important;
  }
  
  table th,
  table td {
    background-color: dimgray !important;
    color: white !important;
  }
}

/* Revert margins for all common markdown elements */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6,
.markdown-section p,
.markdown-section ul,
.markdown-section ol,
.markdown-section li,
.markdown-section blockquote,
.markdown-section pre,
.markdown-section table,
.markdown-section img {
  margin: revert;
}

/* Revert padding for common markdown elements */
.markdown-section ul,
.markdown-section ol,
.markdown-section blockquote,
.markdown-section pre,
.markdown-section table {
  padding: revert;
}

/* Custom header spacing (different before and after) */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  margin-top: 1em;      /* more space BEFORE the header */
  margin-bottom: 0.2em; /* less space AFTER the header */
}

/* Disable header links - remove link styling and prevent interaction */
.markdown-section h1 a,
.markdown-section h2 a,
.markdown-section h3 a,
.markdown-section h4 a,
.markdown-section h5 a,
.markdown-section h6 a {
  color: inherit !important;
  text-decoration: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Responsive spacing for content */
.markdown-section {
  /* Mobile: minimal padding for maximum content space */
  padding: 1rem 1rem;
}

/* Mobile: centered content with minimal padding */
@media (max-width: 767px) {
  .markdown-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin: 0 auto;
    max-width: 100%;
  }
  
  .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .sidebar {
    padding: 0 !important;
  }
}

/* Desktop: more padding and centered content */
@media (min-width: 768px) {
  .markdown-section {
    padding: 1rem 4rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }
  
  /* Ensure the main content area allows centering */
  .content {
    max-width: none;
  }
}

/* Table of Contents Styling */
.toc-container {
  margin-bottom: 2rem;
}

/* Light mode TOC color - only apply when not in dark mode */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .toc-item a {
    color: black !important;
  }
  
  .toc-container h2 {
    color: black !important;
  }
}