/* ═══════════════════════════════════════════════════════════════════════════
   NAVEGAÇÃO DE OITO PÁGINAS
   Roosevelt Amazon Expedition · rota D

   Esta folha existe porque o site deixou de ser uma página. Enquanto era uma
   só, o menu eram âncoras e `site.css` §Cabeçalho dava conta. Com oito páginas
   duas coisas passaram a faltar, e as duas são de navegação, não de estilo:

   1 · A MATRIZ PRECISA CABER NO MENU. Dois rios × duas atividades é o produto,
       e `arquitetura.md` §1 é explícito: enterrar as aves num submenu de
       terceiro nível joga fora o único território livre. O submenu sai em
       GRADE, com o rio em cima e a atividade embaixo, que é a mesma leitura da
       home no tamanho de um menu.

   2 · ABAIXO DE 860px NÃO HAVIA MENU NENHUM. O `so-largo` escondia os links e
       sobrava o botão de ação. Com uma página só isso era tolerável, porque
       tudo estava na rolagem; com oito era um site sem saída no telefone.

   O submenu abre no `:hover` E no `:focus-within`, então o teclado chega lá
   sem uma linha de JS. O painel do telefone precisa de JS, e ele está em
   `navegacao.js`, que são 40 linhas.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer kng-projeto {

/* ── 1 · O submenu de expedições ────────────────────────────────────────── */

.menu-pai { position: relative; display: flex; align-items: center; }

/* O PAI TAMBÉM É LINK, e não só gatilho. `/expeditions` é página de verdade,
   com as quatro comparadas lado a lado, e quem clica no rótulo espera chegar
   nela. Submenu que só abre e nunca leva a lugar nenhum é armadilha de mouse. */
.menu-pai__t { display: inline-flex; align-items: center; gap: 6px; }
.menu-pai__v { inline-size: 9px; block-size: 6px; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate var(--tempo-micro) var(--curva-entrada); }
.menu-pai:hover .menu-pai__v,
.menu-pai:focus-within .menu-pai__v { rotate: 180deg; }

.menu-filho {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: -18px;
  z-index: 60; inline-size: 420px; padding: var(--esp-md);
  background: var(--fundo-superficie); color: var(--texto-forte);
  border-radius: var(--raio-md);
  border: 1px solid color-mix(in srgb, var(--borda) 30%, transparent);
  box-shadow: 0 26px 60px -24px rgb(13 13 13 / .45);
  /* `visibility` junto de `opacity`, e não `display: none`: com `display` não
     há transição, e sem `visibility` o painel invisível continua recebendo o
     clique de quem passa por baixo dele. */
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity var(--tempo-micro) var(--curva-entrada),
              translate var(--tempo-micro) var(--curva-entrada),
              visibility 0s linear var(--tempo-micro);
}
.menu-pai:hover .menu-filho,
.menu-pai:focus-within .menu-filho {
  opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s;
}
/* A PONTE ENTRE O RÓTULO E O PAINEL. São 10px de vão, e sem esta faixa
   invisível o menu fecha no meio do caminho do mouse. */
.menu-pai::after { content: ""; position: absolute; inset-block-start: 100%;
  inset-inline: -18px; block-size: 12px; }

