/* Estilos para garantir compatibilidade entre navegadores */

/* Prefixos de fornecedores para maior compatibilidade */
.card,
.tool-card,
.influencer-card,
.resource-card,
.course-card,
.recommendation-item {
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Fallbacks para navegadores mais antigos */
.profiles-grid,
.tools-grid,
.impact-grid,
.ethics-grid,
.recommendations-grid,
.influencers-grid,
.resources-grid,
.courses-grid {
    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;
    margin: 0 -0.75rem;
}

.profiles-grid > *,
.tools-grid > *,
.impact-grid > *,
.ethics-grid > *,
.recommendations-grid > *,
.influencers-grid > *,
.resources-grid > *,
.courses-grid > * {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 0 300px;
    -ms-flex: 1 0 300px;
    flex: 1 0 300px;
    margin: 0.75rem;
}

/* Fallback para navegadores sem suporte a grid */
@supports not (display: grid) {
    .two-columns {
        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;
        margin: 0 -0.75rem;
    }
    
    .two-columns > * {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 0 300px;
        -ms-flex: 1 0 300px;
        flex: 1 0 300px;
        margin: 0.75rem;
    }
}

/* Fallbacks para animações */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
        -moz-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@-o-keyframes fadeIn {
    from {
        opacity: 0;
        -o-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

/* Correções para Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .card,
    .tool-card,
    .influencer-card,
    .resource-card,
    .course-card {
        border: 1px solid #ddd;
    }
    
    .profiles-grid,
    .tools-grid,
    .impact-grid,
    .ethics-grid,
    .recommendations-grid,
    .influencers-grid,
    .resources-grid,
    .courses-grid {
        display: flex;
        flex-wrap: wrap;
    }
    
    .profiles-grid > *,
    .tools-grid > *,
    .impact-grid > *,
    .ethics-grid > *,
    .recommendations-grid > *,
    .influencers-grid > *,
    .resources-grid > *,
    .courses-grid > * {
        flex: 0 0 calc(33.333% - 1.5rem);
        margin: 0.75rem;
    }
    
    #menu {
        display: flex;
    }
}

/* Correções para Safari */
@supports (-webkit-overflow-scrolling: touch) {
    input,
    textarea,
    select,
    button {
        font-size: 16px; /* Evita zoom automático em campos de formulário no iOS */
    }
    
    body {
        -webkit-text-size-adjust: 100%; /* Previne ajuste automático de texto no iOS */
    }
}

/* Correções para Firefox */
@-moz-document url-prefix() {
    .card,
    .tool-card,
    .influencer-card,
    .resource-card,
    .course-card {
        background-image: none; /* Corrige problemas com gradientes em alguns casos */
    }
}

/* Polyfill para object-fit em IE */
.responsive-img {
    font-family: 'object-fit: cover;'; /* Usado pelo polyfill object-fit-images */
}

/* Fallback para navegadores sem suporte a CSS variables */
html.no-cssvar {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #1abc9c;
    --light-color: #ecf0f1;
    --dark-color: #34495e;
    --text-color: #333;
    --card-bg: #fff;
    --header-bg: linear-gradient(135deg, #3498db, #2c3e50);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

html.no-cssvar body {
    color: #333;
    background-color: #f8f9fa;
}

html.no-cssvar header {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
}

html.no-cssvar #main-nav {
    background-color: #2c3e50;
}

html.no-cssvar section h2 {
    color: #2c3e50;
    border-bottom-color: #3498db;
}

html.no-cssvar .btn {
    background-color: #3498db;
    color: white;
}

html.no-cssvar .btn:hover {
    background-color: #2980b9;
}

/* Correções para impressão */
@media print {
    body {
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
        color: #000;
    }
    
    @page {
        margin: 2cm;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    header, nav, footer, #back-to-top, #theme-toggle {
        display: none !important;
    }
    
    main {
        width: 100%;
    }
    
    .card, 
    .tool-card, 
    .influencer-card, 
    .resource-card, 
    .course-card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #ddd;
        box-shadow: none !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    img {
        max-width: 100% !important;
    }
}