/* Markdown content styling */
.markdown-content {
  @apply text-gray-300;
  line-height: 1.75;
}

.markdown-content h1 {
  @apply text-3xl font-bold text-white pb-2 border-b border-gray-700;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.markdown-content h1:first-child {
  margin-top: 0;
}

.markdown-content h2 {
  @apply text-2xl font-bold text-white pb-2 border-b border-gray-700;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.markdown-content h3 {
  @apply text-xl font-semibold text-white;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.markdown-content h4 {
  @apply text-lg font-semibold text-white;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.markdown-content p {
  margin-bottom: 1rem;
  line-height: 1.75;
}

.markdown-content a {
  @apply text-blue-400 hover:text-blue-300 underline;
}

.markdown-content ul {
  @apply list-disc mb-4;
  margin-left: 1.5rem;
  padding-left: 0.5rem;
}

.markdown-content ul li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
}

.markdown-content ol {
  @apply list-decimal mb-4;
  margin-left: 1.5rem;
  padding-left: 0.5rem;
}

.markdown-content ol li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
}

.markdown-content li > ul,
.markdown-content li > ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.markdown-content code {
  @apply text-pink-400 rounded font-mono;
  background-color: rgb(31 41 55);
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
}

.markdown-content pre {
  @apply rounded-lg p-4 mb-4 overflow-x-auto;
}

.markdown-content pre:not(.highlight) {
  @apply bg-gray-800;
}

.markdown-content pre code {
  @apply px-0 py-0;
}

.markdown-content pre:not(.highlight) code {
  @apply bg-transparent text-gray-300;
}

.markdown-content pre.highlight {
  @apply bg-gray-900;
}

.markdown-content pre.highlight code {
  @apply text-sm font-mono;
}

.markdown-content blockquote {
  @apply border-l-4 border-gray-600 pl-4 italic text-gray-400 my-4;
}

.markdown-content table {
  @apply w-full mb-4 border-collapse;
}

.markdown-content th {
  @apply bg-gray-800 text-white font-semibold px-4 py-2 text-left border border-gray-700;
}

.markdown-content td {
  @apply px-4 py-2 border border-gray-700;
}

.markdown-content hr {
  @apply border-gray-700 my-8;
}

.markdown-content strong {
  @apply font-bold text-white;
}

.markdown-content em {
  @apply italic;
}

.markdown-content img {
  @apply max-w-full h-auto rounded-lg my-4;
}