/* Font Awesome Local Fallback and CSS Fix */

/* Ensure Font Awesome loads correctly */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Fallback fonts for icons if Font Awesome fails to load */
.fa, .fas, .far, .fal, .fat, .fad, .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", serif !important;
    font-weight: 900;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Brand icons specific weight */
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}

/* Regular icons specific weight */
.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400;
}

/* Light icons specific weight */
.fal {
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 300;
}

/* Thin icons specific weight */
.fat {
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 100;
}

/* Duotone icons specific weight */
.fad {
    font-family: "Font Awesome 6 Duotone" !important;
    font-weight: 900;
}

/* Force visibility and display for all icons */
[class^="fa-"], [class*=" fa-"] {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Common icon fixes */
.fa-facebook-f:before { content: "\f39e" !important; }
.fa-linkedin-in:before { content: "\f0e1" !important; }
.fa-youtube:before { content: "\f167" !important; }
.fa-instagram:before { content: "\f16d" !important; }
.fa-twitter:before { content: "\f099" !important; }
.fa-satellite-dish:before { content: "\f7c0" !important; }
.fa-phone:before { content: "\f095" !important; }
.fa-envelope:before { content: "\f0e0" !important; }
.fa-map-marker-alt:before { content: "\f3c5" !important; }
.fa-comments:before { content: "\f086" !important; }
.fa-bars:before { content: "\f0c9" !important; }
.fa-user:before { content: "\f007" !important; }
.fa-headset:before { content: "\f590" !important; }
.fa-paper-plane:before { content: "\f1d8" !important; }
.fa-clock:before { content: "\f017" !important; }
.fa-check-circle:before { content: "\f058" !important; }
.fa-star:before { content: "\f005" !important; }
.fa-download:before { content: "\f019" !important; }
.fa-shield-alt:before { content: "\f3ed" !important; }
.fa-cogs:before { content: "\f085" !important; }
.fa-chart-line:before { content: "\f201" !important; }
.fa-graduation-cap:before { content: "\f19d" !important; }
.fa-handshake:before { content: "\f2b5" !important; }
.fa-tools:before { content: "\f7d9" !important; }
.fa-bullhorn:before { content: "\f0a1" !important; }
.fa-trophy:before { content: "\f091" !important; }

/* Alternative CDN fallback */
@import url('https://use.fontawesome.com/releases/v6.4.0/css/all.css');

/* Bootstrap Icons as fallback */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');

/* Fallback to Bootstrap Icons if Font Awesome fails */
.fontawesome-fallback .fa-facebook-f:before,
.fontawesome-fallback .fab.fa-facebook-f:before {
    font-family: "bootstrap-icons" !important;
    content: "\f344" !important; /* bi-facebook */
}

.fontawesome-fallback .fa-linkedin-in:before,
.fontawesome-fallback .fab.fa-linkedin-in:before {
    font-family: "bootstrap-icons" !important;
    content: "\f472" !important; /* bi-linkedin */
}

.fontawesome-fallback .fa-youtube:before,
.fontawesome-fallback .fab.fa-youtube:before {
    font-family: "bootstrap-icons" !important;
    content: "\f64d" !important; /* bi-youtube */
}

.fontawesome-fallback .fa-instagram:before,
.fontawesome-fallback .fab.fa-instagram:before {
    font-family: "bootstrap-icons" !important;
    content: "\f437" !important; /* bi-instagram */
}

.fontawesome-fallback .fa-twitter:before,
.fontawesome-fallback .fab.fa-twitter:before {
    font-family: "bootstrap-icons" !important;
    content: "\f5ef" !important; /* bi-twitter */
}

/* Common utility icons with Bootstrap fallback */
.fontawesome-fallback .fa-phone:before {
    font-family: "bootstrap-icons" !important;
    content: "\f4b2" !important; /* bi-phone */
}

.fontawesome-fallback .fa-envelope:before {
    font-family: "bootstrap-icons" !important;
    content: "\f32f" !important; /* bi-envelope */
}

.fontawesome-fallback .fa-map-marker-alt:before {
    font-family: "bootstrap-icons" !important;
    content: "\f3f5" !important; /* bi-geo-alt */
}

/* CSS class to add if Font Awesome fails to load */
.no-fontawesome {
    font-family: "bootstrap-icons", sans-serif !important;
}

/* Debugging - make icons more visible */
.debug-icons [class^="fa-"], 
.debug-icons [class*=" fa-"] {
    background: rgba(255, 0, 0, 0.1) !important;
    border: 1px solid red !important;
    padding: 2px !important;
    margin: 1px !important;
}

/* Force specific icon sizes */
.fa-xs { font-size: 0.75em !important; }
.fa-sm { font-size: 0.875em !important; }
.fa-lg { font-size: 1.25em !important; }
.fa-xl { font-size: 1.5em !important; }
.fa-2x { font-size: 2em !important; }
.fa-3x { font-size: 3em !important; }
.fa-4x { font-size: 4em !important; }
.fa-5x { font-size: 5em !important; }

/* Loading indicator for icons */
.fa-loading:before {
    content: "⟳" !important;
    animation: fa-spin 1s infinite linear !important;
}

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

/* Text fallbacks for critical icons */
.fa-facebook-f.text-fallback:before { content: "Facebook" !important; font-family: sans-serif !important; font-size: 0.8em !important; }
.fa-linkedin-in.text-fallback:before { content: "LinkedIn" !important; font-family: sans-serif !important; font-size: 0.8em !important; }
.fa-youtube.text-fallback:before { content: "YouTube" !important; font-family: sans-serif !important; font-size: 0.8em !important; }
.fa-instagram.text-fallback:before { content: "Instagram" !important; font-family: sans-serif !important; font-size: 0.8em !important; }
.fa-twitter.text-fallback:before { content: "Twitter" !important; font-family: sans-serif !important; font-size: 0.8em !important; }
.fa-phone.text-fallback:before { content: "☎" !important; font-family: sans-serif !important; }
.fa-envelope.text-fallback:before { content: "✉" !important; font-family: sans-serif !important; }
.fa-map-marker-alt.text-fallback:before { content: "📍" !important; font-family: sans-serif !important; }