@charset "UTF-8";
:root {
    --fullscreen-btn-color: #fff;
    --fullscreen-item-size: 40px;
    --fullscreen-item-color: #010101;
    --fullscreen-bg-color: #fff;
    --fullscreenDropdownColor: #fff;
    --fullscreen-child-size: 30px;
    --fullscreen-dropdown-radius: none;
    --fullscreen-dropdown-shadow: none;
    --fullscreen-image-radius: 0px;
    --background-image-dots: radial-gradient(circle, #e6e6e6 1px, transparent 1px);
    --fullscreen-margin-top:0px;
    --svg-border-radius:0px;
    --svg-border-color:rgba(48, 55, 107, 0.3);

}

:where(.mod-menu__toggle-sub) {
    color: currentColor;
    background-color: #0000;
    border: none;
    align-items: center;
    padding: 0;
    display: inline-flex;

    &[aria-expanded="true"] .icon-chevron-down {
        transform: rotate(180deg);
    }
}

:where(.mod-menu [class*="icon-"]) {
    margin-inline-start: .5rem;
    transition: all .2s, background-color .2s;
}

:where(.mod-menu__sub[aria-hidden="true"]) {
    display: none;
}

:where(.mod-menu__sub[aria-hidden="false"]) {
    display: block;
}
body:has(#fullscreenmenuWrap.is-open) {
    overflow-y: hidden;
    /*padding-right: var(--scrollbar-width, 0px);*/
}
body:has(#fullscreenmenuWrap.is-open) .headroom {
    padding-right: var(--scrollbar-width, 0px);
}
#fullscreenmenuBtn {
    color: var(--burger-color);
    background: none;
    border: none;
}
#fullscreenInfoContent {
    padding:2vw;
}
#fullscreenMenuBoxSvg {
    padding:2vw;
}
#fullscreenInfoContent, #fullscreenMenuBoxSvg {
    background:rgba(255,255,255,0.0);
    transition: background 0.6s ease-in-out;
    &:hover{
        background:rgba(255,255,255,0.4);
    }
}
#fullscreenmenuWrap {
    position: fixed;
    left: 0;
    top:var(--fullscreen-margin-top);
    right: 0;
    bottom: 0;
    width: 100vw;
    background: var(--fullscreen-bg-color);
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
    transition: /*opacity 0.4s ease,*/ clip-path 1.5s ease;
    pointer-events: none;
    z-index: 9998;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    height:calc(100vh - var(--fullscreen-margin-top));

    &.is-open {
        opacity: 1;
        clip-path: circle(150% at 50% 50%);
        pointer-events: auto;
    }

    &.is-closed {
        opacity: 1;
        clip-path: circle(0% at 50% 50%);
        pointer-events: none;
        transition: clip-path 1s ease;
    }

    #fullscreenImg {
        padding: var(--imagepadding);

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: var(--fullscreen-image-radius);
        }
    }

    #fullscreenmenuBox {
        display: grid;
        place-content: start;
        padding: 2vw;

        .mod-menu {
            display: grid;
            width: fit-content;
            position: relative;
            isolation: isolate;
            z-index: 1;

            .parent > ul {
                display: inherit;
                opacity: 0;
            }

            & > li {
                margin: 0;
                width: fit-content;
            }

            li > a, li > span {
                color: var(--fullscreen-item-color);
                font-size: var(--fullscreen-item-size);
            }

            & li > ul.mod-menu__sub {
                background: var(--fullscreen-dropdown-color);
                position: absolute;
                z-index: 10;
                border: var(--fullscreen-dropdown-border);
                border-radius: var(--fullscreen-dropdown-radius);
                box-shadow: var(--fullscreen-dropdown-shadow);
                transform-origin: bottom left;
                padding: 10px;

                li a, li span {
                    font-size: var(--fullscreen-child-size);
                }

                &[aria-hidden="false"] {
                    animation: menu-fadein 0.3s ease-in-out forwards;
                }

                &[aria-hidden="true"] {
                    animation: menu-fadeout 0.5s ease-out forwards;
                }

                li:first-child {
                    padding-top: 0;
                }

                li:last-child {
                    padding-bottom: 0;
                }

            }

            .nav-item.deeper.parent:has(.mod-menu__sub[aria-hidden="false"]) {
                z-index: 100;
            }

            & > li.active:after, & > li:hover:after, & > li.current:after {
                /*background: var(--fullscreen-item-color);
                left: 0;
                right: 2px;*/
                display:none;
            }

            & > li.active:before, & > li:hover:before, & > li.current:before {
                position: absolute;
                content: "";
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.462 32.301c-.592-.593-.636-.81-.636-1.587V12.801c0-1.176.91-2.061 2.179-2.333l24.166-5.173c1.256-.27 1.803.589.734 1.678L22.99 21.17c-.518.528-.629.705-.629 1.872v18.599c0 .854-1.059 1.513-1.77.8zm12.028-4.776l15.326-15.32" stroke-width="1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m22.49 33.316l5.314-5.313c1.987-1.985 2.976.493 4.402-.895c1.264-1.23.413-3.918 2.588-6.093l3.022-3.02" stroke-width="1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M20.71 42.547c.588.554 1.556.221 1.993-.215l14.083-14.025c.605-.602 1.388-1.346 1.388-2.343V6.313c.016-1.372-1.238-1.224-2.003-1.019" stroke-width="1"/></svg>');
                left: -24px;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                top: calc(50% - 10px);
                animation: arrowFadeIn 0.3s ease-in-out forwards;
            }
            & > li:hover:before {
                animation: pointer 1s ease-in infinite, arrowFadeIn 0.3s ease-in-out forwards;
                display:none !important;
            }
            & > li.current:before {
                display:none;
            }

            .mod-menu__toggle-sub[aria-expanded="false"] {
                svg {
                    animation: rotate-down 0.3s forwards;
                }
            }

            .mod-menu__toggle-sub[aria-expanded="true"] {
                svg {
                    animation: rotate-up 0.3s forwards;
                }
            }

        }
    }

    #fullscreenInfoWrap {
        display: grid;
        align-items: start;
        padding: 2vw;
    }

    background-image: var(--background-image-dots);
    background-size: 10px 10px;

}


