/********************** MENU MULTILEVEL *****************************/ 
 
:root {
--mainHeader:   min(1600px, calc(100% - 8vw));
--headerHeight: 150px;
--menuPadding:  var(--wp--preset--spacing--s);
--menuGap:      var(--wp--preset--spacing--s);
--heightLang:   40px;
  
--sizeIcon:     24px;
--logoWidth:    180px; 

--colorLight:   var(--wp--preset--color--light);
--colorDark:    var(--wp--preset--color--contrast);
--menuShadow:  -12px -12px 40px 0 rgb(22 13 24 / .3);
}

.header,
.main-nav, 
.main-header {
/*    border:2px solid hotpink;*/
}

.main-header,
.main-nav,
.menu-lang,
.menu-main {
   display: flex;
   gap:var(--menuGap);
   list-style: none;
}


.main-nav {
    gap:0;
    flex-direction: column;
    align-items: flex-end;
}

.menu-lang {
    box-shadow: inset 0 -1px 0 0 var(--colorLight);
    align-items: center;
}

.menu-main {
    --menuGap:var(--wp--preset--spacing--s);
}

.header {
    position: fixed;
    inset:0 0 auto 0;
    z-index: 20;
    height: var(--headerHeight);
    transition: all 350ms;
}
 
.main-header {
    width: var(--mainHeader);
/*    max-width: 1600px;*/
    margin-inline: auto;
    align-items: flex-end;
    justify-content: space-between;
}


.primary-logo img,
.primary-logo svg { 
    display: block;
    fill:  var(--colorLight); 
    width: var(--logoWidth); 
    padding-bottom:calc(var(--menuPadding) * 2);
} 


.menu-main   { margin-block:var(--menuPadding); }
.menu-main a {
    font-family: var(--wp--preset--font-family--header);
    padding-block:var(--menuPadding);
}

.menu-main .description {
    display: block;
    font-weight: 400;
    font-family: var(--wp--preset--font-family--body);
    font-size:   var(--wp--preset--font-size--xs);
    text-transform: none;
    transition:all 350ms ease;
} 


.main-nav a {
    font-weight: 700;
    color: var(--colorLight);
    font-size:   var(--wp--preset--font-size--s);
    text-transform: uppercase;
    opacity: .8;
    transition:all 350ms ease;

}

.menu-main a {
    display: flex;
    box-shadow:inset 0 0 0 0 var(--wp--preset--color--accent);
    padding-left: var(--wp--preset--spacing--xs);
}

.menu-lang a { 
    display: flex;
    height: var(--heightLang);
    align-items: center;
    box-shadow:inset 0 0 0 0 var(--colorLight);
    font-size: var(--wp--preset--font-size--xs);
    padding-inline:var(--wp--preset--spacing--s);
}



.main-nav a:hover,
.main-nav .current a {
    opacity: 1;
    box-shadow:inset 2px 0 0 0 var(--wp--preset--color--accent);
} 


.menu-main a:hover .description,
.menu-main .current a .description {
    color:var(--wp--preset--color--accent);
}

.menu-lang a:hover,
.menu-lang .current a {
    opacity: 1;
    box-shadow:inset 0 -4px 0 0 var(--colorLight);
} 
 
.arrow-icon { 

    display: grid;
    position: absolute;
    right: var(--wp--preset--spacing--xs);
 
}



.arrow-icon:after {
    --sizeIcon:16px;
    content:'';
    background-image: var(--arrow-down);
    background-size:  var(--sizeIcon);
    background-repeat: no-repeat;
    min-width:   var(--sizeIcon);
    aspect-ratio:1/1;
    display: block;
    transition: all 350ms;
    position: relative;
    z-index: 12;
}  

 
 


.hamburguer     {  
    color:   var(--colorLight);
    padding: var(--wp--preset--spacing--xs);
    display: none;
    cursor: pointer;
    place-content: center;
    z-index: 12;
}

.hamburguer svg { 
    --sizeIcon: 24px;
    display: block; 
    min-width: var(--sizeIcon);
    color: var(--colorLight);
 
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 1 / -1;

    transition: all 350ms;
}



