/*
 * Rodapé do SEB Education (etapa C5).
 *
 * Porte do bloco `.page__footer` do `main.css` do estático, com as cores e a fonte pelos
 * tokens e **uma simplificação**: o copyright é um elemento só.
 *
 * O original escreve o texto duas vezes -- `.copyrights` no alto da coluna da esquerda e
 * `.copyrights--is-mobile` no fim -- e alterna qual aparece por media query. Aqui o elemento
 * é único e muda de lugar pela ordem do flex, porque texto repetido em dois lugares é texto
 * que um dia vai divergir.
 */

.page__footer {
  background-color: var(--seb-azul);
  padding-top: 70px;
  padding-bottom: 92px;
  /* Os -10px do original: o rodapé encosta na seção anterior. */
  margin-top: -10px;
}

.page__footer .wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  padding: 0 16px;
  margin: 0 auto;
}

.page__footer .footer__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 258px;
  /* `min-height`, e não `height`: o copyright é texto do editor, e numa coluna de 258px um
   * texto mais longo transbordaria uma altura fixa em vez de empurrar. */
  min-height: 400px;
}

.page__footer .logo {
  width: 258px;
  margin-bottom: 32px;
}

.page__footer .logo a,
.page__footer .logo img {
  display: block;
  width: 100%;
}

/* Mesma razão da C2 no header: o `<img>` traz atributo de altura, e sem isto ele venceria
 * a proporção e a logo sairia esticada. */
.page__footer .logo img {
  height: auto;
}

.page__footer .socials {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
}

/*
 * 38x38 é o tamanho **intrínseco** do SVG, e é assim que o original o mostra -- lá o ícone
 * renderiza sem dimensão declarada em lugar nenhum.
 *
 * A dimensão está aqui, e não em atributo do `<img>`, porque o atributo vive no template
 * **compartilhado** do item de menu: o tamanho é decisão do componente que exibe o ícone,
 * não do item. Fixá-la em CSS reserva o espaço no layout do mesmo jeito -- é a convenção do
 * projeto contra salto de layout, documentada na C2 (ver `header.css`), cumprida pela outra
 * ponta.
 */
.page__footer .socials img {
  width: 38px;
  height: 38px;
}

/*
 * O ícone é um SVG escuro sobre fundo azul, então o original o clareia por filtro no hover.
 * Mantido como está: trocar por dois arquivos (normal e hover) seria mais um asset para o
 * mesmo efeito.
 */
.page__footer .socials a:hover img {
  filter: brightness(0) saturate(100%) invert(88%) sepia(23%) saturate(404%)
    hue-rotate(158deg) brightness(96%) contrast(88%);
}

.page__footer .copyrights {
  color: var(--seb-branco);
  font-family: var(--seb-fonte-corpo);
  font-size: 14px;
}

.page__footer .footer__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page__footer .footer__nav a {
  color: var(--seb-branco);
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  transition: all linear 0.15s;
}

.page__footer .footer__nav a:hover {
  color: var(--seb-azul-claro);
}

/*
 * 768px, e não os 1150px do header: aqui o valor do estático se sustenta.
 *
 * O rodapé é uma coluna de logo mais uma de links empilhados, e nada nele depende de caber
 * numa linha -- foi por isso que o header precisou de outro número (ver a C4).
 */
@media (max-width: 768px) {
  .page__footer {
    padding-top: 62px;
    padding-bottom: 42px;
  }

  .page__footer .wrapper {
    flex-direction: column;
    align-items: center;
  }

  .page__footer .footer__content {
    display: contents;
  }

  /* Um espaçamento só: no original o `.heading` continha logo **e** redes, e por isso lá
   * havia dois. Aqui ele tem só a logo. */
  .page__footer .heading {
    margin-bottom: 62px;
  }

  .page__footer .footer__nav {
    align-items: center;
    margin-bottom: 72px;
  }

  /*
   * O copyright vai para o fim, que é onde o original o mostra no mobile -- lá com um
   * segundo elemento, aqui movendo o único que existe. `display: contents` no
   * `.footer__content` acima é o que permite isso: os filhos dele passam a participar do
   * flex do `.wrapper`, então a `order` alcança o parágrafo.
   */
  .page__footer .copyrights {
    order: 3;
    /* Centralizar o **texto**, e não só a caixa: com `display: contents` na coluna, o
     * `align-items: center` do wrapper alinha o parágrafo encolhido, o que não é a mesma
     * coisa quando o texto quebra em duas linhas. */
    text-align: center;
  }
}