/* ============================================================
   GALAXY MEDIA — SHELL
   ------------------------------------------------------------
   Menu e rodape. Vivem aqui, e nao em home.css, porque a home, o
   portfolio e a pagina de case usam exatamente os mesmos — manter
   copias em cada folha garante que uma delas fique para tras na
   primeira alteracao.

   Depende de tokens.css e base.css.
   ============================================================ */

/* ══════════════ NAVBAR ══════════════ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              backdrop-filter var(--dur-normal) var(--ease-out);
}
.nav[data-scrolled] {
  border-bottom-color: var(--border);
}

/* O vidro da barra vive num pseudo-elemento, NAO na barra.
   `backdrop-filter` no proprio `.nav` cria containing block para
   descendentes `position: fixed`, e era isso que recortava o drawer. */
.nav::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0;
  background: color-mix(in srgb, var(--c-black) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: opacity var(--dur-normal) var(--ease-out);
}
.nav[data-scrolled]::before { opacity: 1; }

.nav__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  max-width: var(--max-width); margin-inline: auto;
  padding: var(--sp-4) var(--page-pad);
}

/* A meta central saiu; o auto volta para empurrar os links à direita. */
.nav__links { display: flex; gap: var(--sp-2); margin-left: auto; }

/* Pill: a área clicável inteira reage, não só o texto. */
.nav__pill {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

/* Preenchimento que sobe, mesmo gesto do .btn — a barra fala a mesma
   língua do resto do site em vez de inventar um hover próprio. */
/* Linha inferior no lugar do preenchimento: o seletor marca sem virar
   botão, que era o que fazia o menu parecer cheio de botões. */
.nav__pill::before {
  content: '';
  position: absolute; inset: auto var(--sp-3) 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-normal) var(--ease-out);
}
.nav__pill:hover::before { transform: scaleX(1); transform-origin: left center; }
.nav__pill:hover { color: var(--text-primary); }

/* Seção atual. É o que torna a barra informativa e não só decorativa. */
.nav__pill[data-active] { color: var(--text-primary); }
.nav__pill[data-active]::before {
  background: var(--accent-on-dark);
  transform: scaleX(1);
  transform-origin: left center;
}

/* Progresso de leitura na base da barra. */
.nav__progress {
  display: block;
  height: 1px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--c-light));
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out);
}
.nav[data-scrolled] .nav__progress { opacity: 1; }

/* `z-index` acima do drawer: aberto, o `.nav__mobile` (z-index 1) cobria
   o botao, e o X de fechar ficava embaixo dele — o menu abria e nao
   tinha como fechar a nao ser tocando num link. */
.nav__toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
  margin-left: auto;
}
.nav__toggle span {
  display: block; height: 1px; background: var(--text-primary);
  transition: width var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
}
.nav__toggle span:nth-child(1) { width: 22px; }
.nav__toggle span:nth-child(2) { width: 14px; }
/* Aberto, o icone e um X. Traco de 1px sumia sobre o vidro do drawer;
   aqui ele engrossa e as duas barras encostam no mesmo eixo. */
.nav__toggle[aria-expanded="true"] span { height: 1.5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { width: 22px; transform: translateY(-3.75px) rotate(-45deg); }

/* Drawer de tela cheia: a lista antiga era um menu de rodapé colado
   embaixo da barra. Aqui o menu vira a tela. */
.nav__mobile {
  display: none;
  /* `fixed` dentro de `.nav`, que tem backdrop-filter quando rolada:
     filtro cria containing block e o `inset: 0` do drawer passava a
     valer em relacao a BARRA, nao a viewport — por isso ele aparecia
     cortado na altura do menu ao rolar. Ancorado no topo da barra e
     esticado por altura, o drawer volta a cobrir a tela toda. */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100dvh;
  z-index: 1;
  flex-direction: column; justify-content: space-between;
  padding: calc(var(--sp-11) + var(--sp-5)) var(--page-pad) var(--sp-8);
  background: color-mix(in srgb, var(--c-black) 82%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav__mobile[hidden] { display: none; }

.nav__mobile-links { display: flex; flex-direction: column; }
.nav__mobile-links a {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border);
  /* Menor que o clamp anterior (1.8–2.6rem): naquele tamanho cinco itens
     mais o botao nao cabiam numa tela de 640px de altura. */
  font-size: clamp(1.25rem, 5.2vw, 1.6rem);
  font-weight: var(--w-light);
  letter-spacing: var(--track-title);
  color: var(--text-primary);
  /* Estado inicial do stagger; o JS solta um a um ao abrir. */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.nav__mobile[data-open] .nav__mobile-links a { opacity: 1; transform: none; }

.nav__mobile-num {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  color: var(--accent-on-dark);
}

.nav__mobile-foot { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-7); }

@media (prefers-reduced-motion: reduce) {
  .nav__mobile-links a { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__mobile:not([hidden]) { display: flex; }
  /* No mobile a logo não colapsa: não se ganha espaço e a marca some. */
  .nav[data-scrolled] .logo__word { opacity: 1; transform: none; }
  .nav[data-scrolled] .logo__mark { opacity: 0; }
}

/* ══════════════ FOOTER ══════════════ */
.footer {
  position: relative; z-index: var(--z-content);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--border);
  background: var(--bg-base);
}
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-9);
}
.footer__tag { margin-top: var(--sp-4); color: var(--text-secondary); font-size: var(--text-sm); max-width: 30ch; }

.footer__nav, .footer__contact { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__nav a, .footer__contact a {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  align-self: flex-start;
  transition: color var(--dur-normal) var(--ease-out);
}
.footer__nav a:hover, .footer__contact a:hover { color: var(--text-primary); }

/* Duas linhas legais lado a lado no desktop, empilhadas no celular:
   `space-between` com wrap resolve as duas sem media query. */
.footer__legal {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
}
.footer__cnpj { color: var(--text-tertiary); }

@media (max-width: 767px) { .footer__inner { grid-template-columns: 1fr; gap: var(--sp-7); } }