/* The 950px pixel value used in media queries throughout this css is the MenuBar breakpoint for small screens. It must be changed to the same value in all places it appears. */

.MenuBar {
    position: sticky;

    top: 0; left: 0; right: 0;

    --fgColor: var(--color-primary);
    --bgColor: var(--color-background);

    --optionGap: 0;
    --optionPadding: 15px;

    background: var(--bgColor);

    transition:
        box-shadow 500ms ease-in-out,
        background-color 100ms ease-in-out;

    > nav {
        height: var(--menu-height);
        margin: 0 auto;
        box-sizing: border-box;
        width: var(--content-width);
        max-width: 100vw;
        padding: 0 var(--gap-big);

        display: grid;
        grid-template-columns:auto 1fr auto auto;
        grid-template-areas: "logo menuMiddle menuRight toggle";
        align-items: center;

        gap: var(--optionGap);

        transition:
            width 200ms ease-in-out,
            grid-template-areas 0.5s ease;

        > .logo {
            grid-area: logo;

            padding: 0;
            margin-top: -3px;
            display: flex;

            opacity: 1;
            transition: opacity 300ms ease-in-out;

            height: var(--menu-height);


            > .image {
                width: 70px;
                aspect-ratio: 3.728;
                mask-repeat: no-repeat;
                mask-position: center;
                background-color: var(--fgColor);
            }

            > .title {
                font-weight: 600;
                text-transform: uppercase;
            }
        }

        > .Menu.middle {
            grid-area: menuMiddle;
        }

        > .Menu.right {
            grid-area: menuRight;
        }

        > #toggle {
            grid-area: toggle;

            display: none;

            + label {
                justify-self: end;

                display: none;
                width: 33px;
                height: 33px;
                cursor: pointer;
                color: var(--color-base);

                justify-content: center;
                align-items: center;

            }
        }

        /* Small screen menu */
        @media all and (max-width: 950px) {

            --bgColor: inherit !important;
            background: var(--bgColor);

            grid-template-columns: 1fr 1fr;
            grid-template-rows: var(--menu-height) 1fr 1fr;
            grid-template-areas:
                "logo toggle"
                "menuMiddle menuMiddle"
                "menuRight menuRight";
            align-items: center;

            box-shadow: 0 7px 15px hsla(var(--color-primary-hue), var(--color-primary-saturation), calc(var(--color-primary-brightness) * .2), 25%);

            transition: all 200ms;
            height: var(--menu-height);
            overflow: hidden;

            > .Menu {

                align-self: flex-start;

                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;

                opacity: 0;

                transition: opacity 400ms ease-in-out;

                height: max-content;

                > .MenuOption {
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 0;

                    > .Dropdown {
                        position: relative !important;
                        opacity: 1 !important;
                        top: auto !important;
                        overflow: hidden;
                        > div {
                            box-shadow: none !important;
                            border: none !important;
                            width: auto;
                        }
                    }
                }
            }

            > #toggle + label {
                display: flex;
            }

            &:has(#toggle:checked) {
                height: 100vh;
                overflow-y: scroll;
                overscroll-behavior: none;

                > .Menu {
                    opacity: 1;
                }

                > .Menu.right {
                    margin-bottom: var(--gap-big);
                }

                > .Menu + .Menu {
                    border-top: solid var(--color-base-faintest-2) 1px;
                    margin-top: var(--base-gap);
                    padding-top: var(--base-gap);
                }

                background: var(--bgColor);
            }

        }

    }

    z-index: 2;
}

body.scrolled .MenuBar {
    box-shadow: 0 7px 10px hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-brightness), 5%);
}

body:not(.scrolled) .MenuBar.noLogo:not(:has(.Menu.middle)) {
    & > nav {
        grid-template-areas: "logo menuRight toggle";
    }
}

body:not(.scrolled) .MenuBar.noLogo > nav > .logo {
    opacity: 0;
}

.MenuBar.absolute {
    position: fixed;
}

.MenuBar.absolute.shade {
    background: transparent;
}

.MenuBar.onDark,
body:not(.scrolled) .MenuBar.onDarkTransparent {
    --fgColor: #fff;
    --bgColor: var(--color-base-darker);
    /* --bgColor: var(--color-primary); */

    /* Primary buttons change on dark */
    .Button.primary {
        --bgColor: #fff;
        --borderColor: #fff;
        --activeColor: #fff;
        --fgColor: var(--color-base) !important;
        --hoverBgColor: var(--color-accent) !important;
        --hoverFgColor: #fff !important;
        --hoverBorderColor: transparent;
    }

    > nav > .Menu > .MenuOption {
        --fgColor: #fff;
        --fgColorAccent: var(--color-base);

        & > .Dropdown > div {
            border: none;
        }
    }

    > nav > #toggle + label {
        color: #fff;
    }
}

@media all and (min-width: 950px) {
    body:not(.scrolled) .MenuBar.onDarkTransparent {
        --gap: var(--gap-huge);

        --shadeGradient: linear-gradient(45deg, var(--color-base-dark), var(--color-base-dark));

        &.productRecommendations { --shadeGradient: var(--gradient-product-recommendations); }
        &.naturalSearch { --shadeGradient: var(--gradient-natural-search); }
        &.trendAnalysis { --shadeGradient: var(--gradient-trend-analysis); }
        &.clientTags { --shadeGradient: var(--gradient-client-tags); }

        @media all and (max-width: 950px) {
            --gap: var(--gap-big);
        }

        @media all and (min-width: 950px) {
            --bgColor: transparent;
        }

        & > nav {
            position: relative;
            width: calc(var(--content-width) - (var(--bezel-width) * 2));
            padding: 0 var(--gap-big);
            max-width: calc(100vw - calc(var(--gap-huge) * 2) - (var(--bezel-width) * 2));
            margin: 0 auto;
            box-sizing: border-box;

            &:before {
                position: absolute;
                content: '';
                left: 50px;
                right: 50px;
                top: -75px;
                height: 150px;
                background: var(--shadeGradient);
                border-radius: 50%;
                filter: blur(20px);
            }
        }
    }
}

.MenuBar.shade:before {
    position: absolute;
    inset: 0;
    bottom: -40px;
    height: 80px;
    content: '';
    background: linear-gradient(
        180deg,
        hsl(from var(--bgColor) h s l) 40%,
        hsl(from var(--bgColor) h s l / 0)
    );
    pointer-events: none;
}