/* --- START OF FILE devocional.css --- */

/* 
 * Estilos Globais da Página
 * Define o comportamento básico do HTML e BODY para o fundo e a rolagem.
 */
html {
    /* Define uma cor de fundo sólida para o elemento HTML.
     * Isso é crucial para cobrir o "vazio" ou a "borda branca" que pode aparecer
     * em dispositivos móveis ao rolar a página além do limite (efeito de overscroll).
     * Garante que o fundo seja sempre escuro, mesmo em áreas não preenchidas pelo body.
     */
    background-color: #1a1a1a; 
}

body {
    height: 100%; /* Garante que o corpo da página ocupe 100% da altura da viewport */
    margin: 0; /* Remove margens padrão que os navegadores podem adicionar */
    padding: 0; /* Remove paddings padrão que os navegadores podem adicionar */
    font-family: Arial, sans-serif; /* Define a fonte padrão para todo o texto no corpo */
    background-color: transparent; /* Torna o fundo do body transparente para que o pseudo-elemento body::before seja visível através dele */
    color: #fff; /* Define a cor do texto padrão como branco */
    overflow-x: hidden; /* Evita que a página possa ser rolada horizontalmente (indesejado) */
    overflow-y: auto; /* Permite a rolagem vertical quando o conteúdo excede a altura da tela */
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em dispositivos iOS (rolagem mais suave) */

    /* Espaçamento superior: Empurra o conteúdo para baixo, dando espaço para o cabeçalho fixo.
     * 60px é a altura definida para o .header-devocional.
     */
    padding-top: 60px; 
    /* Espaçamento inferior: Adiciona um padding na parte inferior do corpo da página.
     * 80px é a altura do rodapé fixo, garantindo que o conteúdo não fique escondido atrás dele.
     */
    padding-bottom: 80px; 
}

/* 
 * Pseudo-elemento body::before para o Plano de Fundo Global
 * Cria uma camada que fica atrás do conteúdo principal, exibindo a imagem de fundo.
 */
body::before {
    content: ''; /* Propriedade obrigatória para pseudo-elementos */
    position: fixed; /* Fixa o elemento na tela, independentemente da rolagem */
    top: 0; /* Alinha o elemento ao topo da viewport */
    left: 0; /* Alinha o elemento à esquerda da viewport */
    width: 100%; /* Faz o elemento ocupar 100% da largura da viewport */
    height: 100%; /* Faz o elemento ocupar 100% da altura da viewport */
    /* Define a imagem de fundo. Usado um caminho absoluto para maior robustez. */
    background-image: url('/images/background.jpg'); 
    background-size: cover; /* Redimensiona a imagem para cobrir toda a área, cortando se necessário */
    background-position: center; /* Centraliza a imagem de fundo */
    background-blend-mode: multiply; /* Mescla a imagem com a cor de fundo (background-color) */
    background-color: rgba(0, 0, 0, 0.7); /* Adiciona um overlay escuro (70% de opacidade) sobre a imagem para escurecê-la */
    filter: blur(5px); /* Aplica um efeito de desfoque de 5 pixels à imagem */
    z-index: -1; /* Garante que este pseudo-elemento fique sempre atrás de todo o conteúdo da página */
}

/* 
 * Classe Reutilizável: .centered-content-wrapper
 * Usada para centralizar o conteúdo em uma largura máxima definida em telas maiores.
 */
.centered-content-wrapper {
    max-width: 480px; /* Define a largura máxima para o conteúdo centralizado (seu tamanho preferido) */
    margin: 0 auto; /* Centraliza o elemento horizontalmente (0px de margem vertical, 'auto' nas laterais) */
    width: 100%; /* Garante que o elemento ocupe 100% da largura disponível até o max-width */
    box-sizing: border-box; /* Garante que padding e borda sejam incluídos no cálculo da largura/altura total */
}

/* 
 * Estilos para o Cabeçalho Fixo Superior da Página (Header)
 * Contém o título da página e os botões de navegação lateral.
 */
