/* Ajuste de dimensões da Liga de Futsal do Amapá.
   ------------------------------------------------------------------
   Este arquivo NÃO faz parte do site copiado. Ele é nosso, carregado
   depois do original, e existe para que o arquivo de origem continue
   byte a byte como estava. Apagar a linha que o carrega no index.html
   devolve o site exatamente ao desenho da origem.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------- abertura
   A tela inicial ocupa a janela inteira: nenhuma fatia da seção seguinte
   aparece antes de rolar.

   Medido em onze larguras, de 390px a 1920px: a abertura sempre começa a
   exatamente 4rem do topo, abaixo da barra de navegação. Por isso a conta
   é a mesma em toda tela, e não um palpite por faixa.

   svh é a altura visível real no celular, descontando a barra do navegador
   que aparece e some. vh vem antes como reserva para navegador antigo. */
.min-h-\[70vh\],
.lg\:min-h-\[80vh\] {
  min-height: calc(100vh - 4rem);
  min-height: calc(100svh - 4rem);
}

/* ---------------------------------------------------------------- telas grandes
   Acima de 1440px os contêineres do site paravam em 1280px e sobrava faixa
   vazia. A raiz em rem escala tipografia, espaçamento e componentes juntos,
   mantendo as proporções do desenho original. */
@media (min-width: 1440px) {
  html { font-size: 17px; }

  .max-w-7xl { max-width: 1600px; }
  .max-w-6xl { max-width: 1400px; }
  .max-w-5xl { max-width: 1200px; }
  .max-w-4xl { max-width: 1040px; }

  .lg\:py-28 { padding-top: 5rem; padding-bottom: 5rem; }
  .lg\:py-24 { padding-top: 4rem; padding-bottom: 4rem; }
}

@media (min-width: 1800px) {
  html { font-size: 18px; }

  .max-w-7xl { max-width: 1780px; }
  .max-w-6xl { max-width: 1520px; }
  .max-w-5xl { max-width: 1320px; }
  .max-w-4xl { max-width: 1120px; }

  .lg\:py-28 { padding-top: 5.5rem; padding-bottom: 5.5rem; }
}

/* Em janela baixa o respiro da abertura encolhe, para o conteúdo caber sem
   empurrar a seção seguinte para dentro da tela. */
@media (max-height: 780px) {
  .lg\:py-28 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .py-16     { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* Este arquivo não introduz nenhuma animação, então quem pede menos
   movimento continua sendo respeitado pelo desenho original. */

/* ---------------------------------------------------------------- marca
   O brasão antigo trazia o nome da Liga escrito dentro dele. O novo é só o
   escudo, e o nome virou arte própria, ao lado. São dois arquivos:

     /midia/lfa-brasao.png    escudo, sem texto
     /midia/lfa-logotipo.png  "LIGA DE FUTSAL DO AMAPÁ" em letra metálica

   A troca é feita aqui, e não no arquivo copiado, pela mesma razão de sempre:
   a origem continua intacta e reversível.

   O escudo é trocado por `content`, que substitui a imagem que a tag pinta sem
   mexer no atributo `src`. Como o seletor é o próprio endereço da imagem, a
   troca vale de uma vez nos treze lugares onde o brasão antigo aparece:
   cabeçalho, rodapé, entrada, cadastro, recuperação e redefinição de senha, a
   barra lateral da plataforma e o painel do atleta.

   Nas telas de acesso o nome da Liga já vem escrito abaixo do escudo, então
   trocar pelo escudo sem texto não deixa nada sem identificação. */
img[src="/midia/edae70758_Untitleddesign.png"] {
  content: url("/midia/lfa-brasao.png");
}

/* O bloco do nome escrito. Vem depois do escudo, e é o último filho do link.

   O tamanho muda por faixa porque a barra tem espaço diferente em cada uma.
   Tudo abaixo foi medido no navegador, não estimado. Larguras úteis da barra,
   descontando o respiro lateral, contra a soma de marca, menu e botão:

   | Tela   | Cabe  | Origem precisa | Sobra na origem |
   | 1024px | 960px | 1041px         | falta 81px      |
   | 1152px | 1088px| 1053px         | 35px            |
   | 1280px | 1216px| 1053px         | 163px           |

   Ou seja: em 1024px o desenho de origem já não cabe, e o botão ENTRAR fica
   cortado. Isso é defeito da origem, não desta folha. Na faixa de 1024px a
   1151px o logotipo sai de cena e fica só o escudo, o que devolve 16px de
   folga e faz o botão voltar a caber. */
header nav a[href="/"] > div:last-child {
  width: 10rem;
  height: 3.42rem;
  background: url("/midia/lfa-logotipo.png") left center / contain no-repeat;
}

/* Abaixo de 640px a origem escondia o nome e deixava só o escudo. A diretoria
   pediu as duas peças da marca também no celular, e cabe: a barra tem 358px
   úteis em 390px de tela, e a marca inteira ocupa 210px, contando o botão do
   menu do outro lado. */
@media (max-width: 639px) {
  header nav a[href="/"] > div:last-child {
    display: block;
    width: 8.25rem;
    height: 2.82rem;
  }
}

/* As duas linhas de texto, "LFA" e "FUTSAL AMAPÁ", dão lugar ao logotipo. O
   texto não é apagado, é empurrado para fora da caixa e cortado: some da tela e
   continua existindo para quem usa leitor de tela. */
header nav a[href="/"] > div:last-child {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* Faixa em que a barra não comporta a marca inteira. Só o escudo. */
@media (min-width: 1024px) and (max-width: 1151px) {
  header nav a[href="/"] > div:last-child {
    display: none;
  }
}

/* A barra volta a caber, mas ainda sem folga para o logotipo em tamanho cheio. */
@media (min-width: 1152px) and (max-width: 1279px) {
  header nav a[href="/"] > div:last-child {
    width: 6rem;
    height: 2.05rem;
  }
}

/* De 1280px em diante sobra espaço e o nome entra em tamanho cheio. */
@media (min-width: 1280px) {
  header nav a[href="/"] > div:last-child {
    width: 10.25rem;
    height: 3.5rem;
  }
}

/* ---------------------------------------------------------------- rodapé
   O rodapé repete o mesmo par do cabeçalho: escudo antigo com o nome escrito
   ao lado. Mesma troca, mesma técnica.

   A diferença é que aqui o bloco do nome tem duas linhas, "LIGA DE FUTSAL DO
   AMAPÁ" e "PORTAL FUTSAL". Só a primeira dá lugar ao logotipo, porque é ela
   que o logotipo diz. A segunda continua escrita, onde sempre esteve. */
footer .items-center.gap-3.mb-5 > div > div:first-child {
  width: 12rem;
  height: 4.1rem;
  background: url("/midia/lfa-logotipo.png") left center / contain no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* Abaixo de 640px o rodapé aperta, e o logotipo acompanha. */
@media (max-width: 639px) {
  footer .items-center.gap-3.mb-5 > div > div:first-child {
    width: 9rem;
    height: 3.08rem;
  }
}