/*  COMPONENT: NAV-SUB
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .nav-sub {
        font-size: var(--font-size-s);
        font-weight: 500;
    }
    .nav-sub ul {
        margin: 0;
        padding: 0;
    }
    .nav-sub a {
        display: block;
        text-decoration: none;
        position: relative;
    }
    .nav-sub a::before {
        content: "";
        position: absolute;
        top: 0.1875rem;

        width: var(--separator-width);
        height: var(--separator-height);
        left: calc((var(--separator-width) + 1.25rem) * -1);
    }
    .nav-sub .menu-item > a:hover::before {
        background: var(--color-green);
    }
    .nav-sub .current-menu-item > a::before {
        background: var(--color-red);
    }
    .nav-sub .menu-item,
    .nav-sub .menu,
    .nav-sub .sub-menu {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav-sub .menu-item {
        line-height: 1rem;
        margin-left: 0 !important;
    }
    /* LEVEL 1 */
    .nav-sub .menu > .menu-item > a {
        text-transform: uppercase;
        font-weight: bold;
    }

    /* LEVEL 2 */

    .nav-sub .menu > .menu-item > .sub-menu > li > a {
    }

    /* LEVEL 3 */

    .nav-sub .sub-menu .sub-menu > li > a {
    }
    .nav-sub .sub-menu .sub-menu > li > a:hover {
        color: var(--color-red);
    }
    .nav-sub .sub-menu .sub-menu * {
        color: var(--color-neutral-500);
        font-size: var(--font-size-s);
    }

    /* LEVEL 4 */

    .nav-sub .sub-menu .sub-menu  .sub-menu {
        display: none !important;
    }
    .nav-sub .sub-menu .sub-menu .current_page_ancestor .sub-menu ,
    .nav-sub .sub-menu .sub-menu .current_page_item .sub-menu  {
        display: flex !important;
    }

    .nav-sub .sub-menu .sub-menu .sub-menu * {
        font-size: var(--font-size-xs);
        font-weight:400
    }
    .nav-sub .sub-menu .sub-menu .sub-menu > li > a::before {
        
    }

    /* SHOW / HIDE */
    #nav-sub > li {
        display: none;
    }
    #nav-sub > .current-menu-item.menu-item-has-children,
    #nav-sub > .current-menu-parent,
    #nav-sub > .current-menu-ancestor {
        display: flex;
    }
    #nav-sub .sub-menu .sub-menu {
        display: none;
    }
    #nav-sub .sub-menu .current-menu-item .sub-menu,
    #nav-sub .sub-menu .current-page-ancestor .sub-menu {
        display: flex;
    }
}