/*
Delta Core — Menu com painel único + barra de cor deslizante
Adaptação do "Menu Novo Site" do BR (JetMenu) para o widget "Navigation Menu" do
Header Footer Elementor / UAE, usado no site da Colômbia.

Escopo: tudo é prefixado por .delta-menu, a classe CSS que você coloca no widget
(Elementor → Navigation Menu → Avançado → Classes CSS). Nenhum outro menu é afetado.

Como no BR, este CSS depende do JS (assets/js/menu-painel.js), que cria .dnm-painel,
.dnm-col-esquerda, .dnm-col-direita e .dnm-barra-cor. Só vale no desktop (>= 1025 px);
abaixo disso o widget mostra o menu "sanduíche" dele, sem mudança.

Medidas (680 x 400 px, cinza #f5f6f7, cores da barra) são as mesmas do BR.
Desde a 0.3.4: caixa a 18 px do header e com cantos de 12 px (variáveis --dnm-distancia e --dnm-raio).
Desde a 0.3.5: o mesmo vale para os dropdowns comuns (ex.: Soporte).
Desde a 0.3.6: o painel fechado não reage mais ao mouse (antes abria ao passar no meio da página).
*/

@media (min-width: 1025px) {

  /* ---------- Painel único (Empresa / Productos / Partners Autorizados) ---------- */

  /* Ajustes rápidos: distância entre o header e a caixa, e arredondamento da caixa */
  .delta-menu {
    --dnm-distancia: 18px;
    --dnm-raio: 12px;
  }

  .delta-menu .hfe-nav-menu > li.dnm-enhanced {
    position: relative;
  }

  /* "Ponte" invisível que cobre o espaço entre o item e a caixa: sem ela, o mouse sairia do
     item ao atravessar o espaço e a caixa fecharia. Só recebe o mouse quando o item já está
     em hover, então não atrapalha cliques na página. */
  .delta-menu .hfe-nav-menu > li.dnm-enhanced::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    display: block;
    width: 680px;
    max-width: 90vw;
    height: var(--dnm-distancia);
    background: transparent !important;
    border: 0 !important;
    pointer-events: none;
  }

  .delta-menu .hfe-nav-menu > li.dnm-enhanced:hover::after {
    pointer-events: auto;
  }

  /* O painel substitui o dropdown original do item de nível 0 */
  .delta-menu .hfe-nav-menu > li.dnm-enhanced > .dnm-painel {
    position: absolute;
    top: calc(100% + var(--dnm-distancia));
    left: 0;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 680px;
    height: 400px;
    max-width: 90vw;
    padding: 0;
    overflow: hidden; /* faz as duas colunas respeitarem os cantos arredondados */
    border-radius: var(--dnm-raio);
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    visibility: hidden;
    opacity: 0;
    pointer-events: none; /* fechado, o painel não reage ao mouse */
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
  }

  .delta-menu .hfe-nav-menu > li.dnm-enhanced:hover > .dnm-painel,
  .delta-menu .hfe-nav-menu > li.dnm-enhanced:focus-within > .dnm-painel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* Dropdowns comuns (ex.: Soporte, que não tem painel): mesma distância do header,
     mesmos cantos arredondados e a mesma "ponte" invisível no espaço entre item e caixa. */
  .delta-menu .hfe-nav-menu > li.menu-item-has-children:not(.dnm-enhanced)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    display: block;
    width: 260px;
    min-width: 100%;
    height: var(--dnm-distancia);
    background: transparent !important;
    border: 0 !important;
    pointer-events: none;
  }

  .delta-menu .hfe-nav-menu > li.menu-item-has-children:not(.dnm-enhanced):hover::after {
    pointer-events: auto;
  }

  .delta-menu .hfe-nav-menu > li.menu-item-has-children:not(.dnm-enhanced) > ul.sub-menu {
    top: calc(100% + var(--dnm-distancia)) !important;
    margin-top: 0 !important;
    border-radius: var(--dnm-raio) !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  }

  /* Coluna esquerda = a própria lista de nível 1 do widget (mesmos links, só reposicionada).
     O widget esconde as listas com visibility/opacity e as posiciona soltas; aqui tudo isso
     é desfeito com !important para vencer os estilos do widget. */
  .delta-menu .dnm-painel > ul.sub-menu.dnm-col-esquerda {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    /* "inherit" e não "visible": a coluna acompanha o painel. Com "visible", ela ficava
       invisível (opacidade 0) mas ainda recebia o mouse, e o menu abria no meio da página. */
    visibility: inherit !important;
    opacity: 1 !important;
    display: block !important;
    flex: 0 0 40%;
    width: 40% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: 0 !important;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .delta-menu .dnm-col-esquerda > li {
    position: static !important;
    width: 100%;
    border: 0 !important;
  }

  /* Links de nível 1: texto e setinha lado a lado, com respiro */
  .delta-menu .dnm-col-esquerda > li > a.hfe-sub-menu-item,
  .delta-menu .dnm-col-esquerda > li > .hfe-has-submenu-container > a.hfe-sub-menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;
    width: 100%;
    padding: 12px 24px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    background: transparent !important;
    border: 0 !important;
  }

  .delta-menu .dnm-col-esquerda .sub-arrow {
    position: static !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Item de nível 1 em destaque (o que está com o mouse em cima) */
  .delta-menu .dnm-col-esquerda > li.dnm-ativo > a.hfe-sub-menu-item,
  .delta-menu .dnm-col-esquerda > li.dnm-ativo > .hfe-has-submenu-container > a.hfe-sub-menu-item {
    color: #0087dc !important;
    font-weight: 700;
  }

  /* Coluna direita: sempre cinza clarinho (nível 2 ou imagem + resumo) */
  .delta-menu .dnm-col-direita {
    flex: 0 0 60%;
    width: 60%;
    background: #f5f6f7;
    padding: 24px 28px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  /* Lista de nível 2 movida para a coluna direita: sempre visível e sem a "caixa" do widget */
  .delta-menu .dnm-col-direita ul.sub-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    visibility: inherit !important; /* acompanha o painel (ver a nota da coluna esquerda) */
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .delta-menu .dnm-col-direita ul.sub-menu,
  .delta-menu .dnm-col-direita ul.sub-menu * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .delta-menu .dnm-col-direita ul.sub-menu li {
    position: static !important;
    display: block !important;
    visibility: inherit !important;
  }

  .delta-menu .dnm-col-direita ul.sub-menu a.hfe-sub-menu-item {
    display: block !important;
    padding: 8px 0 !important;
    white-space: normal !important;
  }

  .delta-menu .dnm-col-direita ul.sub-menu a.hfe-sub-menu-item:hover {
    color: #0087dc !important;
  }

  /* Título repetido no topo da coluna direita */
  .delta-menu .dnm-col-direita .dnm-titulo-coluna {
    color: #0087dc;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 14px 0;
  }

  /* Imagem destacada (item sem nível 2) */
  .delta-menu .dnm-col-direita .dnm-imagem {
    display: block;
    width: 100%;
    height: auto;
    max-height: 170px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 0 14px 0;
  }

  /* Resumo (item sem nível 2) */
  .delta-menu .dnm-col-direita .dnm-resumo {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
  }

  /* ---------- Barra de cor deslizante (todos os itens de nível 0) ---------- */

  .delta-menu nav.hfe-nav-menu__layout-horizontal {
    position: relative;
  }

  /* Desliga o sublinhado nativo do widget (opção "Ponteiro"), para não duplicar com a barra */
  .delta-menu .hfe-nav-menu > li > a.hfe-menu-item::before,
  .delta-menu .hfe-nav-menu > li > a.hfe-menu-item::after,
  .delta-menu .hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item::before,
  .delta-menu .hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item::after {
    display: none !important;
  }

  .delta-menu .dnm-barra-cor {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 0;
    transform: translateX(0);
    transition: width 0.4s ease-out, transform 0.4s ease-out, opacity 0.2s ease-out;
    /* Mesmas cores e proporções do site internacional: azul 60 %, ciano 20 %, verde 20 % */
    background-image: linear-gradient(to right, #0087dc 60%, #64d7d7 60%, #64d7d7 80%, #b9eb5f 80%);
    pointer-events: none;
    opacity: 0;
    z-index: 2;
  }

  .delta-menu .dnm-barra-cor.dnm-barra-visivel {
    opacity: 1;
  }
}