/* ==========================================================================
   ANOVA — o rodape.
   --------------------------------------------------------------------------
   (03/09) Arquivo NOVO, so da ANOVA. O css/tema-anova.css ja pinta o rodape de
   verde profundo com texto creme e titulo dourado; aqui entra o que falta para
   chegar na referencia — a forma das colunas, os icones em circulo e o filete
   de baixo.

   Nasceu separado porque o tema ja estava em 937 linhas e o CONVENCOES.md manda
   dividir acima de 400.

   DEPENDE de css/tema-anova.css: os tokens --anova-* e as cores do rodape sao
   declarados la. Carrega DEPOIS dele.
   ========================================================================== */

/* --------------------------------------------------------------------------
   AS CORES, COPIADAS DA REFERENCIA
   --------------------------------------------------------------------------
   (09/09) Os valores desta secao nao sao estimados de print: saem do arquivo de
   referencia da dona (Downloads/lojaAnova/css/loja.css e tokens.css), onde o
   rodape e `background: var(--solido)` = #2c7557, CHAPADO. O tema pintava com um
   degrade #21563f -> #163d2d, bem mais escuro.

   ⚠️ O CUSTO, MEDIDO E ACEITO: sobre #2c7557 NENHUM texto do rodape alcanca o
   minimo de 4,5:1.

     titulo   #d8b579        2,85:1
     texto    branco 72%     3,72:1
     links    branco 75%     3,91:1
     legal    branco 55%     2,84:1

   Nao ha conserto mantendo o verde claro: para um rotulo de 10,5px passar sobre
   ele a cor teria de ser quase branca, e deixaria de ser dourado. A dona
   escolheu a fidelidade a referencia em 09/09, com estes numeros a vista.

   PARA VOLTAR ATRAS: trocar o `background` abaixo por
   `linear-gradient(180deg, var(--anova-verde-800), var(--anova-verde-900))`,
   que era o de antes e passava em todos os itens.
   -------------------------------------------------------------------------- */

.main-footer {
  background: #2c7557;
  /* `padding: 56px 0 0` da referencia (`.rodape`). O de baixo fica com o
     .footer-bottom, que ja tem o seu. */
  padding-top: 56px;
}

/* A referencia usa `--largura: 1280px`; a loja usa `--container: 1360px`. Os
   80px a mais espalham as tres colunas e fazem o texto PARECER menor, embora
   o corpo seja o mesmo 13px dos dois lados — foi o que a dona notou em 09/09.
   O limite vale so dentro do rodape; o resto da loja segue com o container
   dela. */
.main-footer .footer-container,
.main-footer > .container,
.main-footer .footer-grid,
.main-footer .footer-bottom {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   A grade
   --------------------------------------------------------------------------
   A marca ocupa cerca de um terco e as colunas de links dividem o resto. O
   `flex-start` no lugar do `margin-left: auto` que o app.css poe na primeira
   coluna: com duas colunas, empurrar a primeira para a direita jogaria as duas
   para o canto e abriria um vao enorme depois da marca.
   -------------------------------------------------------------------------- */

/* TRES COLUNAS IGUAIS, como na referencia (`.rodape-grade`):
     grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px

   Era flex, com a marca em `1 1 320px` e as colunas em `0 1 220px`. A diferenca
   e visivel: em tres colunas iguais, "Associacao" comeca em 1/3 da largura e
   "Ajuda" em 2/3; em flex com larguras fixas as duas ficavam encostadas uma na
   outra, com um vao grande sobrando a direita. */
/* (10/09) AS COLUNAS PASSAM A TER A LARGURA DO CONTEUDO, E O GRUPO CENTRALIZA.

   Antes eram `repeat(3, minmax(0, 1fr))`: tres faixas iguais de ~400px dentro do
   container de 1280px. O texto de cada uma ocupa bem menos que isso e fica
   encostado a esquerda da propria faixa — resultado: a ultima coluna terminava
   la pelo meio e sobrava um vazio grande a direita, que era o que incomodava.

   Com `auto` cada coluna mede o proprio conteudo, e o `justify-content: center`
   centra as tres como um bloco so. O texto continua alinhado a esquerda DENTRO
   de cada coluna — foi a escolha da dona entre as duas leituras de "centralizar".

   ⚠️ O VAO E `clamp`, E NAO UM NUMERO FIXO. Com colunas do tamanho do conteudo,
   um vao fixo estoura a largura na faixa entre 861px (onde ainda sao TRES
   colunas) e ~1000px, porque o container ja encolheu e o conteudo nao. O clamp
   entrega o valor cheio na tela larga e encolhe sozinho onde apertaria, sem
   precisar de mais um breakpoint para consertar.

   (10/09) DE 80px PARA 180px, e o motivo importa. Trocar as faixas de 400px por
   colunas do tamanho do conteudo APROXIMOU as tres: antes o texto era estreito
   dentro de uma faixa larga, e sobrava mais de 200px entre um bloco e o
   seguinte. Com `auto` e 80px de vao, elas se juntaram — centralizar custou o
   espacamento, que era a outra metade do pedido da dona e acabou desfeita pela
   primeira metade. Os 180px devolvem a distancia e mantem o grupo centrado.

   O bloco de 860px abaixo volta para duas faixas `1fr`; ali o
   `justify-content: center` deixa de ter efeito, porque faixa `1fr` ja ocupa
   toda a largura. Nao precisa ser desfeito. */
.main-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: clamp(60px, 10vw, 180px);
  padding-bottom: 44px;
  align-items: start;
}

