/* Article content styling using Tailwind 4 */
.article-content {
  @apply text-gray-700 leading-relaxed;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  @apply text-gray-900 font-semibold leading-tight mt-8 mb-4;
}

.article-content h1 {
  @apply text-3xl;
}

.article-content h2 {
  @apply text-2xl border-b border-gray-200 pb-2 scroll-mt-8;
}

.article-content h3 {
  @apply text-xl;
}

.article-content h4 {
  @apply text-lg;
}

.article-content p {
  @apply mb-4 leading-7;
}

.article-content ul,
.article-content ol {
  @apply mb-4 pl-6;
}

.article-content ul {
  @apply list-disc;
}

.article-content ol {
  @apply list-decimal;
}

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

.article-content blockquote {
  @apply border-l-4 border-blue-200 pl-4 my-6 italic text-gray-600 bg-blue-50 py-2;
}

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

.article-content pre {
  @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-6;
}

.article-content pre code {
  @apply bg-transparent text-inherit p-0;
}

.article-content a {
  @apply text-blue-600 hover:text-blue-800 underline;
}

.article-content img {
  @apply my-6 rounded-lg shadow-sm max-w-full h-auto;
}

.article-content table {
  @apply w-full border-collapse border border-gray-300 my-6;
}

.article-content th,
.article-content td {
  @apply border border-gray-300 px-4 py-2;
}

.article-content th {
  @apply bg-gray-50 font-semibold;
}

.article-content hr {
  @apply my-8 border-gray-300;
}

.article-content strong,
.article-content b {
  @apply font-semibold;
}

.article-content em,
.article-content i {
  @apply italic;
}