/* ═══════════════════════════════════════════════════════════════════════════
   Colunas dos menus gerenciados (/master/?s=menus)

   Este arquivo NÃO redesenha os menus. A aparência continua vindo de site.css,
   resp.css e site-refinado.css, pelas classes de sempre — `.menus_left`,
   `.menus_right`, `.topo-social-medias`, `.footer-lifirst`, `.footer-lisecond`,
   `.footer-subs`, `.menu-mobile-ol`, `.redes-share`. O gerenciador emite
   exatamente essas classes.

   O que existe aqui é só o que o gerenciador acrescentou de novo:

     1. a largura de coluna, quando o gestor arrasta uma alça no painel;
     2. o item de texto (telefone/e-mail/endereço), que não existia no menu
        antigo e por isso não tinha regra em lugar nenhum.

   POR QUE A LARGURA VEM DE `--mn-largura` E NÃO DE `style="width:…"`:
   `width` inline vence media query. O site esconde o topo no celular
   (`.topo .menus_left{display:none}`) e estica o rodapé
   (`footer .footer-menus ul{width:100%}`), tudo dentro de
   `@media (max-width:766px)`. Uma largura inline sobreviveria a essas regras e
   quebraria o celular. Passando pela variável, a regra que a consome mora aqui
   dentro de `@media (min-width:767px)` — abaixo disso ela nem existe, e o
   responsivo de sempre continua no comando.

   Carregado logo depois do site.css, ANTES do resp.css: assim, onde houver
   empate de especificidade, quem decide continua sendo o responsivo.
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 767px) {

    /* Coluna com largura definida no painel. Sem a variável — que é o padrão,
       'auto' — nenhuma destas regras tem efeito, e a largura segue sendo a que
       o conteúdo pede, como sempre foi. */
    .topo .menus_left[style*="--mn-largura"],
    .topo .menus_right[style*="--mn-largura"],
    .topo .menus_center[style*="--mn-largura"] {
        width: var(--mn-largura);
    }

    footer .footer-menus > ul[style*="--mn-largura"] {
        width: var(--mn-largura);
    }
}

/* ── Submenu do topo: o dropdown ─────────────────────────────────────────────
   Nasce com o gerenciador. Antes, um item de topo com subpáginas cuspia os
   filhos soltos dentro da barra — "Comunidades" com 14 subpáginas quebrava o
   cabeçalho em três linhas. Não havia aparência anterior a preservar aqui;
   havia um buraco.

   Sem JavaScript, de propósito: `:hover` para o mouse e `:focus-within` para o
   teclado dão conta, e um menu que depende de script é um menu que some quando
   o script falha. Toque não entra na conta porque abaixo de 767px o
   `.topo .menus_left` é `display:none` — no celular quem serve é a gaveta.

   As cores saem dos tokens de site-refinado.css: é a mesma barra, o dropdown é
   a continuação dela.
   ────────────────────────────────────────────────────────────────────────── */

.topo .mn-tem-sub {
    position: relative;
}

.topo .mn-seta {
    margin-left: 5px;
    font-size: 9px;
    opacity: .7;
    transition: transform .18s ease, opacity .18s ease;
    /* `float:left` nos ícones do topo (site.css) jogaria a seta para antes do
       texto; aqui ela é parte da linha e fica onde foi escrita. */
    float: none !important;
    display: inline-block;
    vertical-align: middle;
}

.topo .mn-tem-sub:hover .mn-seta,
.topo .mn-tem-sub:focus-within .mn-seta {
    transform: rotate(180deg);
    opacity: 1;
}

.topo .mn-drop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;

    /* Fechado por padrão.
       `pointer-events:none` além do `visibility`, e não por excesso de zelo:
       `visibility` é HERDADA e um descendente pode reativá-la. Foi o que
       aconteceu com o mega — a regra que "abre" as listas de dentro das seções
       punha `visibility:visible` nelas, e como `opacity:0` não tira nada do
       hit-testing, o painel fechado virava um retângulo invisível de 720×380px
       embaixo da barra que abria o menu ao simples passar do mouse. Medido: 150
       pontos de uma grade acionavam o menu longe dele.
       `pointer-events` não é herdada da mesma forma: negada no painel, vale
       para a subárvore inteira até alguém reativar de propósito. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;

    margin: 0;
    padding: 18px 10px;

    /* ── `width: auto` NÃO é redundante ──────────────────────────────────────
       O painel é um `<ul>` dentro de `.topo`, e o site.css tem
       `.topo ul { width: 1200px }` — a largura da BARRA inteira. Sem declarar
       nada, o dropdown herdava aquele valor: um item com duas subpáginas abria
       um retângulo branco de 1200px, atravessando a tela da esquerda à direita
       com dois links perdidos num canto.

       Passou despercebido porque as três variantes escapavam por conta própria:
       `--duas` e `--tres` fixam a largura em px, e `--mega` declara `auto`. Só
       o painel simples — o caso mais comum — ficava com a largura da barra.

       `auto` devolve a conta ao conteúdo; o `min-width` abaixo dá o piso e o
       `max-width` impede que um item de nome comprido (os links são `nowrap`)
       estoure a janela. */
    width: auto;
    min-width: 220px;
    max-width: calc(100vw - 24px);

    max-height: min(70vh, 460px);
    overflow-y: auto;

    list-style: none;
    background: #ffffff;
    border: 1px solid var(--ref-line, #e4e8ee);
    border-radius: 10px;
    /* Sombra mais presente do que a de um painel escuro precisaria: na página
       interna a barra também é branca, e sem ela o dropdown se confundiria com
       o conteúdo em vez de pairar sobre ele. */
    box-shadow: 0 16px 38px -10px rgba(13, 35, 57, .32);
}

