/* Menu — correcções que o Tailwind pré-compilado não consegue servir.
   O ficheiro tailwind.css é gerado fora deste repositório: qualquer classe
   utilitária nova é descartada em silêncio. Tudo o que for preciso acrescentar
   ao menu vive aqui, com selectores próprios, e é carregado DEPOIS do Tailwind.

   Revisão de 2026-08-24 (os três críticos):
   1. o painel em modo gaveta tapava o botão que o abria — sem saída no telemóvel;
   2. o botão do menu não tinha nome acessível nem estado;
   3. os itens de topo não assinalavam a página actual.
*/

/* ---- 1. gaveta com saída: fundo escurecido + botão de fechar ---- */

#sb-fundo {
  position: fixed;
  inset: 0;
  z-index: 35;                 /* acima do header (30), abaixo do painel (40) */
  background: rgb(15 23 42 / 0.45);
}
#sb-fundo[hidden] { display: none; }

/* O botão de fechar só existe enquanto o menu é gaveta. No ecrã grande o
   painel está sempre presente e fechá-lo não faz sentido. */
.sb-fechar { display: none; }

@media (max-width: 900px) {
  .sb-drawer .sb-fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;                /* alvo de toque confortável */
    height: 44px;
    margin: 8px 8px 0 auto;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    background: #fff;
    color: var(--color-slate-600);
    flex: none;
  }
  .sb-drawer .sb-fechar:hover { color: var(--color-slate-900); }
  .sb-fechar svg { width: 20px; height: 20px; }
}

/* ---- 2. botão do menu: área de toque de 44px ---- */

#sb-burger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
/* No ecrã grande o Tailwind aplica display:none com !important — este
   inline-flex não o contraria, e a regra acima não o ressuscita. */
#sb-burger { display: inline-flex; }
#sb-burger svg { width: 20px; height: 20px; }

/* ---- foco visível nos controlos novos, no tom já usado em .sb-caphead ---- */

.sb-fechar:focus-visible,
#sb-burger:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}