/* =====================================================
    ESTILO GERAL E RESET (MOBILE-FIRST)
    Garante consistência e performance em todos os navegadores
===================================================== */
* {
    /* Reseta margens e paddings */
    margin: 0;
    padding: 0;
    /* Inclui padding e borda no cálculo do tamanho total do elemento */
    box-sizing: border-box;
}

/* =====================================================
    FONTE EMBUTIDA PARA FALLBACK/PERFORMANCE (GRÁTIS)
    A fonte 'Tangerine' é carregada localmente, não dependendo de CDN.
===================================================== */
/* A FONTE GOOGLE FOI REMOVIDA DO HTML E INJETADA AQUI */
@import url('https://fonts.googleapis.com/css?family=Tangerine:400,700&display=swap');

/* =====================================================
    ESTILO GLOBAL DO BODY (BASE MOBILE)
===================================================== */
body {
    /* Pilha de fontes moderna para fallback */
    font-family: Arial, Helvetica, sans-serif;
    /* Tamanho de fonte base para mobile */
    font-size: 16px; 
    line-height: 1.6;

    /* Estilo de fundo do site */
    background-color: #d2d2c1;
    background-image: url("/assets/img/fundo.webp");
    background-repeat: repeat;
    color: #333;
}

/* MELHORIA DE ACESSIBILIDADE: Elemento para pular para o conteúdo (escondido por padrão) */
.skip-to-content {
    /* Esconde o link por padrão, mas o mantém acessível para leitores de tela */
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 999;
}

/* ACESSIBILIDADE: Torna o link visível ao ser focado (navegação por teclado) */
.skip-to-content:focus {
    top: 5px;
    left: 5px;
    padding: 10px;
    background-color: #fff;
    border: 2px solid #333;
    text-decoration: none;
}

/* MELHORIA DE ACESSIBILIDADE: Esconde visualmente mas mantém para leitores de tela */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* =====================================================
    CONTAINER PRINCIPAL
    Limitando a largura e centralizando o conteúdo.
===================================================== */
#principal {
    width: 100%; /* Ocupa 100% no mobile */
    margin: 0 auto; /* Centraliza (embora não seja perceptível em 100% de largura) */
    background-color: #fff;
}

/* =====================================================
    IMAGENS GERAIS
===================================================== */
img {
    max-width: 100%;    /* Garante responsividade */
    height: auto;
    display: block;
}

/* =====================================================
    HEADER: Cabeçalho do site
===================================================== */
#cabecalho {
    width: 100%;
}

/* =====================================================
    NAV: Menu de Navegação (Mobile: Hamburguer)
===================================================== */
#menu {
    background-color: #c5c5b2;
    padding: 15px;
    position: relative; /* Necessário para o posicionamento do menu-icon */
}

/* ACESSIBILIDADE: Checkbox oculto */
#menu-toggle {
    display: none;
}

/* Ícone/Label do Menu (Visível apenas no mobile) */
.menu-icon {
    display: block; /* Visível por padrão no mobile */
    text-align: center;
    font-family: 'Tangerine', serif;
    font-size: 36px; /* Tamanho maior para o título/ícone */
    color: #4b566a;
    cursor: pointer;
    font-weight: bold;
    padding: 5px; /* Área de clique maior para mobile */
}

/* Container dos Links (Flexbox moderno para alinhamento) */
.menu-links {
    display: none; /* Escondido por padrão no mobile */
    flex-direction: column;
    align-items: center; /* Centraliza links verticalmente */
    margin-top: 10px;
    gap: 10px; /* Espaçamento entre os links */
}

/* Links de navegação */
#menu a {
    color: #4b566a;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    transition: color 0.3s; /* Transição suave para hover */
}

/* Efeito ao passar o mouse */
#menu a:hover,
#menu a:focus {
    text-decoration: underline;
    color: #828271; /* Cor mais escura ao focar/hover */
    /* ACESSIBILIDADE: Foco visível sempre ativo */
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* Efeito Toggle do Menu (apenas CSS) */
#menu-toggle:checked + .menu-icon + .menu-links {
    display: flex; /* Exibe os links quando o checkbox está marcado */
}


/* =====================================================
    MAIN: Conteúdo Principal
===================================================== */
#conteudo-principal {
    background-color: #e8e8d9;
    padding: 20px;
}

/* Títulos H1 e H2 */
h1 {
    color: #828271;
    font-size: 1.8em; /* H1 maior no mobile */
    margin-bottom: 20px;
    text-align: center; /* Centraliza títulos no mobile */
    border-bottom: 2px solid #c5c5b2; /* Linha de separação */
    padding-bottom: 5px;
}

h2 {
    color: #828271;
    font-size: 1.4em;
    margin-top: 25px;
    margin-bottom: 15px;
}

/* Parágrafos */
p {
    margin-bottom: 15px;
    text-align: justify;
    padding: 0 5px; /* Pequeno padding para melhor leitura nas bordas */
}

/* =====================================================
    ESTILOS ESPECÍFICOS: Campanhas
===================================================== */
/* Container da Campanha */
.campanha-item {
    margin-bottom: 30px;
    padding: 10px;
    border: 1px solid #c5c5b2;
    background-color: #f9f9f9;
}

/* Imagens das Campanhas (uso da tag <figure>) */
.img-campanha-container {
    margin: 15px auto;
    width: 90%; /* Ocupa 90% da largura do container */
    max-width: 500px; /* Limita o tamanho máximo */
    border: 8px solid #c3c3ae;
    display: block; /* Garante que figure seja um bloco */
}

/* Legenda da imagem */
figcaption {
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
    padding-top: 5px;
    color: #666;
}

