// Font Display Optimization
// This file adds font-display: swap to all @font-face declarations
// to improve perceived performance and avoid FOIT (Flash of Invisible Text)

// Override Font Awesome font-display
@font-face {
  font-family: "Font Awesome 6 Free";
  font-display: swap;
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-display: swap;
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-display: swap;
}

@font-face {
  font-family: "FontAwesome";
  font-display: swap;
}

// Force font-display: swap on all font-face declarations
@supports (font-display: swap) {
  @font-face {
    font-display: swap !important;
  }
}

// Preload critical fonts hint
// Add this to HTML head for critical fonts:
// <link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin>

// Optimize web font loading with CSS Font Loading API fallback
.font-loading {
  // Hide text briefly while custom fonts load
  .wf-loading & {
    visibility: hidden;
  }
  
  // Show text when fonts are loaded
  .wf-active &,
  .wf-inactive & {
    visibility: visible;
  }
}

// System font stack fallback for better performance
$system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

// Ensure good fallbacks for custom fonts
body {
  // This ensures text is visible even if custom fonts fail to load
  font-family: $system-font-stack;
  
  // When custom fonts load, they'll override this
  .wf-active & {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

// Performance hint: Use font subsetting for icon fonts
// Only load the characters/icons you actually use