/*
 * Identità visiva: titoli in carattere classico (Libre Baskerville, stessa
 * famiglia del Baskerville Old Face) e scritte in oro / giallo ocra.
 *
 * Questo file arriva dopo gli altri e sovrascrive solo colore e carattere:
 * la struttura e le dimensioni restano quelle originali.
 */

@font-face {
  font-family: "Libre Baskerville";
  src: url("../fonts/LibreBaskerville-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("../fonts/LibreBaskerville-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap
}

:root {
  /* Tre tonalità dello stesso oro, scelte per restare leggibili:
  titoli su fondo chiaro, scritte piccole su fondo chiaro,
  titoli sopra le fotografie e i fondi scuri. */
  --color-gold: #8a6209;
  --color-gold-deep: #6f4e05;
  --color-gold-light: #eec97a
}

/* --- Carattere classico al posto di Chicle ---
   Le righe dei titoli sono scritte dentro <span> e <em> per poter entrare
   una alla volta. In globals.css c'e una regola generica su span, a, em:
   colpiva quei pezzi direttamente e il titolo della home finiva in
   Encode Sans mentre tutti gli altri restavano in Baskerville. Qui i
   figli dei titoli tornano a prendere il carattere del titolo. */
h1,
h1 span,
h1 em,
h1 a,
h1 strong,
h2,
h2 span,
h2 em,
h2 a,
h2 strong,
.hotel-review blockquote,
.story-quote blockquote,
.story-chapter-image>span,
.story-timeline article>strong,
  .price-table-row div:not(:first-child) strong,
.price-highlight strong,
.hotel-year {
  font-family: "Libre Baskerville", Baskerville, "Baskerville Old Face", "Times New Roman", serif !important;
  font-weight: 700 !important
}

/* --- Titoli e occhielli in oro --- */
h1,
h2,
.hotel-year {
  color: var(--color-gold) !important
}

.rooms-heading span,
.rooms-experience-copy>span,
.contacts-intro span,
.contacts-details span,
.gallery-intro span,
.price-intro span,
.price-included span,
.price-details article>span,
.price-conditions>div>span,
.price-cta span,
.restaurant-intro span,
.restaurant-note span,
.services-intro span,
.services-note span,
.story-intro span,
.story-chapter-copy>span,
.story-quote>span,
.story-cta span {
  color: var(--color-gold-deep) !important
}

/* Sopra le fotografie e sui fondi scuri serve un oro più chiaro. */
.hotel-final h2,
.final-cta h2,
.hotel-hero-content .hotel-year,
.rooms-hero-copy h1,
.rooms-hero-copy>span,
.services-hero-copy h1,
.services-hero-copy>span,
.restaurant-hero-copy h1,
.restaurant-hero-copy>span,
.page-hero h1,
.terrazza-page h1,
.terrazza-page h2 {
  color: var(--color-gold-light) !important
}

/* --- Orari dei pasti in evidenza (pagina Ristorante) --- */
/* Il riquadro si dispone su due righe: sopra il titolo con il bottone
   "Richiedi informazioni" di fianco, sotto le quattro schede in fila su
   tutta la larghezza. Prima il bottone occupava una colonna alta quanto
   il riquadro e le schede si stringevano in due colonne, lasciando vuota
   meta fascia. */
.restaurant-page .restaurant-hours {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 40px;
  row-gap: 0
}

.restaurant-page .restaurant-hours .restaurant-hours-grid {
  grid-column: 1 / -1
}

.restaurant-hours-grid {
  display: grid;
  /* Quattro schede (colazione, pranzo, cena, bar) tutte sulla stessa riga. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0 0
}

.restaurant-hours-grid>div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--color-surface);
  border: 1px solid #1111111f
}

.restaurant-hours-grid small {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .7rem;
  font-weight: 800;
  color: var(--color-gold-deep)
}

.restaurant-hours-grid strong {
  font-family: "Libre Baskerville", Baskerville, "Baskerville Old Face", "Times New Roman", serif !important;
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--color-text)
}

.restaurant-hours-grid span {
  font-size: .82rem;
  color: #111111b8
}

/* Il bar ha due fasce orarie, non un orario solo: alla misura degli altri
   numeri la riga andava a capo in mezzo a un orario. */
.restaurant-hours-bar strong {
  font-size: 1.5rem;
  line-height: 1.3
}

.restaurant-hours-note {
  margin-top: 22px;
  font-size: .92rem;
  line-height: 1.7
}

/* Sotto i 1100px quattro colonne renderebbero le schede troppo strette
   per il numero grande: si passa a due, poi a una sola. */
@media (max-width: 1100px) {
  .restaurant-hours-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width: 900px) {
  .restaurant-page .restaurant-hours {
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: 24px
  }

  /* justify-items: start serve al bottone, che deve restare largo quanto
     il suo testo. Le schede invece devono riempire il riquadro: senza
     questa riga si stringevano sulla sinistra lasciando vuota la destra. */
  .restaurant-page .restaurant-hours .restaurant-hours-grid {
    justify-self: stretch;
    margin-top: 0
  }
}

@media (max-width: 860px) {
  .restaurant-hours-grid strong {
    font-size: 2rem
  }

  /* La regola qui sopra riportava a 2rem anche le due fasce del bar, che
     cosi andavano a capo tre volte e allungavano tutta la riga. */
  .restaurant-hours-bar strong {
    font-size: 1.5rem
  }
}

/* Sotto i 620px il riquadro non tiene due schede affiancate senza
   spezzare gli orari: una per riga. */
@media (max-width: 620px) {
  .restaurant-hours-grid {
    grid-template-columns: 1fr
  }
}

/* --- Selettore di lingua --- */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px
}

.lang-switcher-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #ffffff2e;
  text-decoration: none;
  color: inherit;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  opacity: .75;
  transition: opacity .2s ease, border-color .2s ease
}

