/* RESET E GLOBAL */
body {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 1.5em; 
    line-height: 1.5;
    padding: 0;
    margin: 0;
    /* NOVO: Fundo mais limpo/branco suave */
    background-color: #F0F8FF; /* AliceBlue */
    /* NOVO: Cor de texto que harmoniza com a paleta azul */
    color: #4A4E69;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Removido display: inline-block; para usar Flexbox na navegação */
}

a {
    text-decoration: none;
    /* NOVO: Link padrão com melhor visibilidade */
    color: #457B9D;
}

img {
    /* Geralmente, 100% de largura máxima é melhor para imagens de conteúdo */
    max-width: 100%;
    height: auto;
    border: 0;
}

/* HEADER - MOBILE FIRST (Padrão: Coluna) */
header {
    /* NOVO: Azul Marinho Profundo */
    background: #1D3557;
    color: #f4f4f4;
    padding: 30px 0;
    min-height: 70px;
    /* NOVO: Borda azul médio, contrastando com o fundo */
    border-bottom: #457B9D 3px solid;
}

header h1 {
    margin: 0;
    font-size: 2.0em;
    line-height: 1.2;
}

header .highlight {
    /* NOVO: Cor de destaque mais saturada */
    color: #457B9D;
    font-weight: bold;
}

header nav {
    margin-top: 20px;
    text-align: center;
}

header nav ul {
    /* NOVO: Flexbox para gerenciar o layout da navegação */
    display: flex;
    flex-direction: column; /* MOBILE: Itens empilhados verticalmente */
    gap: 10px; /* Espaço entre os links */
    justify-content: center;
    align-items: center;
}

header li {
    /* Removido o display: block, o Flexbox gerencia isso */
    padding: 0; 
}

header a {
    text-transform: uppercase;
    font-size: 1.1em;
    /* MANTÉM a cor de destaque para links no header */
    color: #457B9D;
    padding: 5px 0; /* Adiciona padding vertical para clique */
}

header a:hover {
    /* NOVO: Hover em cinza claro */
    color: #cccccc;
    font-weight: bold;
}

/* SHOWCASE */
#showcase {
    background: url('https://www.sitec.ind.br/imagens/showcase.jpg') no-repeat center center/cover;
    color: #ffffff;
    padding: 100px 0;
}

/* PLAYLISTS - NOVO: Layout com Flexbox */
#playlists .container {
    display: flex;
    flex-wrap: wrap; /* Permite a quebra de linha para o grid */
    justify-content: space-around; /* Distribui itens no espaço disponível */
    padding: 20px 0;
    gap: 20px; /* Espaço entre os itens */
}

.playlist-item {
    /* MOBILE: Ocupa 100% da largura do contêiner para uma única coluna */
    flex: 1 1 100%; 
    max-width: 400px; /* Define um limite para o tamanho do item */
    text-align: center;
    /* NOVO: Borda mais suave */
    border: 1px solid #C5E0EC;
    padding: 15px;
    background: #ffffff;
    /* NOVO: Sombra baseada na cor escura principal */
    box-shadow: 0 4px 6px rgba(29, 53, 87, 0.1); 
}

.playlist-item h2 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    /* NOVO: Título com cor principal escura */
    color: #1D3557;
}

.playlist-item img {
    /* Ajustado para preencher o item, respeitando o max-width de 100% */
    width: 100%;
    height: auto;
    display: block;
}

.playlist-item a {
    /* NOVO: Link do item com cor principal escura */
    color: #1D3557;
}

/* FOOTER */
footer {
    padding: 20px;
    margin-top: 30px;
    /* NOVO: Texto padrão preto/escuro para melhor contraste */
    color: #000000;
    /* NOVO: Fundo com a cor de destaque para dar um toque de cor */
    background-color: #A8DADC; /* Um ciano mais claro, derivado do destaque */
    text-align: center;
    font-size: 1.1em;
}

footer p {
    font-size: 0.9em;
    margin-bottom: 20px;
}

footer li {
    display: inline;
    padding: 0 10px;
}

footer a {
    /* NOVO: Cor do link no footer com a cor principal escura */
    color: #1D3557;
    font-weight: bold;
    font-size: 1em;
}


