/* ========================================
   SISTEMA DE IMAGENS POR TEMA - WGM CONSULTORIA
   ======================================== */

/* ========================================
   REGRAS AUTOMÁTICAS PARA IMAGENS
   ======================================== */

/* Imagens que mudam automaticamente com o tema */
img[src*="_branco.png"],
img[src*="_preto.png"] {
    transition: all var(--transition-normal);
}

/* ========================================
   DARK THEME - IMAGENS BRANCAS
   ======================================== */

/* No tema escuro, as imagens são trocadas via JavaScript */
/* Não aplicar filtros aqui para evitar conflitos */
.dark-scheme img[src*="_preto.png"] {
    /* Imagem será trocada pelo JavaScript */
    filter: none;
}

.dark-scheme img[src*="_branco.png"] {
    /* Manter imagem branca */
    filter: none;
}

/* ========================================
   LIGHT THEME - IMAGENS PRETAS
   ======================================== */

/* No tema claro, as imagens são trocadas via JavaScript */
/* Não aplicar filtros aqui para evitar conflitos */
.light-scheme img[src*="_branco.png"] {
    /* Imagem será trocada pelo JavaScript */
    filter: none;
}

.light-scheme img[src*="_preto.png"] {
    /* Manter imagem preta */
    filter: none;
}

/* ========================================
   CLASSES ESPECÍFICAS PARA LOGOS
   ======================================== */

/* Logo principal */
.logo-main {
    transition: all var(--transition-normal);
}

/* Logo da igreja */
.logo-church {
    transition: all var(--transition-normal);
}

/* Logo do workshop */
.logo-workshop {
    transition: all var(--transition-normal);
}

/* ========================================
   SISTEMA DE FALLBACK
   ======================================== */

/* Se a imagem não existir, usar filtro como fallback */
img[src*="_branco.png"]:not([src]),
img[src*="_preto.png"]:not([src]) {
    opacity: 0.7;
}

/* ========================================
   RESPONSIVIDADE PARA IMAGENS
   ======================================== */

@media (max-width: 768px) {
    img[src*="_branco.png"],
    img[src*="_preto.png"] {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 576px) {
    .logo-main,
    .logo-church,
    .logo-workshop {
        max-width: 80%;
    }
}

/* ========================================
   ANIMAÇÕES ESPECIAIS
   ======================================== */

/* Fade in quando a imagem muda */
img[src*="_branco.png"],
img[src*="_preto.png"] {
    animation: fadeInImage 0.3s ease-in-out;
}

@keyframes fadeInImage {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   UTILITÁRIOS
   ======================================== */

/* Forçar imagem branca */
.force-white {
    filter: brightness(0) invert(1) !important;
}

/* Forçar imagem preta */
.force-black {
    filter: brightness(0) !important;
}

/* Desabilitar mudança automática */
.no-theme-change {
    filter: none !important;
}

/* ========================================
   DEBUG (remover em produção)
   ======================================== */

/* 
.debug-theme img[src*="_branco.png"]::after {
    content: " (branco)";
    font-size: 10px;
    color: red;
}

.debug-theme img[src*="_preto.png"]::after {
    content: " (preto)";
    font-size: 10px;
    color: blue;
}
*/