/* Custom styles for basic layout and readability */
body {
  font-family: sans-serif;
  background-color: #f8f8f8; /* Light background */
  color: #333; /* Darker text for readability */
}

/* Main layout container for sidebar and content */
#main-layout {
  max-width: 1200px; /* Increased max-width for more space */
  margin: 2rem auto; /* Center the layout */
  display: flex; /* Enable flexbox for side-by-side layout */
  gap: 1.5rem; /* Space between sidebar and content (equivalent to Tailwind gap-6) */
  flex-direction: column; /* Default to column on small screens */
  padding: 0 1rem; /* Added padding for smaller screens */
}

/* Apply row direction on medium screens and up */
@media (min-width: 768px) { /* md breakpoint in Tailwind */
  #main-layout {
    flex-direction: row;
  }
}

#sidebar {
  width: 100%; /* Full width on small screens */
  min-width: 200px; /* Minimum width for sidebar */
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (min-width: 768px) { /* md breakpoint in Tailwind */
  #sidebar {
    width: 250px; /* Fixed width on larger screens */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
  }
}

#content-area {
  flex-grow: 1; /* Allow content area to take remaining space */
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  /* Removed box-shadow to eliminate the dropshadow from the content area */
}

pre {
  background: #f4f4f4;
  padding: 1em;
  overflow-x: auto;
  border-radius: 0.25rem;
  white-space: pre-wrap; /* Ensures long lines wrap */
  word-break: break-word; /* Breaks long words if needed */
}
code {
  background-color: #e0e0e0;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}

#sidebar a {
  display: block;
  margin-bottom: 0.5em;
  text-decoration: none;
  color: #007bff;
}
#sidebar a:hover {
  text-decoration: underline;
}
/* Specific styling for the loading message */
#content.loading {
  text-align: center;
  color: #777;
  padding: 2.5rem;
}

/* --- Markdown Specific Styles --- */

/* Titles should be bold and large */
#content-area h1 {
  font-size: 2.5rem; /* Larger font size for main titles */
  font-weight: bold;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #eee; /* Subtle line below titles */
  color: #2c3e50; /* A slightly darker color for prominence */
}

/* Subtitles should be smaller than titles */
#content-area h2 {
  font-size: 2rem; /* Smaller than h1, larger than h3 */
  font-weight: bold;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #34495e;
}

#content-area h3 {
  font-size: 1.5rem; /* Even smaller, but still prominent */
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  color: #34495e;
}

#content-area h4, #content-area h5, #content-area h6 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
  color: #34495e;
}

/* Dotted lists should have dots */
#content-area ul {
  list-style-type: disc; /* Ensures dots for unordered lists */
  margin-left: 1.5rem; /* Indent list items */
  padding-left: 0;
  margin-bottom: 1rem;
}

#content-area ol {
  list-style-type: decimal; /* Ensures numbers for ordered lists */
  margin-left: 1.5rem;
  padding-left: 0;
  margin-bottom: 1rem;
}

#content-area li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Put lines between the cells of Tables */
#content-area table {
  width: 100%;
  border-collapse: collapse; /* Collapses borders into a single line */
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for tables */
}

#content-area th, #content-area td {
  border: 1px solid #ddd; /* Light grey border for cells */
  padding: 0.8rem; /* Padding inside cells */
  text-align: left;
}

#content-area th {
  background-color: #f2f2f2; /* Light background for table headers */
  font-weight: bold;
  color: #555;
}

#content-area tr:nth-child(even) {
  background-color: #f9f9f9; /* Zebra striping for table rows */
}

#content-area blockquote {
  border-left: 4px solid #ccc;
  margin: 1.5em 0;
  padding: 0.5em 1.5em;
  color: #666;
  background-color: #f6f6f6;
  border-radius: 4px;
}

#content-area p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

#content-area img {
  max-width: 100%; /* Ensures images are responsive */
  height: auto;
  display: block; /* Removes extra space below image */
  margin: 1rem 0; /* Adds space above and below images */
  border-radius: 0.5rem; /* Slightly rounded corners for images */
}

#content-area a {
  color: #007bff;
  text-decoration: none;
}

#content-area a:hover {
  text-decoration: underline;
}