/**
 * Widget Menu Seletivo
 *
 * Estilos para widget Elementor de exibição de menus WordPress.
 * Suporta lista, grade, hierarquia achatada e fluxos vertical/horizontal.
 * Handle: theme-selective-menu-widget
 */

/**
 * Estilos para Widget Menu Flexível - Versão Completa
 * Suporta lista, grade, hierarquia achatada e fluxos vertical/horizontal
 */

/* ==========================================
   1. ESTRUTURA BASE
   ========================================== */
.widget-selective-menu {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    
    /* Variáveis CSS principais */
    --indent-level-1: 20px;
    --indent-level-2: 40px;
    --indent-level-3: 60px;
    --row-gap: 15px;
    --column-gap: 15px;
    --description-spacing: 5px;
    --columns: 4;
    --columns-tablet: 2;
    --columns-mobile: 1;
    --icon-size: 14px;
    --icon-spacing: 8px;
}

.widget-selective-menu *,
.widget-selective-menu *:before,
.widget-selective-menu *:after {
    box-sizing: border-box;
}

/* Reset bullets — sobrescreve qualquer regra do tema/browser */
.widget-selective-menu ul,
.widget-selective-menu li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.widget-selective-menu__container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ==========================================
   2. LAYOUTS BÁSICOS
   ========================================== */

/* Layout de Lista */
.widget-selective-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
}

/* Layout de Grid/Colunas */
.widget-selective-menu__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* ==========================================
   3. IMPLEMENTAÇÃO DOS FLUXOS
   ========================================== */

/* FLUXO VERTICAL (em colunas) */
.widget-selective-menu__grid.flow-vertical {
    display: grid;
    grid-template-columns: repeat(var(--columns, 4), 1fr);
    row-gap: var(--row-gap);
    column-gap: var(--column-gap);
    
    /* Configuração para quando há max-rows definido */
    grid-auto-flow: column;
}

/* Quando há um número máximo de linhas definido, usamos grid-template-rows */
[data-max-rows].widget-selective-menu .widget-selective-menu__grid.flow-vertical {
    grid-template-rows: repeat(var(--max-rows, 3), auto);
}

/* FLUXO HORIZONTAL (em linhas) */
.widget-selective-menu__grid.flow-horizontal {
    display: grid;
    grid-template-columns: repeat(var(--columns, 4), 1fr);
    row-gap: var(--row-gap);
    column-gap: var(--column-gap);
    grid-auto-flow: row;
}

/* ==========================================
   4. ESTRUTURA DE ITENS E SUBMENUS
   ========================================== */

/* Item de Menu - Base */
.widget-selective-menu__item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none; /* Remove bullets herdados do tema/browser */
    transition: all 0.3s ease;
    width: 100%;
}

/* Link de Menu */
.widget-selective-menu__link {
    display: flex;
    align-items: center;
    text-decoration: none;

    position: relative;
    width: 100%;
    transition: all 0.3s ease;
    flex-wrap: wrap; /* Para melhor organização quando tem descrição */
    /* Herda a fonte e cor globais do Elementor ("Text") sem fixar valor */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Título do Menu */
.widget-selective-menu__title {
    flex: 1;
    position: relative;
}

/* Descrição do Menu */
.widget-selective-menu__description {
    width: 100%;
    margin-top: var(--description-spacing, 5px);
    font-size: 0.9em;
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Wrapper para itens com filhos no grid */
.widget-selective-menu__item-wrapper {
    margin-bottom: var(--row-gap);
}

/* Submenu */
.widget-selective-menu__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* ==========================================
   5. SUPORTE A HIERARQUIA ACHATADA
   ========================================== */

/* Estilos para quando a hierarquia é achatada (padrão para Grid) */
.widget-selective-menu__grid .widget-selective-menu__child-level-1,
.widget-selective-menu__grid .widget-selective-menu__child-level-2,
.widget-selective-menu__grid .widget-selective-menu__child-level-3 {
    padding-left: 0; /* Remove o padding padrão pois usamos indentação controlada */
}

/* Nível 1 indentado */
.widget-selective-menu__grid .widget-selective-menu__child-level-1 .widget-selective-menu__link {
    padding-left: var(--indent-level-1);
}

/* Nível 2 indentado */
.widget-selective-menu__grid .widget-selective-menu__child-level-2 .widget-selective-menu__link {
    padding-left: var(--indent-level-2);
}

/* Nível 3 indentado */
.widget-selective-menu__grid .widget-selective-menu__child-level-3 .widget-selective-menu__link {
    padding-left: var(--indent-level-3);
}

/* Adicionando separação visual para itens de nível 0 */
.widget-selective-menu__grid .widget-selective-menu__item:not(.widget-selective-menu__child-level-1):not(.widget-selective-menu__child-level-2):not(.widget-selective-menu__child-level-3) {
    padding-top: 0px; 
}

/* Removendo espaçamento extra para o primeiro item */
.widget-selective-menu__grid .widget-selective-menu__item:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* Correção para cor de texto em submenus */
.widget-selective-menu__grid .widget-selective-menu__child-level-1 .widget-selective-menu__link,
.widget-selective-menu__grid .widget-selective-menu__child-level-2 .widget-selective-menu__link,
.widget-selective-menu__grid .widget-selective-menu__child-level-3 .widget-selective-menu__link {
    color: var(--submenu-text-color, inherit);
}

/* ==========================================
   6. SUPORTE A ÍCONES
   ========================================== */

/* Ícones - Posição Padrão à Esquerda */
.widget-selective-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--icon-spacing, 8px);
    margin-left: 0;
    transition: all 0.3s ease;
    flex: 0 0 auto;
    position: relative;
    top: 0;
    vertical-align: middle;
}

