/*  COMPONENT: NAV-MAIN
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--nav-main {
    }
    .nav-main {
        font-size: var(--font-size-m);
        line-height: 1.25rem;
    }
    .nav-main .menu {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--spacing-m);
    }
    .nav-main .sub-menu {
        display: none;
    }
    .nav-main .menu a {
        position: relative;
        display: block;
        padding: var(--spacing-s) 0;
        font-weight: 600;
        text-decoration: none;
        color: inherit;
    }
    @media (min-width :1220px) {
        .nav-main li:not(.current-menu-item) a:hover,
        .nav-main .menu .current-menu-item *,
        .nav-main .menu .current-page-ancestor *,
        .nav-main .menu .current-menu-ancestor *, 
        .nav-main .menu .current-post-ancestor *
            color: var(--color-text);
        }
        .nav-main li:not(.current-menu-item) a:hover::after,
        .nav-main .menu .current-menu-item > *::after,
        .nav-main .menu .current-menu-ancestor > *::after,
        .nav-main .menu .current-page-ancestor > *::after,
        .nav-main .menu .current-post-ancestor > *::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: calc(var(--separator-height) * -1);
            width: var(--separator-width);
            height: var(--separator-height);
            background: var(--color-green);
        }
        .nav-main .menu .current-menu-item a:hover::after {
            background: var(--color-green);
        }
    
    
        .nav-main li:not(.current-menu-item) a:hover::before,
        .nav-main .menu .current-menu-item > *::before,
        .nav-main .menu .current-menu-ancestor > *::before,
        .nav-main .menu .current-page-ancestor > *::before,
        .nav-main .menu .current-post-ancestor > *::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: calc(var(--separator-height) * -2);
            width: var(--separator-width);
            height: var(--separator-height);
            background: transparent;
        }
        .nav-main .menu a:hover::before {
            background: rgb(58, 233, 145);
            background: linear-gradient(175deg, rgba(58, 233, 145, 0.3) 0%, rgba(58, 233, 145, 0) 100%) !important;
        }
    }


    .nav-main .menu-item--search {
    }
    .nav-main .menu-item--search a {
        font-size: 0;
        width: 2.5rem;
        height: 2.5rem;
        background-image: url("../../images/icons/icon--search.svg");
    }
    .nav-main .menu-item--search a:hover::after {
        display: none;
    }
}