:where(.site-header) {
    .main-nav {
        display: grid;
        grid-auto-flow: column;
        column-gap: clamp(1rem, 3vw, 6rem);
        max-width: max-content;
        margin-inline: auto 0;

        & > li {
            text-align: center;
            margin-block: 0.5rem 0;

            & > a {
                text-decoration: none;
                font-size: 2rem;
                padding-bottom: 1rem;
                font-weight: 500;
                color: var(--color-brand-navy);
                font-family: var(--font-family-heading);
            }

            &:is(:focus-within, :hover) {

                & > a {
                    cursor: pointer;
                    border-bottom: 0.2rem solid var(--color-brand-navy);
                }

            }
        }


    }

    .menu-item-has-children {

        &:hover {
            .sub-menu {
                display: block;
                clip-path: inset(0);
            }
        }

        .sub-menu {
            display: none;
            transition-behavior: allow-discrete;
            position: absolute;
            transition-property: clip-path, display;
            transition-duration: 0.5s;
            clip-path: inset(0 0 100% 0);
            border-radius: 1rem;
            transform: translate(-1rem, 0.6rem);
            background: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            width: max-content;
            text-align: left;


            & a {
                color: var(--color-brand-navy);
                text-decoration: none;
                font-weight: 400;
                font-size: 1.4rem;
                font-family: var(--font-family-heading);
                display: inline-block;
                margin-bottom: 0.5rem;

                &:hover {
                    color: var(--color-brand-orange);
                }
            }
        }


        &:is(:focus-within, :hover) {
            .sub-menu {
                display: block;
                clip-path: inset(0);
            }

        }

        @starting-style {
            .sub-menu {
                clip-path: inset(0 0 100% 0);
            }
        }

        & > a:is(:focus-within, :hover) {

            & + .sub-menu {
                display: block;
                clip-path: inset(0);
            }
        }


    }




}


@media screen and  (width <= 60em) {
    :where(.site-header) {

        .main-nav-wrap {
            display: none;
        }

        .features-wrap .header-button:not(.search, .mobile) {
            display: none;
        }
    }
}