/**
 * CSS Principal - Dia de Campo C.Vale 2026
 * 
 * ARQUITETURA CSS COM CACHE BUSTING:
 * Este arquivo contém apenas conteúdo CSS direto (fontes, utilitários, responsividade).
 * 
 * Os @import foram MIGRADOS para index.php com AssetVersionHelper para garantir
 * cache busting em TODOS os arquivos CSS individuais.
 * 
 * ORDEM DE CARREGAMENTO (definida em index.php):
 * 1. Variáveis (sem especificidade)
 * 2. Base/Reset (elementos simples)
 * 3. Componentes (classes únicas)
 * 4. Seções (classes específicas)
 * 5. Main.css (este arquivo - fontes, utilitários, responsividade)
 * 
 * ⚠️ NÃO adicionar @import aqui - usar AssetVersionHelper no index.php
 * ⚠️ EVITAR !important - usar especificidade adequada
 * 
 * @version 3.0 - Migração para cache busting completo
 * @author Tytotech
 */

/* ===== 1. FONTES (Especificidade: 0) ===== */
/* Definições de @font-face após todos os @import */
@font-face {
    font-family: 'BrandingSF';
    src: url('../fonts/BrandingSF-SemiLight.woff2') format('woff2'),
         url('../fonts/BrandingSF-SemiLight.woff') format('woff'),
         url('../fonts/BrandingSF-SemiLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrandingSF';
    src: url('../fonts/BrandingSF-Medium.woff2') format('woff2'),
         url('../fonts/BrandingSF-Medium.woff') format('woff'),
         url('../fonts/BrandingSF-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrandingSF';
    src: url('../fonts/BrandingSF-Bold.woff2') format('woff2'),
         url('../fonts/BrandingSF-Bold.woff') format('woff'),
         url('../fonts/BrandingSF-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Branding';
    src: url('../fonts/Branding-Medium.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Branding';
    src: url('../fonts/Branding-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== 2. UTILITÁRIOS (Especificidade: Controlada) ===== */
/* Classes utilitárias com especificidade baixa mas úteis */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

/* ===== 3. RESPONSIVIDADE ESPECÍFICA (Especificidade: 2 + media) ===== */
@media (max-width: 575px) {
    .d-mobile-none { display: none; }
    .text-mobile-center { text-align: center; }
}

@media (min-width: 768px) {
    .d-desktop-none { display: none; }
}

/* ===== 4. OVERRIDES ESPECÍFICOS (ÚLTIMO RECURSO) ===== */
/* ⚠️ Use com muito cuidado e apenas quando necessário */
/* ⚠️ Prefira aumentar especificidade ao invés de !important */

/* Exemplo de override específico sem !important */
body.modal-open {
    overflow: hidden;
}

/* Exceção: Casos onde !important é aceitável (utilitários de debug) */
.debug-border { border: 2px solid red !important; }
.debug-background { background: rgba(255, 0, 0, 0.1) !important; }

/* =============================================================
     5. MELHORIAS RESPONSIVAS & AJUSTES FINOS (incremental)
     - NÃO alterar blocos existentes acima; manter isolado para revisão.
     - Evitar !important; usar especificidade ou ordem.
     ============================================================= */

/* Hero: compensar altura real da navbar e melhorar alinhamento vertical em telas altas */
.hero { padding-top: clamp(60px, 6vh, 120px); }
@media (max-width: 575.98px) { .hero { min-height: 92vh; } }

/* Hero imagem em telas muito grandes (evita áreas vazias em 2K/4K) */
@media (min-width: 1600px) {
    .hero__image img { max-width: 640px; }
    .hero__content { max-width: 1320px; margin-inline: auto; }
}

/* Overlay estatísticas (sobre) deve quebrar linhas de forma suave em telas estreitas */
.sobre__stats-overlay { flex-wrap: wrap; gap: var(--spacing-md); }
.sobre__stats-overlay .stat-item { flex: 1 1 90px; min-width: 90px; }

/* Navegação da programação: scroll horizontal em mobile quando muitos dias */
@media (max-width: 640px) {
    .programacao__nav .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; }
    .programacao__nav .nav-pills::-webkit-scrollbar { width: 0; height: 0; }
    .programacao__nav .nav-pills .nav-link { flex: 0 0 auto; }
}

/* Cards de programação: reduzir padding em telas muito pequenas */
@media (max-width: 420px) { .timeline__card, .programacao__card { padding: 20px; } }

/* Footer: centralizar colunas empilhadas e evitar espaçamento excessivo */
@media (max-width: 991.98px) { .footer .row > [class*='col-'] { text-align: center; } }

/* Ajustes tipográficos progressivos para evitar clamp abrupto */
@media (max-width: 360px) {
    .hero__year { font-size: 4.5rem; }
    .hero__title { font-size: 1.75rem; }
    .hero__subtitle { font-size: 1rem; }
}

/* Acessibilidade: foco visível em links dentro de cards */
.timeline__card a:focus, .programacao__card a:focus, .footer a:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* Redução de animações para usuários que preferem menos movimento (fallback caso AOS ativo) */
@media (prefers-reduced-motion: reduce) {
    [data-aos] { transition: none !important; animation: none !important; }
    .hero__image img { animation: none; }
}

/* ===== TEMA CLARO FORÇADO - SEM MODO ESCURO ===== */
/* Garante que o site sempre use tema claro, independente da preferência do usuário */
.navbar .nav-link { 
    color: var(--dark-gray) !important; 
}

.navbar .nav-link:hover { 
    color: var(--primary-color) !important; 
}

/* Botão de inscrição mantém suas cores vibrantes */
.navbar .nav-link.botao-inscricao-menu,
.navbar .nav-link.botao-inscricao-menu:hover,
.navbar .nav-link.botao-inscricao-menu:focus,
.navbar .nav-link.botao-inscricao-menu:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff5722 0%, #ff9800 100%) !important;
}

.navbar .nav-link.botao-inscricao-menu:hover {
    background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%) !important;
}

/* Garantir que todos os elementos internos do botão sejam brancos */
.navbar .nav-link.botao-inscricao-menu *,
.navbar .nav-link.botao-inscricao-menu:hover *,
.navbar .nav-link.botao-inscricao-menu:focus *,
.navbar .nav-link.botao-inscricao-menu:active * {
    color: #ffffff !important;
}

/* Botão inscrição no menu: aumentar área clicável em mobile */
@media (max-width: 575.98px) { .nav-link.botao-inscricao-menu { width: 100%; text-align: center; } }

/* Scroll suave para ancoras (melhora UX) */
html { scroll-behavior: smooth; }