@import url('./00_globals.css');

/* ========================================
   RODAPÉ (FOOTER)
   Seção final com informações e links
   ======================================== */

/* ==========================================
   CONTAINER FOOTER - ESTRUTURA PRINCIPAL
   Layout e dimensionamento do rodapé
   ========================================== */

/* Footer - Container Principal
   Estrutura base do rodapé
   - display: flex + justify-content: space-between distribui elementos
   - flex-wrap: wrap permite quebra de linha
   - margin-top: 60px espaçamento superior
   - padding-top: 30px espaçamento interno superior
   - border-top: 1px solid #333 linha de separação
*/
footer {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-top: 60px;
   /* usar o fundo do footer para cobrir a largura inteira */
   background: var(--primary);
   padding: 28px 0; /* controla espaçamento vertical global */
   border-top: none;
}

/* ==========================================
   CONTEÚDO DO FOOTER
   Organização interna dos elementos
   ========================================== */

/* Footer Content - Container de Conteúdo
   Agrupa elementos dentro do footer
   - text-align: center centraliza conteúdo
   - margin-bottom: 10px espaçamento inferior
   - padding: 20px espaçamento interno
   - display: flex + justify-content: space-between distribui elementos
   - align-items: center alinha verticalmente
*/
.footer-content {
    text-align: center;
    margin-bottom: 10px;
    padding: 20px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--borderRadius-padrao);
}

/* ==========================================
   SEÇÃO MENSAGEM
   Texto e informações principais
   ========================================== */

/* Mensagem - Parágrafo
   Texto principal do footer
   - font-size: --texto-Tamanho-Sub tamanho menor
   - color: --texto-cor-padrao cor padrão
   - transition: --transicao-padrao anima mudanças
*/
#mensagem p {
    font-size: var(--texto-Tamanho-Sub);
    color: var(--texto-cor-padrao);
    transition: var(--transicao-padrao);
}

/* Mensagem - Parágrafo Hover State
   Interação ao passar mouse
   - color: #aaa cinza claro
*/
#mensagem p:hover {
    color: #aaa;
}

/* ==========================================
   SEÇÃO ÍCONES SOCIAIS
   Links e imagens de redes sociais
   ========================================== */

/* Ícones Footer - Container
   Organiza ícones sociais
   - display: flex layout horizontal
   - justify-content: flex-end alinha à direita
   - gap: 10px espaçamento entre ícones
*/
#iconesFooter {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Ícones Footer - Links
   Estilo dos links para redes sociais
   - display: flex centraliza conteúdo
   - align-items: center + justify-content: center alinhamento
   - transition: --transicao-padrao anima mudanças
*/
#iconesFooter a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicao-padrao);
}

/* Ícones Footer - Link Hover State
   Interação ao passar mouse
   - transform: scale(1.1) aumenta 10%
*/
#iconesFooter a:hover {
    transform: scale(1.1);
}

/* Ícones Footer - Imagens
   Estilo das imagens de ícones
   - width/height: 30px tamanho dos ícones
   - opacity: 0.85 ligeiramente transparente
   - transition: opacity 0.3s anima opacidade
*/
#iconesFooter a img {
   width: 56px;
   height: 56px;
   opacity: 0.98;
   transition: opacity 0.18s ease-out, transform 0.18s ease;
}

/* Ícones Footer - Imagem Hover State
   Aumenta opacidade ao passar mouse
   - opacity: 1 fica totalmente opaco
*/
#iconesFooter a:hover img {
    opacity: 1;
}

/* ==========================================
   SEÇÃO DIREITOS AUTORAIS
   Informações de copyright
   ========================================== */

/* Direitos - Parágrafo
   Texto de copyright e direitos
   - font-size: 0.75rem tamanho muito pequeno
   - color: --texto-cor-padrao cor padrão
   - transition: --transicao-padrao anima mudanças
*/
#direitos p {
    font-size: 0.75rem;
    color: var(--texto-cor-padrao);
    transition: var(--transicao-padrao);
}

/* Direitos - Parágrafo Hover State
   Interação ao passar mouse
   - color: #aaa cinza claro
*/
#direitos p:hover {
    color: #aaa;
}

