/* ============================================
   HEADER — SUBMENUS E ESTADOS INTERATIVOS

   A GEOMETRIA do topo (grid de 3 colunas, alturas, breakpoints, hambúrguer,
   busca, idioma, marca de apoio) vive em layout-sao-jose.css. Este arquivo
   cuida só do que é comportamento: dropdown do menu, acordeão no mobile e
   estados de foco/aberto.

   Antes daqui existia uma segunda cópia do layout inteiro em flexbox. Como os
   seletores eram mais específicos (`header.topo .topo-identidade .util`), o
   `display:flex` vencia o `display:grid` mas as alturas fixas do grid
   continuavam aplicadas — no celular os filhos quebravam em 3 linhas dentro de
   uma caixa de 72px e a busca vazava para fora do fundo branco do topo.
   ============================================ */

/* ---------- LINHA 2 — dropdown do menu ---------- */
header.topo .menu-principal > ul > li.sub{position:relative;}

header.topo .menu-principal .submenu{
    position:absolute;
    top:100%;
    left:0;
    min-width:240px;
    background:var(--sj-azul);
    border-radius:0 0 10px 10px;
    padding:6px 0;
    margin:0;
    list-style:none;
    box-shadow:0 18px 36px rgba(0,62,110,.22);
    opacity:0;
    pointer-events:none;            /* não captura mouse quando fechado */
    transition:opacity .2s ease;
    transition-delay:.15s;          /* grace period — não fecha instantâneo ao mouseout */
    z-index:1001;
}
/* Buffer invisível entre o item e o dropdown — evita o submenu sumir ao descer com o mouse */
header.topo .menu-principal .submenu:before{
    content:"";
    position:absolute;
    top:-10px;
    left:0;
    right:0;
    height:10px;
    background:transparent;
}
/* Abre por :hover OU por .hover (JS), garantindo redundância contra bugs de hover em browsers */
header.topo .menu-principal li.sub:hover > .submenu,
header.topo .menu-principal li.sub.hover > .submenu,
header.topo .menu-principal li.sub.aberto > .submenu{
    opacity:1;
    pointer-events:auto;            /* recupera ao abrir */
    transition-delay:0s;            /* abre instantâneo */
}

/* O último submenu não pode vazar para fora da tela */
header.topo .menu-principal > ul > li.sub:last-child .submenu{left:auto;right:0;}

/* Itens do submenu — UMA única definição de padding/border (no <a>), nada no <p> */
header.topo .menu-principal .submenu a{
    display:block;
    padding:11px 22px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    line-height:1.3;
    border-bottom:1px solid rgba(255,255,255,.12);
    transition:background .2s ease;
}
header.topo .menu-principal .submenu a:last-child{border-bottom:0;}
header.topo .menu-principal .submenu a p{margin:0;padding:0;background:transparent;border:0;color:inherit;font:inherit;line-height:inherit;}
header.topo .menu-principal .submenu a:hover{background:var(--sj-azul-medio);color:#fff;}
header.topo .menu-principal .submenu a:hover p{color:#fff;}

/* ---------- FOCO VISÍVEL (teclado) ---------- */
header.topo .topo-busca:focus-within{border-color:var(--sj-azul);box-shadow:0 0 0 3px rgba(29,138,216,.14);}
header.topo a:focus-visible,
header.topo button:focus-visible,
header.topo .link:focus-visible,
header.topo .translate-ativo:focus-visible{outline:2px solid var(--sj-azul);outline-offset:2px;}
header.topo .topo-menu a:focus-visible,
header.topo .topo-menu .link:focus-visible{outline-color:#fff;}

/* ---------- MOBILE — acordeão no lugar do dropdown ---------- */
@media (max-width: 1100px){
    header.topo .menu-principal .submenu{
        position:static;
        opacity:1;
        pointer-events:auto;
        max-height:0;
        overflow:hidden;
        padding:0;
        box-shadow:none;
        border-radius:0;
        background:rgba(0,0,0,.18);
        transition:max-height .3s ease;
    }
    header.topo .menu-principal .submenu:before{display:none;}
    /* No toque o :hover fica "preso": só o .aberto (clique) abre */
    header.topo .menu-principal li.sub:hover > .submenu{max-height:0;}
    header.topo .menu-principal li.sub.aberto > .submenu{max-height:1500px;padding:6px 0;}
    header.topo .menu-principal > ul > li.sub:last-child .submenu{right:auto;}
    header.topo .menu-principal .submenu a{padding:12px 36px;font-size:13px;border-bottom-color:rgba(255,255,255,.08);}
    header.topo .menu-principal .submenu a:hover{background:rgba(255,255,255,.08);color:#fff;}

    /* Seta indicando que o item abre um submenu, e giro quando aberto */
    header.topo .menu-principal li.sub > .link{position:relative;padding-right:48px;}
    header.topo .menu-principal li.sub > .link:after{
        content:"";
        position:absolute;
        right:24px;
        top:50%;
        width:8px;
        height:8px;
        margin-top:-5px;
        border-right:2px solid rgba(255,255,255,.8);
        border-bottom:2px solid rgba(255,255,255,.8);
        transform:rotate(45deg);
        transition:transform .25s ease;
    }
    header.topo .menu-principal li.sub.aberto > .link:after{transform:rotate(-135deg);margin-top:-2px;}
}