/*  COMPONENT: NAV-TOP
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--nav-top {
    }
    .nav-top {
        font-size: var(--font-size-l);
        line-height: 1.25rem;
    }
    .nav-top .menu {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--spacing-m);
        align-items: center;
    }
    .nav-top .menu a {
        position: relative;
        display: block;
        padding: var(--spacing-s) 0;
        text-decoration: none;
        font-weight: 600;
        color: inherit;
    }
    @media (min-width: 1220px) {
        .nav-top .menu a:hover {
            color: var(--color-white);
        }
        .nav-top .menu a::after {
            content: "";
            width: var(--separator-width);
            height: var(--separator-height);
            position: absolute;
            left: 0;
            bottom: calc(var(--separator-height) * -1);
        }
        .nav-top .current-menu-item,
        .nav-top .current-menu-ancestor,
        .nav-top .current-page-ancestor {
            color: var(--color-white);
        }
        .nav-top .current-menu-item:not(.menu-item--cta) a::after,
        .nav-top .current-menu-ancestor:not(.menu-item--cta) a::after,
        .nav-top .current-page-ancestor:not(.menu-item--cta) a::after {
            background-color: var(--color-red-700);
        }
        .nav-top .menu :not(.menu-item--cta) a:hover::after {
            background-color: var(--color-green);
        }
    }


}