.header-devocional {
    position: fixed; /* Fixa o cabeçalho no topo da viewport */
    top: 0; /* Alinha o cabeçalho ao topo */
    left: 0; /* Alinha o cabeçalho à esquerda */
    width: 100%; /* Ocupa 100% da largura da viewport */
    /* Cor de fundo: Semelhante ao conteúdo centralizado, com 95% de opacidade para a transparência */
    background-color: rgba(30, 0, 0, 0.95); 
    color: #fff; /* Cor do texto padrão no cabeçalho */
    z-index: 100; /* Garante que o cabeçalho fique acima de outros elementos na página */
    box-sizing: border-box;
    height: 60px; /* Altura fixa do cabeçalho */
    display: flex; /* Habilita Flexbox para centralizar o wrapper interno */
    justify-content: center; /* Centraliza o wrapper interno horizontalmente */
    align-items: center; /* Centraliza o wrapper interno verticalmente */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Adiciona uma sombra suave na parte inferior do cabeçalho */
}

/* Estilos para o wrapper interno do cabeçalho (.header-inner) */
.header-devocional .header-inner {
    display: flex; /* Habilita Flexbox para alinhar a seta, título e botão home */
    align-items: center; /* Centraliza os itens (seta, título, home) verticalmente */
    justify-content: space-between; /* Distribui o espaço: seta à esquerda, título centralizado, home à direita */
    padding: 0 15px; /* Padding interno horizontal do wrapper para criar espaço nas laterais */
    width: 100%; /* Ocupa toda a largura do .centered-content-wrapper */
    height: 100%; /* Ocupa toda a altura do cabeçalho pai */
}

/* Estilos para a Seta de Voltar */
.back-arrow {
    color: #fff; /* Cor branca padrão para a seta */
    font-size: 1.5em; /* Tamanho da fonte para o ícone da seta de voltar */
    text-decoration: none; /* Remove sublinhado padrão de links */
    flex-shrink: 0; /* Impede que a seta diminua de tamanho em telas menores */
    transition: color 0.2s ease; /* Adiciona uma transição suave para a mudança de cor no hover */
}
/* Efeito hover para a Seta de Voltar */
.back-arrow:hover {
    color: #C6A66C; /* Muda para o dourado suave ao passar o mouse */
}

/* Estilos para o Título Principal do Cabeçalho (ex: "Devocional Diário") */
.header-devocional h1 {
    font-size: 1.2em; /* Tamanho da fonte do título */
    margin: 0; /* Remove margens padrão que podem afetar o alinhamento */
    flex-grow: 1; /* Permite que o título ocupe o espaço restante no meio dos botões */
    text-align: center; /* Centraliza o texto do título dentro do espaço que ele ocupa */
}

/* Estilos para o Botão Home (ícone de casinha) */
.home-button {
    color: #fff; /* Cor branca padrão para o ícone da casinha */
    font-size: 1.2em; /* Tamanho menor da casinha (comparado à seta de voltar) */
    text-decoration: none; /* Remove sublinhado padrão de links */
    flex-shrink: 0; /* Impede que o botão diminua de tamanho em telas menores */
    padding: 0 5px; /* Pequeno padding para aumentar a área de clique do ícone */
    transition: color 0.2s ease; /* Adiciona uma transição suave para a mudança de cor no hover */
}
/* Efeito hover para o Botão Home */
.home-button:hover {
    color: #C6A66C; /* Muda para o dourado suave ao passar o mouse */
}

/* 
 * Estilos para o Container Principal do Conteúdo do Devocional
 * Este é o "card" flutuante que contém todas as seções do devocional.
 */
.devocional-content-container {
    max-width: 480px; /* Define a largura máxima para este container (seu tamanho preferido) */
    margin: 10px auto; /* Reduz a margem superior (de 20px para 10px) para aproximar do cabeçalho */
    padding: 20px 15px; /* Padding interno para o conteúdo dentro do card */
    
    background-color: rgba(30, 0, 0, 0.95); /* Fundo semi-transparente para o "card" principal */
    border-radius: 12px; /* Cantos arredondados para o card */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra para o efeito flutuante */
    box-sizing: border-box; /* Inclui padding e borda no cálculo da largura/altura total */

    display: flex; /* Habilita Flexbox para organizar as seções internas */
    flex-direction: column; /* Organiza as seções (data, versículo, reflexão, oração) em uma coluna */
    gap: 20px; /* Espaçamento entre as principais seções do devocional (ex: entre data e versículo, versículo e reflexão) */
}

