/* Intestazione globale: barra desktop 1440x130, barra mobile 70px, pannello a
   tutta pagina, selettore lingua statico e badge recensioni Booking statico. */

.intestazione{
  position:relative;
  z-index:100;
  background:var(--bianco);
}
.recensioni__definizione{position:absolute;width:0;height:0;overflow:hidden}

/* ------------------------------------------------------------ barra desktop */
.intestazione__barra{
  display:flex;
  align-items:stretch;
  justify-content:center;
  height:var(--altezza-header);
  padding:0 var(--bordo-pagina);
}
/* i due blocchi laterali si dividono in parti uguali lo spazio che resta
   attorno al logo: 603.75px per lato su 1440 */
.intestazione__lato{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:1 1 0;
  min-width:0;
  height:100%;
}
.intestazione__lato--sinistro .intestazione__menu{margin-left:auto;margin-right:60px}
.intestazione__lato--destro .intestazione__menu{margin-left:60px;margin-right:60px}

.intestazione__widget{display:flex;align-items:center;height:100%}
.intestazione__widget>*{margin:0 18.5px}
.intestazione__widget>:first-child{margin-left:0}
.intestazione__widget>:last-child{margin-right:0}

/* ------------------------------------------------------------------- logo */
.intestazione__logo{
  display:flex;
  align-items:center;
  align-self:center;
  flex:0 0 auto;
  width:152.5px;
  height:40px;
}
.intestazione__logo img{width:100%;height:auto}

/* ------------------------------------------------------------------- menu */
.intestazione__menu{height:100%}
.intestazione__menu>ul{
  display:flex;
  align-items:center;
  height:100%;
  white-space:nowrap;
}
.intestazione__menu li{height:100%;margin:0 25px}
.intestazione__menu li:first-child{margin-left:0}
.intestazione__menu li:last-child{margin-right:0}
.intestazione__menu a{
  display:flex;
  align-items:center;
  height:100%;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  line-height:26.18px;
  letter-spacing:1.4px;
  color:var(--nero);
}
.intestazione__menu a span{
  position:relative;
  display:block;
  height:14px;
  line-height:14px;
}
/* filo nero sotto la voce: si allunga al passaggio del mouse, e' gia' esteso
   sulla pagina corrente (<li class="attivo">) */
