:root {
    --logo-desktop-height: 48px;
    --logo-mobile-height: 28px;
    --header-sticky-padding: 18px;
}

body {
    scroll-padding-top: var(--logo-desktop-height);

    @media (width < 1440px) {
        &.active-burger {
            main,
            footer {
                filter: blur(4px);
                pointer-events: none;
            }
        }
    }

    > .wp-site-blocks {
        > header {
            background-color: var(--wp--preset--color--white);
            /*border-bottom: solid 1px var(--wp--preset--color--primary-navy-100);*/
            /* padding-block: var(--wp--preset--spacing--x-small); */

            .wp-block-site-logo {
                img {
                    height: var(--logo-mobile-height);
                    width: auto;

                    @media (width > 1440px) {
                        height: var(--logo-desktop-height);
                    }
                }
            }

            .wp-block-template-part {
                max-width: calc(100% - 40px);
                width: var(--wp--style--global--wide-size);
                margin-inline: auto;

                > * {
                    gap: 40px;
                }
            }

            nav[data-block-ref="main-navigation"] {
                position: relative;
                font-weight: 500;
                flex-grow: 3;

                @media (width > 1440px) {
                    > ul {
                        > li:not([data-block-ref="icon-login"]) {
                            > a {
                                padding-block: 28px;
                            }
                        }
                    }
                }

                [data-block-ref="icon-login"] a {
                    display: flex;
                    align-items: center;
                    gap: 0.4em;

                    &:before {
                        font-family: "classvr_v3_icons";
                        content: "\e001";
                        font-size: 2em;
                    }

                    @media (width > 1440px) {
                        span {
                            display: none;
                        }
                    }
                }

                > ul {
                    > li {
                        cursor: pointer;

                        &:not(.wp-block-navigation-submenu) {
                            &.current-menu-item {
                                text-decoration: underline;
                            }
                        }
                    }
                }

                /* Dropdown navigation */
                .has-child {
                    @media (width < 1440px) {
                        display: block;

                        > a {
                            float: left;
                        }

                        &.current-menu-ancestor {
                            > a {
                                text-decoration: underline;
                            }
                        }

                        &.active_child {
                            .wp-block-navigation-submenu.wp-block-navigation__submenu-container {
                                height: auto;
                                visibility: visible;
                            }
                        }

                        .wp-block-navigation-submenu.wp-block-navigation__submenu-container {
                            all: unset;
                            overflow: hidden;
                            visibility: hidden;
                            height: 0;
                            display: block;

                            > li {
                                font-weight: 400;
                                &::before {
                                    content: "-";
                                }

                                &:first-child {
                                    margin-block-start: 0.5em;
                                }
                            }

                            .current-menu-item {
                                a {
                                    text-decoration: underline;
                                }
                            }
                        }
                    }

                    @media (width >= 1440px) {
                        &.current-menu-ancestor {
                            text-decoration: underline;
                        }

                        .wp-block-navigation-submenu.wp-block-navigation__submenu-container {
                            padding: 12px;
                            border-color: var(--wp--preset--color--primary-navy-200);
                            border-radius: var(--border-radius-small);
                            min-width: 300px;
                            gap: 0.2em;
                            top: 90%;

                            /*transition-duration: var(--transition--timing-300);
                            transition-timing-function: ease-in-out;
                            transition-property: opacity, transform;*/

                            &::before {
                                content: "";
                                width: 14px;
                                background-color: inherit;
                                position: absolute;
                                top: -8px;
                                left: 14px;
                                aspect-ratio: 1;
                                transform: rotate(45deg);
                                border-top: 1px solid var(--wp--preset--color--primary-navy-200);
                                border-left: 1px solid var(--wp--preset--color--primary-navy-200);
                            }

                            a {
                                &:focus-visible {
                                    outline-offset: 1px;
                                }
                            }

                            li {
                                &.current-menu-item {
                                    a,
                                    a:hover {
                                        background-color: var(--wp--preset--color--primary-navy-900);
                                        color: var(--wp--preset--color--white);
                                    }
                                }

                                a {
                                    border-radius: var(--border-radius-small);
                                    &:hover {
                                        background-color: var(--wp--preset--color--primary-orange-200);
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .wp-block-buttons {
                &:has([data-block-ref="mobile_burger"]) {
                    margin-inline-start: auto;

                    @media (width > 1440px) {
                        display: none;
                    }

                    [data-block-ref="mobile_burger"] {
                        .wp-element-button {
                            background-color: transparent;
                            border-radius: 0;
                            padding: 0;
                            width: 30px;
                            display: inline-flex;
                            overflow: hidden;
                            text-indent: -100%;
                            position: relative;
                            height: 14px;
                            color: transparent;
                            cursor: pointer;
                            text-shadow: none;

                            &::before,
                            &::after {
                                transition-duration: var(--transition--timing-200);
                                transition-timing-function: ease;
                                transition-property: transform;
                                background-color: var(--wp--preset--color--primary-navy-900);
                                border-radius: 4px;
                                position: absolute;
                                content: "";
                                width: 100%;
                                height: 3px;
                                left: 0;
                            }

                            &::after {
                                bottom: 0;
                            }
                        }
                    }
                }
            }

            &.header_sticky {
                @media (width > 1440px) {
                    nav[data-block-ref="main-navigation"] {
                        > ul {
                            > li:not([data-block-ref="icon-login"]) {
                                > a {
                                    padding-block: var(--header-sticky-padding);
                                }
                            }
                        }
                    }
                }

                .wp-block-site-logo img {
                    height: var(--logo-mobile-height);
                }
            }

            /* Burger breakpoint */
            @media (width < 1440px) {
                padding-block: var(--header-sticky-padding);

                nav[data-block-ref="main-navigation"] {
                    display: none;
                }

                &.active-burger {
                    nav[data-block-ref="main-navigation"] {
                        padding: var(--wp--preset--spacing--small);
                        background-color: var(--wp--preset--color--white);
                        position: absolute;
                        display: grid;
                        right: 10px;
                        top: 10px;
                        border: solid 1px var(--wp--preset--color--primary-navy-100);
                        border-radius: var(--border-radius-regular);

                        ul {
                            display: grid;
                        }

                        .wp-block-spacer {
                            display: none;
                        }
                    }

                    .wp-block-buttons:has([data-block-ref="mobile_burger"]) {
                        .wp-element-button {
                            aspect-ratio: 1;
                            z-index: 1;
                            height: auto;
                            width: 26px;

                            &::before {
                                transform: rotate(45deg) translate(8px, 8px);
                            }

                            &::after {
                                transform: rotate(-45deg) translate(8.5px, -8px);
                            }
                        }
                    }
                }
            }
        }
    }
}