/* Knowledgebase specific styles */

/* Article content prose styling */
.knowledgebase-content {
  @apply prose prose-lg max-w-none;
}

.knowledgebase-content h1 {
  @apply text-3xl font-bold text-jv-charcoal mb-6;
}

.knowledgebase-content h2 {
  @apply text-2xl font-semibold text-jv-charcoal mb-4 mt-8;
}

.knowledgebase-content h3 {
  @apply text-xl font-medium text-jv-charcoal mb-3 mt-6;
}

.knowledgebase-content p {
  @apply text-jv-charcoal/80 mb-4 leading-relaxed;
}

.knowledgebase-content ul,
.knowledgebase-content ol {
  @apply mb-4;
}

.knowledgebase-content li {
  @apply text-jv-charcoal/80 mb-2;
}

.knowledgebase-content strong {
  @apply font-semibold text-jv-charcoal;
}

.knowledgebase-content a {
  @apply text-jv-soft-navy hover:text-jv-soft-navy/80 underline;
}

.knowledgebase-content blockquote {
  @apply border-l-4 border-jv-soft-navy/30 pl-4 py-2 mb-4 italic text-jv-charcoal/70;
}

.knowledgebase-content code {
  @apply bg-jv-mist text-jv-charcoal px-2 py-1 rounded text-sm font-mono;
}

.knowledgebase-content pre {
  @apply bg-jv-mist p-4 rounded-lg overflow-x-auto mb-4;
}

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

/* Search highlighting */
.search-highlight {
  @apply bg-yellow-200;
}

/* Category cards hover effects */
.category-card {
  @apply transition-all duration-200;
}

.category-card:hover {
  @apply transform translate-y-[-2px];
}

/* Article cards */
.article-card {
  @apply transition-all duration-200;
}

.article-card:hover {
  @apply transform translate-y-[-1px];
}

/* Line clamp utility for article excerpts */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Video embed styling */
.video-embed {
  @apply relative w-full mb-6;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

.video-embed iframe {
  @apply absolute top-0 left-0 w-full h-full rounded-lg;
}

.youtube-embed {
  @apply bg-gray-100 rounded-lg overflow-hidden;
}

/* Action Text video embeds */
.knowledgebase-content .video-embed {
  @apply my-6;
}

.knowledgebase-content iframe {
  @apply max-w-full;
}