/* A BARRA DO TOPO, uma só para o site inteiro.
 *
 * Carregada pela tela de entrar (index.html) E pelas páginas públicas
 * (ver gerar_paginas.py). Arquivo próprio, e não um bloco dentro do
 * style.css ou do paginas.css, porque a barra é a única coisa que as duas
 * pontas dividem: escrita nos dois arquivos, ela começaria igual e
 * terminaria com dois visuais parecidos que ninguém lembra de sincronizar
 * — e a primeira versão já tinha chegado nisso, com uma barra de "Criar
 * conta / Instalar" no login e outra de seis links nas páginas.
 *
 * O comportamento (gaveta e submenu) mora igualmente num arquivo só,
 * src/navDoSite.js.
 *
 * A DIVISÃO DOS DOIS LADOS: à esquerda o que a barra existe para
 * destacar (criar conta, baixar), à direita a consulta e a comunidade
 * (Sobre o jogo, Discord).
 *
 * E o que a barra precisa resolver, em uma linha: a logo fica no CENTRO
 * DA TELA, e por isso as duas colunas laterais da grade têm a mesma
 * largura — o espaço que um lado pede é cobrado também do outro. Foi o
 * que derrubou a versão com seis links soltos: eles somavam 465px, a
 * barra só cabia inteira a partir de ~1190px, e num notebook comum os
 * links encostavam na logo. Agrupá-los sob "Sobre o jogo" é o que liberou
 * o espaço para os dois botões de destaque.
 */

:root {
  --nav-altura: 86px;
  --nav-fonte: "Fredoka", "Comic Sans MS", "Segoe UI", sans-serif;
  /* UM CURSOR SÓ PARA O SITE INTEIRO: a seta do jogo, o mesmo arquivo
     que o style.css usa.
     Não existe mãozinha aqui, nem a do jogo nem a do navegador — decisão
     explícita do dono. Dentro do JOGO a mãozinha continua marcando o que
     é clicável (o style.css tem dezenas de regras assim); no site, não:
     passar o mouse num botão não troca o cursor, e o que diz que ele é
     clicável é o próprio botão.
     Definido aqui e não herdado porque esta folha também é carregada
     pelas páginas públicas, que não carregam o style.css — e uma barra
     que muda de cursor conforme a página é a barra parecendo duas. Os
     caminhos são relativos a ESTE arquivo (css/), então valem nas duas
     pontas. O segundo arquivo é a versão de 32px, para Windows com
     escala grande, com o mesmo ponto quente reescalado. */
  --cursor-seta: url('../interface/seta_seta_cursor.png') 20 2,
    url('../interface/seta_seta_cursor32.png') 11 1, auto;
}

#site-nav {
  position: sticky;
  top: 0;
  z-index: 110;
}
#site-nav-barra {
  cursor: var(--cursor-seta);
  min-height: var(--nav-altura);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(12px, 3vw, 28px);
  /* Viga de madeira, a mesma família do resto do jogo: marrom escuro com
     a borda mais escura embaixo e a sombra dura por baixo dela. A linha
     clara de dentro é o que dá o volume — sem ela o retângulo fica
     chapado contra o céu do papel de parede. */
  background: linear-gradient(180deg, rgba(104, 66, 37, 0.96) 0%, rgba(74, 45, 24, 0.96) 100%);
  border-bottom: 4px solid #3f2715;
  box-shadow: inset 0 2px 0 rgba(255, 226, 184, 0.22), 0 6px 0 rgba(0, 0, 0, 0.16),
    0 14px 32px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
}

/* ---------- logo ---------- */
#site-nav-logo {
  cursor: var(--cursor-seta);
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
#site-nav-logo img {
  height: clamp(40px, 6vw, 66px);
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.14s ease;
}
#site-nav-logo:hover img {
  transform: translateY(-2px) scale(1.03);
}

/* ---------- lado esquerdo: as duas chamadas ---------- */
#site-nav-acoes {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

