.cabecalho {
  position: fixed;
  top: calc(2rem + var(--wp-admin--admin-bar--height, 0px));
  left: 0;
  right: 0;
  z-index: 100;
  transition: top 0.4s ease;
}

.cabecalho__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* As ferramentas de acessibilidade ficam soltas sobre o topo da página. Quando a página rola
   (data-rolado, definido em main.js) viram uma coluna de botões só com ícone na lateral direita,
   logo acima do botão do VLibras, e acompanham a tela. Assim não dependem de fundo nenhum. */
.cabecalho__ferramentas {
  display: flex;
  justify-content: flex-end;
  gap: 4.4rem;
  width: fit-content;
  margin-left: auto;
  margin-right: 3.9rem;
}

.cabecalho__ferramentas li {
  display: flex;
}

.cabecalho__ferramenta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  transition: color 0.3s ease;
}

.cabecalho__ferramenta:hover {
  color: var(--branco);
}

.cabecalho__ferramenta:focus-visible,
.cabecalho__link:focus-visible,
.cabecalho__abrir:focus-visible {
  outline: 0.2rem solid var(--branco);
  outline-offset: 0.3rem;
}

.cabecalho__icone {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}

/* Modo lateral. As ferramentas saem do fluxo, mas o espaço delas continua reservado no topo
   (padding-top com a altura medida em main.js), então o menu não pula. Em vez disso o cabeçalho
   inteiro sobe até o lugar das ferramentas com a transição do "top". */
.cabecalho[data-rolado] {
  top: calc(1rem - var(--ferramentas-altura, 0px) + var(--wp-admin--admin-bar--height, 0px));
}

.cabecalho[data-rolado] .cabecalho__inner {
  padding-top: calc(var(--ferramentas-altura, 0px) + 1rem);
}

/* O texto some e reaparece ao lado do ícone no hover ou no foco do teclado;
   continua no HTML, então leitores de tela seguem lendo o nome do botão.
   O botão do VLibras (de terceiros) fica um pouco abaixo do meio da tela, em posição fixa em
   porcentagem; a coluna termina acima dele, também em porcentagem, para nunca encostar. */
.cabecalho[data-rolado] .cabecalho__ferramentas {
  position: fixed;
  right: 0.8rem;
  bottom: calc(54% + 0.8rem);
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  width: auto;
  margin: 0;
}

.cabecalho[data-rolado] .cabecalho__ferramenta:not(.cabecalho__ferramenta--sem-icone) {
  flex-direction: row-reverse;
  justify-content: center;
  gap: 0;
  min-width: 4.4rem;
  min-height: 4.4rem;
  padding-inline: 1.2rem;
  border-radius: var(--raio-md);
  background-color: var(--azul-principal);
  color: var(--branco);
  box-shadow: 0 0.8rem 2rem var(--azul-escuro-25);
  transition: background-color 0.3s ease;
}

.cabecalho[data-rolado] .cabecalho__ferramenta:not(.cabecalho__ferramenta--sem-icone):hover,
.cabecalho[data-rolado] .cabecalho__ferramenta:not(.cabecalho__ferramenta--sem-icone):focus-visible {
  background-color: var(--azul-secundario);
}

.cabecalho[data-rolado] .cabecalho__ferramenta:not(.cabecalho__ferramenta--sem-icone) .cabecalho__icone {
  width: 2rem;
  height: 2rem;
}

.cabecalho[data-rolado] .cabecalho__ferramenta:not(.cabecalho__ferramenta--sem-icone) .cabecalho__ferramenta-texto {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

.cabecalho[data-rolado] .cabecalho__ferramenta:not(.cabecalho__ferramenta--sem-icone):is(:hover, :focus-visible) .cabecalho__ferramenta-texto {
  max-width: 20rem;
  margin-right: 1rem;
  opacity: 1;
}

/* Alto contraste: o botão é preto e a página pode ser preta, então ganha contorno branco. */
html[data-contraste="alto"] .cabecalho[data-rolado] .cabecalho__ferramenta:not(.cabecalho__ferramenta--sem-icone) {
  box-shadow: inset 0 0 0 0.2rem var(--contraste-texto);
}

.cabecalho__barra {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  height: 8.4rem;
  padding: 0.8rem 1.4rem 0.8rem 3.2rem;
  border: 0.1rem solid var(--branco-10);
  border-radius: 99.9rem;
  background-color: var(--azul-principal-60);
  box-shadow: 0 1.6rem 4rem var(--azul-escuro-25);
  -webkit-backdrop-filter: blur(1.4rem);
  backdrop-filter: blur(1.4rem);
}

.cabecalho__logo img {
  width: 10.2rem;
  height: 6.4rem;
}

.cabecalho__painel {
  display: contents;
}

.cabecalho__lista {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.cabecalho__link {
  display: block;
  padding: 1.1rem 1.8rem;
  border-radius: 99.9rem;
  font: var(--nav-link);
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.cabecalho__link:hover {
  background-color: var(--branco-20);
}

.cabecalho__link[aria-current="page"] {
  background-color: var(--branco);
  color: var(--azul-principal);
}

.cabecalho__abrir {
  display: none;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background-color: var(--branco-10);
  color: var(--branco);
  transition: background-color 0.3s ease;
}

.cabecalho__abrir:hover {
  background-color: var(--branco-20);
}

.cabecalho__hamburguer,
.cabecalho__hamburguer::before,
.cabecalho__hamburguer::after {
  display: block;
  width: 2.2rem;
  height: 0.2rem;
  border-radius: 0.2rem;
  background-color: currentColor;
  transition: top 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.cabecalho__hamburguer {
  position: relative;
}

.cabecalho__hamburguer::before,
.cabecalho__hamburguer::after {
  content: "";
  position: absolute;
  left: 0;
}

.cabecalho__hamburguer::before {
  top: -0.7rem;
}

.cabecalho__hamburguer::after {
  top: 0.7rem;
}

.cabecalho__abrir[aria-expanded="true"] .cabecalho__hamburguer {
  background-color: transparent;
}

.cabecalho__abrir[aria-expanded="true"] .cabecalho__hamburguer::before {
  top: 0;
  transform: rotate(45deg);
}

.cabecalho__abrir[aria-expanded="true"] .cabecalho__hamburguer::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 1280px) {
  .cabecalho__barra {
    height: 7.2rem;
    padding-left: 2.4rem;
  }

  .cabecalho__logo img {
    width: 8.2rem;
    height: 5.1rem;
  }

  .cabecalho__abrir {
    display: grid;
  }

  .cabecalho__painel {
    position: absolute;
    top: calc(100% + 1rem);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-height: calc(100svh - var(--cabecalho-fundo, 16rem) - 3rem);
    padding: 2rem;
    overflow-y: auto;
    border-radius: var(--raio-lg);
    background-color: var(--azul-principal);
    box-shadow: 0 1.6rem 4rem var(--azul-escuro-25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }

  .cabecalho__painel.is-aberto {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .cabecalho__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }

  .cabecalho__link {
    padding: 1.1rem 1.8rem;
    font: var(--subtitle-2);
  }

  .cabecalho__botao {
    justify-content: space-between;
  }

  html.menu-aberto {
    overflow: hidden;
  }
}

@media (max-width: 991px) {
  .cabecalho__ferramentas {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.2rem;
    margin-inline: auto;
  }

  .cabecalho__ferramenta {
    gap: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabecalho,
  .cabecalho * {
    transition: none;
  }
}