/**
 * Topo compartilhado — toolbar de acessibilidade, barra da marca e gaveta.
 *
 * Par de `partials/topo.php` e `js/topo.js`. Os três andam juntos: mexeu em
 * um, confira os outros.
 *
 * Depende de `tokens.css` (custom properties) e de `base.css` (`.so-leitor`).
 * NÃO depende do CSS de nenhuma página — é o que permite servir as quatro
 * páginas e, depois, o tema do WordPress.
 *
 * Medidas do PSD (artboard 1920×5090):
 *   toolbar  y -13→46, altura útil 46px, fundo #F5F5F5
 *   barra    y 46→129, altura 83px, fundo #F2F0E9
 *   conteúdo x 141→1698  →  container de 1560px
 *   menu     Montserrat Bold 13.81px, ls .015em, #FD0000
 *   busca    171×39, fundo branco, cantos retos, lupa vermelha
 *   CTA      185×40, pílula #04AA1F com anel #7BCD84, Transducer Bold 15px
 */

.cabecalho {
  position: relative;
  z-index: 10;
}

.cabecalho__container {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

/* ==========================================================================
   linha 1 — toolbar de acessibilidade + redes
   ========================================================================== */

.toolbar {
  background: var(--cor-toolbar-fundo);
  min-height: 46px;
  display: flex;
  align-items: center;
}

.toolbar .cabecalho__container {
  justify-content: space-between;
}

.a11y {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-wrap: wrap;
}

.a11y__rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.botao-a11y {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  /* 44px de alvo de toque sem inflar a barra de 46px do layout */
  min-height: 44px;
  padding-inline: 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cor-texto);
  border-radius: var(--raio-s);
  transition:
    background-color var(--dur-rapida) var(--ease-padrao),
    color var(--dur-rapida) var(--ease-padrao);
}

/* O :not([aria-pressed]) impede que o hover engula o estado ligado —
   sem ele o hover tem especificidade maior e some com o feedback. */
.botao-a11y:hover:not(:disabled):not([aria-pressed='true']) {
  background: var(--cor-superficie);
}

.botao-a11y[aria-pressed='true'] {
  background: var(--cor-marca-primaria);
  color: #fff;
}

.botao-a11y[aria-pressed='true']:hover:not(:disabled) {
  filter: brightness(1.1);
}

.botao-a11y:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.grupo-fonte {
  display: flex;
  align-items: center;
}

/* "A−" e "A+" são rótulos curtos: com o padding-inline de 0.625rem o botão
   fechava em 36px de largura e reprovava no piso de 44×44. Os demais botões
   da toolbar têm texto longo o bastante para passar sozinhos. */
.grupo-fonte .botao-a11y {
  min-width: 44px;
}

/* --------------------------------------------------------------------------
   toolbar no mobile — os quatro controles em UMA linha
   --------------------------------------------------------------------------
   Com "Acessibilidade" (109px) mais os quatro controles a barra passava de
   490px e quebrava em duas linhas em qualquer telefone, dobrando a altura do
   topo. O rótulo sai da tela mas NÃO do documento (`.so-leitor` à mão, porque
   `display: none` também o tira do leitor de tela) e os botões apertam gap,
   padding e corpo — o piso de 44px de alvo de toque continua intacto, porque
   quem manda nele é o `min-height`.

   O `flex-wrap: wrap` do bloco base fica de propósito: abaixo de ~340px nem
   assim cabe, e quebrar em duas linhas é melhor que empurrar a página para o
   lado. */
@media (width < 48rem) {
  .a11y__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .a11y {
    gap: var(--espaco-1);
  }

  .botao-a11y {
    gap: 0.25rem;
    padding-inline: 0.375rem;
    font-size: 0.6875rem;
    white-space: nowrap;
  }
}

