/* Edge Browser Compatibility Fixes */

/* IE/Edge CSS Variable Fallbacks */
:root {
    --celtic: #102a1b;
    --totem-pole: #9b060e;
    --pink-swan: #c0b4b4;
    --hurricane: #8c7c7c;
    --color-celtic: #102a1b;
    --color-totem-pole: #9b060e;
    --color-pink-swan: #c0b4b4;
    --color-hurricane: #8c7c7c;
}

/* Fallbacks for CSS variables that Edge might not support */
.text-celtic {
    color: #102a1b; /* Fallback */
    color: var(--celtic);
}

.text-totem-pole {
    color: #9b060e; /* Fallback */
    color: var(--totem-pole);
}

.bg-celtic {
    background-color: #102a1b; /* Fallback */
    background-color: var(--celtic);
}

.bg-totem-pole {
    background-color: #9b060e; /* Fallback */
    background-color: var(--totem-pole);
}

/* Grid Layout Fixes for Edge */
.grid {
    display: -ms-grid; /* IE/Edge fallback */
    display: grid;
}

/* Flexbox fixes for Edge */
.flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.flex-col {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.items-center {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.justify-between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.justify-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Transform fixes for Edge */
.transform {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/* Transition fixes for Edge */
.transition {
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Border radius fixes */
.rounded {
    -webkit-border-radius: 0.25rem;
    border-radius: 0.25rem;
}

.rounded-lg {
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

.rounded-xl {
    -webkit-border-radius: 0.75rem;
    border-radius: 0.75rem;
}

.rounded-2xl {
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
}

/* Shadow fixes for Edge */
.shadow {
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
    -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Object-fit fixes for Edge */
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
}

/* Backdrop filter fixes */
.backdrop-blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* Fallback for Edge */
    background-color: rgba(255, 255, 255, 0.8);
}

/* Scroll behavior fixes */
.scroll-smooth {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Animation fixes for Edge */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
        -webkit-background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
        -webkit-background-position: 200% 0;
    }
}

@keyframes ticker {
    0% {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

/* Fix for Edge not supporting gap in flexbox */
.gap-2 > * + * {
    margin-right: 0.5rem;
}

.gap-4 > * + * {
    margin-right: 1rem;
}

/* Edge-specific font fixes */
body {
    font-display: swap;
    -webkit-font-feature-settings: 'liga' 1, 'kern' 1;
    -moz-font-feature-settings: 'liga' 1, 'kern' 1;
    font-feature-settings: 'liga' 1, 'kern' 1;
}

/* IE/Edge specific hacks */
@supports (-ms-ime-align: auto) {
    /* Edge specific styles */
    .mobile-article-card {
        display: block;
    }
}

/* Fix for Edge not supporting modern viewport units */
.min-h-screen {
    min-height: 100vh;
    min-height: calc(100vh - 0px); /* Edge fix */
}

/* CSS Grid IE/Edge fixes */
@supports (-ms-grid-rows: auto) {
    .grid-cols-1 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .grid-cols-2 {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .grid-cols-3 {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}