/********************** MENU MULTILEVEL *****************************/ 

header,
header.hidden,
.menumobile a,
.has-submenu > ul,
.menu-main li,
.menu-end li,
.arrow-icon svg {
  transition: all 500ms ease;
}


:root { 
  --color:  var(--wp--preset--color--contrast);
  --back:   transparent;
  --shadow:none;
  --radius: 0px;
  --flag:16px;
  --hide: none;
  --menuRadius: 12px;
  --navPadd:   0px;
  --navRadius: 100vmin;
  --topHeader:  20px;
  --menuFull:   70px;
  --menuHeight: 40px;
  --menuFont: var(--wp--preset--font-size--s);
  --move: 100%;
  --sizeIcon:18px;
  --navBottom:none;
  --mainTop:calc((var(--topHeader) * 2) + var(--menuFull));
}

header { 
  position: fixed;
  inset:0 0 auto 0;
  z-index: 12;
  transition: all 500ms ease;
  margin-top: var(--topHeader);
}

 
header.hidden {
    transform: translateY(-110%);
}




.lang-item a {
  position: relative;
  border-radius: 100vmin;    
  display: flex;
  align-items: center;
  gap: 4px;
}
 
.lang-item a::before {
  content: '';
  display: block;
  height: var(--flag);
  width: var(--flag);
  border-radius: 50%;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/ce/Flag_of_Catalonia.svg');
  background-position: center;
  background-size: cover;
}

.es.lang-item a::before {
  background-image: url('https://flagcdn.com/es.svg');
}

.en.lang-item a::before {
  background-image: url('https://flagcdn.com/gb.svg');
}


.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:  var(--wp--style--global--content-size); 
  margin-inline: auto;
  background-color: white;
  transition: all 500ms ease;

/*  padding: var(--navPadd);*/
  border-radius: var(--navRadius);
  
  font-family:var(--wp--preset--font-family--header);
  font-size: var(--menuFont);

  box-shadow: var(--shadow-3);

  height: var(--menuFull);
  border-bottom: var(--navBottom);
}


/* NEW HEADER */
:root { 
  --navRadius:  0px;
  --topHeader:  10px;
  --menuHeight: 40px;
  --menuFull:   80px;
}

header { 
/*  border:2px solid red;*/
  background: white;

  margin-top: 0;
  padding-top: var(--topHeader);
}

.navbar {
  box-shadow: unset;
}

/* NEW HEADER */


.menumobile,
.menu-main,
.menu-end {
  --linkPadding:var(--wp--preset--spacing--xs);
  display: flex;
  gap:10px;
  transition: all 350ms ease;
}



.menumobile a,
.menu-main a,
.menu-end a {
  line-height: 1;  
  height: var(--menuHeight);
  padding-inline: var(--linkPadding); 
  color:var(--wp--preset--color--contrast);
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 100vmin;
}



.menu-end { 
  border-left:1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
  padding-left:10px;
}

.menu-main li.has-submenu {position: relative;}
.menu-main li:has(.arrow-icon) > a { padding-right: calc(var(--linkPadding) + var(--sizeIcon));}
.arrow-icon {
  position: absolute;
  right: calc(var(--linkPadding) - 4px);
  pointer-events: none;
  top: 0;
  height: var(--menuHeight);
  align-items: center;
  display: flex;
}

 
.menumobile a:hover { background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);}

li.phone a {
  --linkPadding:var(--wp--preset--spacing--xxs);
  font-size: var(--wp--preset--font-size--p);
  background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 75%, transparent);
  color: white;
  display: inline-flex;
  gap: var(--wp--preset--spacing--xxs);
}
li.phone a:hover     { background-color: var(--wp--preset--color--contrast); }

 

li.phone a:before {
  content:'';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke-width='1.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3h10v8h-3l-4 2v-2h-3z'/%3E%3Cpath d='M15 16v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h2m2 13v.01'/%3E%3C/svg%3E");
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke-width='1.75' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  width:  26px;
  height: 26px;
  background-color: white;
  border-radius: 50%;
} 

.has-submenu     { position: relative; }
.has-submenu > a { gap: var(--wp--preset--spacing--3-xs); } 

