/* ===== FONT AWESOME CSS VALIDATION FIXES ===== */
/*
 * This file fixes CSS validation errors caused by Font Awesome's external CSS:
 * 
 * 1. text-rendering: auto - Invalid property value
 *    Solution: Remove text-rendering and use font-smooth properties instead
 * 
 * 2. fa-rotate-by transform - Invalid CSS custom property usage
 *    Solution: Provide proper fallbacks and valid transform values
 * 
 * These fixes ensure CSS validation passes while maintaining Font Awesome functionality.
 * The external Font Awesome CSS from CDN cannot be modified, so we override it here.
 */

/* ===== FONT FACE DECLARATIONS - FIX FOR MISSING FONTS ===== */
/* Override Font Awesome font paths to use correct location */
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../assets/fonts/fa-brands-400.woff2") format("woff2"),
         url("../assets/fonts/fa-brands-400.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../assets/fonts/fa-regular-400.woff2") format("woff2"),
         url("../assets/fonts/fa-regular-400.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../assets/fonts/fa-solid-900.woff2") format("woff2"),
         url("../assets/fonts/fa-solid-900.ttf") format("truetype");
}

/* Font Awesome 5 compatibility */
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: block;
    font-weight: 400;
    src: url("../assets/fonts/fa-brands-400.woff2") format("woff2"),
         url("../assets/fonts/fa-brands-400.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 900;
    src: url("../assets/fonts/fa-solid-900.woff2") format("woff2"),
         url("../assets/fonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 400;
    src: url("../assets/fonts/fa-regular-400.woff2") format("woff2"),
         url("../assets/fonts/fa-regular-400.ttf") format("truetype");
}

/* Legacy FontAwesome support */
@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url("../assets/fonts/fa-solid-900.woff2") format("woff2"),
         url("../assets/fonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url("../assets/fonts/fa-brands-400.woff2") format("woff2"),
         url("../assets/fonts/fa-brands-400.ttf") format("truetype");
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url("../assets/fonts/fa-regular-400.woff2") format("woff2"),
         url("../assets/fonts/fa-regular-400.ttf") format("truetype");
}

/* ===== ORIGINAL FIXES ===== */

/* Fix for Font Awesome icon rendering */
.fa,
.fa-brands,
.fa-classic,
.fa-regular,
.fa-sharp,
.fa-solid,
.fab,
.far,
.fas {
    /* Use font smoothing instead of text-rendering for better validation */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    vertical-align: middle;
}

/* Fix for fa-rotate-by transform validation error */
.fa-rotate-by {
    /* Replace invalid transform with proper CSS */
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

/* Handle CSS custom properties properly for rotation */
.fa-rotate-by[style*="--fa-rotate-angle"] {
    transform: rotate(var(--fa-rotate-angle, 0deg));
}

/* Ensure proper fallbacks for Font Awesome icons */
.fa::before,
.fa-brands::before,
.fa-classic::before,
.fa-regular::before,
.fa-sharp::before,
.fa-solid::before,
.fab::before,
.far::before,
.fas::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
}

/* Remove any problematic CSS properties that might cause validation errors */
.fa *,
.fa-brands *,
.fa-classic *,
.fa-regular *,
.fa-sharp *,
.fa-solid *,
.fab *,
.far *,
.fas * {
    /* Reset any inherited problematic properties */
    transform: none;
}

/* Additional fixes for Font Awesome 6 specific classes */
.fa-duotone,
.fa-light,
.fa-thin {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    vertical-align: middle;
}

/* Fix for any rotation utilities */
.fa-rotate-90 {
    transform: rotate(90deg);
}

.fa-rotate-180 {
    transform: rotate(180deg);
}

.fa-rotate-270 {
    transform: rotate(270deg);
}

.fa-flip-horizontal {
    transform: scale(-1, 1);
}

.fa-flip-vertical {
    transform: scale(1, -1);
}

.fa-flip-both {
    transform: scale(-1, -1);
}

/* Ensure proper stacking context for Font Awesome icons */
.fa-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2em;
}

.fa-stack-1x,
.fa-stack-2x {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.fa-stack-1x {
    line-height: inherit;
}

.fa-stack-2x {
    font-size: 2em;
}

/* Fix for any remaining validation issues with Font Awesome */
[class*="fa-"] {
    /* Ensure all Font Awesome classes have proper font smoothing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override any problematic external Font Awesome styles */
.fa,
.fa-brands,
.fa-classic,
.fa-regular,
.fa-sharp,
.fa-solid,
.fab,
.far,
.fas {
    /* Force override of any external problematic styles */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}