/*
  Header fixo (Figma 123:2 › ABERTURA › "Nav / fundo" 123:8 e "Nav" 123:17).
  Medidas do Figma (desktop):
    pílula 1380 × 80, raio 99, fundo nav/fundo, a 22px do topo e 30px das laterais;
    conteúdo alinhado à margem de 120px;
    Nav: itens com 40px de gap; links Geist Regular 15px em texto-nav;
    CTA Geist Medium 15px, padding 12/22, raio 999, cta/fundo e cta/texto;
    logo Geist 20px com 18% de espaçamento, cor texto.
  Fixo com position: fixed (sem scroll listener). O header fica por cima
  da abertura, como no Figma.
*/

.cabecalho {
  position: fixed;
  top: var(--header-topo);
  right: 0;
  left: 0;
  z-index: 50;
}

.cabecalho-limite {
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--header-recuo);
}

.cabecalho-pilula {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-altura);
  /* Conteúdo alinhado à margem lateral: margem − recuo da pílula (90px no desktop) */
  padding-inline: calc(var(--margem-lateral) - var(--header-recuo));
  /* Figma: raio 99. Numa pílula de 80px de altura, 99 e 999 desenham o mesmo formato. */
  border-radius: var(--raio-999);
  background-color: var(--nav-fundo);
}

/* Logo provisório em texto (Geist Medium; o SemiBold do Figma não entra) */
.cabecalho-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto);
  font-size: var(--logo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--logo-letra);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Itens (header-itens.php): valem para a barra e para o painel
   ------------------------------------------------------------------ */
.cabecalho-barra {
  display: flex;
  align-items: center;
  gap: 40px;
}

.cabecalho-links {
  display: flex;
  gap: 40px;
  padding: 0;
  list-style: none;
}

.cabecalho-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-nav);
  font-size: var(--navegacao);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

/* Estado de hover provisório: o Figma não define hover */
.cabecalho-link:hover {
  color: var(--texto);
}

.cabecalho-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--raio-999);
  background-color: var(--cta-fundo);
  color: var(--cta-texto);
  font-size: var(--navegacao);
  font-weight: var(--peso-medio);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .cabecalho-link {
    transition: color 0.2s ease;
  }
}

/* ------------------------------------------------------------------
   Menu mobile (<details>): escondido a partir de 1120px
   ------------------------------------------------------------------ */
.cabecalho-menu {
  display: none;
}

/* Botão do menu: o <summary> */
.cabecalho-menu-botao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: var(--raio-999);
  color: var(--texto);
  list-style: none;
  cursor: pointer;
}

/* Tira o triângulo padrão do <summary> */
.cabecalho-menu-botao::-webkit-details-marker {
  display: none;
}

.cabecalho-menu-icone-fechar,
.cabecalho-menu[open] .cabecalho-menu-icone-abrir {
  display: none;
}

.cabecalho-menu[open] .cabecalho-menu-icone-fechar {
  display: block;
}

/* Painel: medidas provisórias, o Figma ainda não tem o mobile.
   Posicionado em relação à pílula; só aparece com o <details> aberto. */
.cabecalho-painel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: min(320px, 100%);
  padding: 20px 24px 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-28);
  background-color: var(--nav-fundo);
}

.cabecalho-painel .cabecalho-links {
  flex-direction: column;
  gap: 0;
}

.cabecalho-painel .cabecalho-link {
  width: 100%;
  font-size: var(--apoio);
}

.cabecalho-painel .seletor-tema {
  align-self: flex-start;
}

@media (max-width: 1119.98px) {
  .cabecalho-barra {
    display: none;
  }

  .cabecalho-menu {
    display: block;
  }
}