/**
 * Single Post Typography Styles
 * 
 * Custom typography styles to match mockup design
 * Based on Tailwind's prose-lg configuration
 * 
 * @package KonDernTang
 * @since 1.0.0
 */

/* Article Content Container */
.single .entry-content,
.single article.prose {
    font-size: 1.125rem;
    /* 18px - prose-lg base */
    line-height: 1.7777778;
    /* ~32px for 18px font */
    color: #374151;
    /* text-gray-700 */
}

/* Lead Paragraph (First Paragraph) */
.single .entry-content p.lead,
.single .entry-content p:first-of-type.lead {
    font-size: 1.25rem;
    /* 20px - text-xl */
    font-weight: 300;
    /* font-light */
    font-style: italic;
    color: #4b5563;
    /* text-gray-600 */
    border-left: 4px solid var(--color-secondary, #f97316);
    /* border-l-4 border-secondary */
    padding-left: 1rem;
    /* pl-4 */
    margin-bottom: 1.5rem;
    /* mb-6 */
}

/* Headings */
.single .entry-content h1,
.single article.prose h1 {
    font-size: 1.875rem;
    /* 30px - text-3xl */
    font-weight: 700;
    /* font-bold */
    line-height: 1.2;
    /* leading-tight */
    margin-top: 2.5rem;
    /* mt-10 */
    margin-bottom: 1.5rem;
    /* mb-6 */
    color: #1f2937;
    /* text-dark */
}

.single .entry-content h2,
.single article.prose h2 {
    font-size: 1.5rem;
    /* 24px - text-2xl */
    font-weight: 700;
    /* font-bold */
    line-height: 1.3;
    margin-top: 2.5rem;
    /* mt-10 */
    margin-bottom: 1rem;
    /* mb-4 */
    color: #1f2937;
    /* text-dark */
}

.single .entry-content h3,
.single article.prose h3 {
    font-size: 1.5rem;
    /* 24px - text-2xl */
    font-weight: 700;
    /* font-bold */
    line-height: 1.4;
    margin-top: 2rem;
    /* mt-8 - 32px */
    margin-bottom: 1rem;
    /* mb-4 - 16px */
    color: #1f2937;
    /* text-dark */
}

.single .entry-content h4,
.single article.prose h4 {
    font-size: 1.125rem;
    /* 18px - text-lg */
    font-weight: 700;
    /* font-bold */
    line-height: 1.5;
    margin-top: 1.5rem;
    /* mt-6 */
    margin-bottom: 0.75rem;
    /* mb-3 */
    color: #1f2937;
    /* text-dark */
}

.single .entry-content h5,
.single article.prose h5 {
    font-size: 1rem;
    /* 16px - text-base */
    font-weight: 700;
    /* font-bold */
    line-height: 1.5;
    margin-top: 1.25rem;
    /* mt-5 */
    margin-bottom: 0.5rem;
    /* mb-2 */
    color: #1f2937;
    /* text-dark */
}

.single .entry-content h6,
.single article.prose h6 {
    font-size: 0.875rem;
    /* 14px - text-sm */
    font-weight: 700;
    /* font-bold */
    line-height: 1.5;
    margin-top: 1rem;
    /* mt-4 */
    margin-bottom: 0.5rem;
    /* mb-2 */
    color: #1f2937;
    /* text-dark */
}

/* Paragraphs */
.single .entry-content p,
.single article.prose p {
    margin-bottom: 1.3333333em;
    /* ~24px for 18px font - prose-lg default */
}

/* Lists */
.single .entry-content ul,
.single .entry-content ol,
.single article.prose ul,
.single article.prose ol {
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
    padding-left: 1.5em;
    /* pl-6 */
}

.single .entry-content ul li,
.single article.prose ul li {
    list-style-type: disc;
    padding-left: 0.375em;
}

.single .entry-content ol li,
.single article.prose ol li {
    list-style-type: decimal;
    padding-left: 0.375em;
}

/* List Item Spacing */
.single .entry-content li,
.single article.prose li {
    margin-top: 0.5rem;
    /* space-y-2 - 8px */
    margin-bottom: 0.5rem;
}

.single .entry-content li:first-child,
.single article.prose li:first-child {
    margin-top: 0;
}

.single .entry-content li:last-child,
.single article.prose li:last-child {
    margin-bottom: 0;
}

/* Strong/Bold Text */
.single .entry-content strong,
.single article.prose strong {
    font-weight: 700;
    /* font-bold */
    color: #1f2937;
    /* text-dark */
}

/* Emphasis/Italic Text */
.single .entry-content em,
.single article.prose em {
    font-style: italic;
}

/* Links */
.single .entry-content a,
.single article.prose a {
    color: #3b82f6;
    /* text-primary */
    text-decoration: underline;
    font-weight: 500;
}

.single .entry-content a:hover,
.single article.prose a:hover {
    color: #2563eb;
    /* hover:text-blue-600 */
}

/* Images */
.single .entry-content img,
.single article.prose img {
    margin-top: 1.5rem;
    /* my-6 */
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    /* shadow-sm */
}

/* Blockquotes */
.single .entry-content blockquote,
.single article.prose blockquote {
    font-style: italic;
    border-left: 4px solid #e5e7eb;
    /* border-l-4 border-gray-200 */
    padding-left: 1rem;
    /* pl-4 */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: #6b7280;
    /* text-gray-500 */
}

/* Code Blocks */
.single .entry-content pre,
.single article.prose pre {
    background-color: #f3f4f6;
    /* bg-gray-100 */
    border-radius: 0.5rem;
    /* rounded-lg */
    padding: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.single .entry-content code,
.single article.prose code {
    background-color: #f3f4f6;
    /* bg-gray-100 */
    padding: 0.125rem 0.375rem;
    /* px-1.5 py-0.5 */
    border-radius: 0.25rem;
    /* rounded */
    font-size: 0.875em;
    /* slightly smaller */
    font-family: 'Courier New', monospace;
}

.single .entry-content pre code,
.single article.prose pre code {
    background-color: transparent;
    padding: 0;
}

/* Tables */
.single .entry-content table,
.single article.prose table {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.single .entry-content th,
.single article.prose th {
    font-weight: 700;
    text-align: left;
    padding: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
}

.single .entry-content td,
.single article.prose td {
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Horizontal Rule */
.single .entry-content hr,
.single article.prose hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-top: 1px solid #e5e7eb;
}

/* Figure Captions */
.single .entry-content figcaption,
.single article.prose figcaption {
    font-size: 0.875rem;
    /* text-sm */
    color: #6b7280;
    /* text-gray-500 */
    margin-top: 0.5rem;
    text-align: center;
}

/* Responsive Typography */
@media (max-width: 768px) {

    .single .entry-content,
    .single article.prose {
        font-size: 1rem;
        /* 16px on mobile */
        line-height: 1.75;
    }

    .single .entry-content h1,
    .single article.prose h1 {
        font-size: 1.5rem;
        /* 24px */
    }

    .single .entry-content h2,
    .single article.prose h2 {
        font-size: 1.25rem;
        /* 20px */
    }

    .single .entry-content h3,
    .single article.prose h3 {
        font-size: 1.125rem;
        /* 18px */
    }

    .single .entry-content h4,
    .single article.prose h4 {
        font-size: 1rem;
        /* 16px */
    }
}