/* Font Loading Optimization for Better Performance */

/* Font Awesome Solid Icons */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2")
    format("woff2");
  unicode-range: U+F000-F8FF;
}

/* Font Awesome Brands Icons */
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2")
    format("woff2");
  unicode-range: U+F000-F8FF;
}

/* Font Awesome Regular Icons (if used) */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2")
    format("woff2");
  unicode-range: U+F000-F8FF;
}

/* Font Awesome Light Icons (if used) */
@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-light-300.woff2")
    format("woff2");
  unicode-range: U+F000-F8FF;
}

/* Font fallback classes to prevent layout shifts */
.fas,
.fab,
.far,
.fal {
  font-display: swap;
  font-feature-settings: "liga" 1;
  font-variant-ligatures: discretionary-ligatures;
}

/* Critical icon fallbacks to prevent layout shifts */
.fas::before,
.fab::before,
.far::before,
.fal::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Font loading state management */
.fonts-loading .fas,
.fonts-loading .fab,
.fonts-loading .far,
.fonts-loading .fal {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fonts-loaded .fas,
.fonts-loaded .fab,
.fonts-loaded .far,
.fonts-loaded .fal {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Fallback for icons while fonts are loading */
.fonts-loading .fas::before,
.fonts-loading .fab::before,
.fonts-loading .far::before,
.fonts-loading .fal::before {
  content: "●";
  font-family: inherit;
  font-weight: normal;
  font-style: normal;
  opacity: 0.5;
}

/* Performance optimization for icon containers */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  min-height: 1em;
}

/* Reduce layout shifts for common icon sizes */
.fa-1x {
  font-size: 1em;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}

/* Font loading performance hints */
@media (prefers-reduced-motion: reduce) {
  .fas,
  .fab,
  .far,
  .fal {
    font-display: optional;
  }
}

/* High contrast mode optimization */
@media (prefers-contrast: high) {
  .fas,
  .fab,
  .far,
  .fal {
    font-display: swap;
  }
}

/* Print optimization */
@media print {
  .fas,
  .fab,
  .far,
  .fal {
    font-display: optional;
  }
}