/* ==========================
   CORES DO RODAPÉ (IMPORTADAS DE style.css)
   Apenas declarações de cor - mantidas separadas aqui
   ========================== */
.rodape { background-color: transparent; border-top: none; }
.rodape-info h3 { color: var(--neutral-white); }
.rodape-info p { color: rgba(255,255,255,0.92); }
.rodape a { color: var(--secondary); }
.rodape a:hover { color: var(--neutral-white); }
.rodape-copy { color: rgba(255,255,255,0.86); }
.rodape-social-center a { background: rgba(255,255,255,0.06); }
.rodape-social-center a[href*="instagram"] { background: var(--social-instagram); }
.rodape-social-center a[href*="facebook"] { background: var(--social-facebook); }
.rodape-social-center a[href*="wa.me"] { background: var(--social-whatsapp); }
.rodape-social-center a[href^="mailto:"] { background: linear-gradient(90deg, var(--primary) 0%, var(--support-azul) 100%); }
.rodape-social a[href^="mailto:"] svg { color: var(--neutral-white); }
.rodape-social a[href^="mailto:"] svg path,
.rodape-social a[href^="mailto:"] svg line { stroke: var(--neutral-white) !important; }

/* ===== Copiado de css/style.css: regras estruturais e de compatibilidade do rodapé ===== */
.rodape {
   /* seção interna do rodapé; background definido no elemento <footer> para garantir largura total */
   padding: 0 60px; /* mantém espaçamento horizontal interno */
   margin-top: 0;
   display: block;
}

.rodape-inner {
   width: 85%;
   margin: 0 auto;
   max-width: 1200px;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   gap: 12px;
   align-items: center;
}

.rodape-info {
   padding-left: 10px;
   max-width: 480px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   justify-self: start;
}
.rodape-info h3 { margin: 0 0 6px 0; font-size: 1.12rem; }
.rodape-info p { margin: 6px 0; font-size: 0.96rem; }

.rodape-social-center {
   display: flex;
   gap: 12px;
   align-items: center;
   justify-self: center;
}

.whats-flutuante { z-index: 140; }

.rodape-social-center a {
   width: 56px;
   height: 56px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   box-shadow: 0 6px 20px rgba(0,0,0,0.12);
   transition: transform 0.18s ease, box-shadow 0.18s ease;
   overflow: hidden;
   flex: 0 0 auto;
}

.rodape-social-center a img { width: 40px; height: 40px; display:block; object-fit:contain; margin:0 auto; }

.rodape-social-center a[href*="instagram"] { border-radius: 50%; }
.rodape-social-center a[href*="facebook"] { border-radius: 50%; }
.rodape-social-center a[href*="wa.me"] { border-radius: 50%; }
.rodape-social-center a[href^="mailto:"] { border-radius: 50%; }

.rodape-social-center a { line-height: 0; }
.rodape-social-center a img { display: block; }

.rodape-social-center a:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.18); }

.rodape-copy {
   text-align: right;
   color: rgba(255,255,255,0.82);
   font-size: 0.9rem;
   line-height: 1.35;
   max-width: 420px;
   justify-self: end;
   padding-right: 8px;
   opacity: 0.95;
}

/* Compatibilidade: IDs usados no HTML original */
#mensagem p { font-size: var(--texto-Tamanho-Sub, 1rem); color: rgba(255,255,255,0.92); transition: var(--transition); }
#mensagem p:hover { color: rgba(255,255,255,0.8); }

#iconesFooter { display:flex; justify-content:center; gap:10px; }
#iconesFooter a { display:flex; align-items:center; justify-content:center; transition: var(--transition); }
#iconesFooter a:hover { transform: scale(1.1); }
#iconesFooter a img { width:56px; height:56px; opacity:0.98; transition: opacity 0.18s ease-out, transform 0.18s ease; }
#iconesFooter a:hover img { opacity:1; }

#direitos p { font-size: 0.75rem; color: rgba(255,255,255,0.86); transition: var(--transition); }
#direitos p:hover { color: rgba(255,255,255,0.8); }

/* Link dentro da área de direitos: manter herança de cor e sublinhado padrão */
.rodape #direitos a {
   color: inherit;
   text-decoration: underline;
}

