/* ==========================================
   BLOCO 1: HEADER DA PÁGINA DE TERMOS
   Responsabilidade: Estilizar cabeçalho principal com background e layout
   ========================================== */

/* Cabeçalho da seção de termos com altura proporcional */
.terms-header {
    height: 40vh;
    /* 40% da altura da viewport */

    /* Background com imagem e overlay escuro para legibilidade */
    background-image: url('../imagens/fotos-banner/banner-termos-de-uso.png');
    background-size: cover;
    /* Cobrir toda a área */
    background-position: center;
    /* Centralizar imagem */

    /* Layout flexbox para centralização */
    display: flex;
    align-items: center;
    /* Centralização vertical */
    justify-content: center;
    /* Centralização horizontal */
    text-align: center;
    /* Texto centralizado */

    color: white;
    /* Texto branco */
}

/* ==========================================
   BLOCO 2: CONTEÚDO DO HEADER
   Responsabilidade: Estilizar texto dentro do header
   ========================================== */

/* Container do conteúdo do header com largura máxima */
.terms-header-content {
    max-width: 800px;
    /* Limitar largura para legibilidade */
    padding: 0 20px;
    /* Espaçamento lateral responsivo */
}

/* Título principal do header */
.terms-header-content h1 {
    font-size: 36px;
    /* Tamanho grande para impacto */
    margin-bottom: 15px;
    /* Espaçamento abaixo do título */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Sombra para destaque */
}

/* Parágrafo de descrição do header */
.terms-header-content p {
    font-size: 18px;
    /* Tamanho moderado para descrição */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* Sombra sutil */
}

/* ==========================================
   BLOCO 3: SEÇÃO PRINCIPAL DOS TERMOS
   Responsabilidade: Estilizar container principal do conteúdo
   ========================================== */

/* Seção principal com espaçamento vertical */
.terms-section {
    padding: 60px 0;
    /* Espaçamento vertical superior e inferior */
}

/* Container centralizado com layout em card */
.terms-container {
    max-width: 900px;
    /* Largura máxima para legibilidade */
    margin: 0 auto;
    /* Centralização horizontal */
    background-color: white;
    /* Fundo branco para contraste */
    border-radius: 8px;
    /* Cantos arredondados */
    padding: 40px;
    /* Espaçamento interno generoso */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Sombra sutil para elevação */
}

/* ==========================================
   BLOCO 4: ESTILOS DE TÍTULOS E TEXTO
   Responsabilidade: Hierarquia visual e legibilidade
   ========================================== */

/* Títulos secundários (H2) com cor da marca e decoração */
.terms-container h2 {
    color: var(--primary-color);
    /* Cor definida em variáveis CSS */
    margin-bottom: 20px;
    /* Espaçamento abaixo do título */
    font-size: 24px;
    /* Tamanho consistente */
    padding-bottom: 10px;
    /* Espaçamento interno abaixo */
    border-bottom: 2px solid #f0f0f0;
    /* Linha decorativa sutil */
}

/* Títulos terciários (H3) com cor da marca */
.terms-container h3 {
    color: var(--primary-color);
    /* Cor da marca */
    margin: 30px 0 15px;
    /* Espaçamento generoso */
    font-size: 20px;
    /* Tamanho menor que H2 */
}

/* Parágrafos com espaçamento e cor amigável */
.terms-container p {
    margin-bottom: 15px;
    /* Espaçamento entre parágrafos */
    line-height: 1.7;
    /* Altura de linha para legibilidade */
    color: #555;
    /* Cinza escuro para conforto visual */
}

/* ==========================================
   BLOCO 5: ESTILOS DE LISTAS
   Responsabilidade: Formatação de listas ordenadas e não-ordenadas
   ========================================== */

/* Containers de listas com espaçamento */
.terms-container ul,
.terms-container ol {
    margin-bottom: 20px;
    /* Espaçamento após listas */
    padding-left: 20px;
    /* Indentação das listas */
}

