/* Post Content Typography Styles */
.post-content {
  @apply text-gray-800 dark:text-gray-200 leading-relaxed;
}

.post-content p {
  @apply mb-4;
}

.post-content strong {
  @apply font-bold text-gray-900 dark:text-white;
}

.post-content em {
  @apply italic;
}

.post-content a {
  @apply text-blue-600 dark:text-blue-400 hover:underline;
}

.post-content h1 {
  @apply text-3xl font-bold mb-4 text-gray-900 dark:text-white;
}

.post-content h2 {
  @apply text-2xl font-semibold mb-3 text-gray-900 dark:text-white border-b pb-2 border-gray-200 dark:border-gray-700;
}

.post-content h3 {
  @apply text-xl font-semibold mb-2 text-gray-900 dark:text-white;
}

.post-content ul,
.post-content ol {
  @apply pl-5 mb-4 list-disc;
}

.post-content li {
  @apply mb-2;
}

.post-content blockquote {
  @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 py-2 italic text-gray-600 dark:text-gray-400 mb-4;
}

.post-content code {
  @apply bg-gray-100 dark:bg-gray-800 rounded px-1 py-0.5 text-sm font-mono;
}

.post-content pre {
  @apply bg-gray-100 dark:bg-gray-800 rounded p-4 mb-4 overflow-x-auto;
}

.post-content pre code {
  @apply bg-transparent p-0;
}

/* Nested element handling */
.post-content p strong em,
.post-content p em strong {
  @apply font-bold italic;
}

/* Specific link styling within paragraphs */
.post-content p a {
  @apply text-blue-700 dark:text-blue-300 underline hover:text-blue-900 dark:hover:text-blue-200;
}