/* Custom Typography Enhancements for Better Readability */

/* Base typography improvements */
.prose {
  /* Improved line height for better readability */
  line-height: 1.75;
}

/* Responsive font sizing using clamp for fluid typography */
.prose p {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  margin-bottom: 1.5em;
}

.prose h1 {
  font-size: clamp(2rem, 1.8rem + 1vw, 2.5rem);
  margin-top: 2em;
  margin-bottom: 1em;
}

.prose h2 {
  font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}

.prose h3 {
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Enhanced list styling */
.prose ul {
  padding-left: 1.625em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.prose ol {
  padding-left: 1.625em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.prose li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  line-height: 1.75;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* Match paragraph font size */
}

/* Custom bullet points with better visual hierarchy */
.prose ul > li {
  position: relative;
  padding-left: 0.375em;
}

.prose ul > li::marker {
  color: inherit;  /* Use text color, not heading color */
  font-weight: normal;
}

.dark .prose ul > li::marker {
  color: inherit;  /* Use text color, not heading color */
}

/* Nested list improvements */
.prose ul ul,
.prose ol ul {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose ul ul > li::marker {
  content: "◦ ";
}

.prose ul ul ul > li::marker {
  content: "▪ ";
}

/* Better spacing for nested lists */
.prose li > ul,
.prose li > ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Improved ordered list styling */
.prose ol > li::marker {
  color: rgb(34, 95, 120);
  font-weight: 600;
}

.dark .prose ol > li::marker {
  color: rgb(207, 166, 61);
}

/* Enhanced blockquote styling */
.prose blockquote {
  padding-left: 1.5em;
  border-left-width: 4px;
  border-left-color: rgb(34, 95, 120);
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  font-style: italic;
}

.dark .prose blockquote {
  border-left-color: rgb(207, 166, 61);
}

/* Better code block styling */
.prose pre {
  margin-top: 1.75em;
  margin-bottom: 1.75em;
  padding: 1.25em;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.dark .prose pre {
  border-color: rgba(255, 255, 255, 0.1);
}

.prose code {
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
  background-color: rgba(0, 0, 0, 0.05);
}

.dark .prose code {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Inline code within pre should not have extra styling */
.prose pre code {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}

/* Table improvements */
.prose table {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose th {
  padding: 0.75em 1em;
  font-weight: 600;
}

.prose td {
  padding: 0.75em 1em;
}

/* Better link styling with underline for accessibility */
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.2s ease;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

/* Improved paragraph spacing */
.prose p + p {
  margin-top: 1.5em;
}

/* Better spacing after headings */
.prose h1 + *,
.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.75em;
}

/* Enhanced emphasis styling */
.prose strong {
  font-weight: 700;
  color: inherit;
}

.prose em {
  font-style: italic;
}

/* Better horizontal rule styling */
.prose hr {
  margin-top: 3em;
  margin-bottom: 3em;
  border-color: rgba(0, 0, 0, 0.1);
}

.dark .prose hr {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Improved figure and image captions */
.prose figure {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose figcaption {
  margin-top: 0.875em;
  font-size: 0.875em;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
}

.dark .prose figcaption {
  color: rgba(255, 255, 255, 0.6);
}

/* Better spacing for definition lists */
.prose dl {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose dt {
  margin-top: 1.25em;
  font-weight: 600;
}

.prose dd {
  margin-top: 0.5em;
  margin-left: 1.625em;
}

/* Improved keyboard styling */
.prose kbd {
  padding: 0.2em 0.4em;
  font-size: 0.875em;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dark .prose kbd {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}