/**
 * Responsive Typography Enhancements
 * Additional improvements to complement modern-content-typography.css
 * Focuses on advanced responsive features, performance, and UX
 * 
 * Features:
 * - Advanced fluid typography with proper scaling
 * - Container query support for modern browsers
 * - Enhanced dark mode typography
 * - Better typography for different screen sizes
 * - Performance optimizations
 * - Accessibility improvements
 */

/* ===== ADVANCED FLUID TYPOGRAPHY SYSTEM ===== */
:root {
    /* Advanced Typography Scale - Container-based sizing */
    --content-container-width: 100%;
    --content-max-width: 65ch;
    
    /* Dynamic font scaling based on container width */
    --content-font-scale-factor: clamp(0.875, 1 + 0.5 * (100vw - 320px) / (1200 - 320), 1.25);
    
    /* Enhanced spacing scale with viewport considerations */
    --content-vertical-rhythm: clamp(1.25rem, 1.25rem + 0.5vw, 2rem);
    --content-horizontal-rhythm: clamp(1rem, 1rem + 0.25vw, 1.5rem);
    
    /* Reading experience optimizations */
    --content-optimal-measure: clamp(45ch, 65ch, 75ch);
    --content-paragraph-spacing: calc(var(--content-vertical-rhythm) * 1.2);
    --content-heading-spacing: calc(var(--content-vertical-rhythm) * 1.8);
    
    /* Typography performance variables */
    --content-transition-duration: 0.2s;
    --content-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== CONTAINER QUERY SUPPORT FOR MODERN BROWSERS ===== */
@supports (container-type: inline-size) {
    .entry-content,
    .article-content,
    .prose {
        container-type: inline-size;
        container-name: content-container;
    }
    
    /* Typography adjustments based on container width */
    @container content-container (max-width: 480px) {
        .entry-content h1, .article-content h1, .prose h1 {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            line-height: 1.1;
            margin-top: var(--content-vertical-rhythm);
            margin-bottom: calc(var(--content-vertical-rhythm) * 0.8);
        }
        
        .entry-content h2, .article-content h2, .prose h2 {
            font-size: clamp(1.5rem, 3.5vw, 2rem);
            line-height: 1.2;
        }
        
        .entry-content p, .article-content p, .prose p {
            font-size: clamp(1rem, 2.5vw, 1.125rem);
            line-height: 1.6;
        }
    }
    
    @container content-container (min-width: 481px) and (max-width: 768px) {
        .entry-content h1, .article-content h1, .prose h1 {
            font-size: clamp(2rem, 5vw, 3rem);
            line-height: 1.15;
        }
        
        .entry-content h2, .article-content h2, .prose h2 {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            line-height: 1.25;
        }
        
        .entry-content p, .article-content p, .prose p {
            font-size: clamp(1rem, 2.5vw, 1.25rem);
            line-height: 1.65;
        }
    }
    
    @container content-container (min-width: 769px) {
        .entry-content h1, .article-content h1, .prose h1 {
            font-size: clamp(2.5rem, 4vw, 3.5rem);
            line-height: 1.2;
        }
        
        .entry-content h2, .article-content h2, .prose h2 {
            font-size: clamp(2rem, 3vw, 2.75rem);
            line-height: 1.3;
        }
        
        .entry-content p, .article-content p, .prose p {
            font-size: clamp(1.125rem, 2vw, 1.25rem);
            line-height: 1.7;
        }
    }
}

/* ===== ENHANCED MOBILE-FIRST RESPONSIVE DESIGN ===== */
/* Extra small devices (phones, up to 480px) */
@media screen and (max-width: 480px) {
    :root {
        --content-vertical-rhythm: 1rem;
        --content-horizontal-rhythm: 0.75rem;
        --content-paragraph-spacing: 1.25rem;
        --content-heading-spacing: 1.5rem;
    }
    
    .entry-content, .article-content, .prose {
        padding: var(--content-horizontal-rhythm);
        font-size: clamp(0.9rem, 4vw, 1rem);
        line-height: 1.6;
    }
    
    /* Compact heading spacing for mobile */
    .entry-content h1, .article-content h1, .prose h1,
    .entry-content h2, .article-content h2, .prose h2,
    .entry-content h3, .article-content h3, .prose h3 {
        margin-top: var(--content-heading-spacing);
        margin-bottom: calc(var(--content-vertical-rhythm) * 0.75);
        letter-spacing: -0.02em;
    }
    
    /* Mobile-optimized list spacing */
    .entry-content ul, .article-content ul, .prose ul,
    .entry-content ol, .article-content ol, .prose ol {
        padding-left: 1.25rem;
        margin-top: var(--content-vertical-rhythm);
        margin-bottom: var(--content-vertical-rhythm);
    }
    
    .entry-content li, .article-content li, .prose li {
        margin-bottom: calc(var(--content-vertical-rhythm) * 0.5);
    }
    
    /* Mobile blockquote adjustments */
    .entry-content blockquote, .article-content blockquote, .prose blockquote {
        margin: var(--content-heading-spacing) 0;
        padding: var(--content-vertical-rhythm);
        font-size: 1.05em;
        border-radius: 8px;
    }
    
    /* Mobile table improvements */
    .entry-content table, .article-content table, .prose table {
        font-size: 0.85rem;
        border-radius: 8px;
    }
    
    .entry-content th, .article-content th, .prose th,
    .entry-content td, .article-content td, .prose td {
        padding: 0.5rem 0.75rem;
    }
}

/* Small devices (large phones, 481px to 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    :root {
        --content-vertical-rhythm: 1.25rem;
        --content-horizontal-rhythm: 1rem;
        --content-paragraph-spacing: 1.5rem;
        --content-heading-spacing: 2rem;
    }
    
    .entry-content, .article-content, .prose {
        padding: 0 var(--content-horizontal-rhythm);
        font-size: clamp(1rem, 3vw, 1.125rem);
        line-height: 1.65;
    }
    
    /* Tablet-optimized spacing */
    .entry-content h1, .article-content h1, .prose h1 {
        margin-top: calc(var(--content-heading-spacing) * 1.2);
        margin-bottom: var(--content-vertical-rhythm);
    }
    
    .entry-content h2, .article-content h2, .prose h2,
    .entry-content h3, .article-content h3, .prose h3 {
        margin-top: var(--content-heading-spacing);
        margin-bottom: calc(var(--content-vertical-rhythm) * 0.8);
    }
}

