/* 
 * Blocksy Menu Enhancer - CSS Principal
 * Versão: 1.3 - Atualizada em 2025-11-10
 * Etapas: 3, 4, 5 + Estilizações Avançadas
 */

/* ============================================
   Desktop Only - Menu Enhancements
   ============================================ */
@media (min-width: 1025px) {

/* ============================================
   Menu Principal - Altura Fixa
   ============================================ */
ul#menu-first-menu {
    height: 32px !important;
}

/* ============================================
   Estilo Base para todos os Sub-Menus
   ============================================ */
.submenu-grid .sub-menu {
    display: grid !important;
    gap: 8px !important;
    background-color: black !important;
    border-radius: 6px !important; /* Arredondamento */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; /* Sombra */
    padding: 10px !important; /* Espaçamento interno */
    border: 1px solid #222 !important; /* Borda cinza escuro */
    overflow: visible !important; /* Garante que nada seja cortado */
    position: absolute !important;
    top: 100% !important;
    margin-top: 16px !important; /* Espaço abaixo do menu pai */
    z-index: 999 !important;
}

/* Zona de hover invisível para manter dropdown ativo */
.submenu-grid:hover > .sub-menu {
    pointer-events: auto !important;
}

.submenu-grid {
    position: relative !important;
}

/* Padding invisível no item pai para criar zona segura */
.submenu-grid > a {
    padding-bottom: 0 !important;
}

/* Zona invisível entre menu pai e dropdown para manter hover */
.submenu-grid::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 16px !important; /* Altura da zona de transição */
    pointer-events: auto !important; /* Mantém a zona receptiva ao mouse */
}

/* ============================================
   Etapa 3: Grid 2 colunas para sub-menus com 4+ itens
   ============================================ */
.submenu-grid-2col .sub-menu {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) !important; /* Duas colunas com min-width igual */
    width: auto !important; /* Deixa expandir conforme conteúdo */
    min-width: 280px !important; /* Largura mínima para suportar 2 colunas */
    max-width: 400px !important; /* Largura máxima */
}

/* ============================================
   Sub-Menus de 1 Coluna (menos de 4 itens)
   ============================================ */
.submenu-grid:not(.submenu-grid-2col) .sub-menu {
    grid-template-columns: 1fr !important; /* Uma coluna */
    width: auto !important;
    min-width: 200px !important; /* Largura mínima */
    max-width: 280px !important; /* Largura máxima */
    overflow: hidden !important; /* Garante que não expanda */
}

/* Estilos comuns para todos os <li> em sub-menus */
.submenu-grid .sub-menu li {
    margin: 0 !important;
    border-radius: 4px !important; /* Arredondamento nos itens */
    transition: background-color 0.3s ease !important; /* Animação suave */
    background-color: black !important; /* Fundo preto nos links */
    min-height: 36px !important; /* Altura mínima consistente */
    display: flex !important; /* Garante que o link expanda */
}

.submenu-grid .sub-menu li:hover {
    background: linear-gradient(to left, #111, #000)!important; /* Gradiente no hover */
}

/* Hover no link dentro do item */
.submenu-grid .sub-menu li a:hover {
    color: #fff !important;
}

/* ============================================
   Etapa 4: SVGs em itens com classe 'menu-item-with-svg'
   ============================================ */
.menu-item-with-svg a::before {
    content: attr(data-svg) !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important; /* Evita que o SVG encolha */
}

.menu-item-with-svg a::before svg {
    fill: url(#grad-blue) #0c3fae !important; /* Gradiente ou fallback azul */
    color: #0c3fae !important;
}

/* Alternativamente, aplicar cor via estilo inline (fallback) */
.menu-item-with-svg a {
    display: flex !important;
    align-items: center !important;
    color: #fff !important; /* Texto branco */
    font-weight: 500 !important; /* Peso da fonte */
    text-decoration: none !important;
    gap: 6px !important; /* Espaço entre SVG e texto */
}

.menu-item-with-svg a:hover {
    color: #fff !important; /* Manter texto branco no hover */
    padding-left: 10px !important; /* Ajuste de padding para o gradiente */
    padding-right: 10px !important;
}

/* ============================================
   Etapa 5: Ajustes finais para Polylang e responsividade (Tablet apenas)
   ============================================ */

/* Compatibilidade com Polylang - Menus de idioma */
.pll-parent-menu-item .submenu-grid-2col .sub-menu {
    width: 50px !important;
}

/* Fix: Language Switcher (Polylang) - Prioridade Alta */
.pll-parent-menu-item.submenu-grid .sub-menu {
    width: 55px !important;
    min-width: 55px !important;
    max-width: 55px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
}

.pll-parent-menu-item.submenu-grid .sub-menu li {
    min-height: 32px !important;
    width: 100% !important;
}

.pll-parent-menu-item.submenu-grid .sub-menu li a {
    padding: 15px 6px !important;
    justify-content: center !important;
    width: 55px !important;
}

.pll-parent-menu-item.submenu-grid .sub-menu li a img {
    width: 16px !important;
    height: 11px !important;
    margin: 0 !important;
}

/* ============================================
   Responsivo: Tablet
   ============================================ */
@media (max-width: 1024px) {
    .submenu-grid-2col .sub-menu {
        min-width: 250px !important;
        max-width: 350px !important;
    }
    
    .submenu-grid:not(.submenu-grid-2col) .sub-menu {
        min-width: 180px !important;
        max-width: 250px !important;
    }
}

/* ============================================
   Estilizações Avançadas: Tema Dark Bitcoin
   ============================================ */
.submenu-grid .sub-menu li a {
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important; /* Evita quebra de linha no texto */
    overflow: hidden !important; /* Esconde overflow se necessário */
    text-overflow: ellipsis !important; /* Adiciona ... se texto for muito longo */
    display: flex !important; /* Flex para melhor alinhamento com SVGs */
    align-items: center !important; /* Centraliza verticalmente */
    width: 100% !important; /* Expande para cobrir o container */
    height: 100% !important; /* Expande altura para preencher o <li> */
    color: #fff !important; /* Texto branco */
    text-decoration: none !important;
    gap: 6px !important; /* Espaço entre SVG e texto */
}

.submenu-grid .sub-menu li a:hover {
    color: #fff !important;
}

.submenu-grid .sub-menu li a:focus {
    outline: 2px solid #0c3fae !important; /* Acessibilidade com azul */
}

/* Animação de entrada para o dropdown */
.submenu-grid .sub-menu {
    animation: fadeInGrid 0.3s ease-out !important;
}

@keyframes fadeInGrid {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

a.ct-menu-link {
    height: 32px !important;
}

} /* Fim do @media (min-width: 1025px) */

.menu li.menu-item {
    border-radius: 5px;
}

.menu li.menu-item:hover {
    background: linear-gradient(to right, #111, #000)!important; /* Gradiente no hover */
}