/**
 * Modern Content Typography System
 * Next.js/React-inspired design for WordPress content
 * Automatically applies to all posts, pages, and news articles
 * 
 * Features:
 * - Modern heading hierarchy with optimal spacing
 * - Responsive typography scales
 * - Enhanced readability and line heights
 * - Clean list and blockquote styling
 * - Interactive elements and micro-animations
 * - Dark mode support
 * - Accessibility-focused design
 */

/* ===== CSS CUSTOM PROPERTIES FOR TYPOGRAPHY ===== */
:root {
    /* Typography Scale - Fluid responsive sizing */
    --content-font-size-xs: clamp(0.75rem, 0.75rem + 0.125vw, 0.875rem);
    --content-font-size-sm: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
    --content-font-size-base: clamp(1rem, 1rem + 0.25vw, 1.125rem);
    --content-font-size-lg: clamp(1.125rem, 1.125rem + 0.375vw, 1.25rem);
    --content-font-size-xl: clamp(1.25rem, 1.25rem + 0.5vw, 1.5rem);
    --content-font-size-2xl: clamp(1.5rem, 1.5rem + 0.75vw, 2rem);
    --content-font-size-3xl: clamp(2rem, 2rem + 1vw, 2.5rem);
    --content-font-size-4xl: clamp(2.5rem, 2.5rem + 1.5vw, 3.5rem);
    
    /* Line Heights */
    --content-leading-tight: 1.25;
    --content-leading-snug: 1.375;
    --content-leading-normal: 1.5;
    --content-leading-relaxed: 1.625;
    --content-leading-loose: 2;
    
    /* Letter Spacing */
    --content-tracking-tight: -0.025em;
    --content-tracking-normal: 0em;
    --content-tracking-wide: 0.025em;
    
    /* Spacing Scale */
    --content-space-xs: 0.5rem;
    --content-space-sm: 0.75rem;
    --content-space-md: 1rem;
    --content-space-lg: 1.5rem;
    --content-space-xl: 2rem;
    --content-space-2xl: 3rem;
    --content-space-3xl: 4rem;
    
    /* Colors for content (respects theme variables) */
    --content-text-primary: hsl(var(--foreground));
    --content-text-secondary: hsl(var(--muted-foreground));
    --content-text-accent: hsl(var(--primary));
    --content-bg-code: hsl(var(--muted));
    --content-border-light: hsl(var(--border));
}