/* Medium devices (tablets, 769px to 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    :root {
        --content-vertical-rhythm: 1.5rem;
        --content-horizontal-rhythm: 1.25rem;
        --content-paragraph-spacing: 1.75rem;
        --content-heading-spacing: 2.5rem;
    }
    
    .entry-content, .article-content, .prose {
        font-size: clamp(1.125rem, 2.5vw, 1.25rem);
        line-height: 1.7;
        max-width: var(--content-optimal-measure);
        margin: 0 auto;
    }
}

/* Large devices (desktops, 1025px and up) */
@media screen and (min-width: 1025px) {
    :root {
        --content-vertical-rhythm: 1.75rem;
        --content-horizontal-rhythm: 1.5rem;
        --content-paragraph-spacing: 2rem;
        --content-heading-spacing: 3rem;
    }
    
    .entry-content, .article-content, .prose {
        font-size: clamp(1.125rem, 1.5vw, 1.375rem);
        line-height: 1.75;
        max-width: var(--content-optimal-measure);
        margin: 0 auto;
    }
    
    /* Enhanced desktop typography features */
    .entry-content, .article-content, .prose {
        /* Subtle text justification for wider screens */
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        
        /* Advanced font features */
        font-feature-settings: 
            "kern" 1,           /* Kerning */
            "liga" 1,           /* Ligatures */
            "calt" 1,           /* Contextual alternates */
            "onum" 1,           /* Old-style numerals */
            "pnum" 1;           /* Proportional numerals */
        
        /* Improve text rendering */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Desktop-specific heading enhancements */
    .entry-content h1, .article-content h1, .prose h1 {
        font-feature-settings: 
            "kern" 1,
            "liga" 1,
            "dlig" 1,           /* Discretionary ligatures */
            "swsh" 1;           /* Swash */
    }
}

/* ===== ENHANCED DARK MODE TYPOGRAPHY ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode specific typography adjustments */
        --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) / 0.8);
        --content-border-light: hsl(var(--border));
        
        /* Slightly increased line height for better readability in dark mode */
        --content-dark-line-height-multiplier: 1.1;
    }
    
    .entry-content, .article-content, .prose {
        /* Adjusted text rendering for dark backgrounds */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
        
        /* Slightly increased line height for better readability */
        line-height: calc(var(--content-leading-relaxed) * var(--content-dark-line-height-multiplier, 1.1));
    }
    
    .entry-content h1, .article-content h1, .prose h1,
    .entry-content h2, .article-content h2, .prose h2,
    .entry-content h3, .article-content h3, .prose h3 {
        /* Better contrast for headings in dark mode */
        color: hsl(var(--foreground));
        text-shadow: none;
    }
    
    /* Dark mode code blocks */
    .entry-content code, .article-content code, .prose code {
        background: hsl(var(--muted) / 0.8);
        border: 1px solid hsl(var(--border));
        color: hsl(var(--foreground));
    }
    
    .entry-content pre, .article-content pre, .prose pre {
        background: hsl(var(--muted) / 0.6);
        border: 1px solid hsl(var(--border));
        color: hsl(var(--foreground));
    }
    
    /* Dark mode blockquotes */
    .entry-content blockquote, .article-content blockquote, .prose blockquote {
        background: hsl(var(--muted) / 0.3);
        border-left-color: hsl(var(--primary));
        color: hsl(var(--muted-foreground));
    }
    
    /* Dark mode tables */
    .entry-content table, .article-content table, .prose table {
        background: hsl(var(--card));
        border: 1px solid hsl(var(--border));
    }
    
    .entry-content th, .article-content th, .prose th {
        background: hsl(var(--muted) / 0.8);
        color: hsl(var(--card-foreground));
    }
    
    .entry-content td, .article-content td, .prose td {
        border-bottom: 1px solid hsl(var(--border));
    }
}