#fullscreenmenuBtn {
    z-index: 9999;
    position: relative;
    cursor: pointer;
    padding: 0;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    background: rgba(160, 32, 47, 0);
    transition: background 0.3s ease-in-out;

    &:hover {
        background: rgba(160, 32, 47, 0.1);
    }

    .line {
        width: 33px;
        height: 3px !important;
        background-color: var(--fullscreen-btn-color);
        border-radius: 100vh;
        display: block;
        margin: 7px auto;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    &.btn-animated {
        transition: top 0.6s ease, left 0.6s ease, transform 0.6s ease;
    }

    &.btn-animated.btn-open {

        .line {
            background-color: var(--fullscreenopen-btn-color);
        }

        .line:nth-child(2) {
            opacity: 0;
        }

        .line:nth-child(1) {
            -webkit-transform: translateY(10px) rotate(45deg);
            -ms-transform: translateY(10px) rotate(45deg);
            -o-transform: translateY(10px) rotate(45deg);
            transform: translateY(10px) rotate(45deg);
        }

        .line:nth-child(3) {
            -webkit-transform: translateY(-10px) rotate(-45deg);
            -ms-transform: translateY(-10px) rotate(-45deg);
            -o-transform: translateY(-10px) rotate(-45deg);
            transform: translateY(-10px) rotate(-45deg);
        }
    }
}

@keyframes menu-fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes menu-fadeout {
    0% {
        transform: translateY(0);
        opacity: 1;
        scale: 1;

    }

    100% {
        opacity: 0;
        transform: translateY(-150px);
        z-index: -1;
        scale: 0.5;
    }
}

@keyframes rotate-up {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 180deg;
    }
}

@keyframes rotate-down {
    from {
        rotate: 180deg;
    }

    to {
        rotate: 0deg;
    }
}
@keyframes arrowFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes pointer {
    0% {

        left: -40px;
    }

    50% {
        left: -43px;
    }
    100% {
        left: -40px;
    }
}

.draw-border {
    position: relative;

    svg.border-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: visible;


        rect {
            fill: none;
            stroke: var(--svg-border-color);
            stroke-width: 1;
            stroke-dasharray: var(--border-perimeter);
            stroke-dashoffset: var(--border-perimeter);
            transition: stroke-dashoffset 0.6s ease;
            rx:var(--svg-border-radius);
        }
    }

    &:hover svg.border-svg rect {
        stroke-dashoffset: 0;
    }
}