/* Font Awesome Fallback - Essential icons for header */
/* Using Unicode characters for common icons */

.fas, .fa-solid {
  font-family: "Font Awesome 6 Free", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

/* Fallback to Unicode symbols when Font Awesome font isn't available */
.fa-bars::before, .fas.fa-bars::before { content: "☰"; }
.fa-times::before, .fas.fa-times::before { content: "×"; }
.fa-search::before, .fas.fa-search::before { content: "🔍"; }
.fa-moon::before, .fas.fa-moon::before { content: "🌙"; }
.fa-lightbulb::before, .fas.fa-lightbulb::before { content: "💡"; }
.fa-sun::before, .fas.fa-sun::before { content: "☀"; }
.fa-cloud::before, .fas.fa-cloud::before { content: "☁"; }
.fa-cloud-sun::before, .fas.fa-cloud-sun::before { content: "⛅"; }
.fa-cloud-moon::before, .fas.fa-cloud-moon::before { content: "☁"; }
.fa-cloud-rain::before, .fas.fa-cloud-rain::before { content: "🌧"; }
.fa-bolt::before, .fas.fa-bolt::before { content: "⚡"; }
.fa-snowflake::before, .fas.fa-snowflake::before { content: "❄"; }
.fa-smog::before, .fas.fa-smog::before { content: "🌫"; }
.fa-chevron-down::before, .fas.fa-chevron-down::before { content: "▼"; }
.fa-user-circle::before, .fas.fa-user-circle::before { content: "👤"; }
.fa-external-link-alt::before, .fas.fa-external-link-alt::before { content: "↗"; }
.fa-sign-out-alt::before, .fas.fa-sign-out-alt::before { content: "⤴"; }
.fa-spinner::before, .fas.fa-spinner::before { content: "⭮"; }
.fa-facebook::before, .fab.fa-facebook::before { content: "f"; }

/* Spinner animation */
.fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Additional icon styles */
.text-lg { font-size: 1.125rem; }
.text-xs { font-size: 0.75rem; }
.ml-1 { margin-left: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.w-5 { width: 1.25rem; }

/* Center alignment for icons */
.text-center { text-align: center; }