/* ==========================================================================
   Component · Site nav — floating glass pill
   Estrutura: logo (início) · links (centro) · idioma + CTA (fim)
   No mobile os links colapsam num painel sob o pill (botão hamburger).
   ========================================================================== */

.site-nav {
  position: fixed;
  top: clamp(10px, 1.6vw, 22px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(var(--container-nav), calc(100% - 2 * clamp(12px, 2.8vw, 40px)));
  border-radius: var(--radius-pill);
  background: var(--color-nav-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--color-nav-border);
  transition:
    box-shadow var(--duration-medium) var(--ease-gentle),
    background-color var(--duration-medium) var(--ease-gentle),
    border-radius var(--duration-medium) var(--ease-gentle);
}

.site-nav.is-scrolled,
.site-nav.is-open {
  background: var(--color-nav-glass-solid);
  box-shadow: var(--shadow-nav);
}

/* Com o painel mobile aberto, o pill vira um cartão arredondado */
.site-nav.is-open {
  border-radius: 28px;
}

/* 12px de recuo à direita mantém os controles de 44px concêntricos no pill de 68px */
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
  padding-inline: clamp(20px, 2.8vw, 40px) 12px;
}

/* ---- Logo ---------------------------------------------------------------- */

.site-nav__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* O lockup do NexArt já vem com o wordmark em off-white e a fita do "N" em
   vermelho — sem filtros, e sem variante clara: o site é dark-only.
   O asset é largo (823x260, proporção 3,17), então a altura manda na largura. */
.site-nav__logo img {
  width: auto;
  /* Pílula de 68px. 58px ocupa 85% dela e deixa ~5px de respiro em cima e
     embaixo — o lockup traz margem própria no PNG, então ele não encosta no
     vidro. A 58px o "PLAYER" sob o "NexArt" fica legível; a 46px sumia. */
  height: 58px;
}

/* ---- Links (desktop) -----------------------------------------------------
   O wrapper <nav> ocupa o espaço livre e centraliza a lista, para o menu
   ficar no eixo da página independente da largura do logo/CTA. */

.site-nav__nav {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: inline-block;
  padding-block: 6px;
  color: var(--color-text-secondary);
  font-size: var(--text-nav);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-gentle);
}

.site-nav__link:hover,
.site-nav__link[aria-current="true"] {
  color: var(--color-text-primary);
}

/* Sublinhado da seção ativa — mesma linguagem do Nav.tsx em produção */
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-gentle);
}

.site-nav__link[aria-current="true"]::after {
  opacity: 1;
}

/* ---- Ações --------------------------------------------------------------- */

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
  flex: 0 0 auto;
}

/* O seletor de idioma acompanha o CTA em telas médias+; no mobile ele vive
   dentro do painel (ver .site-nav__panel-foot). */
.site-nav__actions .lang-picker {
  display: none;
}

.site-nav__cta-icon {
  width: 16px;
  height: 16px;
  margin-inline-end: 7px;
}

/* ---- Botão hamburger ----------------------------------------------------- */

.site-nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-gentle),
    border-color var(--duration-fast) var(--ease-gentle);
}

.site-nav__burger:hover {
  background: var(--color-tile-hover);
  border-color: var(--color-border-strong);
}

.site-nav__burger svg {
  width: 20px;
  height: 20px;
}

.site-nav__burger-close { display: none; }

.site-nav.is-open .site-nav__burger-open  { display: none; }
.site-nav.is-open .site-nav__burger-close { display: block; }

/* ---- Painel mobile ------------------------------------------------------- */

.site-nav__panel {
  display: none;
  border-top: 1px solid var(--color-nav-border);
  padding: 18px clamp(20px, 2.8vw, 40px) 22px;
}

.site-nav.is-open .site-nav__panel {
  display: block;
}

.site-nav__panel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__panel-link {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  transition:
    background-color var(--duration-fast) var(--ease-gentle),
    color var(--duration-fast) var(--ease-gentle);
}

.site-nav__panel-link:hover {
  background: var(--color-tile-hover);
  color: var(--color-text-primary);
}

.site-nav__panel-link[aria-current="true"] {
  color: var(--color-text-primary);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.site-nav__panel-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-nav-border);
}

.site-nav__panel-foot .button--cta {
  flex: 1;
  height: 46px;
}

/* ---- Entrada ------------------------------------------------------------- */

.js .site-nav {
  opacity: 0;
  translate: 0 -12px;
  transition:
    opacity var(--duration-reveal) var(--ease-gentle),
    translate var(--duration-reveal) var(--ease-gentle),
    box-shadow var(--duration-medium) var(--ease-gentle),
    background-color var(--duration-medium) var(--ease-gentle),
    border-radius var(--duration-medium) var(--ease-gentle);
}

.js.is-loaded .site-nav {
  opacity: 1;
  translate: 0 0;
}

/* ---- Breakpoints --------------------------------------------------------- */

/* ≥ 48em (768px): seletor de idioma volta para a barra */
@media (min-width: 48em) {
  .site-nav__actions .lang-picker   { display: block; }
  .site-nav__panel-foot .lang-picker { display: none; }
}

/* ≥ 62em (992px): menu completo; painel e hamburger somem */
@media (min-width: 62em) {
  .site-nav__nav    { display: flex; }
  .site-nav__burger { display: none; }
  .site-nav__panel  { display: none !important; }
}

@media (max-width: 45.9375em) {
  .site-nav__inner {
    height: 56px;
    padding-inline: 18px 9px;
  }

  .site-nav__logo img {
    height: 42px;   /* pílula de 56px neste breakpoint — o lockup é largo */
  }

  .button--cta.site-nav__cta {
    height: 38px;
    padding-inline: 14px;
    font-size: 0.8125rem;
  }

  .site-nav__burger {
    width: 40px;
    height: 40px;
  }

  .site-nav__panel {
    padding: 14px 18px 20px;
  }
}

/* Abaixo de 30em o CTA da barra sai — ele reaparece dentro do painel */
@media (max-width: 29.9375em) {
  .site-nav__actions .site-nav__cta { display: none; }
}