/* ==========================================================================
   secao-rodape.css
   RODAPÉ  ·  #footer  ·  Rafaella

   CSS desta seção e de mais nenhuma. Use sempre os tokens do tokens.css,
   nunca valor solto.
   ========================================================================== */
.rodape a:focus-visible{
   outline-color: var(--color-link-on-dark);
}

.rodape__topo{
   display: grid;
   gap: var(--space-12);
}

.rodape__logo{
   display: block;
}

/* inline-block para o link encolher até o logo. Como <a> é inline e a
   imagem é block, sem isso a caixa do link ocupa a linha inteira do rodapé
   e tanto o clique quanto o anel de foco vazam muito além do logo. */
.rodape__logo a {
   display: inline-block;
}

.rodape__logo img,
.rodape__logo svg {
  width: auto;
  height: var(--space-8);
}

/* Empilhado no mobile. As três colunas entram no desktop: repeat(2, auto)
   valia para toda largura e jogava a terceira para uma segunda linha. */
.rodape__colunas{
   display: grid;
   grid-template-columns: 1fr;
   justify-content: start;
   gap: var(--space-8);
}

.rodape__coluna h3 {
   margin-bottom: var(--space-2);
   font-family: var(--font-family);
   font-size: var(--fs-body);
   line-height: var(--leading-loose);
}

.rodape__coluna a {
   position: relative;
   display: inline-block;
   padding-block: var(--space-2);
   text-decoration: none;
}

/* Mesmo sublinhado que cresce do cabeçalho, em --color-link-on-dark porque
   aqui o fundo é navy. O bottom desconta o padding para o filete encostar
   no texto, como no cabeçalho, que não tem padding. */
.rodape__coluna a::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: var(--space-2);
   width: 0;
   height: var(--stroke-2);
   background-color: var(--color-link-on-dark);
   transition: width var(--duracao-lenta) var(--curva-padrao);
}

.rodape__coluna a:hover {
   color: var(--color-link-on-dark);
}

.rodape__coluna a:hover::after {
   width: 100%;
}

.rodape__base {
   margin-top: var(--space-8);
   font-size: var(--fs-caption);
   line-height: var(--leading-relaxed);
}

@media (min-width: 64rem) {
  .rodape__topo {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
 
  .rodape__colunas {
    grid-template-columns: repeat(3, auto);
    gap: var(--space-16);
  }
}

.rodape__marca p {
  margin-top: var(--space-4);
  max-width: 32ch;
}