/* ============================================================
   MENU COM SUBMENU
   No desktop o submenu abre ao passar o mouse ou pelo teclado.
   No mobile o item vira sanfona, controlada pelo eqc.js.
============================================================ */

.menu-grupo{ position:relative; }

.menu-pai{
  display:inline-flex; align-items:center; gap:.35rem;
  position:relative;
  text-decoration:none; font-weight:600; font-size:.92rem;
  color:var(--preto);
  padding:.3rem 0;
  cursor:pointer;
  transition:color .25s ease;
}
.cabecalho--topo .menu-pai{ color:#fff; }

/* Mesmo sublinhado dos itens simples */
.menu-pai::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--amarelo);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.65,0,.25,1);
}
.menu-grupo:hover .menu-pai::after,
.menu-pai:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

.menu-seta{
  width:8px; height:8px; flex:0 0 8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s ease;
}

.menu-grupo.ativo > .menu-pai{ color:var(--roxo); }
.cabecalho--topo .menu-grupo.ativo > .menu-pai{ color:var(--amarelo); }

.submenu{
  position:absolute; top:100%; left:-1rem;
  min-width:230px;
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(56,18,83,.16);
  padding:.6rem 0;
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
/* Faixa invisível que cobre o vão entre o item e o painel,
   senão o submenu fecha quando o mouse atravessa. */
.submenu::before{
  content:""; position:absolute; top:-14px; left:0; right:0; height:14px;
}

.menu-grupo:hover > .submenu,
.menu-grupo:focus-within > .submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.menu-grupo:hover .menu-seta,
.menu-grupo:focus-within .menu-seta{ transform:rotate(-135deg) translateY(-2px); }

.submenu a{
  display:block;
  padding:.6rem 1.4rem;
  font-size:.88rem; font-weight:500;
  color:var(--preto); text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.submenu a:hover,
.submenu a:focus-visible{ background:var(--fundo); color:var(--roxo-escuro); }
.submenu a[aria-current="page"]{ color:var(--roxo); font-weight:700; }

/* Âncora não pode parar embaixo do cabeçalho fixo */
[id]{ scroll-margin-top:calc(var(--altura-header) + 16px); }

@media (max-width: 860px){
  /* Com uma sanfona aberta a lista passa da tela em aparelho pequeno */
  .menu{
    max-height:calc(100svh - var(--altura-header));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .menu-grupo{ width:100%; }
  .menu-pai{ width:100%; justify-content:space-between; }
  .cabecalho--topo .menu.aberto .menu-pai{ color:var(--preto); }
  .menu-pai::after{ display:none; }

  .submenu{
    position:static;
    min-width:0;
    box-shadow:none; background:transparent; border-radius:0;
    padding:0 0 0 .9rem;
    margin-top:.5rem;
    border-left:2px solid var(--cinza);
    display:none;
    opacity:1; visibility:visible; transform:none;
  }
  .submenu::before{ display:none; }

  /* No toque quem abre é o clique, não o hover */
  .menu-grupo:hover > .submenu,
  .menu-grupo:focus-within > .submenu{ display:none; }
  .menu-grupo.aberto > .submenu{ display:flex; }
  .menu-grupo.aberto .menu-seta{ transform:rotate(-135deg) translateY(2px); }
  .menu-grupo:hover .menu-seta,
  .menu-grupo:focus-within .menu-seta{ transform:rotate(45deg) translateY(-2px); }
  .menu-grupo.aberto:hover .menu-seta{ transform:rotate(-135deg) translateY(2px); }

  .submenu a{ padding:.5rem 0; white-space:normal; }
}