.header {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    transition: all .2s;

    // .header__container

    &__container {
    }

    // .header__content

    &__content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 2rem;
    }

    // .header__logo

    &__logo {
        max-width: 10rem;
        width: 100%;
        transition: .2s all;

        @media(min-width: $desktopP1) {
            max-width: 17.5rem;
        }

        img, svg {
            width: 100%;
            height: auto;
        }
    }

    // .header__acctions

    &__acctions {
        padding-block: 1rem;
        transition: .2s all;
    }

    // .header__navigation

    &__navigation {
        display: flex;
        align-items: center;
        gap: 3rem;

        @media(min-width: $desktopP1) {
            gap: 4.4rem;
        }

        @media (max-width: $tablet) {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: $primary;
            flex-direction: column;
            padding-top: 9.2rem;
            z-index: -1;
            transform: translateX(-100%);
            transition: .2s all;
        }

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

        a:not(.btn) {
            color: $white;
            font-weight: 600;
            line-height: 1.5;    
            font-size: 1.6rem;
            text-align: center;
        }

        .btn {
            font-weight: 500;
            max-width: 33.3rem;
            width: 100%;

            @media (min-width: $tabletP1) {
                width: fit-content;
            }
        }
       
    }

    // .header__navigation-list

    &__navigation-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;

        @media (min-width: $tabletP1) {
            flex-direction: row;
        }

        @media(min-width: $desktopP1) {
            gap: 4.4rem;
        }
    }

    // .header__navigation-item

    &__navigation-item {
        padding: 0;
        margin: 0;

        @media(max-width: $tablet) {
            width: 100%;
            text-align: center;
        }

        &:not(.header__navigation-item--has-submenu) {
            > a {
                position: relative;
                &::before {
                    content: '';
                    width: 100%;
                    height: 4.4rem;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }
            }
        }

        // .header__navigation-item--has-submenu
        &--has-submenu {
            position: relative;

            @media(max-width: $tablet) {
                display: flex;
                flex-direction: column;
            }

            div {
                @media(max-width: $tablet) {
                    display: grid;
                    grid-template-rows: 0fr;
                    opacity: 0;
                    overflow: hidden;
                    transition: .2s all;
                }
            }

            ul {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                transition: .2s all;
                z-index: 2;
                gap: 2rem;

                @media(min-width: $tabletP1) {
                    position: absolute;
                    top: calc(100% + 1rem);
                    left: 50%;
                    min-width: 19.4rem;
                    width: 100%;
                    transform: translateX(-50%);
                    opacity: 0;
                    visibility: hidden;
                    overflow: hidden;
                    background: #000000BF;
                    border-radius: .5rem;
                    padding: 1.7rem 0;
                    gap: 0;
                }

                @media(max-width: $tablet) {
                    min-height: 0;
                }


                li {
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }

                a {
                    width: 100%;
                    display: flex;
                    position: relative;
                    text-align: center;
                    justify-content: center;
                    position: relative;

                    @media(min-width: $tabletP1) {
                        padding: .8rem 2.5rem;
                    }

                    &::before {
                        @media(max-width: $tablet) {
                            content: '';
                            width: 100%;
                            height: 4.4rem;
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transform: translateY(-50%);
                        }
                    }

                    &:hover {
                        color: $secondary;
                        @media(min-width: $tabletP1) {
                            background-color: $secondary;
                            color: $white;
                        }
                    }
                }
            }

            > a {
                padding-right: 2.3rem;

                &::before {
                    @media(min-width: $tabletP1) {
                        content: '';
                        width: 100%;
                        height: calc(100% + 1rem);
                        position: absolute;
                        top: 100%;
                        left: 0;
                    }
                }

                &::after {
                    content: '';
                    width: 1.3rem;
                    height: .8rem;
                    background-image: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.89967 0.164757C6.11934 -0.0549184 6.47544 -0.0549183 6.69512 0.164757L12.43 5.89963C12.6496 6.11931 12.6496 6.47541 12.43 6.69508L12.1648 6.96028C11.9451 7.17996 11.589 7.17996 11.3693 6.96028L6.29739 1.88833L1.22544 6.96028C1.00577 7.17996 0.649665 7.17996 0.429991 6.96028L0.164791 6.69508C-0.0548839 6.47541 -0.0548839 6.11931 0.164791 5.89963L5.89967 0.164757Z' fill='%23E5A424'/%3E%3C/svg%3E%0A");
                    background-size: 100%;
                    background-position: center;
                    background-repeat: no-repeat;
                    position: absolute;
                    top: 50%;
                    right: .4rem;
                    transform: translateY(-50%) rotate(-180deg);
                    transition: .2s all;

                    @media(min-width: $tabletP1) {
                        right: 0;
                    }
                }
            }

            &:hover {
                ul {
                    @media(min-width: $tabletP1) {
                        opacity: 1;
                        visibility: visible;
                    }
                }

                > a {
                    &::after {
                        @media(min-width: $tabletP1) {
                            transform: translateY(-50%) rotate(0);
                        }
                    }
                }
            }

            &.open {
                div {
                    grid-template-rows: 1fr;
                    overflow: visible;
                    opacity: 1;
                    margin-top: 2.5rem;
                }

                > a {
                    &::after {
                        transform: translateY(-50%) rotate(0)
                    }
                }
            }
        }
    }

    // .header__navigation-link

    &__navigation-link {
        position: relative;
        z-index: 2;
    
        &:not(.btn) {
            &:hover {
                color: $secondary;
            }
        }
    }

    // .header__social

    &__social {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 1.1rem;

        @media(min-width: $tabletP1) {
            display: none;
        }

        li {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
            a {
                max-width: 2.9rem;
                width: 100%;
                height: 100%;
                aspect-ratio: 1/1;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;

                &::before {
                    content: '';
                    width: 100%;
                    height: 4.4rem;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }

                &:hover {
                    transform: translateY(-.2rem);
                }

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    // .header__burger

    &__burger {
        width: 2.1rem;
        height: 1.8rem;       
        position: relative;
        z-index: 5;
        margin-top: 3px;

        @media(min-width: $tabletP1) {
            display: none;
        }

        &::before {
            content: '';
            width: 4.4rem;
            height: 4.4rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        span {
            display: inline-block;
            width: 2.1rem;
            height: .4rem;
            background-color: $white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: .2s all;

            &:first-child {
                transform: translate(-50%, calc(-100% - .5rem));
            }

            &:last-child {
                transform: translate(-50%, .5rem);
            }
        }
    }


    &.has-scroll {
        background-color: $primary;

        .header__navigation-item--has-submenu {
            ul {
                background-color: $primary;
                overflow: visible;
                &::before {
                    content: '';
                    width: 200vw;
                    height: 100%;
                    position: absolute;
                    top: 0%;
                    left: 50%;
                    transform: translateX(-50%);
                    background-color: $primary;
                    z-index: -1;
                    transition: .2s all;
                }
            }
        }
 
        .header__acctions {
            padding-block: .5rem;
        }

        .header__logo {
            max-width: 8rem;

            @media(min-width: $desktopP1) {
                max-width: 12.5rem;
            }

        }

        .header__navigation {
            .btn {
                background-color: $light;

                &:hover {
                    background-color: $secondary;
                }
            }
        }
    }

    &.menu-open {
        .header__navigation {
            transform: translateX(0);
        }

        .header__burger {
             span {
                height: .3rem;
                &:first-child {
                    transform: translate(-50%, -50%) rotate(45deg);
                }
                &:nth-child(2) {
                    width: 0;
                    opacity: 0;
                    visibility: hidden;
                }
                &:last-child {
                    transform: translate(-50%, -50%) rotate(-45deg);
                }
             }
        }
    }


    // .header--white

    &--white {

        &:not(.has-scroll) {

            &:not(.menu-open) {
                .header__logo {
                    img, svg {
                        filter: brightness(0) saturate(100%) invert(19%) sepia(4%) saturate(4145%) hue-rotate(51deg) brightness(96%) contrast(78%);
                    }
                }
                
                .header__burger {
                    span {
                        background-color: $primary;
                    }
                }
            }

            .btn {
                @media(min-width: $tabletP1) {
                    background-color: transparent;
                    color: $primary;
                    border: .1rem solid $primary;

                }
                &:hover {
                    @media(min-width: $tabletP1) {
                        background-color: $secondary;
                        border-color: $secondary;
                    }
                }
            }
            

            .header__navigation a:not(.btn) {
                @media(min-width: $tabletP1) {
                    color: $primary;
                }
            }

            .header__navigation-item--has-submenu {
                ul {
                    a:not(.btn) {
                        @media(min-width: $tabletP1) {
                            color: $white; 
                        }
                    }
                }
            }
        }
    }
}