header {
    @apply transition-transform duration-500;
    transform: translateY(0);

    &.js-hide-up {
        @media (min-width: 1024px) {
            transform: translateY(-100%);
        }
    }

    .upper-menu {
        li {
            @apply ml-4;

            &:first-child {
                @apply ml-0;
            }


            &.weglot-lang {
                a {
                    &:before {
                        @apply hidden;
                    }
                }
            }

            &.weglot-parent-menu-item {
                &>a {
                    &:after {
                        @apply font-awesome inline-block ml-2 transition-transform duration-300;
                        content: '\f078';
                    }
                }
            }
        }

        a {
            @apply uppercase font-semibold text-xs z-20;

            &:hover {
                @apply text-secondary;
            }
        }

        i {
            @apply text-secondary mr-4;
        }

    }

    .lower-menu {
        @media (min-width: 1024px) {
            /* margin-top: -24px; */
        }

        .logo {

            @media only screen and (max-width: 1023px) {
                img {
                    max-height: 45px;
                }
            }

            &>div {
                @apply absolute;
                top: 20px;
            }
        }


        .menu {
            .menu-item {
                @media (max-width: 1023px) {
                    @apply my-1;
                }

                @media (min-width: 1024px) {
                    @apply ml-8;
                }

                &.menu-item-has-children {
                    position: static !important;

                    @screen lg {
                        @apply flex justify-center mr-4;

                        &::after {
                            content: '';
                            @apply absolute transform transition-opacity duration-300 opacity-0;

                            width: 0;
                            height: 0;
                            border-style: solid;
                            border-width: 0 9px 9px 9px;
                            border-color: transparent transparent #ffffff transparent;
                            top: 52px;
                        }

                    }

                    &.mega-menu-opened {
                        @screen lg {
                            &::after {
                                @apply opacity-100;
                            }
                        }
                    }
                }

                a {
                    @apply relative uppercase font-semibold z-20 block;

                    @screen lg {
                        @apply mb-2 !important;
                    }


                    &:hover {
                        @apply text-secondary;
                    }
                }


                &.cta-in-menu {
                    a {
                        @apply btn-secondary;
                    }
                }

                &.current-menu-item:not(.cta-in-menu),
                &.current_page_parent:not(.cta-in-menu) {
                    >a {
                        @apply text-secondary !important;
                    }
                }
            }
        }
    }

    &.menu-transparent {
        @apply bg-transparent;

        @media (min-width: 1024px) {
            .upper-menu {
                @apply border-white;

                a {
                    @apply text-white;

                    &:hover {
                        @apply text-secondary;
                    }
                }

                .weglot-parent-menu-item {
                    ul {
                        a {
                            @apply text-black;

                            &:hover {
                                @apply text-secondary;
                            }
                        }
                    }
                }
            }
        }



        .lower-menu {
            .logo {
                .non-transparent {
                    @apply hidden;
                }

                .transparent {
                    @apply block;
                }
            }

            .menu {
                @media (min-width: 1024px) {
                    .menu-item {
                        a {
                            @apply text-white;

                            &:hover {
                                @apply text-secondary;
                            }
                        }

                        &.cta-in-menu {
                            a {
                                @apply text-primary-700;
                            }
                        }
                    }
                }

            }
        }

        #burger {
            button {
                @apply text-white border-white;
            }
        }
    }

    &.menu-not-on-top {
        @apply bg-white;
    }
}

.menu-height-padding {
    height: 80px;

    @media only screen and (min-width: 1024px) {
        height: 158px;
    }
}

@media (max-width: 1023px) {

    .menu-main {
        @apply absolute bg-white w-full left-0;

        pointer-events: none;
        opacity: 0;
        transform: translateX(-100px);
        transition: .33s opacity, .33s transform;
        top: 80px;

        min-height: calc(100vh - 80px);


        &.opened {
            opacity: 1;
            transform: translateX(0);
            pointer-events: all;
        }
    }
}


header .lower-menu .menu .menu-item {

    &.menu-item-has-children {
        &>a {
            &:after {
                @apply font-awesome ml-2 inline-block transition duration-300 font-normal;
                content: '\f078';
            }
        }
    }

    @media only screen and (max-width: 1023px) {
        @apply text-center;
    }

    .pip-mega-menu {

        @media only screen and (min-width: 1024px) {
            @apply transition-opacity duration-500 opacity-0 pointer-events-none;
            /* padding-top: 250px;
            height: 100vh; */
        }

        @media only screen and (max-width: 1023px) {
            @apply bg-none !important;
        }


        .sub-menu {
            @apply static bg-transparent block px-0 shadow-none;

            @media only screen and (max-width: 1023px) {
                @apply text-xs;
            }

            li {
                @apply ml-0;

                a {
                    @media only screen and (min-width: 1024px) {
                        @apply text-primary-700 mb-5 font-primary leading-tight uppercase font-bold text-25 transition-colors duration-300;
                    }

                    &:hover {
                        @apply text-secondary;
                    }
                }
            }
        }
    }

    &.mega-menu-opened {

        &>a {
            @apply text-secondary;

            &:after {
                transform: rotate(180deg);
            }

        }

        .pip-mega-menu {
            @media only screen and (max-width: 1023px) {
                @apply block;
            }

            @media only screen and (min-width: 1024px) {
                @apply opacity-100 pointer-events-auto;
            }
        }


    }
}

@media only screen and (max-width: 1023px) {
    .pip-header.simulate-bg-white {
        @apply bg-white;
    }

    svg.open {
        path {
            @apply text-primary;
        }
    }

    .upper-menu.mobile {

        .menu-top-menu-container {
            &>ul {
                &>li {
                    @apply my-1;
                }
            }
        }
    }
}