.widget-selective-menu__icon i,
.widget-selective-menu__icon svg {
    width: var(--icon-size, 14px);
    height: var(--icon-size, 14px);
    display: block;
    line-height: 1;
    vertical-align: middle;
}

/* Ajuste para ícones SVG do Elementor */
.widget-selective-menu__icon .e-font-icon-svg {
    width: var(--icon-size, 14px) !important;
    height: var(--icon-size, 14px) !important;
    position: relative;
    display: block;
}

/* ==========================================
   7. NÍVEIS DE PROFUNDIDADE E INDENTAÇÃO
   ========================================== */

/* Indentação para diferentes níveis no modo lista */
.widget-selective-menu__list .widget-selective-menu__child-level-1 > .widget-selective-menu__link {
    padding-left: var(--indent-level-1);
}

.widget-selective-menu__list .widget-selective-menu__child-level-2 > .widget-selective-menu__link {
    padding-left: var(--indent-level-2);
}

.widget-selective-menu__list .widget-selective-menu__child-level-3 > .widget-selective-menu__link {
    padding-left: var(--indent-level-3);
}

/* ==========================================
   8. DIVISÓRIAS
   ========================================== */

/* Divisórias somente para itens de primeiro nível no modo lista */
.widget-selective-menu__list > .widget-selective-menu__item:not(:last-child) {
    border-bottom-width: inherit;
    border-bottom-style: inherit;
    border-bottom-color: inherit;
}

/* Divisórias para itens em modo grid não-achatado */
.widget-selective-menu__grid .widget-selective-menu__item-wrapper:not(:last-child) {
    border-bottom-width: inherit;
    border-bottom-style: inherit;
    border-bottom-color: inherit;
}

/* Divisórias para itens em modo grid achatado */
.widget-selective-menu__grid .widget-selective-menu__item:not(:last-child) {
    /* Apenas se tiver show_dividers ativado, será controlado por classes adicionais */
    border-bottom-width: inherit;
    border-bottom-style: inherit;
    border-bottom-color: inherit;
}

/* ==========================================
   9. ALINHAMENTO E JUSTIFICAÇÃO
   ========================================== */

/* Suporte para diferentes alinhamentos de texto */
.widget-selective-menu__link[style*="text-align: center"] {
    justify-content: center;
}

.widget-selective-menu__link[style*="text-align: right"] {
    justify-content: flex-end;
}

.widget-selective-menu__link[style*="text-align: justify"] {
    justify-content: space-between;
}

/* Ajuste de alinhamento para submenus */
.widget-selective-menu__item-has-children > .widget-selective-menu__link {
    width: 100%;
}

/* ==========================================
   10. RESPONSIVIDADE
   ========================================== */

@media (max-width: 1024px) {
    /* Tablet */
    .widget-selective-menu__grid.flow-vertical,
    .widget-selective-menu__grid.flow-horizontal {
        grid-template-columns: repeat(var(--columns-tablet, 2), 1fr);
    }
    
    /* Quando tem max-rows, em tablet convertemos para fluxo normal */
    [data-max-rows].widget-selective-menu .widget-selective-menu__grid.flow-vertical {
        grid-template-rows: auto;
        grid-auto-flow: row;
    }
}

@media (max-width: 767px) {
    /* Mobile */
    .widget-selective-menu__grid.flow-vertical,
    .widget-selective-menu__grid.flow-horizontal {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
    }
    
    /* Ajuste da indentação em mobile para melhor visualização */
    .widget-selective-menu__grid .widget-selective-menu__child-level-1 .widget-selective-menu__link {
        padding-left: calc(var(--indent-level-1) * 0.75);
    }
    
    .widget-selective-menu__grid .widget-selective-menu__child-level-2 .widget-selective-menu__link {
        padding-left: calc(var(--indent-level-2) * 0.75);
    }
    
    .widget-selective-menu__grid .widget-selective-menu__child-level-3 .widget-selective-menu__link {
        padding-left: calc(var(--indent-level-3) * 0.75);
    }
}

/* ==========================================
   11. EFEITOS E INTERATIVIDADE
   ========================================== */

