@use "abstracts/mixins.scss" as *;
@use "abstracts/responsive.scss" as *;

#site-nav{
    position: relative;
    z-index: calc(var(--header-z) - 10);
}


#site-nav a {
    text-decoration: none;
    color: currentColor;
}

#site-nav li{
    font-weight: 500;
    color: var(--color-txt);
    input[type="radio"]{
        display: none;
    }
}

.arrow{

    --size: 12px;
    height: var(--size);
    width: var(--size);
    position: relative; 
    top: 2px;
    display: inline-block;
 
    svg{
        height: var(--size);
        width: var(--size);
        transform: rotate(0deg);
        transform-origin: center;
        transition: transform .2s ease-in-out;
        fill: var(--color-txt);
    }
    
    
}





label[for="menu-toggle"]{
    cursor: pointer;
    .menu__icon{
        @include icon(26px);
    }
}

#menu-toggle{ display: none; }
#menu-toggle ~ label[for="menu-toggle"] {
    .menu__icon--open{ display: flex; }
    .menu__icon--close{ display: none; }
}

#menu-toggle:checked ~ label[for="menu-toggle"] {
    .menu__icon--open{ display: none; }
    .menu__icon--close{ display: flex; }
}





@media #{$medium}{


#menu-toggle ~ #site-nav{
    top: -100vh;
}


#menu-toggle:checked ~ #site-nav{
    top: var(--header-h);
}



     #site-nav{
        position: fixed;
        background-color: white;
        transition: top .5s ease-in-out;
        // top: var(--header-h);
        left: 0px;
        max-height: calc(100vh - var(--header-h) + 2px);
        width: 100vw;
        padding: calc(var(--padding-body)*1);
        border-bottom: 2px solid var(--color-txt);
        
        

        // overflow-y: scroll;
        overflow: hidden;


        .img-menu{
            position: absolute;
            top: 25vw;
            margin-top: -20vw;
            right: -20vh;
            width: auto;
            height: calc(400px + 25vw);
            z-index: 10;
            float: right;
            background-color: var(--color-txt);
            display: flex;
            img{
                mix-blend-mode: screen;
               
            }
           
        }

        #btn__connexion,
        .nav-level-1_ul{
            position: relative;
            z-index: 20;
        }

        #btn__connexion{
            display: block;
            // margin-inline: auto;
            margin-top: calc(var(--spacing)*2);
            //   margin-bottom: calc(var(--spacing)*1);
        
        }


        .nav-level-1_ul{
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            grid-gap: var(--padding-inner);
            max-width: 580px;
            margin-right: 35vw;

           
            max-height: calc(100% - var(--spacing)*4);
            overflow-y: scroll;
        }
  

        .nav-level-1_li:first-of-type{
            grid-row: 1/3;

        }

      
        .nav-level-1_link{
            display: block;
            font-size: var(--fs-small);
            font-family: var(--font-title);
            padding-top: calc(var(--spacing)*1.5);
            padding-bottom: calc(var(--spacing)*1);
            text-decoration: underline 2px;
            text-underline-offset: 3px;
            text-transform: uppercase;
            padding-left: 1.4ch;
            cursor: auto;
            .arrow{
                display: none;
            }
            // a{
            //     pointer-events: none;
            //     cursor: auto;
            // }
        }

       

        .nav-level-2_li{
            font-size: var(--fs-normal);
       
            max-width: 20ch;
            a{
                width: 100%;
                height: 100%;
                 display: flex;
                align-items: center;
                     padding: calc(var(--spacing)*0.35) 1ch;
            }
           
            &:hover{
                background-color: var(--color-x-light);
            }
            
        }
        
    }
}


@media screen and (max-width: 780px){

    #site-nav{
        height: calc(100vh - var(--header-h) + 10px);

           .nav-level-1_ul{
            margin-right: 10vw;

            }

           


          .img-menu{
            top: auto;
            bottom: -60px;
            height: 400px;

           
        }

    }

}



@media #{$x-small}{
      #site-nav{


         .nav-level-2_ul{
            max-height: 0;
            transition: max-height .3s ease-in, opacity .2s ease-in;
            overflow: hidden;
            opacity: 0;
        }

        .nav-level-1_ul{
            display: block;
            width: calc(100% + var(--padding-body));
            overflow: hidden;


            input:checked + label .arrow svg{
                 transform: rotate(90deg);

            }
            input:checked ~ .nav-level-2_ul{
                max-height: 300px;
                padding-top: calc(var(--spacing)*0.5);
                padding-bottom: calc(var(--spacing)*2);
                opacity: 1;
            }
        }
      
          .nav-level-1_link{
                cursor: pointer;
             }

        #btn__connexion{
            margin-inline: 0px;
            position: absolute;
            bottom: calc(var(--spacing)*1.5);

        }

        .img-menu{
            // display: none;
             bottom: -80px;
        }


        .nav-level-1_link{
            padding-top: calc(var(--spacing) * 0.5);
            padding-bottom: calc(var(--spacing) * 0.5);
            text-decoration: none;
            display: flex;
            justify-content: space-between;
            max-width: 26ch;

             .arrow{
            display: block;
            padding-left: 2ch;
            position: relative;
            top: 1px;
        }
        
        }

       

    
       
    }
}


@media #{$medium-up}{

    #menu-toggle,
    label[for="menu-toggle"]{
        display: none;

    }

    #site-nav{
           display: flex;
    gap: calc(var(--padding-inner)*1);
    align-items: center;
    }
    #site-nav .nav-level-1_ul{
        display: flex;
        // gap: calc(var(--padding-inner)*0);

    }
#site-nav .nav-level-1_li {
    display: block;
    padding: var(--padding-inner);
    position: relative;
    text-decoration: none;
    white-space: nowrap;

    &:hover{
        color: var(--color-green);
        .arrow svg{
            transform: rotate(90deg);
            fill: var(--color-green);
        }

    }
}



#site-nav li:hover {
    cursor: pointer;
}

.nav-level-2_ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    display: none;
    border-top: 1px solid var(--color-green);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    margin-top: var(--padding-inner); 
    min-width: 24ch;
    z-index: var(--header-z);
    background-color: white;

}

.nav-level-1_ul li:hover > .nav-level-2_ul,
.nav-level-2_ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
    z-index: var(--header-z);
}
.nav-level-2_li{
    width: 100%;
    padding: calc(var(--padding-inner)*0.75) var(--padding-inner);
    
}
.nav-level-2_li:hover{
    background-color: var(--color-x-light);

}

.img-menu{
    display: none;
}

}