/* CABEÇALHO PÚBLICO — o menu do topo direito (Protocolo completo, Consulta,
   Blog, Entrar, Começar) nas páginas abertas do site.
   Carregado por: landing.html (home) e consulta-online.html.

   POR QUE ESTE ARQUIVO EXISTE, e não uma cópia em cada página: cada regra de
   celular abaixo foi MEDIDA — 820px, 420px, 400px, 340px — depois de a home
   rolar de lado no aparelho de verdade. Duplicar isso em outra página é
   garantir que um dia as duas divirjam e só uma role de lado, num aparelho
   que ninguém tem à mão pra testar.

   NÃO entra aqui o que é do slimm.css (a caixa do .slimm-header, .header-nav,
   .btn-ghost, .btn-primary). Aqui fica só o que é específico das páginas
   públicas: a cor de fundo do cabeçalho e o comportamento em tela estreita.
   E também não entra nada dos painéis logados — eles usam .header-nav com
   outro conteúdo, e regra com !important vazaria pra cima deles. */

.slimm-header { background: var(--bg-primary); }

/* Cinza só nos LINKS DE TEXTO. Os dois botões trazem cor própria do
   slimm.css — branco no "Começar" (fundo preto) e preto no "Entrar" (fundo
   vazado) — e esta regra os atropelava: ".header-nav a" tem especificidade
   maior que ".btn-primary", então o texto do botão preto saía cinza-arroxeado
   em cima do preto. Dava 3,1:1, abaixo do mínimo de 4,5:1 — e como o botão
   continuava clicável e no lugar certo, o defeito passou despercebido. */
.header-nav a:not(.btn-primary):not(.btn-ghost) { color: var(--text-secondary); }

@media (max-width: 820px) {
  /* Header em UMA linha. nowrap é proposital: deixar quebrar joga cada item
     numa linha e o cabeçalho triplica de altura. O que cede é tamanho. */
  .header-nav { gap: 8px !important; flex-wrap: nowrap; justify-content: flex-end; }
  .header-nav a[href="/protocolo"],
  .header-nav a[href="/consulta-online"],
  .header-nav .nav-protocolo,
  .header-nav a[href="/blog"] { font-size: 12px !important; white-space: nowrap; }
  .header-nav .btn-ghost,
  .header-nav .btn-primary {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }
  .slimm-header { padding: 12px 14px !important; gap: 10px !important; }
  /* O logo ocupava 154px dos 362px úteis — mais que o menu inteiro. Reduzir a
     altura dele é o que faz os links caberem numa linha sem esconder nenhum.
     Esconder link no celular custa caro: a indexação do Google é
     mobile-first. */
  .slimm-header .logo .site-logo { height: 22px !important; }
}

/* Abaixo de 420px somem os links secundários, pra não quebrar o layout do
   header; Entrar e Começar continuam visíveis. */
@media (max-width: 420px) {
  .header-nav a[href="/protocolo"],
  .header-nav a[href="/blog"] { display: none !important; }
}

/* Ainda dá pra apertar antes de sumir com mais algum item — some link é o
   último recurso. */
@media (max-width: 400px) {
  .header-nav { gap: 6px !important; }
  .header-nav a[href="/consulta-online"],
  .header-nav .nav-protocolo { font-size: 11.5px !important; }
  .header-nav .btn-ghost,
  .header-nav .btn-primary { font-size: 10.5px !important; padding: 7px 9px !important; }
  .slimm-header { padding: 12px 10px !important; gap: 8px !important; }
}

/* Abaixo de 340px (aparelhos antigos) nem "Protocolo" cabe. Some por último,
   e só aqui: é o link que mais interessa manter visível. */
@media (max-width: 340px) {
  .header-nav .nav-protocolo { display: none !important; }
}

/* Rótulo do link do protocolo: longo no desktop, curto no celular. Um <span>
   por vez — nunca os dois, senão o menu lê "Protocolo completoProtocolo". */
.rot-curto { display: none; }
@media (max-width: 820px) {
  .rot-longo { display: none; }
  .rot-curto { display: inline; }
}