.intestazione__menu a span::before{
  content:'';
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:0;
  height:1px;
  background:var(--nero);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.intestazione__menu a:hover span::before,
.intestazione__menu .attivo a span::before{width:100%}

/* --------------------------------------------------------- bottone PRENOTA */
.intestazione__prenota{
  padding:6px 41px;
  line-height:31.9px;
  border-width:1px;
  border-style:solid;
}

/* ---------------------------------------------------------- selettore lingua */
.lingue{position:relative;display:flex;align-items:center}
.lingue__scelta{
  display:inline-flex;
  align-items:center;
  color:var(--nero);
  line-height:20.5px;
}
.lingue__bandiera{display:block;flex:0 0 auto;margin-right:4px}
.lingue__nome{margin-right:5px;font-size:15px}
.lingue__freccia{
  margin-right:5px;
  font-size:8px;
  font-weight:700;
  color:#666;
}
/* il pannellino ricalca la finestrella del widget originale: 181px, centrata
   sullo schermo, sopra un velo nero */
.lingue__velo{
  position:fixed;
  inset:0;
  background:var(--nero);
  opacity:.8;
  z-index:10000;
}
.lingue__pannello{
  position:fixed;
  top:50%;
  left:50%;
  width:181px;
  margin-top:-142.5px;
  margin-left:-90.5px;
  padding:6px 16px;
  max-height:285px;
  overflow-y:auto;
  background:var(--bianco);
  text-align:left;
  color:var(--nero);
  z-index:10001;
}
.lingue__voce{
  display:block;
  padding:10px 0;
  border-bottom:1px solid #e7e7e7;
  font-size:15px;
}
.lingue__voce:last-child{border-bottom:0}
.lingue__voce--corrente{font-weight:700}

/* ------------------------------------------------------- badge recensioni */
.recensioni{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  align-content:center;
  width:248px;
  height:82px;
  padding:20px;
  background:var(--bianco);
  border:1px solid #d9d9d9;
  border-radius:12px;
  font-family:var(--corpo);
  font-size:14px;
  line-height:20px;
  color:var(--nero);
  text-align:center;
  transition:transform .3s ease-in-out;
}
.recensioni:hover{transform:translate(0,-5px)}
.recensioni__riga{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:20px;
}
.recensioni__marchio{font-weight:700;color:#1e3e79;letter-spacing:.2px}
.recensioni__dominio{color:#00adef}
.recensioni__voto{
  margin-left:6px;
  font-size:15px;
  font-weight:600;
  color:var(--nero);
}
.recensioni__stelle{display:inline-flex;align-items:center;margin:0 3px}
.recensioni__stella{
  display:block;
  width:16.8px;
  height:16.8px;
  margin-right:1px;
}
.recensioni__conteggio{margin:0 3px;font-weight:700;white-space:nowrap}

/* --------------------------------------------------------- barra mobile */
/* tre colonne: le due laterali larghe uguali, cosi' il logo resta al centro
   qualunque sia la larghezza dell'hamburger e del bottone */
.intestazione__mobile{
  display:none;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:70px;
  padding:0 20px;
  background:var(--bianco);
}
.intestazione__hamburger{
  justify-self:start;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-left:-12px;
  color:var(--nero);
}
.intestazione__logo--mobile{
  width:auto;
  height:35px;
  margin:0 12px;
}
.intestazione__logo--mobile img{width:auto;height:100%}
.intestazione__prenota--mobile{justify-self:end;padding:6px 20px;letter-spacing:2px}

/* ------------------------------------- pannello a tutta pagina (hamburger) */
/* base.css non azzera [hidden]: qui serve, perche' .menu-schermo e' flex */
.menu-schermo[hidden]{display:none}
.menu-schermo{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:70px 40px;
  background:var(--bianco);
  overflow-y:auto;
}
.menu-schermo__chiudi{
  position:absolute;
  top:13px;
  right:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  color:var(--nero);
}
.menu-schermo__menu li{margin-bottom:10px}
.menu-schermo__menu li:last-child{margin-bottom:0}
.menu-schermo__menu a{
  display:inline-block;
  font-family:var(--display);
  font-size:58px;
  font-weight:400;
  line-height:1.2em;
  letter-spacing:-.04em;
  color:var(--nero);
}
.menu-schermo__menu a span{position:relative;display:inline-block;line-height:1}
.menu-schermo__menu a span::before{
  content:'';
  position:absolute;
  top:calc(100% - 10px);
  left:0;
  width:0;
  height:1px;
  background:var(--nero);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.menu-schermo__menu a:hover span::before,
.menu-schermo__menu .attivo a span::before{width:100%}

/* blocca lo scorrimento della pagina mentre un pannello e' aperto */
.pagina-bloccata{overflow:hidden}

/* ------------------------------------------------------------- schermi stretti */
@media (max-width:1024px){
  /* sotto i 1024px il menu a tre blocchi non ci sta: si passa alla barra
     mobile, che qui e' appiccicata in alto (sul desktop no) */
  .intestazione{position:sticky;top:0}
  .intestazione__barra{display:none}
  .intestazione__mobile{display:grid}
}

@media (max-width:768px){
  .menu-schermo{padding:70px 24px}
}

@media (max-width:680px){
  .menu-schermo__menu a{font-size:46px}
  .menu-schermo__menu a span::before{top:calc(100% - 7px)}
}

@media (max-width:420px){
  .intestazione__mobile{padding:0 14px}
  .intestazione__logo--mobile{height:28px;margin:0 8px}
  .intestazione__prenota--mobile{padding:6px 14px;letter-spacing:1.5px}
}