/*
 * Cross-Browser Compatibility CSS
 * Garante funcionamento em Chrome, Firefox, Edge, Safari
 * Atlantida DMC - 2025
 */

/* CSS Custom Properties Fallbacks */
:root {
    /* Cores principais com fallbacks */
    --primary-dark: #1E3347;
    --primary-light: #4A90E2;
    --accent-color: #D71921;
    --text-dark: #333333;
    --text-light: #666666;
    --background-light: #f8f9fa;
    --white: #ffffff;
    --black: #000000;
}

/* Fallbacks para navegadores que não suportam CSS custom properties */
.fallback-primary-dark { background-color: #1E3347; }
.fallback-primary-light { background-color: #4A90E2; }
.fallback-accent { background-color: #D71921; }

/* Flexbox com prefixos de fornecedores */
.flex-container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-item {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/* Transform com prefixos */
.transform-element {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

/* Transition com prefixos */
.transition-element {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Border-radius com prefixos */
.rounded-element {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/* Box-shadow com prefixos */
.shadow-element {
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Gradient com prefixos */
.gradient-element {
    background: #1E3347; /* Fallback */
    background: -webkit-linear-gradient(top, #1E3347 0%, #4A90E2 100%);
    background: -moz-linear-gradient(top, #1E3347 0%, #4A90E2 100%);
    background: -ms-linear-gradient(top, #1E3347 0%, #4A90E2 100%);
    background: -o-linear-gradient(top, #1E3347 0%, #4A90E2 100%);
    background: linear-gradient(to bottom, #1E3347 0%, #4A90E2 100%);
}

/* User-select com prefixos */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Appearance com prefixos para inputs */
.reset-appearance {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Placeholder com prefixos */
.input-placeholder::-webkit-input-placeholder { color: #999; }
.input-placeholder::-moz-placeholder { color: #999; opacity: 1; }
.input-placeholder:-ms-input-placeholder { color: #999; }
.input-placeholder:-moz-placeholder { color: #999; }

/* Filter com prefixos */
.filter-element {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

/* Backdrop-filter com prefixos */
.backdrop-filter {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Grid Layout com fallback para flexbox */
.grid-container {
    display: -ms-grid; /* IE 10-11 */
    display: grid;
}

/* Fallback para navegadores sem suporte a grid */
.grid-fallback {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.grid-fallback .grid-item {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 300px;
    -ms-flex: 1 1 300px;
    flex: 1 1 300px;
}

/* Sticky positioning com fallback */
.sticky-element {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

/* Fallback para position: sticky */
.sticky-fallback {
    position: fixed;
    top: 0;
    z-index: 1000;
}

/* Object-fit com fallback */
.object-fit {
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit: cover;'; /* IE 9-11 polyfill */
}

/* Scroll behavior */
.smooth-scroll {
    -webkit-scroll-behavior: smooth;
    -moz-scroll-behavior: smooth;
    -ms-scroll-behavior: smooth;
    scroll-behavior: smooth;
}

/* CSS Logical Properties fallbacks */
.margin-inline {
    margin-left: 20px;
    margin-right: 20px;
    margin-inline-start: 20px;
    margin-inline-end: 20px;
}

/* Aspect-ratio fallback */
.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.aspect-ratio-16-9 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Modern aspect-ratio property */
@supports (aspect-ratio: 16 / 9) {
    .aspect-ratio-16-9 {
        aspect-ratio: 16 / 9;
        height: auto;
        padding-bottom: 0;
    }
    
    .aspect-ratio-16-9 > * {
        position: static;
    }
}

/* Clamp() fallback */
.responsive-text {
    font-size: 16px; /* Fallback */
    font-size: clamp(14px, 4vw, 24px);
}

/* CSS containment */
.contain-layout {
    contain: layout;
}

/* Will-change para performance */
.will-change-transform {
    will-change: transform;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .high-contrast {
        border: 2px solid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .respect-motion-preference {
        animation: none !important;
        transition: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .auto-dark-mode {
        background-color: #1a1a1a;
        color: #ffffff;
    }
}