/**
 * ARQUIVO: modes.css
 * DESCRIÇÃO: Gerencia os planos de fundo e estilos específicos para os modos Claro e Escuro.
 * FUNCIONALIDADES: Define as imagens de fundo dinâmicas e garante a consistência visual do layout.
 * VERSÃO: 2.0.0 - Auditoria Total e Comentários Detalhados
 */

/**
 * ESTILOS PARA O MODO CLARO (LIGHT MODE)
 * Aplicado quando o body NÃO possui a classe .dark-mode.
 */
body:not(.dark-mode) {
    /* Define a imagem de fundo clara (Igreja durante o dia) */
    background-image: url("../../assets/DEVS/templates/light_mode.jpg");
    background-size: cover;                     /* Cobre toda a área disponível */
    background-position: center;                /* Centraliza a imagem */
    background-repeat: no-repeat;               /* Impede a repetição da imagem */
    background-attachment: fixed;               /* Mantém o fundo fixo ao rolar a página */
}

/**
 * ESTILOS PARA O MODO ESCURO (DARK MODE)
 * Aplicado quando o body possui a classe .dark-mode.
 */
body.dark-mode {
    /* Define a imagem de fundo escura (Igreja durante a noite) */
    background-image: url("../../assets/DEVS/templates/dark_mode.jpg");
    background-size: cover;                     /* Cobre toda a área disponível */
    background-position: center;                /* Centraliza a imagem */
    background-repeat: no-repeat;               /* Impede a repetição da imagem */
    background-attachment: fixed;               /* Mantém o fundo fixo ao rolar a página */
}

/**
 * CONFIGURAÇÕES GLOBAIS DO CORPO (BODY)
 * Propriedades que se aplicam a ambos os modos.
 */
body {
    background-attachment: fixed;               /* Reforça o fundo fixo para evitar saltos visuais */
    background-size: cover;                     /* Garante cobertura total */
    min-height: 100vh;                          /* Altura mínima de 100% da tela */
    overflow-y: auto;                           /* Permite rolagem vertical se necessário */
    overflow-x: hidden;                         /* Impede a rolagem horizontal indesejada */
}

/**
 * AJUSTES DE RESPONSIVIDADE
 * Garante que o fundo se comporte corretamente em telas menores (tablets e celulares).
 */
@media (max-width: 1000px) {
    body {
        background-attachment: fixed;           /* Mantém o fundo fixo mesmo em dispositivos móveis */
        background-size: cover;                 /* Mantém a cobertura total */
        background-position: center;            /* Mantém a centralização */
    }
}