/*
  MENU v 1.1;
  05/2023;
  João Diogo Pereira;
*/

.site-header--dark{
    background-color: var(--brown);
}

.site-header .logo-header img {
    max-width: 300px;
    height: auto;
    margin-left: 3.75rem;
}

.menu__navigation li{
    position: relative;
    padding: 0 1rem;
    background-image: linear-gradient(to bottom, var(--brown) 50%, var(--white) 50%);
    border-top-left-radius: 42px;
    border-top-right-radius: 42px;
    background-size: 100% 200%;
  	background-position: 50% 0%;
    transition: all .3s ease-in-out;
}

.home .menu__navigation li {
    background-image: linear-gradient(to bottom, var(--darkBeige) 50%, var(--brown) 50%);
}

.menu__navigation--pratos li:hover, .menu__navigation--pratos li.current-menu-item{
    background-image: linear-gradient(to bottom, var(--brown) 50%, var(--beige) 50%);
}

.menu--pratos .menu__navigation li{
    background-image: linear-gradient(to bottom, var(--beige) 50%, var(--white) 50%);
}

.menu__navigation li:hover, .menu__navigation li.current-menu-item{
    background-position: 100% 100%;
}

.menu__navigation li::before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 100%;
    background-color: transparent;
    border-radius: 30%;
    width: 3rem;
    height: 3rem;
    box-shadow: 15px 15px 0px 0px var(--white);
    transform: translateX(3rem) translateY(1.5rem);
    opacity: 0;
    z-index: 1;
    transition: all .3s ease-in-out;
}

.menu__navigation li::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 100%;
    background-color: transparent;
    border-radius: 30%;
    width: 3rem;
    height: 3rem;
    box-shadow: -15px 15px 0px 0px var(--white);
    transform: translateX(-3rem) translateY(1.5rem);
    opacity: 0;
    z-index: 1;
    transition: all .3s ease-in-out;
}

.home .menu__navigation li::before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 100%;
    background-color: transparent;
    border-radius: 30%;
    width: 3rem;
    height: 3rem;
    box-shadow: 15px 15px 0px 0px var(--brown);
    transform: translateX(3rem) translateY(1.5rem);
    opacity: 0;
    z-index: 1;
    transition: all .3s ease-in-out;
}

.home .menu__navigation li::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 100%;
    background-color: transparent;
    border-radius: 30%;
    width: 3rem;
    height: 3rem;
    box-shadow: -15px 15px 0px 0px var(--brown);
    transform: translateX(-3rem) translateY(1.5rem);
    opacity: 0;
    z-index: 1;
    transition: all .3s ease-in-out;
}

.menu__navigation--pratos li::before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 100%;
    background-color: transparent;
    border-radius: 30%;
    width: 3rem;
    height: 3rem;
    box-shadow: 15px 15px 0px 0px var(--beige);
    transform: translateX(3rem) translateY(1.5rem);
    opacity: 0;
    z-index: 1;
    transition: all .3s ease-in-out;
}

.menu__navigation--pratos li::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 100%;
    background-color: transparent;
    border-radius: 30%;
    width: 3rem;
    height: 3rem;
    box-shadow: -15px 15px 0px 0px var(--beige);
    transform: translateX(-3rem) translateY(1.5rem);
    opacity: 0;
    z-index: 1;
    transition: all .3s ease-in-out;
}

.menu__navigation li:hover::before, .menu__navigation li.current-menu-item::before, 
.menu__navigation li:hover::after, .menu__navigation li.current-menu-item::after,
.menu__navigation--pratos li:hover::before, .menu__navigation--pratos li.current-menu-item::before,
.menu__navigation--pratos li:hover::after, .menu__navigation--pratos li.current-menu-item::after{
    opacity: 1;
    transform: translateX(0); 
}

.menu__navigation a{
    display: block;
    border-radius: 44px;
    background-color: var(--beige);
    padding: 1rem;
    width: 80px;
    height: 100px;
    transition: all .3s ease-in-out;   
}

.menu--pratos .menu__navigation a{
    background-color: var(--brown);
}

.menu__navigation li:hover a, .menu__navigation li.current-menu-item a{
    background-color: var(--lightBrown);
}

.menu__navigation a img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    filter: invert(0);
    transition: all .3s ease-in-out; 
}

.menu__navigation li:hover a img, .menu__navigation li.current-menu-item a img{
    filter: invert(1) sepia(1);
}

.menu--pratos .menu__navigation li:hover a img, .menu--pratos .menu__navigation li.current-menu-item a img{
    filter: invert(0) sepia(0);
}

.menu__navigation__label{
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: var(--beige);
    position: relative;
    z-index:2;
    transition: all .3s ease-in-out;
}

.home .menu__navigation__label{
    color: var(--brown);
}

.home .menu__navigation li:hover .menu__navigation__label, .home .menu__navigation li.current-menu-item .menu__navigation__label{
    color: var(--beige);
}

.menu--pratos .menu__navigation__label{
    color: var(--brown);
}

.menu__navigation li:hover .menu__navigation__label, .menu__navigation li.current-menu-item .menu__navigation__label{
    color: var(--brown);
}

.menu.menu--pratos{
    background-color: var(--beige);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.menu--pratos .current-menu-item{
    z-index: 3;
}

.langlist{
    position: fixed;
    top: 8rem;
    right: 0;
    z-index: 99;
    background-color: var(--beige);
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

@media only screen and (max-width: 992px){
    .langlist{
        top: 9rem;
    }
}

@media only screen and (max-width: 576px){
    .langlist{
        top: .5rem;
    }

    .site-header .logo-header img {
        max-width: 300px;
        margin-left: 2.75rem;
    }

    .menu__navigation li{
        padding: 0 .5rem;
    }

    .menu__navigation a{
        padding: .75rem;
        width: 50px;
        height: 65px;
    }

    .menu__navigation__label{
        font-size: 10px;
        max-width: 50px;
        min-height: 20px;
    }
}