/* ===== CONTENT CONTAINER STYLES ===== */
/* Apply to all main content areas automatically */
.entry-content,
.article-content,
.prose,
.content-area,
main .container,
.single-content,
.page-content,
.news-content,
.post-content {
    /* Base typography settings */
    font-size: var(--content-font-size-base);
    line-height: var(--content-leading-relaxed);
    color: var(--content-text-primary);
    max-width: 100%;
    
    /* Enhanced readability */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Word wrapping for better layout */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ===== HEADING STYLES - MODERN HIERARCHY ===== */
.entry-content h1, .article-content h1, .prose h1,
.entry-content .h1, .article-content .h1, .prose .h1 {
    font-size: var(--content-font-size-4xl);
    font-weight: 800;
    line-height: var(--content-leading-tight);
    letter-spacing: var(--content-tracking-tight);
    color: var(--content-text-primary);
    margin-top: var(--content-space-2xl);
    margin-bottom: var(--content-space-xl);
    scroll-margin-top: 5rem; /* For anchor links */
    
    /* Modern gradient text option for primary headings */
    background: linear-gradient(135deg, 
        var(--content-text-primary) 0%, 
        var(--content-text-accent) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    transition: all 0.3s ease;
}

.entry-content h2, .article-content h2, .prose h2,
.entry-content .h2, .article-content .h2, .prose .h2 {
    font-size: var(--content-font-size-3xl);
    font-weight: 700;
    line-height: var(--content-leading-snug);
    letter-spacing: var(--content-tracking-tight);
    color: var(--content-text-primary);
    margin-top: var(--content-space-2xl);
    margin-bottom: var(--content-space-lg);
    scroll-margin-top: 5rem;
    
    /* Subtle underline effect */
    position: relative;
    padding-bottom: 0.5rem;
}

.entry-content h2::after, .article-content h2::after, .prose h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    background: linear-gradient(90deg, var(--content-text-accent), transparent);
    border-radius: 2px;
}

.entry-content h3, .article-content h3, .prose h3,
.entry-content .h3, .article-content .h3, .prose .h3 {
    font-size: var(--content-font-size-2xl);
    font-weight: 600;
    line-height: var(--content-leading-snug);
    letter-spacing: var(--content-tracking-tight);
    color: var(--content-text-primary);
    margin-top: var(--content-space-xl);
    margin-bottom: var(--content-space-lg);
    scroll-margin-top: 5rem;
}

.entry-content h4, .article-content h4, .prose h4,
.entry-content .h4, .article-content .h4, .prose .h4 {
    font-size: var(--content-font-size-xl);
    font-weight: 600;
    line-height: var(--content-leading-normal);
    color: var(--content-text-primary);
    margin-top: var(--content-space-lg);
    margin-bottom: var(--content-space-md);
    scroll-margin-top: 5rem;
}

.entry-content h5, .article-content h5, .prose h5,
.entry-content .h5, .article-content .h5, .prose .h5 {
    font-size: var(--content-font-size-lg);
    font-weight: 600;
    line-height: var(--content-leading-normal);
    color: var(--content-text-primary);
    margin-top: var(--content-space-lg);
    margin-bottom: var(--content-space-sm);
    scroll-margin-top: 5rem;
}

.entry-content h6, .article-content h6, .prose h6,
.entry-content .h6, .article-content .h6, .prose .h6 {
    font-size: var(--content-font-size-sm);
    font-weight: 600;
    line-height: var(--content-leading-normal);
    color: var(--content-text-secondary);
    margin-top: var(--content-space-md);
    margin-bottom: var(--content-space-sm);
    scroll-margin-top: 5rem;
    text-transform: uppercase;
    letter-spacing: var(--content-tracking-wide);
}

/* ===== PARAGRAPH AND TEXT STYLES ===== */
.entry-content p, .article-content p, .prose p {
    margin-bottom: var(--content-space-lg);
    line-height: var(--content-leading-relaxed);
    color: var(--content-text-primary);
    
    /* Enhanced paragraph styling */
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    
    /* Smooth text rendering */
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* First paragraph special styling */
.entry-content > p:first-of-type, 
.article-content > p:first-of-type, 
.prose > p:first-of-type {
    font-size: var(--content-font-size-lg);
    line-height: var(--content-leading-relaxed);
    color: var(--content-text-primary);
    font-weight: 400;
    margin-bottom: var(--content-space-xl);
}

/* Lead paragraph styling */
.entry-content .lead, .article-content .lead, .prose .lead {
    font-size: var(--content-font-size-xl);
    line-height: var(--content-leading-relaxed);
    color: var(--content-text-secondary);
    font-weight: 400;
    margin-bottom: var(--content-space-2xl);
}

/* ===== LIST STYLES - MODERN AND CLEAN ===== */
.entry-content ul, .article-content ul, .prose ul,
.entry-content ol, .article-content ol, .prose ol {
    margin-top: var(--content-space-lg);
    margin-bottom: var(--content-space-lg);
    padding-left: var(--content-space-xl);
    line-height: var(--content-leading-relaxed);
}

.entry-content ul, .article-content ul, .prose ul {
    list-style: none;
    position: relative;
}

.entry-content ul li, .article-content ul li, .prose ul li {
    position: relative;
    margin-bottom: var(--content-space-sm);
    padding-left: var(--content-space-lg);
}

.entry-content ul li::before, .article-content ul li::before, .prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--content-text-accent);
    border-radius: 50%;
    transform: translateY(-50%);
}

.entry-content ol, .article-content ol, .prose ol {
    counter-reset: list-counter;
}

.entry-content ol li, .article-content ol li, .prose ol li {
    counter-increment: list-counter;
    position: relative;
    margin-bottom: var(--content-space-sm);
    padding-left: var(--content-space-xl);
}

.entry-content ol li::before, .article-content ol li::before, .prose ol li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--content-text-accent);
    font-size: var(--content-font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: hsl(var(--primary) / 0.1);
    border: 2px solid hsl(var(--primary) / 0.2);
    border-radius: 50%;
}

/* Nested lists */
.entry-content ul ul, .article-content ul ul, .prose ul ul,
.entry-content ol ol, .article-content ol ol, .prose ol ol {
    margin-top: var(--content-space-sm);
    margin-bottom: var(--content-space-sm);
    margin-left: var(--content-space-md);
}

/* ===== BLOCKQUOTE STYLES - ELEGANT AND MODERN ===== */
.entry-content blockquote, .article-content blockquote, .prose blockquote {
    margin: var(--content-space-2xl) 0;
    padding: var(--content-space-xl) var(--content-space-2xl);
    position: relative;
    font-size: var(--content-font-size-lg);
    line-height: var(--content-leading-relaxed);
    font-style: italic;
    color: var(--content-text-secondary);
    background: linear-gradient(135deg, 
        hsl(var(--muted) / 0.3) 0%, 
        hsl(var(--muted) / 0.1) 100%);
    border-left: 4px solid var(--content-text-accent);
    border-radius: 0 12px 12px 0;
    backdrop-filter: blur(10px);
    
    /* Smooth transitions */
    transition: all 0.3s ease;
}

