/* Mobile-Specific Font Optimizations */

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Prevent font scaling on orientation change */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    /* Optimize font rendering for iOS */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        font-feature-settings: "kern" 1;
        -webkit-font-feature-settings: "kern" 1;
    }
    
    /* Fix for iOS Safari font loading issues */
    .navbar-toggler,
    .nav-link,
    .section-header,
    .section-text {
        font-display: swap;
    }
}

/* Android Chrome optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeSpeed;
    }
}

/* High DPI displays (iPhone, iPad, etc.) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* Prevent font flickering on mobile */
@media (max-width: 768px) {
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Ensure smooth font loading */
    .navbar,
    .section-header,
    .section-text,
    .leistung-item h3,
    .leistung-item p {
        font-display: swap;
    }
}

/* Safari-specific optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Fix for Safari font rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Prevent font scaling in Safari */
    input, textarea, select, button {
        font-size: 16px;
    }
}

/* Chrome Mobile specific fixes */
@media screen and (max-width: 768px) {
    /* Ensure proper font loading in Chrome Mobile */
    .navbar-toggler {
        font-display: swap;
    }
    
    /* Optimize text rendering for mobile Chrome */
    .nav-link,
    .section-header,
    .section-text {
        text-rendering: optimizeLegibility;
    }
}

/* Font loading optimization for slow connections */
@media (max-width: 768px) {
    /* Use system fonts as fallback while custom fonts load */
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    /* Apply custom font when loaded */
    .fonts-loaded body {
        font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
}