/* Detail page specific styles - for SEO optimization */

/* Tailwind CSS utilities */
@layer utilities {
    .text-gradient {
        background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .bg-gradient-primary {
        background: linear-gradient(135deg, #ff9600 0%, #e67600 100%);
    }
    .bg-gradient-accent {
        background: linear-gradient(135deg, #ff9600 0%, #e67600 100%);
    }
    .card-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .card-shadow-hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    .prose img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 1.5rem auto;
        border-radius: 0.5rem;
    }
    .prose h2 {
        color: #111827;
        font-size: 1.5rem;
        font-weight: 600;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    .prose h3 {
        color: #111827;
        font-size: 1.25rem;
        font-weight: 600;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }
    .prose p {
        color: #374151;
        line-height: 1.75;
        margin-bottom: 1rem;
    }
    .prose ul, .prose ol {
        color: #374151;
        line-height: 1.75;
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }
    .prose li {
        margin-bottom: 0.5rem;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}