/* 
 * Estilos para a Data do Devocional
 * Aumentado o tamanho da fonte e mudado para a cor dourada.
 */
.devocional-date {
    font-size: 1.5em; /* AUMENTADO: Tamanho da fonte da data para destaque */
    color: #C6A66C; /* ALTERADO: Cor dourada suave para a data */
    text-align: center; /* Centraliza o texto da data */
    margin: 0; /* Remove margens padrão para controle total */
    padding-bottom: 10px; /* Adiciona um padding inferior para separar da próxima seção (versículo) */
}

/* 
 * Estilos para a Seção do Versículo Chave
 * Estiliza o bloco que contém a referência e o texto do versículo.
 */
.verse-section {
    background-color: #420d04; /* Fundo vinho mais escuro para este card de versículo */
    border: 1px solid #C6A66C; /* Borda dourada suave */
    border-radius: 8px; /* Cantos arredondados */
    padding: 15px; /* Padding interno */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Sombra suave */
}
/* Estilos para o título (h3) da seção do versículo (referência) */
.verse-section h3 {
    font-size: 1.2em;
    color: #C6A66C; /* Dourado suave */
    margin-top: 0;
    margin-bottom: 10px;
}
/* Estilos para o texto do versículo */
.verse-section .verse-text {
    font-size: 1em;
    line-height: 1.6; /* Espaçamento entre linhas para melhor legibilidade */
    color: #fff;
    margin: 0;
}

/* 
 * Estilos para as Seções de Reflexão e Oração
 * Ambos os blocos são estilizados de forma similar.
 */
.reflection-section, .prayer-section {
    background-color: #420d04; /* Fundo vinho mais escuro para estes cards */
    border: 1px solid #C6A66C; /* Borda dourada suave */
    border-radius: 8px; /* Cantos arredondados */
    padding: 15px; /* Padding interno */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Sombra suave */
}
/* Estilos para os títulos (h3) das seções de reflexão e oração */
.reflection-section h3, .prayer-section h3 {
    font-size: 1.2em;
    color: #C6A66C; /* Dourado suave */
    margin-top: 0;
    margin-bottom: 10px;
}
/* Estilos para o conteúdo de texto dentro das seções de reflexão e oração */
.reflection-section div, .prayer-section div {
    font-size: 1em;
    line-height: 1.6;
    color: #fff;
}
/* Estilos para parágrafos dentro das seções de reflexão e oração */
.reflection-section p, .prayer-section p {
    margin: 0 0 1em 0; /* Margem inferior para separar parágrafos */
}
/* Estilos para o GIF de carregamento (spinner) */
.loading-gif { 
    width: 20px; /* Largura fixa */
    height: 20px; /* Altura fixa */
    vertical-align: middle; /* Alinha verticalmente com o texto */
    margin-right: 5px; /* Espaçamento à direita do GIF */
}


/* 
 * Estilos para a Barra de Navegação Inferior (Footer Fixo)
 * Padrão copiado de outras páginas para consistência.
 */
.bottom-nav {
    position: fixed; /* Fixa o rodapé na parte inferior da viewport */
    bottom: 0; /* Alinha o rodapé à parte inferior */
    left: 0; /* Alinha o rodapé à esquerda */
    width: 100%; /* Ocupa 100% da largura */
    /* Cor de fundo: Semelhante ao conteúdo centralizado, com 95% de opacidade */
    background-color: rgba(30, 0, 0, 0.95); 
    display: flex; /* Habilita Flexbox */
    justify-content: center; /* Centraliza o wrapper interno horizontalmente */
    align-items: center; /* Centraliza o wrapper interno verticalmente */
    padding: 0; /* Remove padding padrão do pai */
    border-top: 1px solid rgba(66, 13, 4, 0.9); /* Borda superior sutil */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3); /* Sombra na parte superior do rodapé */
    z-index: 100; /* Garante que o rodapé fique acima de outros elementos */
    height: 80px; /* Altura fixa do rodapé */
}