/* Vence o `margin-left: auto` que vem no atributo `style` da primeira coluna,
   no index.html compartilhado. Estilo em atributo so cede a `!important` — e
   tirar o atributo mexeria na marcacao das DUAS lojas, que nao e o combinado.
   A Zeleno nao carrega este arquivo, entao continua com o dela.

   O `flex` saiu junto com o layout flex; num item de grid ele nao faz nada. */
.main-footer .footer-col {
  margin-left: 0 !important;
}

/* --------------------------------------------------------------------------
   O LOGO

   ⚠️ O `filter: none` E O CONSERTO DE UM LOGO INVISIVEL, nao um capricho.

   O app.css:859-863 aplica uma pilha de filtros ao .footer-logo que forca a
   imagem para VERDE ESCURO:

     filter: brightness(0) saturate(100%) invert(18%) sepia(38%)
             saturate(1496%) hue-rotate(128deg) brightness(97%) contrast(102%)

   Ela existe para o rodape da ZELENO, que tem fundo claro, e transforma o logo
   dela em verde. Na ANOVA o rodape e verde profundo, e o mesmo filtro pintava o
   logo DOURADO de verde escuro sobre verde: ele sumia por completo — foi o que
   apareceu no preview de 08/09.

   Sem filtro, o PNG entra com as cores originais, que e o que a referencia
   mostra: o dourado sobre o verde. Nao ha versao clara do arquivo no
   repositorio; se um dia houver, e so trocar o src no bloco MARCA:logo-rodape.

   A altura: 34px, o valor da referencia (loja.css `.rodape-logo`). Eu tinha
   posto 58px no olho em 08/09; agora sai do arquivo.
   -------------------------------------------------------------------------- */

/* (10/09) TUDO NO RODAPE CRESCEU ~12%, a pedido da dona. O aumento foi aplicado
   em bloco, e nao item por item no olho: logo, texto, rotulo de coluna, links,
   circulos das redes e a linha do copyright subiram juntos, para nenhuma
   hierarquia inverter. As medidas de origem eram as da referencia; estas sao
   aquelas escaladas.

   O RESPIRO NAO MUDOU. Os links ja tem `padding: 11px 0`, que e alvo de toque
   confortavel — crescer o texto sem crescer o vao e o que aperta menos.

   O CONTRASTE NAO MUDOU, e isso e escolha registrada: o texto e branco a 72%
   sobre o verde, o que da 3,72:1 contra o minimo de 4,5:1 da WCAG. Aumentar a
   fonte NAO altera a razao de contraste — ela nao depende do tamanho, e o limite
   so afrouxa para 3:1 acima de 18px, que nenhum destes alcanca. A dona optou por
   manter a opacidade em 10/09, com o numero na mesa. */
.main-footer .footer-brand .footer-logo {
  height: 42px;
  margin-bottom: 22px;
  filter: none;
}