.menu-filho__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu-filho__grade a {
  display: block; padding: 12px 14px; border-radius: var(--raio-sm);
  min-block-size: var(--alvo-toque);
  opacity: 1; letter-spacing: normal; text-transform: none;
  transition: background var(--tempo-micro) var(--curva-entrada);
}
.menu-filho__grade a:hover,
.menu-filho__grade a:focus-visible {
  background: color-mix(in srgb, var(--acento) 10%, transparent);
}
.menu-filho__grade b {
  display: block; font-size: var(--texto-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  /* `acento` cru dá 4,12:1 em texto pequeno sobre o branco, e o mínimo é 4,5.
     `acento_sobre_claro` é o token que existe para este caso: 5,18:1. */
  color: var(--acento-sobre-claro);
}
.menu-filho__grade span {
  display: block; margin-block-start: 3px;
  font-size: var(--texto-ficha); font-weight: 600; color: var(--texto-forte);
}
.menu-filho__todas {
  display: block; margin-block-start: var(--esp-sm);
  padding: 10px 14px 4px; border-block-start: 1px solid
    color-mix(in srgb, var(--borda) 26%, transparent);
  color: var(--texto-medio) !important;
}

/* ── 2 · A página em que se está ────────────────────────────────────────── */

/* Fio embaixo do item atual, e não negrito: o menu já é semibold em caixa
   alta, e subir o peso não se lê. O `aria-current` é escrito pelo montador. */
.topo__menu > a[aria-current], .menu-pai:has(> a[aria-current]) > a {
  opacity: 1; box-shadow: 0 6px 0 -5px currentColor;
}

/* ── 3 · O botão do painel ──────────────────────────────────────────────── */

.topo__abre {
  display: none; /* nasce escondido; o `@media` abaixo o acende */
  inline-size: var(--alvo-toque); block-size: var(--alvo-toque);
  align-items: center; justify-content: center; flex-direction: column;
  gap: 6px; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer;
}
.topo__abre__b {
  inline-size: 22px; block-size: 2px; border-radius: 2px;
  background: currentColor;
  transition: translate var(--tempo-micro) var(--curva-entrada),
              rotate var(--tempo-micro) var(--curva-entrada);
}
/* Vira X quando o painel está aberto. Duas barras bastam: com três, a do meio
   precisa sumir, e some tarde o bastante para aparecer no meio do giro. */
.topo__abre[aria-expanded="true"] .topo__abre__b:first-child { translate: 0 4px; rotate: 45deg; }
.topo__abre[aria-expanded="true"] .topo__abre__b:last-child  { translate: 0 -4px; rotate: -45deg; }

/* ── 4 · O painel do telefone ───────────────────────────────────────────── */

/* `hidden` no HTML e `display` aqui dizendo a mesma frase. O atributo sozinho
   perde de qualquer regra com `display`, e essa já mordeu a casa. */
.painel[hidden] { display: none; }
.painel {
  position: fixed; inset: 0; z-index: 55;
  display: grid; align-items: start; align-content: start;
  padding: calc(var(--alvo-toque) + var(--esp-xl)) var(--margem) var(--esp-xl);
  background: var(--fundo-inverso); color: var(--texto-sobre-inverso);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity var(--tempo-curta) var(--curva-entrada);
}
.painel.aberto { opacity: 1; }
.painel__grade {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-block-start: var(--esp-md);
  background: color-mix(in srgb, var(--texto-sobre-inverso) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto-sobre-inverso) 16%, transparent);
  border-radius: var(--raio-md); overflow: hidden;
}
.painel__grade a {
  display: block; padding: var(--esp-md); text-decoration: none;
  background: var(--fundo-inverso); color: inherit;
  min-block-size: var(--alvo-toque);
}
.painel__grade b {
  display: block; font-size: var(--texto-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--acento-sobre-escuro);
}
.painel__grade span {
  display: block; margin-block-start: 4px;
  font-size: var(--texto-heading-m); font-family: var(--fam-display);
  font-weight: 800;
}
.painel__lista { list-style: none; margin: var(--esp-lg) 0 0; padding: 0; }
.painel__lista a {
  display: block; padding: 14px 0; text-decoration: none; color: inherit;
  min-block-size: var(--alvo-toque);
  font-family: var(--fam-display); font-weight: 800;
  font-size: var(--texto-heading-m);
  border-block-end: 1px solid color-mix(in srgb, var(--texto-sobre-inverso) 14%, transparent);
}
.painel__acao { margin-block-start: var(--esp-lg); justify-self: start; }

/* Enquanto o painel está aberto a página atrás não rola. */
body.travada { overflow: hidden; }

/* ── 4b · O CABEÇALHO SOBE POR CIMA DO PAINEL ───────────────────────────
   O PAINEL ESTAVA ENGOLINDO O PRÓPRIO BOTÃO DE FECHAR, e o defeito só
   apareceu quando um navegador de verdade tentou clicar nele.

   `.topo` vive em `z-index: 50` e o painel precisa cobrir a página, então ele
   nasceu em 55. Resultado: o painel de tela cheia fica POR CIMA da barra, e o
   X que ele mesmo desenha não recebe clique nenhum. Escape ainda fechava, e é
   exatamente esse tipo de saída que esconde o defeito: quem testa no teclado
   não vê, e quem está no telefone não tem Escape.

   Com o painel aberto a barra sobe para 60 e fica transparente: ela está sobre
   o verde do painel, então a tinta é a clara, e a assinatura volta a ser a
   branca mesmo que a página estivesse rolada com o cabeçalho encostado. */
body.travada .topo {
  z-index: 60;
  background: none; backdrop-filter: none; box-shadow: none;
  color: var(--texto-sobre-inverso);
}
body.travada .topo .marca--clara { display: block; }
body.travada .topo .marca--escura { display: none; }

/* ── 5 · Onde cada um aparece ───────────────────────────────────────────── */

@media (max-width: 860px) {
  .topo__abre { display: flex; }
}
/* Em 360px a assinatura mede ~152px e o botão de ação ~110px. Com o painel
   somando 44px mais os vãos, o conjunto passava da tela e "CHECK DATES" saía
   cortado na borda direita, que é o mesmo defeito que `site.css` já registra.
   A ação não some do site: ela é o primeiro item do painel, e a barra
   flutuante continua no alcance do polegar. */
@media (max-width: 560px) {
  .topo__menu > .acao { display: none; }
}
@media (min-width: 861px) {
  .painel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-filho, .painel, .menu-pai__v, .topo__abre__b { transition-duration: 1ms; }
}

} /* @layer kng-projeto */