/**
 * Font Optimization CSS - Prevents Layout Shifts and Improves FCP
 * Optimized for Inter font family with metric overrides
 */

/* Inter Font Fallback with Metric Overrides */
@font-face {
    font-family: 'Inter-fallback';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Arial'), local('Helvetica'), local('sans-serif');
    ascent-override: 90.20%;
    descent-override: 22.48%;
    line-gap-override: 0.00%;
    size-adjust: 107.40%;
}

@font-face {
    font-family: 'Inter-fallback';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Arial Bold'), local('Helvetica Bold'), local('sans-serif');
    ascent-override: 90.20%;
    descent-override: 22.48%;
    line-gap-override: 0.00%;
    size-adjust: 107.40%;
}

@font-face {
    font-family: 'Inter-fallback';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Arial Black'), local('Helvetica Bold'), local('sans-serif');
    ascent-override: 90.20%;
    descent-override: 22.48%;
    line-gap-override: 0.00%;
    size-adjust: 107.40%;
}

/* Optimized Font Stack with Fallback Metrics */
body, 
html,
.font-inter {
    font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Critical Text Elements - Ensure Immediate Visibility */
h1, h2, h3, h4, h5, h6,
.text-critical,
.hero-text,
.nav-text {
    font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-display: optional; /* Use optional for critical text */
}

/* Performance Optimizations */
.font-loading-optimized {
    /* Prevent invisible text during font swap */
    font-display: optional;
    
    /* Optimize font rendering */
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Layout Shift Prevention */
.prevent-layout-shift {
    /* Reserve space for text content */
    min-height: 1.2em;
    
    /* Prevent content jumping */
    line-height: 1.5;
    
    /* Smooth transitions */
    transition: font-family 0.1s ease-out;
}

/* Critical Above-the-Fold Text */
.critical-text {
    font-family: 'Inter', 'Inter-fallback', system-ui, -apple-system, sans-serif;
    font-display: optional;
    font-weight: 400;
}

.critical-text-bold {
    font-family: 'Inter', 'Inter-fallback', system-ui, -apple-system, sans-serif;
    font-display: optional;
    font-weight: 700;
}

.critical-text-extra-bold {
    font-family: 'Inter', 'Inter-fallback', system-ui, -apple-system, sans-serif;
    font-display: optional;
    font-weight: 800;
}

/* Font Loading States */
.font-loading {
    /* Show fallback immediately */
    font-family: 'Inter-fallback', system-ui, -apple-system, sans-serif;
}

.font-loaded {
    /* Switch to Inter when loaded */
    font-family: 'Inter', 'Inter-fallback', system-ui, -apple-system, sans-serif;
}

/* Responsive Font Optimization */
@media (max-width: 768px) {
    body, html {
        /* Prioritize speed on mobile */
        font-display: optional;
        text-rendering: optimizeSpeed;
    }
}

@media (min-width: 769px) {
    body, html {
        /* Better quality on desktop */
        font-display: swap;
        text-rendering: optimizeLegibility;
    }
}

/* Preload Hint Classes */
.preload-font-400 {
    font-weight: 400;
    font-family: 'Inter', 'Inter-fallback', sans-serif;
}

.preload-font-700 {
    font-weight: 700;
    font-family: 'Inter', 'Inter-fallback', sans-serif;
}

.preload-font-800 {
    font-weight: 800;
    font-family: 'Inter', 'Inter-fallback', sans-serif;
}

/* Performance Monitoring */
@supports (font-display: optional) {
    .modern-font-display {
        font-display: optional;
    }
}

@supports not (font-display: optional) {
    .fallback-font-display {
        /* Fallback for older browsers */
        font-display: swap;
    }
}

/* Critical CSS for Immediate Text Visibility */
.immediate-text {
    /* Ensure text is visible immediately */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 1;
    visibility: visible;
}

/* Font Loading Animation Prevention */
.no-font-animation {
    /* Prevent flash of unstyled text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* Utility Classes for Font Optimization */
.font-display-optional { font-display: optional; }
.font-display-swap { font-display: swap; }
.font-display-fallback { font-display: fallback; }
.font-display-auto { font-display: auto; }

/* Critical Path Font Loading */
.critical-path-font {
    font-family: 'Inter', 'Inter-fallback', system-ui, sans-serif;
    font-display: optional;
    font-weight: 400;
    line-height: 1.5;
}

/* Hero Section Font Optimization */
.hero-font {
    font-family: 'Inter', 'Inter-fallback', system-ui, sans-serif;
    font-display: optional;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Navigation Font Optimization */
.nav-font {
    font-family: 'Inter', 'Inter-fallback', system-ui, sans-serif;
    font-display: optional;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
}

/* Button Font Optimization */
.button-font {
    font-family: 'Inter', 'Inter-fallback', system-ui, sans-serif;
    font-display: optional;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Body Text Font Optimization */
.body-font {
    font-family: 'Inter', 'Inter-fallback', system-ui, sans-serif;
    font-display: optional;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

/* Performance Hint: Preload Critical Fonts */
/*
Usage in HTML:
<link rel="preload" href="https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hiA.woff2" as="font" type="font/woff2" crossorigin>
*/