/* MEDIA QUERIES - Para Layouts Maiores (Tablet e Desktop) */

/* Layout para telas a partir de 480px (Telas menores/Tablet) */
@media (min-width: 480px) {
    /* Playlists: 2 itens por linha */
    .playlist-item {
        /* (50% da largura do contêiner) - (metade do gap entre eles) */
        flex: 1 1 calc(50% - 20px); 
    }
}

/* Layout para telas a partir de 768px (Tablet Grande/Desktop) */
@media (min-width: 768px) {
    /* Header: Navegação horizontal */
    header nav ul {
        flex-direction: row; 
        gap: 30px; 
    }
    
    /* Header: Alinha marca e navegação (se necessário, usando Flexbox no container) */
    header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; /* Permite a quebra se o espaço for pequeno */
        text-align: left;
    }

    header #branding, header nav {
        margin-top: 0;
    }
    
    /* Índice de Livros: 2 colunas de blocos de testamento */
    .testament-block {
        flex: 1 1 calc(50% - 10px); 
    }
}

/* Layout para telas a partir de 1024px (Desktop) */
@media (min-width: 1024px) {
    /* Playlists: 3 itens por linha */
    .playlist-item {
        /* (33.33% da largura do contêiner) - (dois terços do gap) */
        flex: 1 1 calc(33.33% - 20px); 
    }
    
    /* Índice de Livros: Ajustar colunas de Livros */
    .book-list {
        columns: 3; /* 3 colunas para o Novo Testamento */
    }
    /* Antigo Testamento pode precisar de mais colunas se houver espaço */
    .testament-block:first-child .book-list {
        columns: 4; /* 4 colunas para o Antigo Testamento (39 livros) */
    }
}


/* Estilo para a Data e Hora no Topo */
#data-hora {
    /* NOVO: Define o fundo com a cor principal escura */
    background: #1D3557; 
    color: #f4f4f4; /* Cor do texto claro */
    text-align: center; /* Centraliza o texto */
    padding: 10px 0; /* Adiciona algum espaço vertical */
    font-size: 1.0em; /* Define um tamanho de fonte */
    /* Garante que ocupe 100% da largura */
    width: 100%; 
}

/* --- ESTILOS PARA A NOVA SEÇÃO DE ÍNDICE DE LIVROS (index.html) --- */

#books-index {
    padding: 30px 20px;
    /* NOVO: Fundo levemente azulado para a seção */
    background-color: #F4F8FA; 
    border-top: 1px solid #C5E0EC;
}

#books-index h2 {
    /* Cor principal escura para o título da seção */
    color: #1D3557 !important;
}

.books-grid {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar em telas menores */
    gap: 20px;
    text-align: left; /* Alinha o texto dentro dos blocos */
}

.testament-block {
    /* Define o Novo e Antigo Testamento para ocupar metade do espaço em telas maiores */
    flex: 1 1 100%; 
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    /* NOVO: Sombra sutil com a cor escura */
    box-shadow: 0 2px 5px rgba(29, 53, 87, 0.05);
}

.testament-block h3 {
    /* NOVO: Vermelho Vivo para destacar o título do Testamento */
    color: #E63946; 
    font-size: 1.3em;
    /* Borda mais suave */
    border-bottom: 2px solid #C5E0EC;
    padding-bottom: 10px;
}

.book-list {
    /* Layout de colunas para os nomes dos livros */
    columns: 2; /* 2 colunas padrão */
    list-style: none;
    padding: 0;
    margin-top: 15px;
    font-size: 1em;
}

.book-list li {
    margin-bottom: 5px;
    /* Evita quebra de linha no meio do link */
    break-inside: avoid; 
}

.book-list a {
    /* NOVO: Cor principal escura para os links dos livros */
    color: #1D3557; 
    font-weight: normal;
}

.book-list a:hover {
    /* NOVO: Cor de destaque no hover */
    color: #457B9D; 
    text-decoration: underline;
}

/* Estilo para Responsividade do Vídeo Incorporado (Embed) */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 (Vídeo de YouTube) */
    height: 0;
    overflow: hidden;
    margin: 20px auto;
    max-width: 800px; /* Limite a largura máxima do vídeo */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}