/* Content Engine Styles */

article.guide-content {
  h2 {
    @apply text-2xl font-semibold text-gray-900 mb-4 mt-8;
  }

  h3 {
    @apply text-xl font-semibold text-gray-900 mb-3 mt-6;
  } 

  h4 {
    @apply text-lg font-medium text-gray-900 mb-2 mt-4;
  }

  p {
    @apply mb-4 text-gray-700;
  }

  ul {
    @apply list-disc pl-6 mb-4;
  }

  li {
    @apply mb-2 leading-relaxed text-gray-700 space-y-1;  
  }
} 

/* Typography for content pages */
.content-prose {
  @apply text-gray-900 leading-relaxed;
}

.content-prose h1 {
  @apply text-4xl font-bold text-gray-900 mb-6 mt-8;
}

.content-prose h2 {
  @apply text-2xl font-semibold text-gray-900 mb-4 mt-8;
}

.content-prose h3 {
  @apply text-xl font-semibold text-gray-900 mb-3 mt-6;
}

.content-prose h4 {
  @apply text-lg font-medium text-gray-900 mb-2 mt-4;
}

.content-prose p {
  @apply mb-4 text-gray-700;
}

.content-prose ul {
  @apply mb-4 pl-6;
}

.content-prose ol {
  @apply mb-4 pl-6;
}

.content-prose li {
  @apply mb-2 text-gray-700;
}

.content-prose blockquote {
  @apply border-l-4 border-blue-500 pl-4 py-2 my-6 bg-blue-50 italic;
}

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

.content-prose pre {
  @apply bg-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
}

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

.content-prose table {
  @apply w-full border-collapse border border-gray-300 mb-4;
}

.content-prose th {
  @apply border border-gray-300 px-4 py-2 bg-gray-100 font-semibold text-left;
}

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

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

.content-prose strong {
  @apply font-semibold;
}

.content-prose em {
  @apply italic;
}

/* Content page specific styles */
.content-header {
  @apply bg-white border-b border-gray-200;
}

.content-breadcrumb {
  @apply text-sm text-gray-500 mb-2;
}

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

.content-meta {
  @apply flex items-center text-sm text-gray-500 space-x-4 mb-6;
}

.content-meta i {
  @apply mr-1;
}

/* Article card styles */
.article-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300;
}

.article-card-header {
  @apply p-6;
}

.article-card-title {
  @apply text-xl font-semibold text-gray-900 mb-2;
}

.article-card-title a {
  @apply hover:text-blue-600 transition-colors duration-200;
}

.article-card-description {
  @apply text-gray-600 mb-4;
}

.article-card-meta {
  @apply flex items-center text-sm text-gray-500;
}

/* Pagination styles */
.pagination {
  @apply flex justify-center mt-8;
}

.pagination-nav {
  @apply flex items-center space-x-2;
}

.pagination-link {
  @apply px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50;
}

.pagination-current {
  @apply px-4 py-2 text-sm text-gray-700;
}

/* Empty state styles */
.empty-state {
  @apply text-center py-12;
}

.empty-state-icon {
  @apply text-gray-400 mb-4;
}

.empty-state-title {
  @apply text-xl font-semibold text-gray-900 mb-2;
}

.empty-state-description {
  @apply text-gray-600;
}