/* Comprehensive Icon and Font Fixes */

/* Force Font Awesome to load properly */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Fallback for when Font Awesome fails to load */
.icon-fallback {
    display: inline-block;
    width: 1em;
    height: 1em;
    text-align: center;
    line-height: 1;
    font-size: inherit;
}

/* Ensure icons are always visible */
.fas, .fab, .far, .fal, .fad {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", inherit;
    font-weight: 900;
    display: inline-block;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fab {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

.far {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}

/* Unicode fallbacks for common icons */
.fa-user:not(.fa-loaded)::before { content: "👤"; font-family: inherit; }
.fa-home:not(.fa-loaded)::before { content: "🏠"; font-family: inherit; }
.fa-dashboard:not(.fa-loaded)::before, 
.fa-tachometer-alt:not(.fa-loaded)::before { content: "📊"; font-family: inherit; }
.fa-clipboard-list:not(.fa-loaded)::before { content: "📋"; font-family: inherit; }
.fa-shopping-bag:not(.fa-loaded)::before { content: "🛍️"; font-family: inherit; }
.fa-cog:not(.fa-loaded)::before, 
.fa-settings:not(.fa-loaded)::before { content: "⚙️"; font-family: inherit; }
.fa-sign-out-alt:not(.fa-loaded)::before { content: "🚪"; font-family: inherit; }
.fa-book:not(.fa-loaded)::before { content: "📚"; font-family: inherit; }
.fa-clipboard-check:not(.fa-loaded)::before { content: "✅"; font-family: inherit; }
.fa-chart-line:not(.fa-loaded)::before { content: "📈"; font-family: inherit; }
.fa-fire:not(.fa-loaded)::before { content: "🔥"; font-family: inherit; }
.fa-star:not(.fa-loaded)::before { content: "⭐"; font-family: inherit; }
.fa-trophy:not(.fa-loaded)::before { content: "🏆"; font-family: inherit; }
.fa-graduation-cap:not(.fa-loaded)::before { content: "🎓"; font-family: inherit; }
.fa-check:not(.fa-loaded)::before { content: "✓"; font-family: inherit; }
.fa-check-circle:not(.fa-loaded)::before { content: "✅"; font-family: inherit; }
.fa-rocket:not(.fa-loaded)::before { content: "🚀"; font-family: inherit; }
.fa-envelope:not(.fa-loaded)::before { content: "✉️"; font-family: inherit; }
.fa-redo:not(.fa-loaded)::before { content: "🔄"; font-family: inherit; }
.fa-shield-alt:not(.fa-loaded)::before { content: "🛡️"; font-family: inherit; }
.fa-credit-card:not(.fa-loaded)::before { content: "💳"; font-family: inherit; }
.fa-shopping-cart:not(.fa-loaded)::before { content: "🛒"; font-family: inherit; }
.fa-ticket-alt:not(.fa-loaded)::before { content: "🎫"; font-family: inherit; }
.fa-info-circle:not(.fa-loaded)::before { content: "ℹ️"; font-family: inherit; }
.fa-user-edit:not(.fa-loaded)::before { content: "✏️"; font-family: inherit; }
.fa-quote-left:not(.fa-loaded)::before { content: """; font-family: inherit; }
.fa-flask:not(.fa-loaded)::before { content: "🧪"; font-family: inherit; }
.fa-atom:not(.fa-loaded)::before { content: "⚛️"; font-family: inherit; }
.fa-stethoscope:not(.fa-loaded)::before { content: "🩺"; font-family: inherit; }
.fa-university:not(.fa-loaded)::before { content: "🏛️"; font-family: inherit; }
.fa-school:not(.fa-loaded)::before { content: "🏫"; font-family: inherit; }
.fa-building:not(.fa-loaded)::before { content: "🏢"; font-family: inherit; }
.fa-microscope:not(.fa-loaded)::before { content: "🔬"; font-family: inherit; }
.fa-book-open:not(.fa-loaded)::before { content: "📖"; font-family: inherit; }
.fa-mobile-alt:not(.fa-loaded)::before { content: "📱"; font-family: inherit; }
.fa-file-pdf:not(.fa-loaded)::before { content: "📄"; font-family: inherit; }
.fa-download:not(.fa-loaded)::before { content: "⬇️"; font-family: inherit; }
.fa-phone:not(.fa-loaded)::before { content: "📞"; font-family: inherit; }
.fa-medal:not(.fa-loaded)::before { content: "🥇"; font-family: inherit; }
.fa-play-circle:not(.fa-loaded)::before { content: "▶️"; font-family: inherit; }

/* Special handling for Google icon */
.fa-google:not(.fa-loaded)::before { 
    content: "G"; 
    font-family: inherit; 
    background: linear-gradient(45deg, #4285f4, #db4437, #f4b400, #0f9d58); 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-weight: bold; 
}

/* Social media icons */
.fa-facebook:not(.fa-loaded)::before { content: "f"; font-family: inherit; color: #1877f2; }
.fa-instagram:not(.fa-loaded)::before { content: "📷"; font-family: inherit; color: #e4405f; }
.fa-twitter:not(.fa-loaded)::before { content: "🐦"; font-family: inherit; color: #1da1f2; }
.fa-youtube:not(.fa-loaded)::before { content: "📺"; font-family: inherit; color: #ff0000; }
.fa-linkedin:not(.fa-loaded)::before { content: "💼"; font-family: inherit; color: #0077b5; }
.fa-google-play:not(.fa-loaded)::before { content: "📱"; font-family: inherit; color: #01875f; }

/* Spinning animation */
.fa-spin {
    animation: fa-spin 1s infinite linear;
}

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

/* Ensure proper icon spacing and alignment */
.fas, .fab, .far, .fal, .fad {
    margin-right: 0.25em;
    vertical-align: baseline;
}

/* Fix for icons in buttons */
button .fas, button .fab, button .far, button .fal, button .fad,
.btn .fas, .btn .fab, .btn .far, .btn .fal, .btn .fad {
    margin-right: 0.5em;
    vertical-align: middle;
}

/* Fix for icons at the end of text */
.fas:last-child, .fab:last-child, .far:last-child, .fal:last-child, .fad:last-child {
    margin-right: 0;
    margin-left: 0.25em;
}

/* Fix for standalone icons */
.fas:only-child, .fab:only-child, .far:only-child, .fal:only-child, .fad:only-child {
    margin: 0;
}

/* Ensure icons display properly in navigation */
.nav-link .fas, .nav-link .fab, .nav-link .far, .nav-link .fal, .nav-link .fad {
    margin-right: 0.5em;
}

/* Ensure icons display properly in dropdowns */
.profile-menu-item .fas, .profile-menu-item .fab, .profile-menu-item .far, .profile-menu-item .fal, .profile-menu-item .fad {
    margin-right: 0.75em;
    width: 1em;
    text-align: center;
}

/* Ensure icons display properly in cards */
.feature-card .fas, .feature-card .fab, .feature-card .far, .feature-card .fal, .feature-card .fad,
.download-card .fas, .download-card .fab, .download-card .far, .download-card .fal, .download-card .fad,
.exam-item .fas, .exam-item .fab, .exam-item .far, .exam-item .fal, .exam-item .fad {
    font-size: 2em;
    margin-bottom: 0.5em;
}

/* Fix for icons in testimonials */
.testimonial .fas, .testimonial .fab, .testimonial .far, .testimonial .fal, .testimonial .fad {
    margin-right: 0.25em;
}

/* Ensure proper icon sizing */
.exam-icon i, .feature-icon i, .download-icon i {
    font-size: 2.5em !important;
    color: #4CAF50;
}

.exam-icon-large i {
    font-size: 1.5em !important;
    color: white;
}

/* Force display for critical icons */
.navbar .fas, .navbar .fab, .navbar .far, .navbar .fal, .navbar .fad,
.hero .fas, .hero .fab, .hero .far, .hero .fal, .hero .fad,
.cta-btn .fas, .cta-btn .fab, .cta-btn .far, .cta-btn .fal, .cta-btn .fad {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fallback for when no icon loads at all */
i[class*="fa-"]:empty::after {
    content: "●";
    font-family: inherit;
    font-size: 0.8em;
    opacity: 0.6;
}

/* Hide the fallback when real icon loads */
i[class*="fa-"]:not(:empty)::after {
    display: none;
}

/* CSP-friendly inline icon styles */
.icon-inline {
    display: inline-block;
    width: 1em;
    height: 1em;
    text-align: center;
    line-height: 1;
    font-size: inherit;
}

/* Mobile optimization for icons */
@media (max-width: 768px) {
    .fas, .fab, .far, .fal, .fad {
        font-size: 1em;
    }
    
    .exam-icon i, .feature-icon i, .download-icon i {
        font-size: 2em !important;
    }
    
    .exam-icon-large i {
        font-size: 1.2em !important;
    }
    
    /* Ensure icons are not too small on mobile */
    button .fas, button .fab, button .far, button .fal, button .fad,
    .btn .fas, .btn .fab, .btn .far, .btn .fal, .btn .fad {
        font-size: 1.1em;
    }
}

/* Force font loading for Font Awesome */
@font-face {
    font-family: 'Font Awesome 6 Free';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

/* Ensure icons are loaded correctly */
.fa-loaded {
    font-family: "Font Awesome 6 Free" !important;
}

.fab.fa-loaded {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Performance optimization */
.fas, .fab, .far, .fal, .fad {
    will-change: transform;
}

/* Accessibility improvements */
.fas[aria-hidden="true"], .fab[aria-hidden="true"], .far[aria-hidden="true"], .fal[aria-hidden="true"], .fad[aria-hidden="true"] {
    speak: none;
}

/* Ensure icons work in all browsers */
.fas, .fab, .far, .fal, .fad {
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    -webkit-font-variant: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}