.header.hidden {
    --headerHeight: 115px;
    --colorLight: var(--wp--preset--color--contrast);
    --menuPadding:    var(--wp--preset--spacing--xxs);
    background-color: var(--wp--preset--color--contrast);

    background-color: var(--wp--preset--color--light);
    box-shadow: var(--shadow-2);
}


.header.header-dark {
    --colorLight: var(--wp--preset--color--contrast);
/*    background-color: var(--wp--preset--color--light);*/
}

body.menu-open .header {
    --colorLight: var(--wp--preset--color--contrast);
}

 
 
 

@media only screen and (max-width: 1180px) { 
    
:root {
    --headerHeight:    70px;
    --logoWidth:      140px; 
    --menuSize:       300px;
    --menuPadding:    var(--wp--preset--spacing--xs);
    --sizeIcon:       60px;
    --colorLight: var(--wp--preset--color--light);
    --colorDark:  var(--wp--preset--color--contrast);
}


.header {
    height: var(--headerHeight);
    display: flex;
    align-items: center;
    width: 100vw;
}

.header.hidden {
    --headerHeight: 60px;
} 

.main-header { align-items:center; }

.primary-logo svg { 
    width: var(--logoWidth); 
    padding-bottom:0; 
} 

/*.header.hidden {
    transform: translateY(0);
}
*/

.arrow-icon { 
    height: var(--sizeIcon);
    right:0;
    pointer-events: all;
}

 
.hamburguer                { display: grid; } 
 
.hamburguer svg:first-child { clip-path: inset(0);          transform: rotate(180deg);  }
.hamburguer svg:last-child  { clip-path: inset(100% 0 0 0); transform: rotate(180deg);  }

body.menu-open .hamburguer svg:first-child { transform: rotate(0deg); clip-path: inset(0 0 100% 0) }
body.menu-open .hamburguer svg:last-child  { transform: rotate(0deg); clip-path: inset(0) }




.main-nav {
    position: fixed;
    padding-block:  var(--headerHeight);
    padding-inline: var(--wp--preset--spacing--s);
    width:  var(--menuSize);
    height: 100svh;
    inset: 0 0 0 auto;
    background-color: var(--wp--preset--color--light);
    border-radius: 0;
    overflow-y: auto;

    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: stretch;

    transform: translateX(var(--menuSize));
    transition: all 550ms ease;
    z-index: -1;
}

.main,
.fullscreen,
.main-header  { transition: all 1500ms ease; }
.main-header  { transition: all 700ms ease; }

.main-header {
    --moveWidth: 100vw;
    --movePadding: 4vw;
    width: var(--moveWidth);
    padding-inline: var(--movePadding);
    margin-right: 0;
}

body.menu-open {
    background-color: var(--wp--preset--color--lightgrey);
}
body.menu-open .main-header {
    --moveWidth:   var(--menuSize);
    --movePadding: var(--wp--preset--spacing--s);
}

 
body.menu-open .fullscreen {
    border-radius: 12px 0 0 0;
    overflow: clip;
}
body.menu-open .main { 
    margin:4vw;
    border-radius: 12px;
    overflow: clip;
    box-shadow: var(--menuShadow);
}

body.menu-open .header.hidden {
    background-color:transparent;
    box-shadow: none;
}
/*body.menu-open .main > *     {
        filter: blur(12px) brightness(0.25);
}*/
 
body.menu-open .main-nav { 
    border-radius:12px 0 0 12px;
    transform:translateX(0); 
    box-shadow: var(--menuShadow);
}


.menu-main a {
    --menuPadding: 20px;
}


.menu-main {
    flex-direction: column;
    gap:0;
}

.menu-lang {
    justify-content: space-between;
    box-shadow: inset 0 1px 0 0 var(--colorDark);
    margin-top: var(--wp--preset--spacing--m);
} 

.menu-lang a {
 padding-inline:var(--wp--preset--spacing--xs);
}
.menu-lang a:hover {
    opacity: 1;
    box-shadow:inset 0 4px 0 0 var(--colorDark);

} 

 
}