/* ==============================
   HEADER
============================== */
.header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ==============================
   LOGO
============================== */
.header .navbar-brand,
.header .logo {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: center;
}

/* ==============================
   MENU
============================== */
.header .container-nav,
.header .moduletable {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.mod-menu,
ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.mod-menu > li,
ul.menu > li {
    position: relative;
    margin-left: 15px;
    display: flex;
    align-items: center; /* mantém texto + seta na mesma linha */
}

/* ==============================
   LINKS COM SETA
============================== */
.mod-menu li.deeper.parent > a,
ul.menu li.deeper.parent > a {
    display: flex;
    align-items: center; /* alinha verticalmente texto + seta */
}

.mod-menu a,
ul.menu a {
    text-decoration: none;
    padding: 8px 12px;
    font-size: 14px;
    display: block;
}

/* ==============================
   SETAS SUBMENU
============================== */
.mm-toggler {
    margin-left: 5px;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mod-menu li.deeper.parent:hover .mm-toggler,
ul.menu li.deeper.parent:hover .mm-toggler {
    opacity: 1;
    pointer-events: auto;
}

/* ==============================
   SUBMENU
============================== */
.mod-menu li.deeper ul,
ul.menu li.deeper ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    list-style: none;
    padding: 5px 0;
    margin: 0;
    min-width: 140px;
}

.mod-menu li.deeper:hover ul,
ul.menu li.deeper:hover ul {
    display: block;
}

.mod-menu li.deeper ul li a,
ul.menu li.deeper ul li a {
    padding: 6px 12px;
    font-size: 13px;
}

/* ==============================
   MOBILE
============================== */
@media (max-width: 991px) {
    .header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .mod-menu,
    ul.menu {
        flex-direction: column;
        width: 100%;
    }

    .mod-menu > li,
    ul.menu > li {
        margin-left: 0;
        width: 100%;
    }

    .mod-menu > li a,
    ul.menu > li a {
        padding: 10px 15px;
    }

    .mod-menu li.deeper ul,
    ul.menu li.deeper ul {
        position: static;
        box-shadow: none;
    }

    /* seta sempre visível no mobile */
    .mm-toggler {
        opacity: 1;
        pointer-events: auto;
    }
}