/* ===== HIGH CONTRAST MODE ENHANCEMENTS ===== */
@media (prefers-contrast: high) {
    .entry-content, .article-content, .prose {
        color: black;
        background: white;
        font-weight: 500; /* Slightly bolder for better contrast */
        text-shadow: none;
    }
    
    .entry-content h1, .article-content h1, .prose h1,
    .entry-content h2, .article-content h2, .prose h2,
    .entry-content h3, .article-content h3, .prose h3,
    .entry-content h4, .article-content h4, .prose h4 {
        color: black;
        font-weight: 800;
        background: none;
        -webkit-text-fill-color: black;
    }
    
    .entry-content a, .article-content a, .prose a {
        color: blue;
        text-decoration: underline;
        background: none;
        font-weight: 600;
    }
    
    .entry-content code, .article-content code, .prose code {
        background: #f0f0f0;
        color: black;
        border: 2px solid black;
        font-weight: 600;
    }
    
    .entry-content blockquote, .article-content blockquote, .prose blockquote {
        background: #f8f8f8;
        border-left: 6px solid black;
        color: black;
        font-weight: 500;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* GPU acceleration for smooth animations */
.entry-content, .article-content, .prose {
    transform: translateZ(0);
    will-change: auto;
}

.entry-content h1, .article-content h1, .prose h1,
.entry-content h2, .article-content h2, .prose h2,
.entry-content h3, .article-content h3, .prose h3 {
    /* Optimize heading rendering */
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Optimize images for better performance */
.entry-content img, .article-content img, .prose img {
    /* Better image rendering */
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
}

/* ===== ADVANCED ACCESSIBILITY FEATURES ===== */
/* Focus management for content navigation */
.entry-content h1[id], .article-content h1[id], .prose h1[id],
.entry-content h2[id], .article-content h2[id], .prose h2[id],
.entry-content h3[id], .article-content h3[id], .prose h3[id],
.entry-content h4[id], .article-content h4[id], .prose h4[id] {
    /* Focusable headings for keyboard navigation */
    scroll-margin-top: 5rem;
    outline-offset: 2px;
}

.entry-content h1[id]:focus, .article-content h1[id]:focus, .prose h1[id]:focus,
.entry-content h2[id]:focus, .article-content h2[id]:focus, .prose h2[id]:focus,
.entry-content h3[id]:focus, .article-content h3[id]:focus, .prose h3[id]:focus,
.entry-content h4[id]:focus, .article-content h4[id]:focus, .prose h4[id]:focus {
    outline: 3px solid hsl(var(--primary));
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enhanced selection styles */
.entry-content ::selection, .article-content ::selection, .prose ::selection {
    background: hsl(var(--primary) / 0.25);
    color: hsl(var(--foreground));
    text-shadow: none;
}

.entry-content ::-moz-selection, .article-content ::-moz-selection, .prose ::-moz-selection {
    background: hsl(var(--primary) / 0.25);
    color: hsl(var(--foreground));
    text-shadow: none;
}

/* ===== READING EXPERIENCE ENHANCEMENTS ===== */
/* Improved paragraph spacing based on content length */
.entry-content p + p, .article-content p + p, .prose p + p {
    margin-top: var(--content-paragraph-spacing);
    text-indent: 0;
}

/* Enhanced drop caps for long-form content */
.entry-content > p:first-of-type:first-letter,
.article-content > p:first-of-type:first-letter,
.prose > p:first-of-type:first-letter {
    initial-letter: 3;
    font-weight: 700;
    color: hsl(var(--primary));
    margin-right: 0.5rem;
    line-height: 1;
    float: left;
    font-size: 3.5em;
    margin-top: 0.1em;
}

/* Support for older browsers without initial-letter */
@supports not (initial-letter: 3) {
    .entry-content > p:first-of-type:first-letter,
    .article-content > p:first-of-type:first-letter,
    .prose > p:first-of-type:first-letter {
        font-size: 3.5em;
        line-height: 0.8;
        float: left;
        margin: 0.1em 0.5rem 0 0;
        font-weight: 700;
        color: hsl(var(--primary));
    }
}

/* ===== PRINT MEDIA ENHANCEMENTS ===== */
@media print {
    .entry-content, .article-content, .prose {
        font-size: 11pt;
        line-height: 1.5;
        color: black;
        background: white;
        max-width: none;
        margin: 0;
        padding: 0;
        
        /* Optimize for print */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        orphans: 3;
        widows: 3;
    }
    
    .entry-content h1, .article-content h1, .prose h1 {
        font-size: 18pt;
        page-break-after: avoid;
        page-break-inside: avoid;
        margin-top: 24pt;
        margin-bottom: 12pt;
    }
    
    .entry-content h2, .article-content h2, .prose h2 {
        font-size: 16pt;
        page-break-after: avoid;
        page-break-inside: avoid;
        margin-top: 18pt;
        margin-bottom: 10pt;
    }
    
    .entry-content h3, .article-content h3, .prose h3,
    .entry-content h4, .article-content h4, .prose h4 {
        font-size: 14pt;
        page-break-after: avoid;
        page-break-inside: avoid;
        margin-top: 14pt;
        margin-bottom: 8pt;
    }
    
    .entry-content p, .article-content p, .prose p {
        margin-bottom: 12pt;
        text-align: left;
        hyphens: auto;
        page-break-inside: avoid;
    }
    
    .entry-content blockquote, .article-content blockquote, .prose blockquote {
        border-left: 3pt solid #333;
        background: #f8f8f8;
        page-break-inside: avoid;
        margin: 18pt 0;
        padding: 12pt;
    }
    
    .entry-content img, .article-content img, .prose img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        border: 1pt solid #ccc;
    }
    
    .entry-content table, .article-content table, .prose table {
        border-collapse: collapse;
        width: 100%;
        page-break-inside: avoid;
    }
    
    .entry-content th, .article-content th, .prose th,
    .entry-content td, .article-content td, .prose td {
        border: 1pt solid #333;
        padding: 6pt;
        font-size: 10pt;
    }
    
    /* Hide interactive elements in print */
    .reading-progress {
        display: none !important;
    }
}

/* ===== MOTION ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .entry-content, .article-content, .prose {
        scroll-behavior: auto !important;
    }
    
    .entry-content *, .article-content *, .prose * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    
    .reading-progress {
        transition: none !important;
    }
}

/* ===== ULTRA-WIDE SCREEN SUPPORT ===== */
@media screen and (min-width: 1400px) {
    :root {
        --content-optimal-measure: clamp(65ch, 70ch, 80ch);
    }
    
    .entry-content, .article-content, .prose {
        font-size: clamp(1.25rem, 1.2vw, 1.5rem);
        line-height: 1.8;
        max-width: var(--content-optimal-measure);
    }
    
    /* Enhanced typography for ultra-wide screens */
    .entry-content h1, .article-content h1, .prose h1 {
        font-size: clamp(3rem, 3.5vw, 4rem);
        line-height: 1.25;
    }
    
    .entry-content h2, .article-content h2, .prose h2 {
        font-size: clamp(2.25rem, 2.5vw, 3rem);
        line-height: 1.3;
    }
}

/* ===== FOLDABLE DEVICE SUPPORT ===== */
@media screen and (min-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    .entry-content, .article-content, .prose {
        /* Optimize for foldable devices in landscape mode */
        column-count: 2;
        column-gap: 3rem;
        column-rule: 1px solid hsl(var(--border));
        
        /* Prevent awkward breaks */
        orphans: 3;
        widows: 3;
    }
    
    .entry-content h1, .article-content h1, .prose h1,
    .entry-content h2, .article-content h2, .prose h2 {
        column-span: all;
        break-after: column;
    }
    
    .entry-content img, .article-content img, .prose img,
    .entry-content table, .article-content table, .prose table,
    .entry-content blockquote, .article-content blockquote, .prose blockquote {
        break-inside: avoid;
    }
}

/* ===== CUSTOM SCROLLBAR FOR CONTENT AREAS ===== */
.entry-content, .article-content, .prose {
    /* Modern scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
}

.entry-content::-webkit-scrollbar, .article-content::-webkit-scrollbar, .prose::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.entry-content::-webkit-scrollbar-track, .article-content::-webkit-scrollbar-track, .prose::-webkit-scrollbar-track {
    background: transparent;
}

.entry-content::-webkit-scrollbar-thumb, .article-content::-webkit-scrollbar-thumb, .prose::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.entry-content::-webkit-scrollbar-thumb:hover, .article-content::-webkit-scrollbar-thumb:hover, .prose::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary) / 0.5);
    background-clip: content-box;
}

/* ===== CONTENT FADE-IN OPTIMIZATION ===== */
.entry-content, .article-content, .prose {
    /* Optimized content loading animation */
    animation: contentFadeInOptimized 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes contentFadeInOptimized {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    50% {
        opacity: 0.8;
        transform: translateY(10px) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Disable animation on slower devices */
@media (prefers-reduced-motion: reduce) {
    .entry-content, .article-content, .prose {
        animation: none !important;
    }
}

/* ===== TYPOGRAPHY DEBUGGING (REMOVE IN PRODUCTION) ===== */
/* Uncomment for typography debugging 
.entry-content *, .article-content *, .prose * {
    outline: 1px solid rgba(255, 0, 0, 0.1) !important;
}

.entry-content h1, .article-content h1, .prose h1,
.entry-content h2, .article-content h2, .prose h2,
.entry-content h3, .article-content h3, .prose h3 {
    outline: 2px solid rgba(0, 0, 255, 0.3) !important;
}
*/