/* ==========================================
   chrome-fix.css - Chrome-specific Font and Rendering Fixes
   ========================================== */

/* Target Chrome and Safari specifically */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    /* Chrome-specific fixes */
    
    /* Force all text to be visible and use fallback fonts */
    * {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
        font-feature-settings: normal !important;
        font-variant-ligatures: normal !important;
    }
    
    /* Fix potential Unicode/encoding issues */
    html {
        -webkit-locale: "en" !important;
    }
    
    /* Ensure all headers use explicit fonts */
    h1, h2, h3, h4, h5, h6,
    .site-title,
    .section-title,
    .project-title {
        font-family: Georgia, 'Times New Roman', Times, serif !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
        line-height: normal !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix navigation text */
    .nav-link,
    .nav-menu li a {
        font-family: Georgia, 'Times New Roman', Times, serif !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix filter buttons */
    .filter-btn {
        font-family: 'Courier New', Courier, monospace !important;
        text-transform: uppercase !important;
        font-weight: normal !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix body text */
    body,
    p,
    .project-description {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
        font-weight: normal !important;
    }
    
    /* Fix monospace elements */
    .edition-info,
    .edition-date,
    .edition-type,
    .publication-date,
    .project-meta,
    time,
    code,
    pre,
    .mono,
    .theme-toggle {
        font-family: 'Courier New', Courier, monospace !important;
        font-weight: normal !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }
    
    /* Ensure edition info text is visible */
    .edition-info > * {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix potential pseudo-element issues */
    *::before,
    *::after {
        font-family: inherit !important;
        visibility: visible !important;
    }
    
    /* Remove any problematic content from pseudo-elements */
    h1::before, h1::after,
    h2::before, h2::after,
    h3::before, h3::after,
    h4::before, h4::after,
    h5::before, h5::after,
    h6::before, h6::after {
        content: '' !important;
        display: none !important;
    }
    
    /* Ensure theme toggle text is visible */
    .theme-text-light,
    .theme-text-dark {
        display: inline !important;
        font-family: 'Courier New', Courier, monospace !important;
    }
    
    body:not(.dark-mode) .theme-text-dark {
        display: none !important;
    }
    
    body.dark-mode .theme-text-light {
        display: none !important;
    }
    
    /* Fix site subtitle */
    .site-subtitle {
        font-family: 'Courier New', Courier, monospace !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        display: block !important;
        visibility: visible !important;
        opacity: 0.7 !important;
    }
    
    /* Ensure all text in header is visible */
    .site-header *,
    header * {
        visibility: visible !important;
    }
    
    /* Fix footer text */
    .footer-content p {
        font-family: 'Courier New', Courier, monospace !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Additional Chrome-only fixes using -webkit prefix detection */
@supports (-webkit-appearance: none) {
    /* Override CSS variables for Chrome */
    :root {
        --font-headline: Georgia, 'Times New Roman', Times, serif !important;
        --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
        --font-mono: 'Courier New', Courier, monospace !important;
    }
    
    /* Ensure masthead title is visible */
    .masthead h1,
    .site-title {
        font-family: Georgia, 'Times New Roman', Times, serif !important;
        font-size: clamp(2.5rem, 8vw, 5rem) !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        line-height: 0.95 !important;
        letter-spacing: -0.02em !important;
        color: #1a1a1a !important;
    }
    
    body.dark-mode .site-title {
        color: #faf8f3 !important;
    }
    
  /* Ensure section titles are visible */
   .section-title,
   h2:not(.intro-header) {
       font-family: Georgia, 'Times New Roman', Times, serif !important;
       font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
       font-weight: bold !important;
       text-transform: uppercase !important;
       color: #1a1a1a !important;
       display: block !important;
   }
   
   body.dark-mode .section-title,
   body.dark-mode h2:not(.intro-header) {
       color: #faf8f3 !important;
   }
}

/* Chrome-specific text rendering improvements */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Improve text rendering on Chrome */
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Ensure no text is hidden */
    * {
        min-height: 0;
        min-width: 0;
    }
    
    /* Fix potential flexbox text issues in Chrome */
    .container,
    .header-container,
    .filter-container {
        display: block !important;
    }
    
    .nav-menu {
        display: flex !important;
        list-style: none !important;
    }
    
    .filter-controls {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}