/* ============================================
   Blog Text Fix - Typography & Readability
   Ensures proper text display on all devices
   ============================================ */

/* Force text visibility */
article p,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article ul,
article ol,
article li {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Override any scroll-animate that might hide content */
article .scroll-animate {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Ensure proper font rendering */
article {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Fix text color contrast */
article p {
    color: var(--text-primary) !important;
    line-height: 1.8 !important;
    margin-bottom: 1.5rem !important;
    font-size: 1.125rem !important;
}

/* Heading styles */
article h1 {
    color: var(--text-primary) !important;
    font-size: 2.5rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

article h2 {
    color: var(--text-primary) !important;
    font-size: 2rem !important;
    margin-top: 2rem !important;
    margin-bottom: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

article h3 {
    color: var(--text-primary) !important;
    font-size: 1.5rem !important;
    margin-top: 1.75rem !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

article h4 {
    color: var(--text-primary) !important;
    font-size: 1.25rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    font-weight: 600 !important;
}

/* List styles */
article ul,
article ol {
    margin: 1.5rem 0 !important;
    padding-left: 2rem !important;
}

article li {
    margin-bottom: 0.75rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.7 !important;
}

/* Link styles within articles */
article a {
    color: var(--primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

article a:hover {
    color: var(--primary-dark) !important;
}

/* Image captions */
article figcaption {
    color: var(--text-muted) !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
    text-align: center !important;
}

/* Blockquote styles */
article blockquote {
    border-left: 4px solid var(--primary) !important;
    padding-left: 1.5rem !important;
    margin: 2rem 0 !important;
    color: var(--text-secondary) !important;
    font-style: italic !important;
    background: var(--bg-tertiary) !important;
    padding: 1.5rem !important;
    border-radius: 0.5rem !important;
}

/* Code blocks */
article pre,
article code {
    background: var(--bg-tertiary) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.9em !important;
}

article pre {
    padding: 1rem !important;
    overflow-x: auto !important;
    margin: 1.5rem 0 !important;
}

/* Table styles */
article table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.5rem 0 !important;
}

article th,
article td {
    border: 1px solid var(--border-color) !important;
    padding: 0.75rem !important;
    text-align: left !important;
}

article th {
    background: var(--bg-tertiary) !important;
    font-weight: 600 !important;
}

/* Android-specific font fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    article {
        font-feature-settings: "kern" 1;
        text-rendering: optimizeLegibility;
    }
    
    article p,
    article li {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
}

/* Windows ClearType optimization */
@supports (-ms-ime-align: auto) {
    article {
        text-rendering: optimizeLegibility;
    }
}

/* Prevent text selection issues */
article {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Ensure proper spacing */
article > * + * {
    margin-top: 0 !important;
}

article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p {
    margin-top: 0.5rem !important;
}

/* Fix for long words breaking layout */
article p,
article li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    article p {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }
    
    article h1 {
        font-size: 2rem !important;
    }
    
    article h2 {
        font-size: 1.75rem !important;
    }
    
    article h3 {
        font-size: 1.375rem !important;
    }
}