/**
 * Painel de Navegação — <dialog> nativo, responsabilidade exclusiva de
 * navegação (identidade institucional/logo fica só no Header e no Footer).
 * Substitui o offcanvas do Bootstrap (Sprint 2, ver ADR-002).
 *
 * Cores, largura e identidade visual copiadas do menu real em produção
 * (uenf.br/cct — css/components/new-menu.css, css/styles.css do uenf-geral).
 * Não são valores inventados — ver docs/components/menu-sti-uenf.md.
 */

.menu-side-panel {
  position: fixed;
  /* Painel abre imediatamente abaixo do Header real (nunca sobrepondo).
     --uenf-header-height é medida ao vivo em header.php (getBoundingClientRect
     do #masthead, com fallback para .bg-header-logo no mobile) e gravada antes
     do showModal(); 60px é só o fallback estático caso o JS não rode. */
  top: var(--uenf-header-height, 60px);
  left: 0;
  right: auto;
  margin: 0;
  height: calc(100vh - var(--uenf-header-height, 60px));
  max-height: calc(100vh - var(--uenf-header-height, 60px));
  width: 338px; /* mobile/base: um painel por vez, mesma largura do .offcanvas em produção */
  max-width: 100vw;
  border: none;
  padding: 0;
  color: var(--menu-dialog-text-color, #ffffff);
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 0.25s ease, width 0.25s ease;
}

/* Header sempre visível enquanto o painel está aberto — em vez de ficar
   coberto pelo painel, o Header (#masthead) passa a position:fixed no topo,
   e o painel abre logo abaixo (ver --uenf-header-height acima).
   body.menu-open é adicionada/removida pelo mesmo controlador JS que já mede
   --uenf-header-height (script inline em header.php, no showModal()/'close'
   do dialog) — preferida a `:has()` por ser mais simples de depurar e
   reutilizável em outros temas da WEAP sem depender de suporte recente de
   CSS.
   z-index 10001 mantém a mesma "camada" já usada por .bg-header-logo no
   mobile (style.min.css) — mas repare que isso NÃO supera o <dialog> nem seu
   ::backdrop: elementos com showModal() renderizam na "top layer" do
   navegador, sempre acima do documento normal independentemente do z-index.
   Por isso o Header aparece com o esmaecimento do ::backdrop por cima
   (mesmo tratamento visual de qualquer conteúdo atrás do modal) — ele
   continua visível e legível, só não fica 100% "brilhante" enquanto o
   painel está aberto.
   top usa a variável nativa do WP Core (--wp-admin--admin-bar--height,
   32px desktop/46px <=782px, definida em html por wp-includes/css/admin-bar.css)
   em vez de 0 fixo — position:fixed ignora a margem de html, então sem isso
   o Header ficaria coberto pela admin bar sempre que o painel está aberto
   numa sessão autenticada. Fallback 0px cobre o caso sem admin bar. */
body.menu-open #masthead {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 10001;
}

/* Especificidade elemento+ID (Corolário aprovado pelo usuário): o legado
   css/components/new-menu.css define `#menuLateral { background-color:
   var(--bs-uenf-blue, #1d3771) !important; ... }` — o <dialog> deste
   componente novo reaproveita o mesmo id="menuLateral" e, com especificidade
   de ID simples, ficava sempre preso naquele fundo, ignorando
   --menu-bg-color. "dialog#menuLateral" (elemento + ID) supera a
   especificidade do seletor legado sem alterar nem remover o arquivo
   legado — que continua intacto para o menu-legacy (offcanvas Bootstrap).

   Mesmo conflito, agora em altura: assets/dist/css/style.min.css (build do
   legado) define `#menuLateral { height: 100dvh; min-height: 100vh; ... }`.
   Especificidade de ID simples supera `.menu-side-panel` (classe) e prendia
   o painel em 100% da viewport, ignorando --uenf-header-height — o painel
   nunca respeitava o espaço reservado ao Header fixo. `min-height: 100vh`
   é o pior dos dois: mesmo corrigindo só `height` aqui, o min-height do
   legado (maior que o max-height calculado) continuaria vencendo o clamp
   height/max-height/min-height do box model. Por isso os três precisam ser
   repetidos aqui, na mesma especificidade elemento+ID já aprovada acima. */
dialog#menuLateral {
  background-color: var(--menu-bg-color, #1d3771) !important;
  height: calc(100vh - var(--uenf-header-height, 60px));
  max-height: calc(100vh - var(--uenf-header-height, 60px));
  min-height: 0;
}

/* Desktop — a largura do <dialog> cresce para caber os painéis lado a lado
   (338px cada, ver menu-sti-uenf.css). Sem isso, o segundo/terceiro painel
   ficaria espremido dentro dos mesmos 338px do painel principal. */
@media (min-width: 1024px) {
  .menu-side-panel {
    width: auto;
    max-width: 90vw;
  }
}

.menu-side-panel[open] {
  transform: translateX(0);
  display: flex;
  flex-direction: column;
}

.menu-side-panel::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .menu-side-panel {
    transition: none;
  }
}

.menu-side-panel__header {
  display: flex;
  align-items: center;
  /* Antes: space-between (logo à esquerda, fechar à direita). A logo saiu do
     painel (Header real agora fica sempre visível acima) — só resta o botão
     de fechar, que deve continuar no canto superior direito. */
  justify-content: flex-end;
  /* Toolbar de Navegação (Work Order 2026-07-13): sem a logo, esta barra só
     acomoda o botão de fechar — 1rem em cima/embaixo deixava vazio
     desnecessário. Padding vertical reduzido para 6px; horizontal mantido em
     1rem (alinhamento com o resto do painel). O botão em si não muda de
     tamanho, só o espaço ao redor dele. */
  padding: 6px 1rem;
  border-bottom: 1px solid var(--menu-header-border-color, rgba(255, 255, 255, 0.25));
}

/* ✕ do painel principal — único botão de fechar do menu (painéis internos
   têm só a seta ←). Sem texto "Fechar"; intensidade reduzida para ficar
   menos branco (Work Order 2026-07-08). */
.menu-side-panel__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25em 0.5em;
  color: var(--menu-close-color, rgba(255, 255, 255, 0.75));
  transition: color 0.2s ease-in-out;
}

.menu-side-panel__close:hover,
.menu-side-panel__close:focus {
  color: var(--menu-close-hover-color, #ffffff);
}

.menu-side-panel__close:focus-visible {
  outline: 2px solid var(--menu-focus-outline-color, #ffffff);
  outline-offset: 2px;
}

.menu-side-panel__body {
  flex: 1;
  min-height: 0; /* permite que os painéis internos façam seu próprio scroll */
  overflow: hidden;
  padding: 0;
}