.has-submenu > ul {
    --submenuWidth:    100%;
    --menuPadding:     var(--wp--preset--spacing--xxs);
    --submenuTop:      50px;
    --submenuPosition: absolute;
    --submenuHeight:   0;
    
    --submenuVisible:  hidden;
    --submenuOpacity:  0;
    
    border:          2px solid white;
    padding:         var(--menuPadding);
    box-shadow:      var(--shadow-s);
    background-color:var(--wp--preset--color--light);
 
    right:            0;
 
     
    display: flex;
    flex-direction: column;
/*    grid-template-columns: var(--submenuGrid);*/
    gap: var(--wp--preset--spacing--3-xs);
    color:var(--wp--preset--color--contrast);

    min-width:      var(--submenuWidth);
    overflow:       clip;

    top:            var(--submenuTop);
    position:       var(--submenuPosition);
    max-height:     var(--submenuHeight);
    border-radius:  var(--menuRadius);
    visibility:     var(--submenuVisible);
    opacity:        var(--submenuOpacity);
} 

/* ESTADO HOVER SOLO EN ESCRITORIO */
@media only screen and (min-width: 1200px) {
    li.has-submenu:hover > ul {  
    --submenuTop:      60px;
    --submenuHeight:   800px;
    --submenuVisible:  visible;
    --submenuOpacity:  1;

      background: rgb(255 255 255 / .7);
      backdrop-filter: blur(4px);
      box-shadow: var(--shadow-5);
    }

    .has-submenu:hover > .arrow-icon svg        { display: inline-flex; transform: rotate(180deg);  pointer-events: none; }
    li.has-submenu > ul:hover li:not(:hover) a  { opacity: .5; transform:scale(.96); }
}
/* END ESTADO HOVER */




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

.hamburguer svg { 
    display: block; 
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    transition: all 350ms;
}
 



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

:root {
 --topHeader: 10px;
}

body.is-open header {
/*  --topHeader:0px;*/
  --content-gap:0;
  --navPadd:  40px 4vw;
  --navRadius: 0px;
  --shadow-3:none;
  --menuHeight: 60px;
  --navBottom:1px solid var(--wp--preset--color--lightgrey);
  --submenuTop:0px;
  --shadow-s:none;

}

.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.is-open .hamburguer svg:first-child { transform: rotate(0deg); clip-path: inset(0 0 100% 0) }
body.is-open .hamburguer svg:last-child  { transform: rotate(0deg); clip-path: inset(0) }

 
 
 
.menumobile {
  --move:      -20px;
  --maxHeight:   0px;
  --opacity:     0;
  --visible:     hidden;
  position: absolute;
  width: 100%;
  height: 100vh;
  inset:0 0 auto 0;
  background: white;
  flex-direction:  column;
  justify-content:start;
  overflow-y:auto; 
  z-index: -1;
 
  transform:    translateY(var(--move));
  max-height:   var(--maxHeight);
  opacity:      var(--opacity);
  visibility:   var(--visible);
  padding: calc(var(--menuFull) + var(--wp--preset--spacing--s)) 0px var(--wp--preset--spacing--m);
}

body.is-open .menumobile {
 
  --move:        0px;
  --maxHeight:   100vh;
  --opacity:     1;
  --visible:     visible;
 
  border-radius: 0 0 20px 20px;
  box-shadow: var(--shadow-5);
}

.menu-main li:has(.arrow-icon) > a { padding-right: var(--linkPadding); }

.menu-end,
.menu-main {
    width: var(--wp--style--global--content-size);
    margin-inline: auto;
}

.menumobile, .menu-main {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.arrow-icon {
  pointer-events: all;
  width: var(--menuHeight);
  justify-content: center;
}

.menu-end {
  --space:var(--wp--preset--spacing--s);
  margin-top: var(--space);
  padding:    var(--space) 0px 0px;
  border:none;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
  justify-content: space-between;
}

.has-submenu > ul { 
    --submenuTop:      0px;
    --submenuHeight:   0px;
    --submenuPadding:  0px;
    --menuPadding:     0px;
    --submenuPadding:  0px;
    --submenuPosition: relative;
    --shadow-s:none;
    border: none;
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
}

.has-submenu > ul.show { 
  --submenuHeight: 100vh;
  --menuPadding: var(--wp--preset--spacing--xs);
  visibility: visible;
  opacity: 1;
  } 

body > *:not(header)        { transition:all 1.2s ease; } 
body.is-open >*:not(header) { filter:blur(3px); transform: scale(.9);}
 
.menu-end li.phone a {
  font-size: var(--wp--preset--font-size--h-4);
}


}