/**
 * Font Optimization CSS
 * 
 * Prevents layout shifts from font loading
 * Uses system fonts as immediate fallback
 * Sets font-display: swap everywhere
 * 
 * @package Israel_News_Theme
 * @since 1.0.0
 */

/* ==========================================
   CRITICAL: System Font Stack (No CLS)
   Uses native fonts that load instantly
   ========================================== */

:root {
    /* System font stack - loads immediately */
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-system-serif: 'Georgia', 'Times New Roman', Times, serif;
    --font-system-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Courier New', monospace;
}

/* ==========================================
   Base Typography - System Fonts
   ========================================== */

html {
    font-family: var(--font-system);
    font-display: swap !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-system) !important;
    font-display: swap !important;
    line-height: 1.6;
    letter-spacing: -0.011em;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-system) !important;
    font-display: swap !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Buttons and inputs */
button, input, select, textarea {
    font-family: var(--font-system) !important;
    font-display: swap !important;
}

/* Code and monospace */
code, pre, kbd, samp {
    font-family: var(--font-system-mono) !important;
    font-display: swap !important;
}

/* ==========================================
   Font Display: Swap Override
   Applies to ALL fonts including custom
   ========================================== */

* {
    font-display: swap !important;
}

/* Override any font-face declarations */
@font-face {
    font-display: swap !important;
}

/* ==========================================
   Custom Font Declarations (if needed)
   With proper font-display and fallbacks
   ========================================== */

/* Example: Inter font (if used) */
@font-face {
    font-family: 'Inter';
    src: local('Inter'), local('Inter-Regular'),
         url('../fonts/inter/inter-regular.woff2') format('woff2'),
         url('../fonts/inter/inter-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    src: local('Inter Bold'), local('Inter-Bold'),
         url('../fonts/inter/inter-bold.woff2') format('woff2'),
         url('../fonts/inter/inter-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================
   Font Loading Strategy
   Prevents FOIT (Flash of Invisible Text)
   ========================================== */

/* While custom font loads, show system font */
.font-loading {
    font-family: var(--font-system) !important;
    visibility: visible !important;
}

/* After custom font loads */
.fonts-loaded {
    font-family: 'Inter', var(--font-system) !important;
}

/* ==========================================
   Prevent Font Size Adjustment on Mobile
   Prevents text inflation causing CLS
   ========================================== */

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ==========================================
   Size Adjust for Font Substitution
   Matches metrics between system/custom fonts
   ========================================== */

@font-face {
    font-family: 'Inter';
    src: local('Inter');
    /* Match system font metrics to prevent CLS */
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 107%;
    font-display: swap;
}

/* ==========================================
   Font Feature Settings
   Optimized for readability without CLS
   ========================================== */

body {
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    font-variant-ligatures: common-ligatures;
    font-kerning: normal;
}

/* Disable ligatures for monospace */
code, pre, kbd, samp {
    font-feature-settings: normal;
    font-variant-ligatures: none;
}

/* ==========================================
   Prevent Font Bloat
   Only load needed font weights/styles
   ========================================== */

/* Force font-weight to available weights */
strong, b {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

/* ==========================================
   Preload Critical Fonts (if custom fonts used)
   Add to <head> via PHP
   ========================================== */

/*
<!-- In wp_head: -->
<link rel="preload" href="/path/to/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/path/to/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
*/

/* ==========================================
   Fallback Font Metrics Matching
   Ensures consistent sizing between fonts
   ========================================== */

/* System fallback with matched metrics */
.text-fallback {
    font-family: var(--font-system);
    font-size: 100%;
    line-height: 1.6;
    letter-spacing: -0.011em;
}

/* Custom font with matched metrics */
.text-custom {
    font-family: 'Inter', var(--font-system);
    font-size: 100%;
    line-height: 1.6;
    letter-spacing: -0.011em;
}

/* ==========================================
   Performance Optimizations
   ========================================== */

/* Reduce repaints during font load */
html, body {
    text-rendering: optimizeSpeed;
}

/* Use geometric precision for smoother rendering */
@media (min-width: 1200px) {
    html, body {
        text-rendering: optimizeLegibility;
    }
}

/* ==========================================
   Font Loading Events (via JavaScript)
   ========================================== */

/*
// Add to JS:
if ('fonts' in document) {
    Promise.all([
        document.fonts.load('400 1em Inter'),
        document.fonts.load('700 1em Inter')
    ]).then(() => {
        document.documentElement.classList.add('fonts-loaded');
    });
}
*/

/* ==========================================
   Mobile-Specific Font Optimizations
   ========================================== */

@media (max-width: 768px) {
    body {
        /* Use system fonts on mobile for instant rendering */
        font-family: var(--font-system) !important;
        font-size: 16px; /* Prevent iOS zoom on input focus */
    }
    
    /* Smaller line-height on mobile */
    p, li {
        line-height: 1.5;
    }
    
    /* Slightly smaller headings on mobile */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }
}

/* ==========================================
   Reduce Font Weight Variations
   Prevents additional downloads
   ========================================== */

/* Map all weights to available weights */
[style*="font-weight: 300"],
[style*="font-weight: 400"],
[style*="font-weight: 500"] {
    font-weight: 400 !important;
}

[style*="font-weight: 600"],
[style*="font-weight: 700"],
[style*="font-weight: 800"],
[style*="font-weight: 900"] {
    font-weight: 700 !important;
}

/* ==========================================
   Font Loading Performance Metrics
   ========================================== */

/* Ensure text remains visible during webfont load */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Force visible text immediately */
body {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================
   Critical Font Loading Inline
   Add to <head> before any other CSS
   ========================================== */

/*
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
</style>
*/