/* Estilos específicos para otimização em dispositivos móveis */

/* Melhorias de performance para dispositivos móveis */
@media (max-width: 768px) {
    /* Reduzir complexidade visual em dispositivos móveis */
    .card, 
    .tool-card, 
    .influencer-card, 
    .resource-card, 
    .course-card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Simplificar animações para melhorar performance */
    .card:hover,
    .tool-card:hover,
    .influencer-card:hover,
    .resource-card:hover,
    .course-card:hover,
    .recommendation-item:hover {
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Ajustar tamanho de fonte para melhor legibilidade */
    body {
        font-size: 16px;
    }
    
    /* Aumentar área de toque para elementos interativos */
    .btn, 
    #menu a, 
    .social-links a,
    #back-to-top,
    #theme-toggle {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Melhorar espaçamento para facilitar a leitura */
    p, li {
        line-height: 1.6;
    }
    
    /* Ajustar padding para melhor uso do espaço */
    .container {
        padding: 0 12px;
    }
    
    /* Simplificar layout de grid para melhor fluidez */
    .profiles-grid,
    .tools-grid,
    .impact-grid,
    .ethics-grid,
    .recommendations-grid,
    .influencers-grid,
    .resources-grid,
    .courses-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Ajustar menu de navegação para toque */
    #menu a {
        padding: 12px 16px;
    }
    
    /* Melhorar visibilidade do menu toggle */
    #menu-toggle {
        padding: 12px;
        font-size: 1.5rem;
    }
}

/* Otimizações para telas muito pequenas (smartphones) */
@media (max-width: 480px) {
    /* Reduzir ainda mais margens e paddings */
    .card, 
    .tool-card, 
    .influencer-card, 
    .resource-card, 
    .course-card {
        padding: 12px;
        margin-bottom: 12px;
    }
    
    /* Ajustar cabeçalho para telas pequenas */
    header h1 {
        font-size: 1.4rem;
    }
    
    header h2 {
        font-size: 1rem;
    }
    
    /* Simplificar estatísticas para uma coluna */
    .cardio-stats,
    .impact-stats {
        grid-template-columns: 1fr;
    }
    
    /* Ajustar botões flutuantes para não sobrepor conteúdo */
    #back-to-top,
    #theme-toggle {
        bottom: 10px;
    }
    
    #back-to-top {
        right: 10px;
    }
    
    #theme-toggle {
        left: 10px;
    }
}

/* Otimizações para dispositivos com tela sensível ao toque */
@media (hover: none) {
    /* Remover efeitos de hover que podem causar problemas em telas touch */
    .card:hover,
    .tool-card:hover,
    .influencer-card:hover,
    .resource-card:hover,
    .course-card:hover,
    .recommendation-item:hover {
        transform: none;
    }
    
    /* Aumentar contraste para melhor visibilidade em condições variadas */
    .btn, 
    #menu a.active {
        background-color: #2980b9;
    }
    
    /* Ajustar tooltips para funcionarem com toque */
    .tooltip .tooltip-text {
        visibility: hidden;
    }
    
    .tooltip:active .tooltip-text {
        visibility: visible;
        opacity: 1;
    }
}

/* Otimizações para economizar bateria em dispositivos móveis */
@media (prefers-reduced-motion) {
    /* Desativar todas as animações */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Otimizações para conexões lentas */
.no-js .lazy-load {
    display: none;
}

/* Melhorias de acessibilidade para dispositivos móveis */
@media (max-width: 768px) {
    /* Aumentar contraste */
    body {
        color: #000;
    }
    
    a {
        color: #0056b3;
    }
    
    /* Aumentar tamanho de elementos interativos */
    input, 
    select, 
    textarea, 
    button {
        font-size: 16px; /* Previne zoom automático em iOS */
    }
}

/* Otimizações para orientação paisagem em dispositivos móveis */
@media (max-width: 768px) and (orientation: landscape) {
    /* Ajustar altura do cabeçalho */
    header {
        padding: 1rem 0;
    }
    
    /* Melhorar layout do menu */
    #menu {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Suporte a gestos de toque */
@media (pointer: coarse) {
    /* Adicionar indicadores visuais para elementos tocáveis */
    .btn:active, 
    #menu a:active,
    .card:active,
    .tool-card:active,
    .influencer-card:active,
    .resource-card:active {
        background-color: rgba(0, 0, 0, 0.05);
    }
}