/* ==========================================================================
   BLOCO: Nav — cabeçalho fixo, links e menu mobile
   HTML: <header class="site-header">  ·  JS: js/sections/nav.js
   Figma 880-1316 — no topo, a nav é uma caixa de 104px (16 + 72 + 16) dentro
   do card do hero (recuo 8 + 8): conteúdo de 72px em y=32.
   Ao rolar, a barra sobe 16px e o vidro gruda no topo/laterais (0–104).
   ========================================================================== */

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(var(--nav-pad) + 2 * var(--inset)) var(--inset) 0;
  pointer-events: none;
}

/* --bar-y: 0 no topo · -16px rolando · fora da tela quando escondida */
.site-header__bar {
  position: relative;
  pointer-events: auto;
  transform: translate3d(0, var(--bar-y, 0px), 0);
  transition: transform 520ms var(--ease-out);
}
.site-header.is-scrolled {
  --bar-y: calc(-2 * var(--inset));
}

/* --- Fundo de vidro translúcido --------------------------------------------
   No topo: sem fundo, como no Figma.
   Ao começar a rolar: o vidro aparece e se estica até grudar no topo e nas
   laterais da tela → barra de 104px (16 + 72 + 16).
   Fica num ::before, e não na própria barra: um backdrop-filter na barra
   impediria o painel do menu mobile (filho dela) de desfocar a página.
   ------------------------------------------------------------------------ */
.site-header__bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--r-sm);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 0 0 var(--stroke) var(--glass-border),
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-shadow);
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease),
    inset var(--dur) var(--ease-out),
    border-radius var(--dur) var(--ease-out);
}
/* Menu mobile aberto ainda no topo: vidro no formato da barra */
.site-header.is-scrolled .site-header__bar::before,
.site-header.is-menu-open .site-header__bar::before {
  opacity: 1;
}
/* Rolando: gruda no topo e nas laterais */
.site-header.is-scrolled .site-header__bar::before {
  inset: calc(-1 * var(--nav-pad)) calc(-1 * var(--inset));
  border-radius: 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__bar::before {
    background: var(--glass-fallback);
  }
}

/* Some ao rolar para baixo e só volta ao rolar para cima (nav.js).
   Tira da tela a barra inteira de 104px + a sombra. */
.site-header.is-hidden {
  --bar-y: calc(-100% - 2 * var(--inset) - 2 * var(--nav-pad) - 32px);
}
/* Com "reduzir movimento" o deslize continua (sobrepõe a regra global de base.css) */
@media (prefers-reduced-motion: reduce) {
  .site-header__bar {
    transition-duration: 520ms !important;
  }
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.site-nav__cta {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-12);
}

/* --- Botão do menu (mobile) ------------------------------------------------ */
.menu-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--stroke) solid var(--c-border);
  border-radius: var(--r-pill);
  color: var(--c-text-strong);
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.menu-toggle:hover {
  border-color: var(--c-text-strong);
}
.menu-toggle .icon {
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
/* Ícones sobrepostos: o "menu" gira e some enquanto o "fechar" entra */
.menu-toggle .icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}
.site-header.is-menu-open .menu-toggle .icon--menu {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}
.site-header.is-menu-open .menu-toggle .icon--close {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
  .menu-toggle {
    display: grid;
  }
  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  /* Menu vira painel de vidro suspenso que abre com fade + leve escala */
  .site-nav {
    position: absolute;
    top: calc(100% + var(--s-8));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-12);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--r-sm);
    box-shadow:
      inset 0 0 0 var(--stroke) var(--glass-border),
      inset 0 1px 0 var(--glass-highlight),
      var(--glass-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -8px, 0) scale(0.98);
    transform-origin: top center;
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility 0s linear var(--dur);
  }
  .site-header.is-menu-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility 0s;
  }
  /* Com a barra de 104px (rolando), o painel abre abaixo dela */
  .site-header.is-scrolled .site-nav {
    top: calc(100% + var(--nav-pad) + var(--s-8));
  }

  /* Links entram em sequência (--i vem do nav.js) */
  .site-nav > * {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition:
      opacity 240ms var(--ease),
      transform 240ms var(--ease),
      color var(--dur-fast) var(--ease),
      background var(--dur) var(--ease);
  }
  .site-header.is-menu-open .site-nav > * {
    opacity: 1;
    transform: none;
    transition:
      opacity 420ms var(--ease-out) calc(60ms + var(--i, 0) * 45ms),
      transform 420ms var(--ease-out) calc(60ms + var(--i, 0) * 45ms),
      color var(--dur-fast) var(--ease),
      background var(--dur) var(--ease);
  }

  .site-nav .nav-link {
    height: 52px;
    font-size: var(--t-body-size);
  }
  .site-nav__cta {
    display: inline-flex;
    justify-content: center;
    margin-top: var(--s-8);
  }
}

@media (max-width: 560px) {
  .site-header__cta {
    display: none;
  }
}