.redes {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.rede:hover {
  transform: translateY(-2px);
}

/*
 * Desde 08/08/2026 o ícone é imagem, não mais `<symbol>` do sprite. Isso custa
 * o `currentColor`: a arte tem cor própria e não acompanha mais o tema nem o
 * hover. Em troca, o desenho é exatamente o que a direção de arte entregou.
 *
 * SEM opacidade: a arte já é clara — miolo do traço em #999 sobre a toolbar
 * #F5F5F5, o que dá 2,6:1 (o X é ainda mais fino, 1,5:1). O mínimo para
 * elemento gráfico é 3:1, então qualquer transparência aqui só afunda mais.
 * O hover se resolve no `translateY` do link. Ver docs/pendencias.md.
 *
 * Arquivo de 32px exibido a 18: a nitidez em tela 2× vem daí.
 */
.rede__icone {
  width: 28px;
  height: 28px;
}

.redes-desktop {
  display: none;
}

/* ==========================================================================
   linha 2 — marca, menu, busca, CTA
   ========================================================================== */

/*
 * Sem `min-height` fixo de propósito. O lockup traz o retângulo creme
 * embutido (pendência #19) e, com a barra travada em 83px enquanto a marca
 * encolhe com o viewport, sobrava creme em cima e embaixo — medido: 6,2px de
 * cada lado a 1440, o que faz o logo parecer solto no meio da faixa.
 *
 * Deixando a altura ser ditada pela marca, a placa encosta nas duas bordas em
 * qualquer largura. A 1920 o logo bate no teto de 440px e a barra volta
 * exatamente aos 83px do PSD. Os demais itens têm min-height de 44px, então a
 * barra nunca fica menor que o alvo de toque.
 */
.cabecalho__barra {
  background: var(--cor-fundo);
  display: flex;
  align-items: center;
}

.marca {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* o lockup é baixo (440×83): sem isto o alvo de toque fica em 23px */
  min-height: 44px;
  line-height: 0;
}

/* O PNG do PSD traz o retângulo creme embutido (a estrela é clipada por ele),
   então o lockup só fecha sobre --cor-fundo do tema claro. Enquanto não vier o
   SVG, nos temas escuro/alto contraste ele vira uma placa assumida, com raio,
   em vez de um retângulo creme solto. Ver docs/pendencias.md #19. */
.marca img {
  width: clamp(160px, 26vw, 228px);
  height: auto;
}

:root[data-theme='dark'] .marca img,
:root[data-contraste='alto'] .marca img {
  border-radius: var(--raio-m);
}

.nav-desktop {
  display: none;
  flex: 1;
}

.nav__lista {
  display: flex;
  align-items: center;
  /* O piso caiu de 0.75rem para 0.5rem junto com a troca para Gotham: são os
     ~20px que faltavam para os seis rótulos caberem numa linha no começo da
     faixa desktop. */
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * `nowrap` é regra, não ajuste fino: item de menu partido em duas linhas já
 * quebrou este header uma vez (ver CLAUDE.md). Com ele, o que cede é a busca,
 * que encolhe — nunca o rótulo.
 *
 * O corpo virou fluido na troca para Gotham (11/08/2026). Gotham Bold é ~7%
 * mais larga que a Montserrat Bold no mesmo tamanho, e com 13px fixos os seis
 * rótulos deixavam de caber entre 1200 e 1500px de tela. O clamp devolve os
 * 13px do PSD a partir de ~1370px e cede o que falta abaixo disso.
 */
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(0.75rem, 0.95vw, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--cor-marca-primaria);
  position: relative;
}

/* Sublinhado que cresce do centro — escala, não width (regra do CLAUDE.md). */
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0.75rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
}

/* Página atual: sublinhado fixo, sem depender de hover. Quem marca é o
   `$atual` passado ao partial. */
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-inline-start: auto;
}

/* O campo preenche quem o hospeda: 171px na barra do desktop (ver
   `.busca-desktop`), largura inteira dentro da gaveta. */