.topo .mn-tem-sub:hover > .mn-drop,
.topo .mn-tem-sub:focus-within > .mn-drop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

/* A partir de dez filhos o PHP reparte em colunas — uma só viraria uma cortina
   mais alta que a tela.

   Três detalhes que custaram uma volta:

   · `width` fixo, e não `min-width`. Um bloco absoluto com colunas e conteúdo
     `nowrap` calcula a largura por conta própria e estoura — o primeiro
     desenho saiu com 1200px, metade dele fora da tela.
   · `max-height` sai. Colunas dentro de um contêiner com rolagem vertical não
     param de criar colunas: transbordam para o lado. Duas colunas de sete
     linhas medem ~240px e não precisam rolar.
   · Ancorado no CENTRO do item, não na borda. Preso à esquerda, um painel de
     430px pendurado no último link do menu sai pela direita; preso à direita,
     sai pela esquerda quando o link está no começo. Centrado, sobra metade da
     largura para cada lado e cabe nos dois extremos da barra. */
.topo .mn-drop--duas,
.topo .mn-drop--tres {
    max-height: none;
    overflow: visible;
    column-gap: 10px;
    /* No fundo branco as colunas encostavam sem nada entre elas; o filete faz
       a leitura de cima para baixo, e não de lado. */
    column-rule: 1px solid var(--ref-line, #e4e8ee);

    left: 50%;
    right: auto;
    transform: translate(-50%, -4px);
    max-width: calc(100vw - 24px);
}

.topo .mn-tem-sub:hover > .mn-drop--duas,
.topo .mn-tem-sub:focus-within > .mn-drop--duas,
.topo .mn-tem-sub:hover > .mn-drop--tres,
.topo .mn-tem-sub:focus-within > .mn-drop--tres {
    transform: translate(-50%, 0);
}

.topo .mn-drop--duas { width: 430px; column-count: 2; }
.topo .mn-drop--tres { width: 640px; column-count: 3; }

/* Os `li` do dropdown não são os `li` da barra: nada de `float`, nada de
   maiúsculas, e sem o sublinhado animado que o `.topo ul li` carrega. */
.topo .mn-drop li {
    float: none;
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    text-shadow: none;
    break-inside: avoid;
}

/* ── Por que estes seletores são tão longos ──────────────────────────────────
   O `site.css` tem `.capa .topo ul li:hover a { color: #fff }` — branco em
   TODO link descendente de um item em hover. E o dropdown só existe enquanto o
   item está em hover, então os links dele caem inteiros nessa regra: painel
   branco, texto branco, nada visível. Foi exatamente o que aconteceu no
   primeiro desenho desta versão clara.

   Aquele seletor tem especificidade (0,3,3). Um `.capa .topo .mn-drop li a`
   dá (0,3,2) e perde. Escrever o estado de hover do pai no seletor sobe para
   (0,5,2) e resolve sem `!important`.

   `:is()` só encurta a lista; a especificidade que ele contribui é a do seu
   argumento mais específico, que é o que se quer aqui.
   ────────────────────────────────────────────────────────────────────────── */
.capa .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop li a,
.interno .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop li a,
.topo .mn-drop li a {
    display: block;
    padding: 6px 10px;
    color: var(--ref-ink, #1c2530);
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: .1px;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 6px;
}

/* Realce em dourado, que é o vocabulário do site, mas com o texto escuro: o
   dourado sobre branco não tem contraste para servir de cor de texto.
   Um degrau acima do seletor base, pelo mesmo motivo explicado ali. */
.capa .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop li a:hover,
.capa .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop li a:focus,
.interno .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop li a:hover,
.interno .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop li a:focus,
.topo .mn-drop li a:hover,
.topo .mn-drop li a:focus {
    background: rgba(201, 162, 75, .14);
    color: var(--ref-navy-800, #0d2339);
}

/* O dropdown é branco nos dois estados da barra — na capa (escura) e na página
   interna (clara). É uma superfície própria, não a continuação do fundo. */

/* ── Título: item de menu sem destino ────────────────────────────────────────
   Aqui há MENOS CSS do que parece necessário, e é de propósito.

   O título é um `<a>` sem `href` (ver MenuRenderer::titulo), então ele casa com
   `.topo ul li a` e recebe sozinho tudo o que os vizinhos recebem: cor na capa,
   cor na página interna, cor e padding com a barra rolada, realce no hover.
   Já esteve como `<span>`, com essas regras copiadas à mão — e a cópia ficou
   incompleta: na página interna rolada o título saía azul-escuro e desalinhado
   enquanto os vizinhos ficavam cianos.

   Sobra só o que o navegador não dá e o site não tem como saber: a marca de
   foco, já que este é o único item do topo que se alcança por teclado sem ser
   um link.
   ────────────────────────────────────────────────────────────────────────── */
/* A única diferença que DEVE existir em relação aos vizinhos. `<a>` sem `href`
   já não recebe `cursor:pointer`, mas cai em `auto` — que sobre texto vira o
   cursor de seleção e sugere que ali se marca palavra. `default` diz o certo:
   é um rótulo, não faz nada ao ser clicado. */
.topo .mn-titulo { cursor: default; }

.topo .mn-titulo:focus-visible {
    outline: 2px solid var(--ref-gold-strong, #dfb86a);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Mega-menu: o painel com seções ──────────────────────────────────────────
   Entra quando os filhos do item TÊM filhos. "Ações Evangelizadoras" abre
   Comunidades, Pastorais, Movimentos e Sacramentos, e cada um traz as suas
   páginas — uma lista corrida de 36 linhas não teria como ser lida.

   `column-count` não serve aqui: ele repartiria as seções ao meio, deixando
   metade de "Comunidades" numa coluna e metade na outra. As seções são caixas
   inteiras, e é `flex` com `align-items:flex-start` que as mantém assim.
   ────────────────────────────────────────────────────────────────────────── */
/* O quadro se pendura NO ITEM que o abre, encostado nele.
   Já esteve pendurado na barra inteira, centrado na tela, para não sair pela
   direita. Resolvia o corte e criava dois problemas piores, ambos medidos:
   o painel abria 409px à esquerda do gatilho — ninguém liga uma coisa à outra —
   e sobrava um vão de 12px entre os dois, que fazia o menu fechar no meio do
   caminho do mouse.

   Debaixo do item, `top:100%` encosta e não há vão. O que sobra é a borda da
   tela, e essa é a única parte que o CSS não sabe calcular: quem desloca o
   painel para dentro da janela é o ui-libs/menu-mega.js, pela variável
   `--mn-desloca`. Sem ele, o painel fica no lugar certo e pode encostar na
   borda — o pior caso é ruim, não quebrado. */
.topo .mn-drop--mega {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: auto;
    max-width: calc(100vw - 40px);
    max-height: min(74vh, 520px);
    overflow-y: auto;

    top: 100%;
    left: 50%;
    right: auto;
    transform: translate(calc(-50% + var(--mn-desloca, 0px)), -4px);
}

.topo .mn-tem-sub:hover > .mn-drop--mega,
.topo .mn-tem-sub:focus-within > .mn-drop--mega {
    transform: translate(calc(-50% + var(--mn-desloca, 0px)), 0);
}

/* Cada filho de nível 1 do mega vira uma seção em coluna. */
/* 190px é o mínimo para a chamada caber em duas ou três linhas sem virar uma
   coluna de palavras soltas; abaixo disso ela quebrava em "Encontre / informação
   / importantes". */
.topo .mn-drop--mega > li {
    flex: 0 1 auto;
    min-width: 190px;
    max-width: 250px;
    padding: 0 8px;
}

.topo .mn-drop--mega > li + li {
    border-left: 1px solid var(--ref-line, #e4e8ee);
}

/* O título da seção é o link da página-mãe: continua clicável, e é isso que
   permite "ir para Comunidades" sem passar por uma subpágina. */
.capa .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop--mega > li > a,
.interno .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop--mega > li > a,
.topo .mn-drop--mega > li > a {
    padding: 4px 8px 7px;
    color: var(--ref-navy-800, #0d2339);
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ref-line, #e4e8ee);
    margin-bottom: 6px;
    border-radius: 0;
}

.capa .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop--mega > li > a:hover,
.interno .topo :is(.mn-tem-sub:hover, .mn-tem-sub:focus-within) .mn-drop--mega > li > a:hover,
.topo .mn-drop--mega > li > a:hover {
    background: transparent;
    color: var(--ref-gold, #c9a24b);
    border-bottom-color: var(--ref-gold, #c9a24b);
}

/* A lista dentro da seção. Ela chega aqui já como `.mn-drop` — é o mesmo
   `subitens()` que a montou —, e aqui perde a moldura de painel: dentro do
   mega ela é conteúdo, não um segundo painel flutuante.
   ────────────────────────────────────────────────────────────────────────────
   O seletor precisa incluir `:hover` e `:focus-within`, e não é preciosismo.
   A seção é um `.mn-tem-sub`, então passar o mouse em qualquer linha dela
   também deixa a SEÇÃO em hover — e aí
   `.topo .mn-tem-sub:hover > .mn-drop--duas { transform: translate(-50%, 0) }`
   (0,4,0) vencia esta neutralização (0,3,0) e empurrava a lista meia largura
   para a esquerda. Media 76px, exatamente metade dos 152px da lista: os itens
   "pulavam" a cada passada do mouse. */
.topo .mn-drop--mega .mn-tem-sub:hover > .mn-drop,
.topo .mn-drop--mega .mn-tem-sub:focus-within > .mn-drop,
.topo .mn-tem-sub:hover .mn-drop--mega .mn-drop,
.topo .mn-drop--mega .mn-drop {
    position: static;
    transform: none;
    display: block;
    width: auto;
    min-width: 0;
    max-height: none;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    column-count: initial;
    column-rule: none;
    overflow: visible;

    /* `inherit`, e NÃO `visible`: a lista da seção acompanha o estado do
       painel que a contém, em vez de decidir por conta própria. Com `visible`
       ela permanecia hit-testável com o mega fechado — a origem do menu que
       abria com o mouse longe dele. */
    visibility: inherit;
    opacity: 1;
    pointer-events: inherit;
}

/* Linha de apoio da seção: o "Título para chamadas" da página-mãe. Entra
   apagada e menor que os itens — ela explica a seção, não compete com os
   links dela. Duas linhas no máximo: o campo é livre, e um parágrafo inteiro
   ali dentro esticaria a coluna e desalinharia as seções vizinhas. */
.topo .mn-secao__chamada {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    margin: -2px 0 8px;
    padding: 0 8px;
    color: var(--ref-muted, #5d6b7a);
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
}

/* Nos blocos da direita o dropdown de coluna única abre alinhado à direita:
   pendurado à esquerda, ele sairia da tela. Os de várias colunas já resolvem
   isso pelo centro, acima. */
.topo .menus_right .mn-drop:not(.mn-drop--duas):not(.mn-drop--tres) {
    left: auto;
    right: 0;
}

/* ── Submenu da gaveta ───────────────────────────────────────────────────────
   Na gaveta não há dropdown: a lista já é vertical e o dedo precisa alcançar
   tudo. Os filhos ficam recuados sob o pai, menores, como uma sublista.
   ────────────────────────────────────────────────────────────────────────── */

.menu-mobile-ol .mn-subgaveta {
    list-style: none;
    margin: 4px 0 6px;
    padding: 0 0 0 12px;
    border-left: 2px solid rgba(21, 52, 87, .18);
}

.menu-mobile-ol .mn-subgaveta li {
    padding-top: 2px;
    padding-bottom: 2px;
}

.menu-mobile-ol .mn-subgaveta li a {
    display: block;
    padding: 5px 10px;
    font-size: 13px;
    background: transparent;
}

.menu-mobile-ol .mn-subgaveta li a:hover {
    background-color: rgba(223, 184, 106, .25);
}

/* ── Item de texto ───────────────────────────────────────────────────────────
   Telefone, e-mail e endereço no menu. Nasce com o gerenciador, então não há
   aparência anterior a preservar: herda o tamanho e a cor do `<li>` vizinho e
   só desliga o sublinhado que o link ganharia.
   ────────────────────────────────────────────────────────────────────────── */
.mn-texto {
    list-style: none;
}

.mn-texto a.titulo,
.mn-texto a.titulo:hover {
    text-decoration: none;
}

.mn-texto i {
    margin-right: 6px;
}

/* No rodapé o texto acompanha o corpo da coluna, não o título dela — sem isto
   ele sairia com os 17px/500 de `footer .footer-menus>ul>li`. */
footer .footer-menus > ul > li.mn-texto {
    width: auto;
    font-size: 13px;
    font-weight: 400;
}