/**
 * Font Awesome Fallback & Enhancement CSS
 * Shows emoji icons while Font Awesome loads, and as fallback if it fails
 */

/* Base icon styles */
.fas,
.far,
.fab,
.fa,
.fa-solid,
.fa-regular,
.fa-brands {
    width: 1em;
    text-align: center;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fallback: Use emoji when Font Awesome fonts haven't loaded yet */
/* This uses a font-family check - if FA icon shows as blank, use data-fallback attribute */

/* Common event plugin icons with emoji fallbacks */
.sep-meta-icon.fas.fa-calendar-alt::before,
.sep-meta-icon.fas.fa-calendar-days::before,
.sep-meta-icon.fa-calendar-alt::before {
    content: "\f073";
    /* FA icon code */
}

.sep-meta-icon.fas.fa-clock::before {
    content: "\f017";
}

.sep-meta-icon.fas.fa-map-marker-alt::before,
.sep-meta-icon.fas.fa-location-dot::before {
    content: "\f3c5";
}

/* Ensure icons are visible even during font load */
.sep-meta-icon {
    min-width: 1em;
    min-height: 1em;
}

/* If Font Awesome fails completely, show CSS-generated emoji fallbacks */
/* This kicks in when the FA font-family is not available */
@supports (font-family: "Font Awesome 6 Free") {

    /* Font Awesome is available, use normal styling */
    .sep-meta-icon {
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
}

/* Fallback mode: CSS content replacement for offline/failed loads */
/* These use attribute selectors to provide emoji alternatives */
.sep-icon-fallback .fa-calendar::before,
.sep-icon-fallback .fa-calendar-alt::before,
.sep-icon-fallback .fa-calendar-days::before {
    content: "📅";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-clock::before {
    content: "🕐";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-map-marker::before,
.sep-icon-fallback .fa-map-marker-alt::before,
.sep-icon-fallback .fa-location-dot::before {
    content: "📍";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-hourglass::before,
.sep-icon-fallback .fa-hourglass-half::before {
    content: "⏳";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-sync::before,
.sep-icon-fallback .fa-sync-alt::before,
.sep-icon-fallback .fa-arrows-rotate::before,
.sep-icon-fallback .fa-redo::before {
    content: "🔄";
    font-family: Arial, sans-serif;
}

/* Additional common icons */
.sep-icon-fallback .fa-users::before {
    content: "👥";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-music::before {
    content: "🎵";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-star::before {
    content: "⭐";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-heart::before {
    content: "❤️";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-info-circle::before {
    content: "ℹ️";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-share::before {
    content: "↗️";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-compass::before {
    content: "🧭";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-fire::before {
    content: "🔥";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-trophy::before {
    content: "🏆";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-graduation-cap::before {
    content: "🎓";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-bicycle::before {
    content: "🚴";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-tree::before {
    content: "🌲";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-dumbbell::before {
    content: "🏋️";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-person-swimming::before,
.sep-icon-fallback .fa-swimmer::before {
    content: "🏊";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-person-running::before,
.sep-icon-fallback .fa-running::before {
    content: "🏃";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-mountain::before {
    content: "⛰️";
    font-family: Arial, sans-serif;
}

.sep-icon-fallback .fa-palette::before {
    content: "🎨";
    font-family: Arial, sans-serif;
}