.busca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 39px;
  padding-inline: 0.75rem;
  background: var(--cor-superficie);
  border: 1px solid transparent;
  transition: border-color var(--dur-rapida) var(--ease-padrao);
}

.busca:focus-within {
  border-color: var(--cor-marca-primaria);
}

.busca__icone {
  flex-shrink: 0;
  color: var(--cor-marca-primaria);
}

.busca__campo {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  letter-spacing: 0.015em;
}

.busca__campo::placeholder {
  color: var(--cor-texto);
  text-transform: uppercase;
}

.busca__campo:focus {
  outline: none;
}

/*
 * 171px é a medida do PSD, mas agora como PREFERÊNCIA, não como trava: no
 * começo da faixa desktop é daqui que sai o espaço para os seis rótulos do menu
 * caberem numa linha só. `flex-grow: 0` impede o caminho contrário — sobrando
 * espaço, o campo fica nos 171 do layout em vez de esticar.
 *
 * O `flex` mora aqui, no item de `.acoes`, e não em `.busca`: dentro de um pai
 * `display: block` as propriedades de flex não valem, e o campo ora encolhia
 * para o `min-width`, ora esticava para 202px.
 */
.busca-desktop {
  display: none;
  flex: 0 1 171px;
  min-width: 8rem;
}

.porta-voz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 1.25rem;
  font-family: var(--fonte-titulo);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  /* Mesma regra do menu: o rótulo do CTA não quebra. Com Gotham ele ficou largo
     o bastante para partir em "SEJA PORTA-" / "VOZ" perto de 1280px. */
  white-space: nowrap;
  color: var(--cor-cta-texto);
  background: var(--cor-cta);
  border-radius: 999px;
  /* o anel claro do PSD, sem custo de layout */
  box-shadow: 0 0 0 4px var(--cor-cta-anel);
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

/* Abaixo do desktop o rótulo quebrava em três linhas e engolia a barra. */
@media (width < 78rem) {
  .porta-voz {
    padding-inline: 0.5rem;
    font-size: 0.6rem;
    white-space: nowrap;
    min-height: 26px;
  }

  .marca img {
    width: clamp(120px, 32vw, 187px);
  }
}

.porta-voz:hover {
  transform: scale(1.03);
}

.porta-voz:active {
  transform: scale(0.97);
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cor-marca-primaria);
}

/* ==========================================================================
   gaveta mobile
   ========================================================================== */

/* `display: grid` na classe venceria o [hidden] do UA stylesheet. */
.gaveta[hidden] {
  display: none;
}

.gaveta {
  background: var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
  padding: var(--espaco-3) var(--gutter) var(--espaco-4);
  display: grid;
  gap: var(--espaco-3);
}

.gaveta .nav__lista {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.gaveta .nav__link {
  padding-block: 0.5rem;
  font-size: 1rem;
}

.gaveta .nav__link::after {
  display: none;
}

.gaveta__busca .busca {
  width: 100%;
}

.gaveta[data-aberta] {
  animation: abrirGaveta var(--dur-media) var(--ease-padrao);
}

@keyframes abrirGaveta {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ==========================================================================
   desktop
   --------------------------------------------------------------------------
   O corte subiu de 62rem (992px) para 78rem (1248px) em 11/08/2026, junto com
   a troca para Gotham. Não é preferência: com os seis rótulos em Gotham Bold, a
   marca, a busca e o CTA, a linha precisa de ~1180px. Entre 992 e 1200 o menu
   ou quebrava em duas linhas ou empurrava a página para o lado — os dois
   proibidos pelo piso de qualidade. Nessa faixa quem responde é a gaveta, que
   já leva o mesmo menu e a mesma busca.
   ========================================================================== */

@media (width >= 78rem) {
  .redes-desktop,
  .busca-desktop {
    display: block;
  }

  .nav-desktop {
    display: flex;
    justify-content: center;
  }

  .hamburger,
  .gaveta {
    display: none;
  }
}