/******************************************************************************************
*
* FOOTER MENU
*
* Estrutura base do menu do rodapé.
*
******************************************************************************************/

    .footer-links ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .footer-links li{
        position: relative;
    }

    .footer-links a{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        white-space: nowrap;
    }


/******************************************************************************************
*
* DROPDOWN
*
* Ícone da seta utilizado em itens que possuem submenu.
*
******************************************************************************************/

    .footer-toggle{
        margin-left: 8px;
        font-size: 12px;
        transition: .3s;
    }


/******************************************************************************************
*
* DESKTOP
*
* Comportamento dos menus em telas maiores.
*
******************************************************************************************/

    @media (min-width:992px){

        /******************************************************************
        * Submenu
        ******************************************************************/

        .footer-submenu{

            display: none;

            position: absolute;

            left: 100%;

            top: 0;

            min-width: fit-content;

            padding: 12px 0;

            background: #ffffff;

            border-radius: 8px;

            z-index: 999;

            box-shadow: 0 5px 20px rgba(0,0,0,.25);

        }

        /******************************************************************
        * Itens do submenu
        ******************************************************************/

        .footer-submenu li{
            padding: 0 !important;
        }

        .footer-submenu a{
            color: var(--nav-dropdown-color) !important;
            white-space: nowrap !important;
        }

        /******************************************************************
        * Item que possui submenu
        ******************************************************************/

        .footer-dropdown{
            position: relative;
        }

        /******************************************************************
        * Hover
        *
        * Exibe o submenu ao passar o mouse.
        ******************************************************************/

        .footer-dropdown:hover > .footer-submenu{

            display: flex;

            flex-direction: column;

            gap: 15px;

        }

        /******************************************************************
        * Primeiro nível do submenu
        ******************************************************************/

        .footer-links > ul > .footer-dropdown > .footer-submenu{

            left: 50%;

            top: 0;

            padding: 10px;

        }

        /******************************************************************
        * Segundo nível (submenu do submenu)
        ******************************************************************/

        .footer-links > ul > .footer-dropdown > .footer-submenu .footer-submenu{

            left: 100%;

            top: 0;

            padding: 10px;

        }

    }


/******************************************************************************************
*
* MOBILE
*
* Comportamento em telas menores.
*
******************************************************************************************/

    @media (max-width:991px){

        /******************************************************************
        * Submenu
        *
        * Inicialmente fechado.
        ******************************************************************/

        .footer-submenu{

            display: none;

            position: static;

            padding-left: 18px;

            margin-top: 10px;

        }

        /******************************************************************
        * Submenu expandido
        *
        * Classe adicionada pelo footer.js
        ******************************************************************/

        .footer-submenu.active{

            display: flex !important;
            gap: 15px;
            padding: 20px 0px 0px 10px !important;
        }

        .footer-submenu li{
            padding: 0px !important;
        }

        .footer-dropdown.open, .footer-dropdown.open .footer-submenu.level-1.active, .footer-dropdown.open .footer-submenu.level-2.active{
            display: flex !important;
            flex-direction: column;
            align-items: start !important;
        }

         .footer-dropdown.open .footer-submenu.level-2.active{
            padding-bottom: 10px !important;
         }

        /******************************************************************
        * Cursor de clique
        ******************************************************************/

        .footer-dropdown > a{

            cursor: pointer;

        }

        /******************************************************************
        * Ícone rotacionado
        *
        * Quando o submenu está aberto.
        ******************************************************************/

        .footer-dropdown.open > a > .footer-toggle{

            transform: rotate(90deg);

        }

    }