/* --------------------------------------------------------------------------
   O texto da marca

   13px, altura de linha 1.7 e branco a 72% — os valores da referencia
   (`.rodape-texto`).
   -------------------------------------------------------------------------- */

.main-footer .footer-brand p {
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   Os titulos das colunas
   --------------------------------------------------------------------------
   Viram RÓTULO, e nao titulo: 10px em caixa alta com espacamento largo, como na
   referencia. O tema os deixa em 17px, que competia com o texto da marca ao
   lado e fazia as colunas parecerem tres blocos de mesmo peso.
   -------------------------------------------------------------------------- */

.main-footer .footer-title {
  margin-bottom: 16px;
  font-family: 'Montserrat', system-ui, Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* #d8b579 e o `--marrom-claro` da referencia. Da 2,85:1 sobre o verde novo e
     REPROVA no minimo de contraste; ver o cabecalho da secao de cores, onde a
     escolha esta registrada com os numeros. */
  color: #d8b579;
}

/* --------------------------------------------------------------------------
   Os links

   O respiro vem do `padding` no proprio link, e nao de `margin` no <li> — e
   assim na referencia, e por um motivo pratico: o padding faz parte da AREA DE
   TOQUE. Com 13px de texto e margem no item, o alvo tem a altura da letra;
   com 11px de padding em cima e embaixo ele passa dos 40px que o dedo alcanca
   sem mira.
   -------------------------------------------------------------------------- */

.main-footer .footer-links li {
  margin-bottom: 0;
}

/* (10/09) O vao subiu de 11px para 14px a pedido da dona: entre o texto de um
   link e o do seguinte a distancia passa de 22px para 28px. O padding e o que
   afasta E o que serve de alvo de toque — crescer aqui melhora os dois. */
.main-footer .footer-links a {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
}

.main-footer .footer-links a:hover {
  color: #ffffff;
}

.main-footer .footer-links a:focus-visible {
  outline: 2px solid var(--anova-ouro-claro);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   As redes sociais
   --------------------------------------------------------------------------
   Circulo de contorno, como na referencia. O contorno e o que da area de clique
   ao icone: sem ele, o alvo e o desenho do simbolo, que num toque de dedo e
   pequeno demais.
   -------------------------------------------------------------------------- */

/* 42px e contorno em branco 20%: valores da referencia (`.rodape-social`). */
.main-footer .social-links {
  gap: 10px;
  margin-top: 20px;
}

.main-footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  transition: border-color var(--anova-transicao-r), background var(--anova-transicao-r), color var(--anova-transicao-r);
}

/* Na referencia o circulo INVERTE no hover: fundo branco, icone verde. */
.main-footer .social-links a:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: #2c7557;
}

.main-footer .social-links a:focus-visible {
  outline: 2px solid var(--anova-ouro-claro);
  outline-offset: 3px;
}

.main-footer .social-links a svg {
  width: 21px;
  height: 21px;
}

/* --------------------------------------------------------------------------
   A linha de baixo
   --------------------------------------------------------------------------
   O `border-top` vem no atributo `style` do index.html compartilhado, com um
   verde translucido feito para fundo CLARO — sobre o verde profundo da ANOVA
   ele some. Por isso o `!important`: estilo em atributo nao cede a mais nada, e
   tirar o atributo mexeria na marcacao das duas lojas.
   -------------------------------------------------------------------------- */

.main-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  padding-top: 22px !important;
}

/* 11px em branco 55%, como na referencia (`.rodape-base`). */
.anova-rodape-legal {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

/* Tela estreita: a marca ocupa a linha inteira e vem CENTRADA; "Associação" e
   "Ajuda" dividem a largura em duas colunas. Empilhado em coluna única o rodapé
   vira uma tira que ninguém lê. É o mesmo recorte da referência, inclusive o
   ponto de corte em 860px. */
@media (max-width: 860px) {
  .main-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }

  .main-footer .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .main-footer .footer-brand p {
    max-width: 42ch;
  }

  /* O app.css centraliza os links no celular com `!important`. Aqui eles voltam
     para a esquerda: com o titulo em rotulo curto e a lista logo abaixo,
     centralizar quebra o eixo de leitura das duas colunas. */
  .main-footer .footer-links {
    text-align: left !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-footer .social-links a { transition-duration: 0.01ms; }
}