/**
 * Menu STI UENF — painéis lado a lado (desktop) / drill-down (mobile).
 * Ver spec: uenf-framework/modules/native-html-components/components/menu-sti-uenf.md
 *
 * Cores e identidade visual copiadas do menu real em produção (uenf.br/cct
 * — css/components/new-menu.css do uenf-geral): fundo azul institucional,
 * texto branco, separadores brancos translúcidos, item atual com fundo
 * branco translúcido e texto azul. Não são valores inventados — ver
 * docs/components/menu-sti-uenf.md.
 */

/* Cadeia de altura: .menu-side-panel__body (flex:1, no CSS do painel) →
   .menu-sti-uenf (este <nav>) → .menu-sti-uenf__panels → cada painel.
   Sem isso, os painéis ficam com altura "auto" (só a altura do conteúdo),
   em vez de ocupar a altura toda do Painel de Navegação. */
.menu-sti-uenf {
  display: block;
  height: 100%;
}

.menu-sti-uenf__panels {
  display: flex;
  align-items: stretch; /* todos os painéis com a mesma altura do painel principal */
  height: 100%;
  min-height: 0;
}

.menu-sti-uenf__panel {
  list-style: none;
  margin: 0 !important;
  /* !important: CSS global do tema aplica padding 16px em ul.menu, o que
     encolhia os itens (item ativo/linhas não chegavam à borda do painel). */
  padding: 0 !important;
  box-sizing: border-box;
  /* Hierarquia visual por profundidade: cada nível fica ~5% mais claro (ou,
     em fundo claro, ~3% mais escuro — ver --menu-level-step) que o anterior
     (só luminosidade — matiz e saturação intactos). O nível vem de
     --menu-sti-level, gravado pelo JS em cada painel — uma regra só,
     escalável para qualquer profundidade, nenhuma cor manual por nível.
     Fallback (navegador sem sintaxe de cor relativa): fundo base em todos
     os níveis — mesma aparência de antes, nada quebra.
     !important (Corolário aprovado pelo usuário): o <ul> do painel raiz
     (nível 0) carrega também a classe padrão "menu" do wp_nav_menu(), e
     assets/dist/css/style.min.css define `.menu{background:#1d3771}` sem
     !important, carregado depois deste arquivo — vencia esta declaração
     e prendia o painel raiz no azul antigo mesmo com --menu-bg-color
     configurada. */
  background-color: var(--menu-bg-color, #1d3771) !important;
}

@supports (color: hsl(from red h s l)) {
  .menu-sti-uenf__panel {
    /* !important (Corolário aprovado pelo usuário): mesma disputa de
       especificidade da regra base acima (.menu vs .menu-sti-uenf__panel em
       assets/dist/css/style.min.css) também afeta esta regra — sem
       !important aqui, a regra base (agora com !important) sempre vencia
       esta, achatando a gradação de profundidade em todos os níveis. */
    background-color: hsl(from var(--menu-bg-color, #1d3771) h s calc(l + (var(--menu-sti-level, 0) * var(--menu-level-step, 5)))) !important;
  }
}

/* Linhas divisórias no <li> (não no <a>): ocupam TODA a largura do painel,
   sem recuos internos, sem interromper antes do final. */
.menu-sti-uenf__panel > li {
  margin: 0;
  border-bottom: 1px solid var(--menu-border-color, rgba(255, 255, 255, 0.08));
}

/* Itens (links de página E botões de categoria): mesma linha visual.
   Cor com !important — CSS global do tema (styles.css/new-menu.css) tem
   regras de cor de link com alta especificidade que deixavam alguns itens
   em azul escuro. Branco a 85% (não puro): reduz o brilho/contraste
   excessivo sem comprometer a legibilidade (Work Order 2026-07-08).
   Espaçamento vertical reduzido em ~6px (16px → 13px) para diminuir
   a altura total do menu sem comprometer a leitura.
   padding-left 12px + bullet 4px + gap 8px = texto começa nos mesmos
   24px de antes (alinhamento preservado após a introdução do bullet). */
.menu-sti-uenf__panel > li > a,
.menu-sti-uenf__category {
  display: flex;
  justify-content: flex-start;
  /* flex-start (não center): o bullet fica sempre na PRIMEIRA linha do
     item, mesmo quando o texto quebra em 2+ linhas — sem deslocamento
     vertical (Work Order "Ajustes Finais", item 1). */
  align-items: flex-start;
  gap: 0.5em;
  width: 100%;
  padding: 13px 16px 13px 12px;
  margin: 0;
  border: none;
  background: none;
  text-decoration: none !important;
  color: var(--menu-link-color, rgba(255, 255, 255, 0.85)) !important;
  font-weight: 500;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

/* Bullet indicador de tipo de item (Work Order 2026-07-08): retângulo
   4×12px à esquerda, alinhado ao centro óptico da PRIMEIRA linha de texto
   (margin-top = metade da diferença entre o line-height de 1.5em e os
   12px do bullet). Branco 10% = página simples (sem submenu). */
.menu-sti-uenf__panel > li > a::before,
.menu-sti-uenf__category::before {
  content: '';
  flex: none;
  width: 4px;
  height: 12px;
  margin-top: calc((1.5em - 12px) / 2);
  background-color: var(--menu-selected-bg, rgba(255, 255, 255, 0.10));
}

/* Laranja (ou cor de destaque configurada) = item com submenu (abre painel). */
.menu-sti-uenf__category::before {
  background-color: var(--menu-accent-color, #f58220);
}

/* Painéis internos (nível 1+ do data-panel-level; "painel 2 em diante" na
   linguagem da Work Order): itens com peso normal — só o painel principal
   mantém o semibold. */
.menu-sti-uenf__panel:not([data-panel-level="0"]) > li > a,
.menu-sti-uenf__panel:not([data-panel-level="0"]) .menu-sti-uenf__category {
  font-weight: 400;
}

/* Hover: fundo sutil + texto em branco PLENO (#fff) — nunca tom de azul
   (Work Order 2026-07-08, regra para páginas sem submenu; aplicado também
   às categorias para consistência). */
.menu-sti-uenf__panel > li > a:hover,
.menu-sti-uenf__category:hover {
  background-color: var(--menu-hover-bg, rgba(255, 255, 255, 0.08));
  color: var(--menu-hover-color, #ffffff) !important;
}

.menu-sti-uenf__category-label {
  flex: 1;
  min-width: 0;
}

/* Seta → das categorias: indica a direção do painel que será aberto.
   Nunca rotaciona (nada de persiana). Centralizada verticalmente mesmo
   com os itens em flex-start (só o bullet acompanha a primeira linha). */
.menu-sti-uenf__category > i {
  flex: none;
  align-self: center;
  opacity: 0.7;
}

/* Itens SELECIONADOS — todos os níveis do caminho percorrido (Work Order
   "Ajustes Finais", item 3): a página atual E seus ancestrais (a categoria
   aberta em cada painel) recebem o mesmo destaque sutil de fundo,
   rgba(255,255,255,0.10) (+5% de opacidade sobre os 0.05 originais — Work
   Order "Seleção 5% Mais Opaca", 2026-07-08), mostrando o caminho completo
   da navegação. O fundo continua essencialmente azul, então o texto
   permanece branco — contraste WCAG preservado. Largura total da linha
   (fundo no <li>). */
.menu-sti-uenf .current-menu-item,
.menu-sti-uenf .current_page_item,
.menu-sti-uenf .current-menu-ancestor,
.menu-sti-uenf .current-menu-parent,
.menu-sti-uenf .current_page_ancestor,
.menu-sti-uenf .current_page_parent {
  background-color: var(--menu-selected-bg, rgba(255, 255, 255, 0.10));
}

/* Texto do item selecionado/ativo: precisa mirar o link/categoria diretamente
   (não o <li>) porque a cor do texto já é definida com !important na regra
   base do item (acima) — cor herdada do <li> nunca venceria essa declaração
   direta no elemento filho, então uma regra no <li> sozinha não teria efeito
   visual. Especificidade (2 classes) + !important vence a regra base
   (1 classe + 2 tipos) mesmo com !important dos dois lados. */
.menu-sti-uenf .current-menu-item > a,
.menu-sti-uenf .current-menu-item > .menu-sti-uenf__category,
.menu-sti-uenf .current_page_item > a,
.menu-sti-uenf .current_page_item > .menu-sti-uenf__category,
.menu-sti-uenf .current-menu-ancestor > a,
.menu-sti-uenf .current-menu-ancestor > .menu-sti-uenf__category,
.menu-sti-uenf .current-menu-parent > a,
.menu-sti-uenf .current-menu-parent > .menu-sti-uenf__category,
.menu-sti-uenf .current_page_ancestor > a,
.menu-sti-uenf .current_page_ancestor > .menu-sti-uenf__category,
.menu-sti-uenf .current_page_parent > a,
.menu-sti-uenf .current_page_parent > .menu-sti-uenf__category {
  color: var(--menu-selected-color, #ffffff) !important;
}

/* Cabeçalho dos painéis internos: apenas a seta de voltar (←) no canto
   superior esquerdo — sem texto, sem título, sem ✕ (o fechar existe só no
   painel principal). Work Order de refinamento visual (2026-07-08). */
.menu-sti-uenf__panel-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--menu-header-border-color, rgba(255, 255, 255, 0.25)) !important;
}

.menu-sti-uenf__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px 10px;
  font-size: 1em;
  cursor: pointer;
  color: var(--menu-link-color, rgba(255, 255, 255, 0.85)) !important;
}

.menu-sti-uenf__back:hover,
.menu-sti-uenf__back:focus {
  color: var(--menu-hover-color, #ffffff) !important;
}

/* Desktop — painéis COMPLETOS lado a lado (338px cada, mesma largura do
   painel principal), nunca coluna estreita nem dropdown. O <dialog> cresce
   em largura para acomodar (ver menu-side-panel.css). Sem linha vertical
   entre painéis: a diferenciação é feita pela gradação de luminosidade do
   fundo (ver .menu-sti-uenf__panel acima). */
@media (min-width: 1024px) {
  .menu-sti-uenf__panel[data-panel-level] {
    flex: 0 0 338px;
    width: 338px;
    overflow-y: auto;
  }
}

/* Mobile/tablet — um painel por vez, sobreposto ao anterior, mesma área do
   painel principal (não coluna, não lado a lado), pilha de navegação. */
@media (max-width: 1023.98px) {
  .menu-sti-uenf__panels {
    position: relative;
    overflow-x: hidden;
    width: 100%;
  }

  .menu-sti-uenf__panel[data-panel-level] {
    flex: 0 0 100%;
    width: 100%;
  }

  /* O fundo de cada nível já vem da regra de gradação (--menu-sti-level);
     aqui só o posicionamento em pilha. */
  .menu-sti-uenf__panel[data-panel-level]:not([data-panel-level="0"]) {
    position: absolute;
    inset: 0;
    overflow-y: auto;
  }
}

/* Foco visível — contraste branco sobre azul */
.menu-sti-uenf__category:focus-visible,
.menu-sti-uenf__back:focus-visible,
.menu-sti-uenf a:focus-visible {
  outline: 2px solid var(--menu-focus-outline-color, #ffffff);
  outline-offset: -2px;
}