/* =====================================================
    ESTILOS ESPECÍFICOS: Contato
===================================================== */
.contato-lista {
    list-style: none; /* Remove marcadores da lista */
    padding-left: 0;
    margin-bottom: 20px;
    line-height: 2;
}

.contato-lista a {
    color: #4b566a;
    font-weight: bold;
    text-decoration: none;
}
.contato-lista a:hover,
.contato-lista a:focus {
    color: #828271;
    text-decoration: underline;
}

/* =====================================================
    FOOTER: Rodapé Antigo (Escondido)
===================================================== */
#rodape {
    display: none; 
}

/* =====================================================
    NOVO RODAPÉ AVANÇADO (BASEADO NO MODELO DESEJADO)
    Mobile-First: Conteúdo empilhado, depois 3 colunas no desktop.
===================================================== */
#rodape-avancado {
    background-color: #333; /* Fundo escuro (simulando blackMain) */
    color: #fff; /* Texto branco */
    padding-top: 20px;
}

/* Container que simula a largura máxima do Tailwind (max-w-7xl) */
.rodape-container {
    padding: 20px; /* Padding interno para mobile */
    max-width: 900px; /* Limita a largura ao container principal do site */
    margin: 0 auto;
    display: flex; /* Uso de Flexbox para empilhar no mobile */
    flex-direction: column;
    gap: 30px; /* Espaço entre as colunas no mobile */
    text-align: center; /* Centraliza tudo no mobile */
}

/* Estilo para as Colunas */
.rodape-coluna {
    padding: 10px 0;
}

/* Coluna 1: Logo/Info */
.logo-footer {
    /* Estilo para simular o logo no rodapé (usando a fonte Tangerine) */
    font-family: 'Tangerine', serif;
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
}

.rodape-descricao {
    font-size: 0.9em;
    color: #ccc; /* Cor cinza mais clara */
    margin-bottom: 0;
    text-align: center; /* Mantém centralizado no mobile */
}

/* Coluna 2: Navegação */
.rodape-titulo-nav {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #fff;
}
.rodape-lista-links {
    list-style: none;
    padding: 0;
}
.rodape-lista-links li {
    margin-bottom: 8px; /* Espaço entre os links (simulando space-y-2) */
}
.rodape-lista-links a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}
.rodape-lista-links a:hover,
.rodape-lista-links a:focus {
    color: #ff4500; /* Simula a cor hover:text-redMain (laranja avermelhado) */
    text-decoration: underline;
    outline: none; /* Já temos o foco no link, removemos o padrão feio do browser */
}

/* Coluna 3: Redes Sociais */
.rodape-icones {
    display: flex;
    justify-content: center; /* Centraliza os ícones no mobile */
    gap: 15px; /* Espaço entre os ícones */
    margin-top: 15px;
}
.social-icon {
    display: block;
    width: 35px;
    height: 35px;
    padding: 5px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%; /* Torna o ícone redondo */
    transition: all 0.3s;
}
.social-icon:hover,
.social-icon:focus {
    background-color: #dfd0c7; /* Fundo vermelho ao hover */
    border-color: #533f25;
    color: #a71f7e;
    outline: 3px solid #fff; /* Foco de acessibilidade em branco */
    outline-offset: 2px;
}

/* ESTILO CRUCIAL PARA CENTRALIZAR O ÍCONE DA FONTE */
/* Aplica-se à tag <i> (Font Awesome) dentro do âncora. Usamos .fab para as marcas. */
.social-icon .fab,
.social-icon .fas { 
    /* Garante que o ícone preencha o círculo e fique centralizado verticalmente */
    font-size: 1.2em; /* Tamanho adequado */
    line-height: 25px; /* Centraliza verticalmente o ícone no círculo de 35px (35px de altura - 5px de padding superior - 5px de padding inferior = 25px) */
    text-align: center;
    display: block;
}


/* Sub-Rodapé: Direitos Autorais */
.rodape-direitos {
    text-align: center;
    font-size: 0.85em;
    color: #999; /* Cor cinza escura (simulando text-gray-500) */
    padding: 15px 20px;
    border-top: 1px solid #555; /* Linha de separação (simulando border-gray-700) */
    margin-top: 20px;
}


/* =====================================================
    RESPONSIVIDADE — TABLETS E DESKTOPS (Min-width)
===================================================== */
@media (min-width: 768px) {

    /* CONTAINER PRINCIPAL: Limita a largura para telas maiores */
    #principal {
        max-width: 900px; 
    }

    /* MENU: Estilo de desktop (inline) */
    #menu {
        text-align: center;
    }
    .menu-icon {
        display: none; /* Esconde o ícone de hamburguer */
    }
    .menu-links {
        display: block; /* Exibe os links normalmente */
        text-align: center;
        margin-top: 0;
    }
    #menu a {
        display: inline-block; /* Alinha os links horizontalmente */
        margin: 0 10px; /* Espaçamento entre os links */
    }

    /* CONTEÚDO: Títulos alinhados à esquerda (padrão desktop) */
    h1, h2 {
        text-align: left;
    }

    /* PARÁGRAFOS: Remove o padding de 5px adicionado para mobile */
    p {
        padding: 0;
    }
    
    /* LAYOUT DO RODAPÉ EM 3 COLUNAS (DESKTOP) */
    .rodape-container {
        /* Transforma em 3 colunas no desktop */
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 colunas de largura igual */
        gap: 40px; /* Espaçamento entre as colunas */
        text-align: left; /* Alinha o texto à esquerda (simulando md:text-left) */
        padding: 40px 20px; /* Mais padding no desktop */
    }

    .rodape-descricao {
        text-align: left; /* Alinha a descrição à esquerda */
    }

    .rodape-icones {
        justify-content: flex-start; /* Alinha os ícones à esquerda no desktop */
    }
}