header#site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    isolation: isolate;
    transition: all .3s;
    color: var(--cLWhite);
    border-bottom: 1px solid hsl(from currentColor h s l/.3);
    &::before {
        position: absolute;
        inset: 0;
        content: '';
        z-index: -1;
        transition: inherit;
        clip-path: inset(0 round 0 0 1em 0);
        background-color: hsl(from var(--cLDarkBlack) h s l/.3);
    }
    &:has(+ main) {
        position: fixed;
        &::before {background-color: hsl(from var(--cLDarkBlack) h s l/0);}
    }
    &:is(.is-stuck) {
        border-bottom-color: transparent;
        &::before {background-color: var(--cLDarkBlack);}
    }
    & .row {
        column-gap: min(5%,3vw);
        & .left {
            flex: 0 0 min(220px, 40%);
            & .logo {
                display: grid;
                align-content: center;
            }
        }
        & .ct-nav {
            position: fixed;
            flex: 1;
            top: 0;
            right: 0;
            z-index: 2;
            height: 100vh;
            visibility: hidden;
            pointer-events: none;
            width: min(500px,100vw);
            &:is(header:has( .open-nav input:checked) &) {
                visibility: visible;
                pointer-events: inherit;
            }
            & nav {
                position: relative;
                left: 100%;
                width: 100%;
                height: 100%;
                transition: .2s;
                text-align: left;
                box-sizing: border-box;
                padding: 4em 1.5rem 2em;
                background-color: var(--cLDarkBlack);
                &:is(header:has( .open-nav input:checked) &) {
                    translate: -100% 0%;
                }
                & .primary {
                    position: relative;
                    height: 100%;
                    display: flex;
                    row-gap: 0.8em;
                    font-weight: 500;
                    overflow-y: scroll;
                    overflow-x: hidden;
                    flex-direction: column;
                    & input {display: none;}
                    & .btn {max-width: max-content;}
                    & > li {
                        &:is(.flex) {
                            align-items: center;
                            justify-content: space-between;
                        }
                        & > a {
                            display: block;
                            width: max-content;
                        }
                        & ul:not(.rs) {
                            position: relative;
                            height: 0;
                            opacity: 0;
                            display: flex;
                            row-gap: 1rem;
                            transition: all .3s;
                            pointer-events: none;
                            width: min(300px,70vw);
                            flex-direction: column;
                            @media screen and (width >= 1200px) {
                                & {
                                    position: absolute;
                                    z-index: 1;
                                    padding: 1rem;
                                    width: min(300px,70vw);
                                    top: calc(100% + 1rem);
                                    color: var(--cLPrimaryBlue);
                                    background-color: var(--cLWhite);
                                }
                            }
                        }
                    }
                    @media screen and (width >= 1200px) {
                        & {
                            color: inherit;
                            overflow: visible;
                            max-height: initial;
                            align-items: center;
                            flex-direction: initial;
                            justify-content: center;
                            column-gap: min(2.5rem,2vw);
                        }
                    }
                }
                @media screen and (width >= 1200px) {
                    & {
                        left: 0;
                        padding: 0;
                        width: 100%;
                        height: auto;
                        translate: 0% 0%;
                        font-size: inherit;
                        background-color: initial;
                    }
                }
            }
            @media screen and (width >= 1200px) {
                & {
                    position: relative;
                    width: 100%;
                    height: auto;
                    visibility: visible;
                    pointer-events: inherit;
                }
            }
        }
        & .right {
            flex: 1;
            display: flex;
            column-gap: 5%;
            align-items: center;
            justify-content: flex-end;
            & ul:not([class]):has(  .wpml-ls-slot-shortcode_actions) {
                display: none !important;
            }
            & .language-switcher {
                display: flex;
                column-gap: .2em;
                flex: 0 0 clamp(min(60px,11vw),7vw,60px);
                & img {
                    display: block;
                    object-fit: contain;
                    width: min(2.5em,5vw);
                }
                & .active {
                    pointer-events: none;
                    opacity: .4;
                }
            }
            @media screen and (width >= 1200px) {
                & {
                    flex: 0 0 min(250px,19vw);
                }
            }
        }
    }
    @media screen and (width >= 1200px) {
        &::before {clip-path: inset(0 max(.2em,2vw) round 0 0 1em 0);}
    }
}