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

header {
/*  border: 2px solid green;*/
/*  --header:90px;*/
  --color:  var(--wp--preset--color--light);
  --navGap:   4vw;
  --back:transparent;
  --shadow:none;
  --radius:0px;
  --padd: 0;
  --logoHeigth:90px;
  --top:30px;
  --flag:26px;
  --hide: none;

  --menuRadius:      12px;

  display: flex;
  justify-content: center;
  position: fixed;
  width: calc(100% - (var(--content-gap) - var(--navGap)) );
  inset:var(--top) 0 auto 0;
  margin-inline: auto;
  background-color: var(--back); 
  color:var(--color);
  box-shadow: var(--shadow); 
  border-radius: var(--radius);
  padding: var(--padd);
  z-index: 12;
  transition: all 500ms ease;
}

header.inverted {
  --header:70px;
  --logoHeigth:60px;
  --top:10px;
  --paddingContainer:0;
  --radius:12px;
  --color:var(--wp--preset--color--verde);
  --back:white;
  --shadow:var(--shadow-m);
  --padd: var(--wp--preset--spacing--xxs) 0;

  --menuRadius:      0 0 12px 12px;
}

.navbar {
/*  border: 2px solid red;  */
  display: flex;
  align-items: center;
  width:  calc(100% - var(--navGap));  
  transition: all 500ms ease;
}

/*.navbar nav {
  
  width: var(--wp--style--global--wide-size);
  margin-inline: auto;
} */


.logo-container {
  display: flex;
  align-items: center;
  height: var(--logoHeigth);
  transition: all 500ms ease;
}

                 
.logo-container .logo,
.logo-container svg {     
  display: block;
  object-fit: cover;
  height: 100%;
  width:  100%; 
}

 

.navbar ul {
  display: flex;
  align-items: center;
}
 
.navbar ul a {
/*  border:2px solid red;*/
  padding: var(--wp--preset--spacing--xs);
  display: flex;
  font-size: var(--wp--preset--font-size--s);
  text-transform: uppercase;
  font-weight: 600;
}

.navbar ul a:hover {
  opacity: .45;
}

ul.menu-end  {
  gap:var(--wp--preset--spacing--xxs);
}
ul.menu-main {
  margin-left: auto;
  padding-right: var(--wp--preset--spacing--xs);
  margin-right:  var(--wp--preset--spacing--xs);
  border-right: 1px solid var(--color);
/*  position: relative;*/
} 

.login {
  background-color: var(--wp--preset--color--verde);
  color: white;
}


.hamburguer     {  
    padding: var(--wp--preset--spacing--xs);
    display: var(--hide);
    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;
}

.hamburguer svg:first-child       { clip-path: inset(0 0 0 100%); } 
.hamburguer:hover svg:first-child { clip-path: inset(0); } 

.lang-item a {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  height: var(--flag);
  width:  var(--flag);
}
 
.lang-item a::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background-image: url('https://flagcdn.com/gb.svg');
  background-position: center;
  background-size: cover;
}

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

ul.menu-social {
  display: var(--hide);
}

/*.has-submenu  { position: relative; }*/

.has-submenu > a {
  align-items: center;
  gap:4px;
}

.has-submenu > a:after {
  --sizeIcon: 16px;
  content: '';
  mask-image: var(--arrow-down);
  mask-size: var(--sizeIcon);
  mask-repeat: no-repeat;
  background-color: currentColor;
  width: var(--sizeIcon);
  height: var(--sizeIcon);
  transition: all 350ms;
}  

