/* =========================================================================
   Navegação principal do Observatório de Taxas.

   Folha compartilhada por todas as páginas. O HTML do header é estático,
   replicado em cada página por scripts/sync_nav.py a partir do bloco
   canônico em docs/partials/nav.html — nada aqui depende de JavaScript.

   A paleta não é nova: as custom properties abaixo apontam para os tokens
   que as páginas já declaram (--cofre, --papel, --linha, --maxw), com o
   valor literal como fallback para as páginas que não declaram todos.
   Substituição de custom property é preguiçosa, então a ordem de carga
   entre esta folha e o <style> inline da página não importa.
   ========================================================================= */

:root {
  --altura-nav: 56px;

  --nav-fundo: var(--cofre, #0E1210);
  --nav-texto: var(--papel-70, rgba(233, 230, 220, .70));   /* 7,9:1 sobre o cofre */
  --nav-texto-ativo: var(--papel, #E9E6DC);
  --nav-linha: var(--linha, rgba(233, 230, 220, .14));
  --nav-destaque: #F0A32F;                                  /* âmbar do Radar */
}

/* Páginas do Radar: só as cores mudam. Estrutura, ordem e comportamento
   do header são idênticos aos do resto do site. */
body.tema-radar {
  --nav-fundo: #16191E;
  --nav-texto: #97A1AD;                                     /* 6,7:1 sobre a carcaça */
  --nav-texto-ativo: #E6E9EC;
  --nav-linha: rgba(230, 233, 236, .13);
}

/* Âncoras não podem aterrissar embaixo do header grudado. Um só lugar
   define a folga, derivada da própria altura do nav. */
[id] { scroll-margin-top: calc(var(--altura-nav) + 16px); }

.nav-site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-fundo);
  border-bottom: 1px solid var(--nav-linha);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nav-caixa {
  position: relative;
  height: var(--altura-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0 clamp(1rem, 4vw, 2.4rem);
}

.nav-marca {
  flex: none;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nav-texto-ativo);
  text-decoration: none;
  white-space: nowrap;
}

.nav-itens {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.2vw, 1.6rem);
  min-width: 0;
}

.nav-itens a {
  font-size: .78rem;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--nav-texto);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.nav-itens a:hover {
  color: var(--nav-texto-ativo);
  border-bottom-color: var(--nav-linha);
}

.nav-itens a[aria-current="page"] {
  color: var(--nav-texto-ativo);
  border-bottom-color: currentColor;
}

/* O único destaque do menu: o Radar é o produto novo. Ponto decorativo,
   sem badge e sem animação — leitores de tela não perdem nada. */
.nav-itens a[data-nav="radar"]::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nav-destaque);
  margin-left: .45em;
  vertical-align: .15em;
}

.nav-site a:focus-visible {
  outline: 2px solid var(--nav-texto-ativo);
  outline-offset: 3px;
}

/* Até 480px: sem hambúrguer e sem JS. Os itens rolam na horizontal e um
   fade na borda direita avisa que há mais coisa. */
@media (max-width: 480px) {
  .nav-caixa { gap: .7rem; padding: 0 1rem; }

  .nav-marca { font-size: .66rem; letter-spacing: .1em; }

  .nav-itens {
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 1rem;
    padding-right: 1.4rem;
  }
  .nav-itens::-webkit-scrollbar { display: none; }

  .nav-caixa::after {
    content: "";
    position: absolute;
    right: 0;
    top: 1px;
    bottom: 1px;
    width: 2rem;
    background: linear-gradient(90deg, transparent, var(--nav-fundo));
    pointer-events: none;
  }
}