.lang-switcher-item svg {
  display: block;
  width: 18px;
  height: 13px;
  border-radius: 2px
}

  .lang-switcher-item:hover,
.lang-switcher-item:focus-visible {
  opacity: 1
}

.lang-switcher-item.is-current {
  opacity: 1;
  border-color: var(--color-gold-light)
}

/* Nella barra chiara delle pagine interne il bordo scuro si legge meglio. */
.utility .lang-switcher-item {
  border-color: #11111124
}

.utility .lang-switcher-item.is-current {
  border-color: var(--color-gold)
}

.lang-switcher-home {
  margin-left: auto
}

@media (max-width: 900px) {
  .lang-switcher-item span {
    display: none
  }

  .lang-switcher-item {
    padding: 4px 6px
  }
}


/* --- Titolo della home: bianco, con una sola parola in oro --- */
/*
 * Prima il titolo era tutto oro chiaro, compresa la parola in corsivo: sopra il
 * cielo del filmato l'oro su chiaro si legge male e la parola messa in risalto
 * spariva dentro il resto della frase. Adesso la frase e bianca — il contrasto
 * piu alto possibile sopra una fotografia — e l'oro resta solo su "cuore", che
 * cosi si vede davvero.
 */
.hotel-hero-content h1 {
  color: var(--color-on-dark) !important;
  text-shadow: 0 3px 20px #111111b3
}

.hotel-hero-content h1 em {
  color: var(--color-gold-light) !important;
  font-style: italic
}

.hotel-hero-content > p:not(.hotel-eyebrow) {
  text-shadow: 0 2px 14px #111111a6
}

/* Sul telefono gli orari restavano a 2rem: due cifre grandi su una riga
   sola facevano crescere la fascia oltre il necessario. */
@media (max-width: 680px) {
  .restaurant-hours-grid strong {
    font-size: 1.4rem
  }
}

/* Gli anni della linea del tempo erano piu grandi dei titoli di sezione. */
@media (max-width: 680px) {
  .story-timeline article > strong {
    font-size: 1.6rem
  }
}