/**
 * Menu Dropdown - Espaço Criativo
 * v2.7 - Dropdown abre abaixo do item correto
 *
 * CORREÇÃO: Remove position-static para que cada
 * dropdown abra relativo ao seu próprio item pai
 */

:root {
    --ec-violet: #6f42c1;
    --ec-cyan: #0cc3ce;
    --ec-light: #f8f5ff;
}

/* ==========================================================================
   CORREÇÃO CRÍTICA: REMOVE POSITION-STATIC
   O position-static faz o dropdown usar o container como referência
   Em vez disso, queremos position: relative para cada item
   ========================================================================== */

.main-menu > nav > ul > li.position-static {
    position: relative !important;
}

.main-menu > nav > ul > li {
    position: relative !important;
}

/* ==========================================================================
   RESET - TODOS OS SUBMENUS OCULTOS POR PADRÃO
   ========================================================================== */

.main-menu ul.sub-menu,
.main-menu ul.level-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute;
    transition: all 0.2s ease;
}

/* ==========================================================================
   DROPDOWN NÍVEL 1 (sub-menu)
   ========================================================================== */

.main-menu > nav > ul > li > ul.sub-menu {
    left: 0;
    top: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    width: 240px;
    padding: 12px 0;
    margin-top: 15px;
    border-radius: 8px;
    z-index: 1000;
    border-top: 3px solid var(--ec-violet);
}

/* ABRE nível 1 */
.main-menu > nav > ul > li:hover > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 0;
}

/* ==========================================================================
   LEVEL-MENU BASE (níveis 2, 3, 4, 5...)
   ========================================================================== */

.main-menu ul.level-menu {
    left: 100%;
    top: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    width: 220px;
    padding: 12px 0;
    margin-left: 10px;
    border-radius: 8px;
    border-left: 3px solid var(--ec-cyan);
}

/* ==========================================================================
   ABRE NÍVEL 2 (sub-menu > li:hover > level-menu)
   ========================================================================== */

.main-menu > nav > ul > li > ul.sub-menu > li:hover > ul.level-menu {
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 0;
    z-index: 1001;
}

/* ==========================================================================
   ABRE NÍVEL 3 (level-menu > li:hover > level-menu)
   ========================================================================== */

.main-menu > nav > ul > li > ul.sub-menu > li > ul.level-menu > li:hover > ul.level-menu {
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 0;
    z-index: 1002;
}

/* ==========================================================================
   ABRE NÍVEL 4
   ========================================================================== */

.main-menu > nav > ul > li > ul.sub-menu > li > ul.level-menu > li > ul.level-menu > li:hover > ul.level-menu {
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 0;
    z-index: 1003;
}

/* ==========================================================================
   ABRE NÍVEL 5
   ========================================================================== */

.main-menu > nav > ul > li > ul.sub-menu > li > ul.level-menu > li > ul.level-menu > li > ul.level-menu > li:hover > ul.level-menu {
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 0;
    z-index: 1004;
}

/* ==========================================================================
   ITENS DO MENU (todos os níveis)
   ========================================================================== */

.main-menu ul.sub-menu li,
.main-menu ul.level-menu li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-menu ul.sub-menu li > a,
.main-menu ul.level-menu li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #444;
    padding: 11px 20px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.main-menu ul.sub-menu li > a:hover,
.main-menu ul.level-menu li > a:hover {
    color: var(--ec-violet);
    background: var(--ec-light);
    padding-left: 25px;
}

/* Ícone de seta */
.main-menu ul.sub-menu li > a > i,
.main-menu ul.level-menu li > a > i {
    font-size: 10px;
    color: #999;
    transition: all 0.2s ease;
}

.main-menu ul.sub-menu li:hover > a > i,
.main-menu ul.level-menu li:hover > a > i {
    color: var(--ec-violet);
    transform: translateX(3px);
}

/* ==========================================================================
   CORES ALTERNADAS POR NÍVEL
   ========================================================================== */

/* Nível 2 - Ciano */
.main-menu > nav > ul > li > ul.sub-menu > li > ul.level-menu {
    border-left-color: var(--ec-cyan);
}

/* Nível 3 - Violeta */
.main-menu > nav > ul > li > ul.sub-menu > li > ul.level-menu > li > ul.level-menu {
    border-left-color: var(--ec-violet);
}

/* Nível 4 - Ciano */
.main-menu > nav > ul > li > ul.sub-menu > li > ul.level-menu > li > ul.level-menu > li > ul.level-menu {
    border-left-color: var(--ec-cyan);
}

/* Nível 5 - Violeta */
.main-menu > nav > ul > li > ul.sub-menu > li > ul.level-menu > li > ul.level-menu > li > ul.level-menu > li > ul.level-menu {
    border-left-color: var(--ec-violet);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    .main-menu ul.sub-menu,
    .main-menu ul.level-menu {
        display: none !important;
    }
}