.has-submenu > ul {
    --submenuWidth:    70%;
    --submenuGrid:     repeat(3, 1fr);
    --menuPadding:     var(--wp--preset--spacing--xs);
    --submenuTop:      110%;
    --submenuPosition: absolute;
    --submenuHeight:   0;
    
    --submenuVisible:  hidden;
    --submenuOpacity:  0;
    
    padding:         var(--menuPadding);
    box-shadow:      var(--shadow-s);
    background-color:var(--wp--preset--color--light);
    transition:  all 350ms; 
    right:            0;
 
     
    display: grid;
    grid-template-columns: var(--submenuGrid);
    gap: var(--wp--preset--spacing--xs);
    color:var(--wp--preset--color--verde);

    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: 820px) {
    li.has-submenu:hover > ul {  
    --submenuTop:      calc(100% - var(--wp--preset--spacing--xxs));
    --submenuHeight:   800px;
    --submenuVisible:  visible;
    --submenuOpacity:  1;
    }

    .has-submenu:hover > a:after      { transform: rotate(180deg) }
/*    li.has-submenu > ul:hover li:not(:hover) a  { opacity: .5; transform:scale(.96); }*/
}
/* END ESTADO HOVER */


.navbar ul a.menu-apartment {
  display: flex;
  gap:var(--wp--preset--spacing--xxs);
  align-items: center;
/*  border:2px solid black;*/
  padding: 0;
}

.menu-apartment-image {
   --imgW:70px;
  --imgH:70px;
  width:      var(--imgW);
  height:     var(--imgH);
 
  border-radius: 4px;
  overflow: clip;
/*  border:2px solid black;*/
  display: block;
}

.menu-apartment-image img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  display: block;
}

.menu-apartment-data {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap:4px;
}
.menu-apartment-data .chip {
  border-width: 1px;
}






/*
body.is-open {
     overflow: hidden!important;
}*/

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

.logo-container {
    margin-left: var(--wp--preset--spacing--xs);
}

header,
header.inverted {
  --content-gap: 0;
  --top: 0;
  --logoHeigth: 60px;
  --padd: var(--wp--preset--spacing--xs) 0;
  --radius: 0px;
  --move: 100%;
  
/*  border: 2px solid green;*/
} 
 

.hamburguer     {  
  --hide: grid;
} 



.is-open .hamburguer,
.is-open .logo-container {
  color:var(--wp--preset--color--verde);
}


.menumobile {
  position: fixed;
  height: 100vh;
  top:    0;
  right:  0;
  margin: 0;
  background: white;
  color: var(--wp--preset--color--verde);
  z-index: -1;
 
  transform: translateX(var(--move));
  display: flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  
  justify-content:start;

  padding-top:calc(var(--logoHeigth) + var(--wp--preset--spacing--m));

  overflow-y:scroll!important;
/*  padding-inline:var(--wp--preset--spacing--m);*/
}

ul.menu-social {
  --hide:flex;
  border-top: 2px solid var(--wp--preset--color--verde);
  --separate:var(--wp--preset--spacing--xxs);
  margin-top:  var(--separate);
  padding-top: var(--separate);
}

ul.menu-main { 
/*  transform: translateX(var(--move));*/
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding: 0;
  margin: 0;
  
  border:none;
}

ul.menu-main,
ul.menu-social {
/*  border:2px solid red;*/
  width: 100%;
}

ul.menu-main li                  { width:100%; }
ul.menu-main li a,               
ul.menu-social li a              { font-size:var(--wp--preset--font-size--h-4); 
                                   padding:var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
                                   line-height: 1.1;
                                  }

ul.menu-main li a.menu-apartment { font-size:var(--wp--preset--font-size--s); flex-direction:column; align-items:flex-start; } 

ul.menu-end {
  margin-left: auto;
}
 

.menu-apartment-image {
  --imgW:100%;
  --imgH:40px;
} 

.has-submenu > ul {
  --submenuWidth:    100%;
  --submenuGrid:    repeat(auto-fit, minmax(145px, 1fr));
  --submenuPosition: relative;
  --menuPadding:var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
  --submenuTop: 0;
  --submenuHeight: 800px;
  --menuRadius:      0px;
  --submenuVisible:  visible;
  --submenuOpacity:  1;
   box-shadow: none;
} 



}