/* =========================================================
   GUIA COMERCIAL
   menu.css
   Menu responsivo
========================================================= */


/* =========================================================
   MENU MOBILE
========================================================= */

@media (max-width: 768px) {

    /*
       O botão hamburger continua visível
    */

    .menu-toggle {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        font-size: 30px;

        color: #3B95B6;

        cursor: pointer;

        position: relative;

        z-index: 10001;
    }


    /*
       Menu fechado
    */

    .menu {
        display: none;
    }


    /*
       Menu aberto
    */

    .menu.active {

        display: flex;

        position: absolute;

        top: 82px;
        left: 0;

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px 0 15px;

        background: #ffffff;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.15);

        border-top: 3px solid #F4B400;

        z-index: 10000;
    }


    /*
       Links
    */

    .menu.active a {

        display: block;

        width: 100%;

        padding: 16px 25px;

        color: #2f2f2f;

        font-size: 16px;

        font-weight: 600;

        text-align: left;

        border-bottom: 1px solid #eeeeee;

        transition:
            background .25s ease,
            color .25s ease;
    }


    /*
       Último link sem borda
    */

    .menu.active a:last-child {
        border-bottom: none;
    }


    /*
       Efeito ao tocar/passar
    */

    .menu.active a:hover {

        background: #f5f9fb;

        color: #3B95B6;
    }


    /*
       Desativa a barrinha do menu desktop
    */

    .menu.active a::after {
        display: none;
    }


    /*
       Botão hamburger ativo
    */

    .menu-toggle.active {
        color: #F4B400;
    }

}


/* =========================================================
   TABLET / DESKTOP
========================================================= */

@media (min-width: 769px) {

    .menu-toggle {
        display: none !important;
    }

}