/* Estilos para o wrapper interno do rodapé */
.bottom-nav .footer-inner {
    display: flex; /* Habilita Flexbox */
    justify-content: space-around; /* Distribui o espaço igualmente entre os itens de navegação */
    padding: 10px 15px; /* Padding interno do wrapper */
    width: 100%; /* Ocupa toda a largura do .centered-content-wrapper */
    max-width: 480px; /* Limita a largura do conteúdo interno do rodapé */
    box-sizing: border-box;
}

/* Estilos para cada Item de Navegação no Rodapé */
.nav-item {
    display: flex; /* Habilita Flexbox */
    flex-direction: column; /* Coloca ícone e texto um abaixo do outro */
    align-items: center; /* Centraliza ícone e texto horizontalmente */
    text-decoration: none; /* Remove sublinhado de link */
    color: #d7ccc8; /* Cor clara para itens inativos */
    font-size: 0.8em; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    padding: 5px; /* Padding interno para a área de clique */
}
/* Estilos para o ícone dentro do item de navegação */
.nav-item i {
    font-size: 1.4em; /* Tamanho do ícone */
    margin-bottom: 5px; /* Espaçamento abaixo do ícone */
}
/* Estilos para o Item de Navegação ATIVO no Rodapé */
.nav-item.active {
    color: #C6A66C; /* Cor dourada suave para o item ativo */
}


/* 
 * Media Query para Telas Menores (Dispositivos Móveis)
 * Ajustes de responsividade para telas com largura de 500px ou menos.
 */
@media (max-width: 500px) {
    /* Garante que o html/body tenham altura total em mobile para overscroll */
    html, body {
        height: 100%;
    }
    /* Ajustes de padding para o body em mobile */
    body { 
        padding-top: 60px; /* Altura do cabeçalho em mobile */
        padding-bottom: 70px; /* Altura do rodapé em mobile */
    }
    /* Ajustes para o cabeçalho em mobile */
    .header-devocional { height: 60px; }
    .header-devocional .header-inner { padding: 10px 15px; }

    /* Tamanhos dos botões no cabeçalho em mobile */
    .back-arrow { font-size: 1.3em; }
    .home-button { font-size: 1.1em; }

    /* Ajustes de fonte para o título principal em mobile */
    .header-devocional h1 { font-size: 1.1em; }

    /* Container e wrappers em mobile voltam a ser full-width */
    .devocional-content-container,
    .centered-content-wrapper,
    .bottom-nav .footer-inner { 
        max-width: 100%; /* Ocupa a largura total */
        margin-left: 0; /* Remove margens laterais */
        margin-right: 0;
        padding-left: 15px; /* Mantém padding interno */
        padding-right: 15px;
        border-radius: 0; /* Remove bordas arredondadas nas laterais */
        box-shadow: none; /* Remove a sombra */
        background-color: rgba(30, 0, 0, 0.95); /* Fundo escuro para legibilidade */
    }
    /* Ajuste de margem vertical para o container de conteúdo em mobile */
    .devocional-content-container { margin-top: 15px; margin-bottom: 15px; }

    /* Ajustes de fonte para a data do devocional em mobile */
    .devocional-date {
        font-size: 1.2em; /* Reduz um pouco a fonte da data em mobile */
        padding-bottom: 5px; /* Reduz padding em mobile */
    }
    
    /* Ajustes de fonte para títulos de seção em mobile */
    .verse-section h3, .reflection-section h3, .prayer-section h3 { font-size: 1.1em; }
    /* Ajustes de fonte para texto de conteúdo em mobile */
    .verse-section .verse-text, .reflection-section div, .prayer-section div { font-size: 0.9em; }

    /* Ajustes para a barra de navegação inferior em mobile */
    .bottom-nav { padding: 0; } 
    .nav-item { font-size: 0.7em; padding: 3px; }
    .nav-item i { font-size: 1.2em; margin-bottom: 3px; }
}
/* --- END OF FILE devocional.css --- */