@media (max-width: 800px) {
   .rodape { padding: 22px 24px; padding-bottom: 84px; }
   .rodape-inner { grid-template-columns: 1fr; gap: 12px; }
   .rodape-copy { text-align: left; margin-top: 12px; justify-self: start; }
   .rodape-social-center { justify-self: start; margin: 10px 0; }
}

/* Fim – regras movidas de css/style.css */

/* ===== Layout principal do rodapé: grid 3-colunas ===== */
.rodape { background-color: var(--primary); padding: 28px 0; }
.rodape .footer-content {
   width: 100%;
   max-width: 1200px; /* limita o conteúdo centralizado */
   margin: 0 auto;
   padding: 0 60px; /* espaçamento horizontal interno */
   box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 16px;
}

/* Garantir que a seção interna (.caixa-conteudo.rodape) não limite a largura do footer */
.caixa-conteudo.rodape {
   width: 100%;
   margin: 0;
   padding: 0;
   background: transparent;
}

/* Forçar o elemento footer/perfil-container a ocupar 100% da viewport */
.perfil-container, footer.perfil-container {
   width: 100%;
}
.rodape .mensagem { justify-self: start; }
.rodape #iconesFooter { justify-self: center; display: flex; gap: 12px; align-items: center; }
.rodape #iconesFooter a { display: inline-flex; align-items: center; justify-content: center; }
.rodape #direitos { justify-self: end; text-align: right; }

/* Remover borda escura padrão do footer (linha cinza) e usar borda sutil definida em .rodape quando necessário */
footer { border-top: none; }

/* Responsivo: empilha em mobile */
@media (max-width: 800px) {
   .rodape .footer-content { grid-template-columns: 1fr; gap: 10px; text-align: center; }
   .rodape #direitos { justify-self: center; text-align: center; margin-top: 8px; }
   .rodape .mensagem { justify-self: center; }
}

/* Reaplicar estilo de ícones circulares e coloridos no rodapé (movido de style.css) */
.rodape-social a {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: transform 0.18s ease, box-shadow 0.18s ease;
   color: var(--neutral-white);
   overflow: hidden;
   border: none;
}
.rodape-social a img { width: 36px; height: 36px; max-width: none; display: block; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.14)) contrast(1.06); opacity: 1; }
.rodape-social a svg { width: 22px; height: 22px; color: var(--neutral-white); fill: currentColor; }

.rodape-social a[href*="instagram"] { background: var(--social-instagram); }
.rodape-social a[href*="facebook"] { background: var(--social-facebook); }
.rodape-social a[href*="wa.me"] { background: var(--social-whatsapp); }
.rodape-social a[href^="mailto:"] { background: linear-gradient(90deg, var(--primary) 0%, var(--support-azul) 100%); }

/* Ajustes específicos para o ícone de email (inline SVG) */
.rodape-social a[href^="mailto:"] svg {
   width: 16px;
   height: 16px;
   display: block;
}
.rodape-social a[href^="mailto:"] svg path,
.rodape-social a[href^="mailto:"] svg line {
   stroke-width: 1.4 !important;
   stroke-linecap: round;
   stroke-linejoin: round;
   fill: none !important;
   filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.rodape-social a:hover { transform: translateY(-3px) scale(1.03); }

.rodape a { text-decoration: none; }

.rodape-copy { text-align: right; font-size: 0.95rem; line-height: 1.35; } 

/* Padrão decorativo de patinhas cobrindo todo o rodapé */
.rodape { position: relative; overflow: visible; }
.rodape::before {
   content: "";
   position: absolute;
   inset: 0; /* cobre todo o elemento .rodape */
   background-image: url("../img/patinhas.png");
   background-repeat: repeat;
   background-position: center center;
   background-size: auto 64px; /* escala das patinhas */
   opacity: 0.06; /* suficientemente sutil para garantir legibilidade */
   pointer-events: none;
   z-index: 1;
}
.rodape .footer-content { position: relative; z-index: 2; }

@media (max-width: 800px) {
   .rodape::before { background-size: auto 40px; opacity: 0.08; }
}