/* ---------- lado direito: "Sobre o jogo" + Discord ---------- */
#site-nav-gaveta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-nav-sub-grupo {
  position: relative;
}
.site-nav-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #ffe9c4;
  font-family: var(--nav-fonte);
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.45);
  cursor: var(--cursor-seta);
  white-space: nowrap;
}
/* A setinha é desenhada, não é um caractere: "▾" muda de tamanho e de
   posição conforme a fonte que o aparelho tiver, e num item de menu isso
   aparece. */
.site-nav-sub::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.16s ease;
}
.site-nav-sub:hover,
.site-nav-sub[aria-expanded='true'] {
  background: rgba(255, 233, 196, 0.18);
}
.site-nav-sub[aria-expanded='true']::after {
  transform: rotate(180deg);
}
.site-nav-sub-lista {
  position: absolute;
  top: calc(100% + 10px);
  /* Ancorada à DIREITA porque o grupo agora vive no lado direito da
     barra: com left:0 ela cresceria para fora da tela numa janela justa,
     e a rolagem horizontal que aparece por causa disso é daquelas que
     ninguém encontra a origem depois. */
  right: 0;
  min-width: 230px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: linear-gradient(180deg, #fff3d9 0%, #ffe4ad 100%);
  border: 4px solid #6b4423;
  border-radius: 16px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2), 0 16px 30px rgba(0, 0, 0, 0.35);
  /* Fechado sai do fluxo de toque de vez: só baixar a opacidade deixaria
     um retângulo invisível roubando o clique de quem mira o que está
     embaixo da barra. */
  transform-origin: top right;
  transform: scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.site-nav-sub-grupo.aberto .site-nav-sub-lista {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
/* A PONTE SOBRE O VÃO.
   Os 10px entre o botão e a lista são só respiro visual, mas para o mouse
   eram um buraco: ao descer em direção ao primeiro item o ponteiro saía do
   grupo, o mouseleave disparava e o menu fechava na cara de quem ia
   clicar. Este retângulo invisível cobre exatamente esse vão. Ele é um
   filho da lista, então o ponteiro continua "dentro" do grupo enquanto o
   atravessa — que é o que o mouseleave olha.
   Só existe com o menu ABERTO: fechado, ele seria uma faixa invisível
   roubando o clique de quem mira o que está logo abaixo da barra. */
.site-nav-sub-grupo.aberto .site-nav-sub-lista::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}
.site-nav-sub-lista a {
  cursor: var(--cursor-seta);
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #5b3d20;
  font-family: var(--nav-fonte);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-sub-lista a:hover,
.site-nav-sub-lista a:focus-visible {
  background: rgba(107, 68, 35, 0.12);
}
.site-nav-sub-lista a[aria-current='page'] {
  background: rgba(107, 68, 35, 0.18);
  cursor: var(--cursor-seta);
}

#site-nav-direita {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
/* Os dois botões de destaque e o do Discord são o mesmo botão de apertar
   do resto do jogo: borda grossa, sombra DURA embaixo, e no :active ele
   afunda encurtando a sombra em vez de mudar de cor. */
.site-nav-cta,
.site-nav-baixar,
#site-nav-discord {
  cursor: var(--cursor-seta);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 14px;
  font-family: var(--nav-fonte);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.site-nav-cta {
  border: 3px solid #4f7d22;
  background: linear-gradient(180deg, #9ccc65 0%, #6ea832 100%);
  box-shadow: 0 4px 0 #4f7d22, 0 8px 14px rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
.site-nav-baixar {
  border: 3px solid #7a4a1e;
  background: linear-gradient(180deg, #ffe3ac 0%, #f0c274 100%);
  box-shadow: 0 4px 0 #7a4a1e, 0 8px 14px rgba(0, 0, 0, 0.25);
  color: #5b3d20;
}
#site-nav-discord {
  position: relative;
  border: 3px solid #2f379b;
  background: linear-gradient(180deg, #7b83f7 0%, #4d57ce 100%);
  box-shadow: 0 4px 0 #2b3390, 0 8px 14px rgba(0, 0, 0, 0.3);
  color: #fff;
}
#site-nav-discord svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}
.site-nav-cta:hover,
.site-nav-baixar:hover,
#site-nav-discord:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.site-nav-cta:active,
.site-nav-baixar:active,
#site-nav-discord:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
/* A cópia que só existe para a gaveta do celular (ver o comentário no
   HTML). display:none e não visibility: assim ela some também para o
   leitor de tela, que senão anunciaria "Criar conta" duas vezes. */
.na-gaveta {
  display: none;
}

/* ---------- botão do menu ---------- */
#site-nav-menu {
  grid-column: 1;
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 3px solid #3f2715;
  border-radius: 12px;
  background: linear-gradient(180deg, #a9743f 0%, #8a5a2c 100%);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  cursor: var(--cursor-seta);
}
#site-nav-menu span {
  display: block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: #ffe9c4;
  transition: transform 0.18s ease, opacity 0.14s ease;
}
/* Aberto, os três traços viram um X — é o que diz que o mesmo botão
   fecha. */
#site-nav-menu[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#site-nav-menu[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
#site-nav-menu[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
#site-nav-menu:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* ---------- gaveta ----------
   800px, MEDIDO e não escolhido no olho: o lado esquerdo pede 210px
   ("Criar conta" + "Baixar") e o direito 269px ("Sobre o jogo" +
   Discord); como as duas colunas da grade são iguais, o maior manda nos
   dois, e com a logo no meio a barra inteira fecha em 740px. Em 800
   sobram ~30px de respiro de cada lado da logo, que é o menor vão que
   ainda parece proposital.
   Abaixo disso, tudo o que não é logo nem Discord desce para a gaveta. */
@media (max-width: 800px) {
  #site-nav-menu {
    display: flex;
  }
  /* Os botões de fora somem; quem aparece são as cópias da gaveta. */
  #site-nav-acoes {
    display: none;
  }
  /* Ancorada à ESQUERDA mesmo com o grupo morando à direita no
     computador: no celular quem abre é o hambúrguer, e ele fica na
     esquerda. A gaveta tem que sair de baixo do botão que a abriu. */
  #site-nav-gaveta {
    position: absolute;
    top: calc(var(--nav-altura) + 8px);
    left: clamp(12px, 3vw, 28px);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 230px;
    padding: 10px;
    background: linear-gradient(180deg, #fff3d9 0%, #ffe4ad 100%);
    border: 4px solid #6b4423;
    border-radius: 16px;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2), 0 16px 30px rgba(0, 0, 0, 0.35);
    transform-origin: top left;
    transform: scale(0.94);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
  }
  #site-nav-gaveta.aberto {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  /* Dentro da gaveta o submenu não se abre nem se fecha: já está aberto,
     e o botão vira só o título do grupo. Um menu que abre outro menu
     dentro de uma gaveta é um toque a mais para chegar no mesmo lugar. */
  .site-nav-sub {
    width: 100%;
    padding: 4px 8px 6px;
    color: #8a6a45;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-shadow: none;
    pointer-events: none;
    cursor: var(--cursor-seta);
  }
  .site-nav-sub::after {
    display: none;
  }
  /* Sem vão para atravessar aqui dentro: a ponte do computador não faz
     sentido numa lista que já está encostada. */
  .site-nav-sub-grupo.aberto .site-nav-sub-lista::before {
    display: none;
  }
  .site-nav-sub-lista {
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .na-gaveta {
    display: inline-flex;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  :root {
    /* 58 e não 66: a barra é enfeite comparada ao que está embaixo dela
       num celular baixo — ver a nota de conversão no #auth-overlay do
       style.css. A logo continua legível nesta altura (40px de arte). */
    --nav-altura: 58px;
  }
  /* O comprimido do Discord vira só o ícone: o texto ao lado da logo e do
     botão de menu é o que fazia os três se encostarem numa tela de 360px.
     O rótulo continua existindo para o leitor de tela. */
  #site-nav-discord {
    padding: 10px;
    gap: 0;
  }
  #site-nav-discord span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #site-nav-discord svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 380px) {
  #site-nav-logo img {
    height: 40px;
  }
}