/* Header — Figma: "Cabeçalho" (mobile, 52px) e "header e hero" (desktop, topo). */

/* Fixo em todas as páginas (desktop e mobile): acompanha a rolagem. O espaço que ele ocupa
   é compensado globalmente em base.css (padding-top do body, na altura de --header-h). */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  background: var(--fundo-superficie);
  /* Stroke inferior do Figma: 1px, preto a 8% de opacidade, borda inteira do header (não só do
     container). Usa inset box-shadow (não border) para não somar altura nem mexer no padding. */
  box-shadow: inset 0 -1px 0 0 rgb(0 0 0 / 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  border-radius: 8px;
}

/* Logo: proporção da marca nova (4001:988) preservada, mesma área visual que a marca antiga ocupava
   (90×20 no mobile, 108×24 no desktop) — por isso os valores não são mais exatamente esses. */
.logo__img {
  display: block;
  width: 85px;
  height: 21px;
}

/* Botão do menu (mobile). Área de toque de 44px sem mexer no alinhamento do ícone de 24px. */
.menu-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.menu-toggle__icon {
  width: 24px;
  height: 24px;
}

.menu-toggle:active {
  background: var(--azul-marinho-20);
}

@media (hover: hover) {
  .menu-toggle:hover {
    background: var(--azul-marinho-20);
  }
}

/* Painel de navegação: no mobile é uma gaveta sob o header; no desktop, some da árvore
   de layout e os filhos viram itens do header. */
.header__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 8px;
  padding: 8px var(--gutter) 20px;
  background: var(--fundo-superficie);
  box-shadow: var(--sombra-flutuante);
}

.header__panel.is-open {
  display: flex;
}

.nav__list {
  display: flex;
  flex-direction: column;
}

.nav__link {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  color: var(--texto-link);
  font-size: 18px;
  line-height: normal;
}

/* Hover (Figma, variante "Hover=Hover" do componente Link): só a cor muda, de #011136 a 75%
   para #011136 a 100%. Sem sublinhado, sem mudança de peso e sem transição (o protótipo
   troca de variante instantaneamente). O foco por teclado é separado: ver :focus-visible em base.css. */
@media (hover: hover) {
  .nav__link:hover {
    color: var(--texto-hero-titulo);
  }
}

.nav__link:active {
  color: var(--texto-hero-titulo);
}

.nav__link[aria-current="page"] {
  color: var(--texto-hero-titulo);
}

.header__cta-icon {
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: no-preference) {
  .menu-toggle {
    transition: background-color 160ms ease;
  }

  /* Flutuação sutil do botão "Fale com a Alado": mesma linguagem de motion do resto do site
     (float-y, tokens de duração em tokens.css), amplitude bem pequena para não competir com o CTA da Hero */
  .header__cta {
    --float-y: 3px;
    animation: float-y var(--dur-float) var(--ease-float) infinite;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  /* 24px acima e abaixo (Figma: header de 92px = 24 + 44 + 24), simétrico como no mobile */
  .header__inner {
    padding-block: 24px;
  }

  .logo {
    width: 176px;
    flex: none;
  }

  .logo__img {
    width: 101px;
    height: 25px;
  }

  .menu-toggle {
    display: none;
  }

  .header__panel,
  .header__nav {
    display: contents;
  }

  .nav__list {
    flex-direction: row;
    gap: 4px;
  }
}