.entry-content blockquote::before, .article-content blockquote::before, .prose blockquote::before {
    content: '"';
    font-size: 4rem;
    font-weight: 800;
    color: var(--content-text-accent);
    opacity: 0.3;
    position: absolute;
    top: -0.5rem;
    left: var(--content-space-lg);
    line-height: 1;
    font-family: Georgia, serif;
}

.entry-content blockquote p, .article-content blockquote p, .prose blockquote p {
    margin-bottom: var(--content-space-sm);
}

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

/* Citation styling */
.entry-content blockquote cite, .article-content blockquote cite, .prose blockquote cite {
    display: block;
    margin-top: var(--content-space-md);
    font-size: var(--content-font-size-sm);
    font-style: normal;
    font-weight: 600;
    color: var(--content-text-accent);
}

.entry-content blockquote cite::before, .article-content blockquote cite::before, .prose blockquote cite::before {
    content: '— ';
}

/* ===== CODE AND PRE STYLES ===== */
.entry-content code, .article-content code, .prose code {
    font-family: 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    font-size: 0.875em;
    background: var(--content-bg-code);
    color: var(--content-text-accent);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--content-border-light);
    font-weight: 500;
}

.entry-content pre, .article-content pre, .prose pre {
    margin: var(--content-space-xl) 0;
    padding: var(--content-space-lg);
    background: var(--content-bg-code);
    border: 1px solid var(--content-border-light);
    border-radius: 12px;
    overflow-x: auto;
    line-height: var(--content-leading-relaxed);
    
    /* Enhanced scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--content-text-accent) transparent;
}

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

/* ===== LINK STYLES - INTERACTIVE AND MODERN ===== */
.entry-content a, .article-content a, .prose a {
    color: var(--content-text-accent);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Modern underline effect */
    background-image: linear-gradient(90deg, var(--content-text-accent), var(--content-text-accent));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

.entry-content a:hover, .article-content a:hover, .prose a:hover {
    color: hsl(var(--primary) / 0.8);
    background-size: 100% 2px;
}

.entry-content a:focus, .article-content a:focus, .prose a:focus {
    outline: 2px solid var(--content-text-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* External links indicator */
.entry-content a[target="_blank"], .article-content a[target="_blank"], .prose a[target="_blank"] {
    padding-right: 1em;
}

.entry-content a[target="_blank"]::after, .article-content a[target="_blank"]::after, .prose a[target="_blank"]::after {
    content: '↗';
    position: absolute;
    right: 0;
    top: -0.1em;
    font-size: 0.8em;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.entry-content a[target="_blank"]:hover::after, .article-content a[target="_blank"]:hover::after, .prose a[target="_blank"]:hover::after {
    opacity: 1;
    transform: translate(2px, -2px);
}

/* ===== TABLE STYLES - CLEAN AND READABLE ===== */
.entry-content table, .article-content table, .prose table {
    width: 100%;
    margin: var(--content-space-2xl) 0;
    border-collapse: collapse;
    border: 1px solid var(--content-border-light);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.entry-content th, .article-content th, .prose th {
    background: linear-gradient(135deg, 
        hsl(var(--muted) / 0.8) 0%, 
        hsl(var(--muted) / 0.6) 100%);
    padding: var(--content-space-md) var(--content-space-lg);
    text-align: left;
    font-weight: 600;
    color: var(--content-text-primary);
    border-bottom: 2px solid var(--content-border-light);
}

.entry-content td, .article-content td, .prose td {
    padding: var(--content-space-md) var(--content-space-lg);
    border-bottom: 1px solid var(--content-border-light);
    vertical-align: top;
}

.entry-content tbody tr:hover, .article-content tbody tr:hover, .prose tbody tr:hover {
    background: hsl(var(--muted) / 0.3);
}

/* ===== IMAGE STYLES - MODERN AND RESPONSIVE ===== */
.entry-content img, .article-content img, .prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: var(--content-space-xl) 0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.entry-content img:hover, .article-content img:hover, .prose img:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

/* Figure and caption styling */
.entry-content figure, .article-content figure, .prose figure {
    margin: var(--content-space-2xl) 0;
    text-align: center;
}

.entry-content figcaption, .article-content figcaption, .prose figcaption {
    margin-top: var(--content-space-sm);
    font-size: var(--content-font-size-sm);
    color: var(--content-text-secondary);
    font-style: italic;
    text-align: center;
}

/* ===== HORIZONTAL RULE STYLES ===== */
.entry-content hr, .article-content hr, .prose hr {
    margin: var(--content-space-3xl) 0;
    border: none;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--content-text-accent), 
        transparent);
    border-radius: 2px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    :root {
        --content-space-xs: 0.375rem;
        --content-space-sm: 0.5rem;
        --content-space-md: 0.75rem;
        --content-space-lg: 1rem;
        --content-space-xl: 1.5rem;
        --content-space-2xl: 2rem;
        --content-space-3xl: 2.5rem;
    }
    
    .entry-content, .article-content, .prose {
        text-align: left; /* Remove justify on mobile */
        hyphens: none;
    }
    
    .entry-content h1, .article-content h1, .prose h1 {
        margin-top: var(--content-space-xl);
    }
    
    .entry-content h2, .article-content h2, .prose h2 {
        margin-top: var(--content-space-lg);
    }
    
    .entry-content ul, .article-content ul, .prose ul,
    .entry-content ol, .article-content ol, .prose ol {
        padding-left: var(--content-space-lg);
    }
    
    .entry-content blockquote, .article-content blockquote, .prose blockquote {
        margin-left: 0;
        margin-right: 0;
        padding: var(--content-space-lg);
    }
    
    .entry-content table, .article-content table, .prose table {
        font-size: var(--content-font-size-sm);
    }
    
    .entry-content th, .article-content th, .prose th,
    .entry-content td, .article-content td, .prose td {
        padding: var(--content-space-sm) var(--content-space-md);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .entry-content, .article-content, .prose {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
    }
    
    .entry-content h1, .article-content h1, .prose h1,
    .entry-content h2, .article-content h2, .prose h2,
    .entry-content h3, .article-content h3, .prose h3 {
        page-break-after: avoid;
        color: black;
        background: none;
        -webkit-text-fill-color: black;
    }
    
    .entry-content a, .article-content a, .prose a {
        color: black;
        text-decoration: underline;
        background: none;
    }
    
    .entry-content blockquote, .article-content blockquote, .prose blockquote {
        background: none;
        border-left: 2px solid black;
    }
    
    .entry-content img, .article-content img, .prose img {
        max-width: 100%;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --content-text-primary: hsl(var(--foreground));
        --content-text-secondary: hsl(var(--muted-foreground));
        --content-text-accent: hsl(var(--primary));
        --content-bg-code: hsl(var(--muted));
        --content-border-light: hsl(var(--border));
    }
    
    .entry-content table, .article-content table, .prose table {
        background: hsl(var(--card));
        border-color: hsl(var(--border));
    }
    
    .entry-content th, .article-content th, .prose th {
        background: hsl(var(--muted));
        color: hsl(var(--card-foreground));
    }
    
    .entry-content td, .article-content td, .prose td {
        border-color: hsl(var(--border));
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    .entry-content a, .article-content a, .prose a,
    .entry-content img, .article-content img, .prose img,
    .entry-content blockquote, .article-content blockquote, .prose blockquote {
        transition: none;
    }
    
    .entry-content img:hover, .article-content img:hover, .prose img:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .entry-content, .article-content, .prose {
        color: black;
    }
    
    .entry-content a, .article-content a, .prose a {
        color: blue;
        text-decoration: underline;
    }
    
    .entry-content blockquote, .article-content blockquote, .prose blockquote {
        border-left: 4px solid black;
        background: white;
    }
    
    .entry-content code, .article-content code, .prose code {
        background: white;
        border: 2px solid black;
        color: black;
    }
}

/* ===== FOCUS MANAGEMENT FOR KEYBOARD NAVIGATION ===== */
.entry-content [tabindex], .article-content [tabindex], .prose [tabindex] {
    outline: 2px solid var(--content-text-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== SELECTION STYLING ===== */
.entry-content ::selection, .article-content ::selection, .prose ::selection {
    background: hsl(var(--primary) / 0.2);
    color: var(--content-text-primary);
}

/* ===== SMOOTH SCROLLING FOR ANCHOR LINKS ===== */
.entry-content, .article-content, .prose {
    scroll-behavior: smooth;
}

/* ===== CONTENT FADE-IN ANIMATION ===== */
.entry-content, .article-content, .prose {
    animation: contentFadeIn 0.6s ease-out;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ENHANCED READABILITY FEATURES ===== */
/* Reading progress indicator (can be implemented with JS) */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--content-text-accent), hsl(var(--secondary)));
    z-index: var(--z-sticky, 200);
    transition: width 0.1s ease;
}

/* Content width optimization for readability */
.entry-content > *:not(figure):not(.wp-block-image):not(.alignwide):not(.alignfull),
.article-content > *:not(figure):not(.wp-block-image):not(.alignwide):not(.alignfull),
.prose > *:not(figure):not(.wp-block-image):not(.alignwide):not(.alignfull) {
    max-width: 65ch; /* Optimal reading line length */
    margin-left: auto;
    margin-right: auto;
}

/* Wide content support */
.entry-content .alignwide, .article-content .alignwide, .prose .alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.entry-content .alignfull, .article-content .alignfull, .prose .alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}