/* Efeito hover padrão */
.widget-selective-menu__link:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Efeito hover para item atual */
.widget-selective-menu__item.current-menu-item > .widget-selective-menu__link,
.widget-selective-menu__item.current-menu-ancestor > .widget-selective-menu__link {
    font-weight: bold;
}

/* ==========================================
   12. ESTILOS PARA MODO GRID COM HIERARQUIA NORMAL
   ========================================== */

/* Quando não está achatado, cada bloco é tratado como uma unidade */
.widget-selective-menu__grid .widget-selective-menu__item-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Ajusta o tamanho de cada célula no grid para o mesmo tamanho */
.widget-selective-menu__grid .widget-selective-menu__item-with-children {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ==========================================
   13. ANIMAÇÕES E TRANSIÇÕES
   ========================================== */

/* Transição suave para todos os elementos interativos */
.widget-selective-menu a,
.widget-selective-menu__icon,
.widget-selective-menu__title,
.widget-selective-menu__description,
.widget-selective-menu__item {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* ==========================================
   14. ALTURA IGUAL
   ========================================== */

/* Base para altura igual */
[data-equal-height="true"] .widget-selective-menu__grid {
    align-items: stretch;
}

/* Garante que o container de cada item tenha altura igual */
[data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: inherit; /* Herda o background do item */
    min-height: 80px; /* Altura mínima base para todos os itens */
}

/* Centralização vertical real do conteúdo */
[data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center !important; /* Força centralização vertical */
    align-items: flex-start; /* Mantém alinhamento horizontal conforme definido */
    height: 100%;
    width: 100%;
}

/* Ajuste para título e descrição na centralização */
[data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__title,
[data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__description {
    width: 100%;
}

/* Garante que o grid use a mesma altura de linha */
[data-equal-height="true"] .widget-selective-menu__grid.flow-vertical,
[data-equal-height="true"] .widget-selective-menu__grid.flow-horizontal {
    grid-auto-rows: 1fr;
}

/* Espaçamento específico para descrições quando altura igual está ativa */
[data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__description {
    margin-top: var(--description-spacing);
}

/* Ajuste para ícones em modo altura igual */
[data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__icon {
    align-self: center;
    margin-right: var(--icon-spacing);
}

/* Ajustes finos para diferentes alinhamentos de texto com altura igual */
[data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__link[style*="text-align: center"] {
    align-items: center;
}

[data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__link[style*="text-align: right"] {
    align-items: flex-end;
}

/* Garantindo comportamento consistente em diferentes dispositivos */
@media (max-width: 767px) {
    [data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__item {
        min-height: 60px; /* Altura mínima ligeiramente menor em mobile */
    }
}

/* ==========================================
   15. CORREÇÃO DE ÍCONES NO MODO GRID
   ========================================== */

/* Reseta completamente o layout flexbox para links no modo grid */
.widget-selective-menu__grid .widget-selective-menu__link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
}

/* Força o ícone a ficar no início (à esquerda) do link */
.widget-selective-menu__grid .widget-selective-menu__link .widget-selective-menu__icon {
    position: static !important;
    float: none !important;
    flex: 0 0 auto !important;
    margin-right: var(--icon-spacing, 8px) !important;
    order: -1 !important;
}

/* Ajusta o título para aparecer corretamente após o ícone */
.widget-selective-menu__grid .widget-selective-menu__link .widget-selective-menu__title {
    flex: 1 !important;
    width: auto !important;
    order: 0 !important;
    text-align: inherit !important;
}

/* Ajusta a descrição para aparecer em linha própria abaixo do título */
.widget-selective-menu__grid .widget-selective-menu__link .widget-selective-menu__description {
    width: 100% !important;
    order: 2 !important;
    margin-top: var(--description-spacing, 5px) !important;
    padding-left: 0 !important;
}

/* Correções específicas para cenários de altura igual */
[data-equal-height="true"] .widget-selective-menu__grid .widget-selective-menu__link {
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: inherit !important;
}

/* Correção para alinhamento centralizado */
.widget-selective-menu__grid .widget-selective-menu__link[style*="text-align: center"] {
    justify-content: center !important;
}

.widget-selective-menu__grid .widget-selective-menu__link[style*="text-align: center"] .widget-selective-menu__title {
    text-align: center !important;
}

/* Correção para alinhamento à direita */
.widget-selective-menu__grid .widget-selective-menu__link[style*="text-align: right"] {
    justify-content: flex-end !important;
}

.widget-selective-menu__grid .widget-selective-menu__link[style*="text-align: right"] .widget-selective-menu__title {
    text-align: right !important;
}

/* Quando o alinhamento é justificado */
.widget-selective-menu__grid .widget-selective-menu__link[style*="text-align: justify"] {
    justify-content: space-between !important;
}

/* Importante: esta regra garante que a propriedade order seja aplicada com prioridade máxima */
.widget-selective-menu__grid .widget-selective-menu__link .widget-selective-menu__icon {
    order: -1 !important;
}