/* Itens de listas com espaçamento e cor */
.terms-container ul li,
.terms-container ol li {
    margin-bottom: 10px;
    /* Espaçamento entre itens */
    color: #555;
    /* Cinza escuro consistente */
    line-height: 1.7;
    /* Altura de linha para legibilidade */
}

/* Lista não-ordenada com marcadores circulares */
.terms-container ul {
    list-style-type: disc;
    /* Marcadores circulares preenchidos */
}

/* Lista ordenada com numeração */
.terms-container ol {
    list-style-type: decimal;
    /* Numeração decimal */
}

/* ==========================================
   BLOCO 6: ESTILOS ESPECIAIS DE TEXTO
   Responsabilidade: Destaques e formatação especial
   ========================================== */

/* Texto em negrito com cor escura */
.terms-container strong {
    color: #333;
    /* Cinza mais escuro para ênfase */
}

/* ==========================================
   BLOCO 7: CAIXAS DE DESTAQUE
   Responsabilidade: Destacar informações importantes
   ========================================== */

/* Caixa de destaque com fundo suave e borda lateral */
.terms-container .highlight {
    background-color: #f9f9f9;
    /* Fundo cinza muito claro */
    padding: 20px;
    /* Espaçamento interno */
    border-left: 4px solid var(--secondary-color);
    /* Borda lateral da cor secundária */
    margin: 20px 0;
    /* Espaçamento vertical */
}

/* Data de última atualização */
.terms-container .last-updated {
    font-style: italic;
    /* Estilo itálico */
    color: #777;
    /* Cinza médio */
    margin-top: 40px;
    /* Espaçamento superior generoso */
    text-align: right;
    /* Alinhamento à direita */
}

/* ==========================================
   BLOCO 8: ÍNDICE/TABLE OF CONTENTS
   Responsabilidade: Navegação rápida pelos termos
   ========================================== */

/* Container do índice com fundo diferente */
.terms-toc {
    background-color: #f9f9f9;
    /* Fundo cinza claro */
    padding: 20px;
    /* Espaçamento interno */
    border-radius: 4px;
    /* Cantos arredondados suaves */
    margin-bottom: 30px;
    /* Espaçamento abaixo */
}

/* Título do índice */
.terms-toc h3 {
    margin-top: 0;
    /* Remover margem superior */
    margin-bottom: 15px;
    /* Espaçamento abaixo */
}

/* Lista do índice sem marcadores */
.terms-toc ul {
    list-style-type: none;
    /* Sem marcadores */
    padding-left: 0;
    /* Sem indentação */
}

/* Itens da lista do índice */
.terms-toc ul li {
    margin-bottom: 8px;
    /* Espaçamento pequeno entre itens */
}

/* Links do índice com animação */
.terms-toc ul li a {
    color: var(--primary-color);
    /* Cor da marca */
    text-decoration: none;
    /* Sem sublinhado padrão */
    transition: color 0.3s;
    /* Animação de mudança de cor */
}

/* Efeito hover nos links do índice */
.terms-toc ul li a:hover {
    color: var(--secondary-color);
    /* Cor secundária no hover */
    text-decoration: underline;
    /* Sublinhado no hover */
}

/* ==========================================
   BLOCO 9: RESPONSIVIDADE MOBILE
   Responsabilidade: Adaptação para dispositivos móveis
   ========================================== */

/* Media query para tablets e smartphones */
@media (max-width: 768px) {

    /* Reduzir tamanho do título no header */
    .terms-header-content h1 {
        font-size: 28px;
        /* Tamanho menor para mobile */
    }

    /* Reduzir tamanho do parágrafo */
    .terms-header-content p {
        font-size: 16px;
        /* Tamanho menor para mobile */
    }

    /* Reduzir padding do container principal */
    .terms-container {
        padding: 20px;
        /* Padding reduzido para economizar espaço */
    }
}