/* =====================================================
   ARQUIVO: HEADER.CSS
   CSS NUTRIBEM
===================================================== */
/* =====================================================
   CABEÇALHO
===================================================== */

.cabecalho {

    width: 100%;

    min-height: var(--altura-cabecalho);


    border-bottom: 1px solid #EEEEEE;

    position: relative;

    z-index: 1000;

}


.cabecalho-conteudo {

    min-height: var(--altura-cabecalho);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* =====================================================
   LOGO
===================================================== */

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.logo img {

    display: block;

    width: 150px;

    height: auto;

}


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

.menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    flex: 1;

}


.menu a {

    position: relative;

    white-space: nowrap;

    font-size: 15px;

    font-weight: 600;

    color: var(--cinza-escuro);

    transition: color 0.3s ease;

}


.menu a:hover {

    color: var(--vermelho-escuro);

}


.menu a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 3px;

    background-color: var(--vermelho-escuro);

    border-radius: 10px;

    transition: width 0.3s ease;

}


.menu a:hover::after,
.menu a.ativo::after {

    width: 100%;

}


.menu a.ativo {

    color: var(--vermelho-escuro);

}

/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width: 900px) {

    .menu {

        gap: 18px;

    }


    .menu a {

        font-size: 14px;

    }


    .botao-contato {

        display: none;

    }

}


@media (max-width: 700px) {

    .cabecalho {

        height: auto;

        padding: 15px 0;

    }


    .cabecalho-conteudo {

        flex-direction: column;

        gap: 20px;

    }


    .menu {

        flex-wrap: wrap;

        justify-content: center;

        gap: 15px 20px;

    }

}