/* Componente Header (Figma: DS › Header 582:3728 — Versões=Default | Fixed)
   Fundo e linha ocupam 100% da janela; o conteúdo fica no .container (máx. 1728px). */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-background-default-lavender);
  border-bottom: var(--header-divider) solid var(--color-neutrals-white);
  transition:
    border-color var(--motion-duration) var(--motion-easing),
    border-radius var(--motion-duration) var(--motion-easing);
}

/* Fixed (todas as larguras): aplicado via JS assim que a página sai do topo.
   A linha fica transparente (mostra o fundo lavanda), mantendo os 104px.
   Com o menu mobile aberto o header volta ao Default para emendar com o painel. */
.header.is-fixed:not(.is-open),
/* Cases, páginas de case e 404 (classe no body): sempre arredondado, inclusive no topo */
.has-rounded-header .header:not(.is-open) {
  border-bottom-color: transparent;
  border-radius: 0 0 var(--radius-header) var(--radius-header);
}

/* Fundo branco atrás dos cantos: sem ele, no topo aparece o lavanda do html e os cantos não se veem */
.has-rounded-header {
  background: var(--color-background-secondary-white);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--header-height) - var(--header-divider));
}

.header__logo {
  display: block;
  flex-shrink: 0;
  width: 80px;
  height: 58px;
}

.header__logo img {
  width: 80px;
  height: 58px;
}

/* No desktop o wrapper "some" e nav + ações viram filhos diretos do flex,
   distribuídos entre logo e ações. */
.header__menu {
  display: contents;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.header__nav-list > li {
  display: flex;
}

/* Figma 582:3690: LinkedIn, WhatsApp e "Vamos conversar" com 8px entre eles */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Botão do menu (componente Button icon), só no mobile */
.header__toggle {
  display: none;
}

/* ---------- Mobile / tablet (< 1024px) — Figma 509:3037 (fechado) / 508:2953 (aberto) ---------- */
@media (max-width: 1023.98px) {
  /* Menu à esquerda (24px), logo à direita (32px) */
  .header__inner {
    padding-right: var(--header-mobile-inset);
  }

  .header__toggle {
    display: inline-flex;
    order: -1;
  }

  .header__menu {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);
    padding: 0 var(--header-mobile-inset) var(--space-40);
    overflow-y: auto;
    background: var(--color-background-default-lavender);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--motion-duration) var(--motion-easing),
      transform var(--motion-duration) var(--motion-easing),
      visibility 0s linear var(--motion-duration);
  }

  .header.is-open .header__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--motion-duration) var(--motion-easing),
      transform var(--motion-duration) var(--motion-easing),
      visibility 0s;
  }

  /* Lista: cada item tem 64px + divisor branco de 2px; link alinhado à esquerda */
  .header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .header__nav-list > li {
    padding-block: var(--space-16);
    border-bottom: var(--header-divider) solid var(--color-background-secondary-white);
  }

  .header__nav-list > li[aria-hidden="true"] {
    display: none;
  }

  /* Menu mobile aberto (Figma 508:2953): 24px entre os botões */
  .header__actions {
    justify-content: center;
    gap: var(--space-24);
  }
}