/* ── Mega menu ──────────────────────────────────────────── */
.mega-menu-item {
    position: static;
}

.mega-dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    transform: none !important;
    top: 100% !important;
    color: inherit;
    border-radius: 0;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
    padding: 1.5rem 2rem;
}

.mega-menu-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.mega-menu-col {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 120px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
    margin-bottom: 1rem;
}

.mega-menu-col-header {
    display: block;
    font-weight: 700;
    font-size: .875rem;
    color: #222;
    cursor: default;
    padding-bottom: .4rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid #aaa;
    user-select: none;
}

.mega-menu-col-link {
    display: block;
    font-size: .8125rem;
    color: inherit;
    text-decoration: none;
    padding: .1rem 0;
    line-height: 1.6;
    opacity: .85;
}

.mega-menu-col-link:hover { text-decoration: underline; opacity: 1; }
/* ────────────────────────────────────────────────────────── */

@media(min-width: 1490px) {

    .dropdown-limit {
        min-width: 200px;
    }

    .dropdown-item {
        white-space: normal;
    }

}

@media(min-width: 1101px) and (max-width: 1489px) {

    .dropdown-limit {
        min-width: 200px;
    }
    #menu-principal li:last-child .dropdown-limit {
        left: -70%;

    }

    .dropdown-item {
        white-space: normal;
    }

    #menu-principal li:last-child .dropdown-submenu .dropdown-menu {

        left: -96.5%;
    }
}

@media(min-width: 768px) and (max-width: 1100px) {

    .dropdown-limit {
        width: 10px;
    }

    .dropdown-item {
        white-space: normal;
    }

    #menu-principal li:last-child .dropdown-submenu .dropdown-menu  {
        left: -141%;

    }

}

/* ── Submenus no mobile (modelos 1, 2 e 5) ────────────────
   Exibição em fluxo dentro do menu colapsado, controlada pelo
   mobile-dropdown.js. Restrito ao .navbar-collapse para não
   afetar os modelos 3 e 4 nem o mega menu. */
@media (max-width: 767.98px) {

    .navbar-collapse .navbar-nav li.dropdown:not(.mega-menu-item) > .dropdown-menu.show,
    .navbar-collapse .navbar-nav li.dropdown-submenu > .dropdown-menu.show {
        display: block !important;
        position: static !important;
        float: none !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .navbar-collapse .navbar-nav li.dropdown-submenu > .dropdown-menu.show {
        padding-left: 1.25rem;
    }

}

/* ── Menu mobile do Modelo 4 (classyNav) ──────────────────
   A ul de navegação usa a utilidade .d-flex (nowrap) no Blade;
   dentro do drawer o .classy-menu tem overflow-x:hidden, o que
   corta os itens. Aqui empilhamos a lista apenas no estado
   mobile do plugin (breakpoint-on) e somente em < 768px. */
@media (max-width: 767.98px) {

    .classy-nav-container.breakpoint-on .classynav.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .classy-nav-container.breakpoint-on .classynav > .col-md-9 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .classy-nav-container.breakpoint-on .classynav ul.d-flex {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .classy-nav-container.breakpoint-on .classynav ul.d-flex > li {
        display: block !important;
        width: 100% !important;
    }

    .classy-nav-container.breakpoint-on .classynav ul li ul.dropdown {
        width: 100% !important;
        left: 0 !important;
    }

    .classy-nav-container.breakpoint-on .classy-navbar .classy-menu {
        -webkit-overflow-scrolling: touch;
    }

}