.header__searchbtn {
    width: 24px;
    height: 24px;
    border: none;
    background-color: transparent;
    background-image: url('../../images/search-icon.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: background-image .25s ease;
    &:hover {
        cursor: pointer;
    }
    &.active {
        background-image: url('../../images/close-icon.svg');
    }
}

.main-header__searchform {
    .main-header__wrapper  {
        position: relative;
        input[type="search"] {
            border: 1px solid var(--wp--preset--color--accent-1);
            border-radius: 6px;
            padding: 10px 45px 10px 15px;
            position: relative;
            width: 100%;
            &:focus {
                border: 1px solid var(--wp--preset--color--base);
                outline: none;
            }
        }
        button {
            background-color: transparent;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 26px;
            height: 26px;
            padding: 0;
            margin: 0;
            width: 24px;
            height: 24px;
            border: none;
            background-color: transparent;
            background-image: url('../../images/search-icon.svg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            svg {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.header-menu__logo {
    max-width: 152px;
    display: block;
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.header-menu__button {
    background-color: transparent;
    border: none;
    padding: 0;
    .close-icon {
        display: none;
        &.active {
            display: block;
        }
    }
    &:hover {
        cursor: pointer;
    }
}

.header-menu__logobutton,
.main-header__searchform {
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 40px);
}

.header-menu__logobutton {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
}

.mobilemenu-wrapper {
    width: 100%;
    display: none;
    padding-top: 30px;
    position: relative;
    margin-top: 30px !important;
    &.active {
        display: block;
        height: 100%;
        &:before {
            content:" ";
            position: absolute;
            top: 0;
            left: 20px;
            width: calc(100% - 40px);
            height: 1px;
            background-color: #d9d9d9;
        }
    }
}

.mobile-top-menu {
    background-color: var(--wp--preset--color--contrast);
    padding: 30px 20px;
    .top-menu__list {
        flex-direction: column;
    }
}

.main-header__navmobile {
    padding: 30px 20px;
}

.header-menumobile__list {
    list-style: none;
    padding: 0;
    margin: 0;
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sub-menu {
        display: none;
        margin-top: 30px;
        padding-left: 20px;
        & > li.has-submenu.open {
            & > .menu-item {
                a {
                    color: var(--wp--preset--color--accent-1);
                    transition: color .25s ease;
                }
                .menu-arrow {
                    background-image: url(../../images/arrow-active-menu.svg);
                }
            }
        }
        li {
            .menu-item {
                position: relative;
                a {
                    font-weight: 500;
                }
            }
        }
    }
    li {
        border-top: 1px solid #d9d9d9;
        padding-bottom: 20px;
        padding-top: 20px;
        &:hover {
            cursor: pointer;
        }
        &.still-have-issues {
            & > .menu-item {
                a {
                    font-weight: 700 !important;
                    color: #dc3232 !important;
                }
            }
        }
    }
    li.has-submenu {
        .menu-item {
            position: relative;
            a {
                position: relative;
                z-index: 1;
                transition: color .25s ease;
            }
            .menu-arrow {
                width: 100%;
                height: 16px;
                display: inline-block;
                position: absolute;
                right: 0;
                top: 0;
                background-image: url(../../images/menu-arrow.svg);
                background-repeat: no-repeat;
                background-size: 12px 14px;
                background-position: right center;
                transition: transform .25s ease-in;
                margin-left: auto;
                z-index: 0;
            }
        }
    }
    li.current-menu-item {
        & > .menu-item {
            a {
                color: var(--wp--preset--color--accent-1);
            }
        }
    }
    li.has-submenu {
        & > .menu-item {
            position: relative;
            a {
                position: relative;
                z-index: 1;
            }
            .menu-arrow {
                z-index: 0;
            }
        }
    }
    & > li.has-submenu.open {
        & > .menu-item {
            a {
                color: var(--wp--preset--color--accent-1);
            }
             .menu-arrow {
                background-image: url(../../images/arrow-active-menu.svg);
            }
        }
    }
    & > li > .menu-item a {
        font-size: 18px;
        font-weight: 600;
    }
}

.header-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    column-gap: 20px;
    li {
        position: relative;
    }
    & > li {
        > .menu-item {
            position: relative;
            height: 100%;
            a {
                font-weight: 600;
                font-size: clamp(0.875rem, 0.447vw + 0.588rem, 1.125rem);
                transition: color .25s ease-in;
                position: relative;
            }
        }
    }
    li.still-have-issues {
        & > .menu-item {
            a {
                font-weight: 700 !important;
                color: #dc3232 !important;
            }
        }
    }
    li.has-submenu {
        & > .menu-item {
            position: relative;
            a {
                position: relative;
                z-index: 1;
            }
            .menu-arrow {
                z-index: 0;
            }
        }
    }
    & > li.has-submenu {
        > .menu-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-right: 30px;
            height: 100%;
            .menu-arrow {
                background-image: url('../../images/menu-arrow.svg');
                background-repeat: no-repeat;
                background-size: 14px 16px;
                background-position: right center;
                transition: transform .25s ease-in;
                margin-left: auto;
                transition: background-image .25s ease-in;
                position: absolute;
                right: 0;
                width: 100%;
                height: 16px;
            }
        }
        &:hover {
            > .menu-item {
                a {
                    color: var(--wp--preset--color--accent-1);
                }
                .menu-arrow {
                    background-image: url('../../images/arrow-active-menu.svg');
                }
            }
        }
    }
    & > li:hover {
        cursor: pointer;
        > .sub-menu {
            display: flex;
        }
    }
    li {
        .sub-menu {
            display: none;
        }
        &.current-menu-item {
            > .menu-item {
                a {
                    color: var(--wp--preset--color--accent-1);
                }
                .menu-arrow {
                    filter: brightness(0) saturate(100%) invert(35%) sepia(56%) saturate(2792%) hue-rotate(359deg) brightness(103%) contrast(99%);
                }
            }
        }
    }
    .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
        position: absolute;
        top: 80%;
        left: 0;
        background-color: var(--wp--preset--color--accent-2);
        min-width: 300px;
        box-shadow: 0px 4px 80px 0px #00000014;
        border-radius: 8px;
        z-index: 99;
        flex-direction: column;
        li {
            width: calc(100% - 30px);
            display: block;
            padding-left: 15px;
            padding-right: 15px;
            > .menu-item {
                flex: 100% 0 0;
                display: flex;
                border-bottom: 1px solid #ebebeb;
                padding-top: 12px;
                padding-bottom: 12px;
                position: relative;
                a {
                    font-size: clamp(0.813rem, 0.447vw + 0.526rem, 1.063rem);
                    font-weight: 500;
                }
            }
            &:hover {
                .sub-menu {
                    display: flex;
                    left: calc(100% - 2px);
                    top: 0px;
                    flex-direction: column;
                    -webkit-border-radius: 8px;
                    -moz-border-radius: 8px;
                    border-radius: 8px;
                    -webkit-border-top-left-radius: 0;
                    -moz-border-radius-topleft: 0;
                    border-top-left-radius: 0;
                    -webkit-border-bottom-left-radius: 0;
                    -moz-border-radius-bottomleft: 0;
                    border-bottom-left-radius: 0;
                }
                > .menu-item {
                    a {
                        color: var(--wp--preset--color--accent-1);
                    }
                    .menu-arrow {
                        filter: brightness(0) saturate(100%) invert(35%) sepia(56%) saturate(2792%) hue-rotate(359deg) brightness(103%) contrast(99%);
                    }
                }
            }
            &.has-submenu {
                .menu-item {
                    position: relative;
                    a {
                        z-index: 1;
                        position: relative;
                    }
                    .menu-arrow {
                        background-image: url('../../images/submenu-arrow.svg');
                        background-repeat: no-repeat;
                        background-size: 14px 16px;
                        background-position: right center;
                        transition: transform .25s ease-in;
                        margin-left: auto;
                        transition: background-image .25s ease-in;
                        position: absolute;
                        right: 0;
                        width: 100%;
                        height: 16px;
                        z-index: 0;
                    }
                }
            }
            &:last-child {
                > .menu-item {
                    border-bottom: none;
                }
            }
        }
    }
}


@media (min-width: 1024px) {
    .header-menu__logobutton {
        width: auto;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .main-header__nav {
        margin-left: auto !important;
    }

    .header-menu__list {
        column-gap: 20px;
        & > li {
            border-top: 2px solid transparent;
            transition: border-top 0.25s ease-in;
            padding-top: 20px;
            padding-bottom: 20px;
            &:hover {
                border-top: 2px solid var(--wp--preset--color--accent-1);
            }
        }
        li.still-have-issues {
            & > .menu-item {
                a {
                    font-weight: 700 !important;
                    color: #dc3232 !important;
                }
            }
        }
        & > li.current-menu-item {
            border-top: 2px solid var(--wp--preset--color--accent-1);
        }
        & > li:last-child,
        & > li:nth-last-child(2) {
            .sub-menu {
                left: auto;
                right: 0;
                li {
                    .sub-menu {
                        -webkit-border-radius: 8px;
                        -moz-border-radius: 8px;
                        border-radius: 8px;
                        -webkit-border-top-right-radius: 0;
                        -moz-border-radius-topright: 0;
                        border-top-right-radius: 0;
                        -webkit-border-bottom-right-radius: 0;
                        -moz-border-radius-bottomright: 0;
                        border-bottom-right-radius: 0;
                        left: auto;
                        right: calc(100% - 2px);
                    }
                }
            }
        }
    }

    .main-header__searchform {
        &.active {
            border-top: none;
            top: 100%;
        }
        .wp-block-search__inside-wrapper  {
            button {
                right: 20px;
            }
        }
    }

    .mobilemenu-wrapper {
        margin-top: 0 !important;
        transition: top .25s ease;
        top: 0;
        &.active {
            overflow-y: inherit;
            padding-top: 0;
            position: absolute;
            top: 100%;
        }
        &:before {
            display: none;
        }
        .main-header__searchform {
            padding-left: 0;
            padding-right: 0;
            padding-top: 20px;
            width: 100%;
        }
    }

}

@media ( min-width: 1280px) {
    .header-menu__list {
        column-gap: 20px; 
    }
    .main-header__nav {
        margin-left: auto !important;
    }
}

@media ( min-width: 1536px) {
    .header-menu__list {
        column-gap: 30px;
        .menu-item {
            .menu-arrow {
                width: 14px;
                height: 16px;
            }
        }
        & > li {
            padding-top: 30px;
            padding-bottom: 30px;
            height: calc(100% - 62px);
        }
        & > li.has-submenu {
            .menu-item {
                column-gap: 10px;
            }
        }
        & > li:last-child,
        & > li:nth-last-child(2) {
            .sub-menu {
                left: 0;
                right: auto;
            }
        }
        .sub-menu {
            min-width: 358px;
        }
    }
}