/*
 * Palazzo Speciale — personalizzazioni del tema Luxivo.
 *
 * ⚠️ `luxivo.css` resta INTATTO (copia del tema originale) così da poterlo
 * riallineare a un futuro aggiornamento senza perdere le nostre modifiche.
 * Tutto ciò che è specifico di Palazzo Speciale sta QUI e viene caricato dopo.
 *
 * Il tema definisce i colori come CSS custom properties su :root, quindi per
 * cambiare il colore principale basta ridichiarare la variabile: non serve
 * inseguire le singole regole.
 */

:root {
  /* Bordeaux Palazzo Speciale (era #6D7C6A, il verde salvia di Luxivo). */
  --primary-color: #882733;
  /* Varianti derivate, usate per hover e fondi tenui. */
  --primary-dark: #6b1e28;
  --primary-soft: #f6eceD;
}

/* ------------------------------------------------------------------
 * Colore principale nei punti in cui il tema lo aveva HARDCODED
 * invece di usare var(--primary-color).
 * ------------------------------------------------------------------ */

/* Sfondo del box "contatti" sovrapposto all'immagine della sezione FAQ. */
.luxivo-contact-info-box {
  background-color: var(--primary-color);
}

/* ------------------------------------------------------------------
 * Logo
 * Il logo di Palazzo Speciale è uno stemma quasi quadrato (145x100),
 * mentre il tema era tarato su un logo orizzontale 197x56. Senza questa
 * regola lo stemma verrebbe schiacciato o sborderebbe dalla barra.
 * ------------------------------------------------------------------ */
.cs_site_branding img {
  width: auto;
  height: 68px;
}

.footer-logo img {
  width: auto;
  height: 80px;
}

/* ------------------------------------------------------------------
 * Header: barra bianca e opaca su TUTTE le pagine.
 *
 * ⚠️ `.cs_site_header` nel tema è `position: absolute` e SENZA sfondo:
 * galleggia sopra la foto sottostante. Ma le voci di menu sono NERE
 * (`header_style_2_3` imposta `color: #000`), quindi sulla foto della
 * testata delle pagine interne risultavano quasi illeggibili.
 *
 * La barra è bianca ovunque, home compresa: l'hero della home parte
 * comunque sotto l'header (`margin-top: 162px`), quindi non copre nulla.
 * ------------------------------------------------------------------ */
.cs_main_header {
  background-color: var(--white-color);
  border-bottom: 1px solid #F0F0F0;
}

/* La barra superiore (recapiti + lingua) resta scura: insieme formano un
 * blocco a due fasce, scura sopra e chiara sotto. */
.cs_top_header {
  background-color: var(--heading-color);
}

/* ------------------------------------------------------------------
 * Header "sticky": la barra che ricompare scorrendo verso l'alto.
 *
 * ⚠️ Il tema, in stato sticky, colora la barra di viola scuro
 * (`header_style_2_3.header_sticky_style1.cs-gescout_sticky`) e porta le
 * voci di menu a BIANCO. Con la barra principale bianca il testo sarebbe
 * bianco su bianco, cioè invisibile.
 *
 * La barra sticky resta quindi bianca e il testo nero, identica a quella
 * in cima alla pagina: scorrendo non cambia aspetto.
 * ------------------------------------------------------------------ */
.cs_site_header.cs-gescout_sticky {
  background-color: var(--white-color);
  border-bottom: 1px solid #F0F0F0;
}

/* ⚠️ Voci di menu scure — solo da DESKTOP (≥1200px).
 *
 * Sotto i 1199px il menu diventa un pannello a tendina con fondo QUASI NERO
 * (`#181818`, da luxivo.css): lì le voci devono restare bianche, ed è il
 * motivo per cui il tema aveva quel catch-all a `#fff` che qui sovrascrivevo.
 * Senza il media query il menu mobile era nero su nero, illeggibile.
 *
 * Da desktop invece la barra è bianca (vedi sopra), quindi servono due
 * regole per vincere su altrettanti avversari:
 *  1. il catch-all `.cs_nav .cs_nav_list li a { color: #fff }` (0,2,2) —
 *     si pareggia la forma del selettore e si vince arrivando dopo;
 *  2. in stato sticky,
 *     `.header_style_2_3.header_sticky_style1.cs-gescout_sticky .cs_nav .cs_nav_list>li>a`
 *     (0,5,2) porta le voci a bianco: qui serve un selettore altrettanto
 *     specifico, altrimenti scorrendo verso l'alto il menu sparisce. */
@media screen and (min-width: 1200px) {
  .cs_nav .cs_nav_list li a {
    color: var(--heading-color);
  }
}

@media screen and (min-width: 1200px) {
  .cs_site_header.header_style_2_3.header_sticky_style1.cs-gescout_sticky .cs_nav .cs_nav_list li a {
    color: var(--heading-color);
  }

  /* Al passaggio del mouse, il bordeaux del sito (in entrambi gli stati). */
  .cs_nav .cs_nav_list li a:hover,
  .cs_site_header.header_style_2_3.header_sticky_style1.cs-gescout_sticky .cs_nav .cs_nav_list li a:hover {
    color: var(--primary-color);
  }
}

/* ------------------------------------------------------------------
 * MENU MOBILE (<1200px) — pannello a tendina
 *
 * Il tema lo fa nero (`#181818`) con le voci bianche. Qui lo portiamo in
 * linea col desktop: fondo bianco e testo scuro.
 *
 * ⚠️ Il pannello è `position: absolute` con `left: -15px`, cioè tarato su un
 * contenitore con 15px di padding. Il nostro header usa `.container-fluid`,
 * che a questa soglia ne ha 50: restava una fessura ai lati da cui si
 * intravedeva lo slider sotto. `left: 0` + `right: 0` al posto di
 * `width: 100vw` lo ancorano ai bordi reali, qualunque sia il padding.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1199.98px) {
  .cs_nav .cs_nav_list {
    left: 0;
    right: 0;
    width: auto;
    padding: 8px 0 14px;
    background-color: var(--white-color);
    border-top: 1px solid #F0F0F0;
    border-bottom: none;
    box-shadow: 0 18px 30px -18px rgba(22, 25, 33, 0.35);
  }

  .cs_nav .cs_nav_list li a {
    /* Il padding del tema (8px 20px) rende le voci difficili da centrare col
     * pollice: qui diventano righe piene, alte quanto un bersaglio comodo. */
    padding: 14px 24px;
    color: var(--heading-color);
    font-size: 17px;
    border-left: 3px solid transparent;
    transition: background-color 0.25s ease-out, border-color 0.25s ease-out,
      color 0.25s ease-out, padding-left 0.25s ease-out;
  }

  /* Filetto sottile tra una voce e l'altra: dà ritmo all'elenco senza
   * appesantirlo. L'ultima non ce l'ha, per non chiudere con una riga. */
  .cs_nav .cs_nav_list > li:not(:last-child) > a {
    border-bottom: 1px solid #F3F3F3;
  }

  /* Al tocco: fondo tenue, barretta bordeaux a sinistra e testo che rientra
   * di poco. Sostituisce il cambio di colore, che su una riga intera si
   * nota meno. */
  .cs_nav .cs_nav_list li a:hover,
  .cs_nav .cs_nav_list li a:focus-visible,
  .cs_nav .cs_nav_list li a[aria-current='page'] {
    background-color: var(--primary-soft);
    border-left-color: var(--primary-color);
    color: var(--primary-color);
    padding-left: 30px;
  }

  /* La voce della pagina corrente resta marcata anche senza interazione. */
  .cs_nav .cs_nav_list li a[aria-current='page'] {
    font-weight: 600;
  }
}

/* ------------------------------------------------------------------
 * Pagine di contenuto (Regolamento e le altre pagine editoriali)
 *
 * Il corpo arriva dall'editor Lexical del CMS con le sue classi
 * (`PlaygroundEditorTheme__*`), che sul sito pubblico NON esistono: senza
 * queste regole il testo userebbe i margini di default del browser, e
 * `luxivo.css` azzera per giunta i margini di `p` e delle liste.
 * ------------------------------------------------------------------ */
.cms-page__content p {
  margin-bottom: 18px;
}

.cms-page__content h1,
.cms-page__content h2,
.cms-page__content h3,
.cms-page__content h4,
.cms-page__content h5,
.cms-page__content h6 {
  margin-top: 40px;
  margin-bottom: 16px;
}

/* Il primo titolo non deve staccarsi dalla testata. */
.cms-page__content > :first-child {
  margin-top: 0;
}

.cms-page__content ul,
.cms-page__content ol {
  margin-bottom: 22px;
  padding-left: 22px;
}

.cms-page__content ul {
  list-style: disc;
}

.cms-page__content ol {
  list-style: decimal;
}

.cms-page__content li {
  margin-bottom: 8px;
}

.cms-page__content a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cms-page__content img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  margin: 10px 0 25px;
}

.cms-page__content blockquote {
  margin: 0 0 25px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--primary-color);
  font-style: italic;
}

.cms-page__content table {
  width: 100%;
  margin-bottom: 25px;
  border-collapse: collapse;
}

.cms-page__content th,
.cms-page__content td {
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  text-align: left;
}

/* Distanza tra il testo della pagina e il richiamo alla prenotazione. */
.mt-60 {
  margin-top: 60px;
}

/* ------------------------------------------------------------------
 * Dettaglio articolo — riga di data, categoria e autore
 *
 * ⚠️ Il tema stila `.post-meta` solo DENTRO `.luxivo-blog-post-item` (le
 * schede degli elenchi): nel dettaglio quelle regole non si applicano e le
 * tre voci risultavano attaccate, senza spazio né separatore.
 * ------------------------------------------------------------------ */
.cms-page .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* `gap` invece dei margini: regge l'andata a capo su schermi stretti
   * senza lasciare spazi orfani a inizio riga. Il separatore "|" è un
   * elemento a sé (vedi sotto), quindi qui lo spazio è già quello finale. */
  gap: 10px 18px;
  color: var(--primary-color);
}

/* L'icona sta accanto al proprio testo, non a distanza di `gap`. */
.cms-page .post-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Separatore tra una voce e l'altra, come nelle schede del tema.
 * Essendo dentro lo span, il `gap` del contenitore lo distanzia da entrambi
 * i lati: non servono margini propri, che raddoppierebbero lo spazio. */
.cms-page .post-meta span:not(:last-child)::after {
  content: '|';
  opacity: 0.35;
}

/* La cover dell'articolo non deve deformarsi. */
.post-cover img {
  width: 100%;
  height: auto;
  border-radius: 30px;
}

/* Pulsante "Indietro" in fondo all'articolo. */
.post-back .theme-btn i {
  /* L'icona è a sinistra del testo: il tema dà margine solo a destra. */
  margin-left: 0;
  margin-right: 10px;
}

/* ------------------------------------------------------------------
 * Pulsanti secondari su fondo SCURO (sezione contatti della home)
 *
 * ⚠️ `.theme-btn.style-two` del tema ha testo `--heading-color` (quasi nero)
 * e bordo grigio chiaro: pensato per fondi bianchi. Nella sezione contatti,
 * che ha una foto scura di sfondo, risultava illeggibile.
 * ------------------------------------------------------------------ */
.luxivo-contact_two .theme-btn.style-two {
  color: var(--white-color);
  border-color: rgba(255, 255, 255, 0.45);
}

.luxivo-contact_two .theme-btn.style-two:hover,
.luxivo-contact_two .theme-btn.style-two:focus-visible {
  /* Sul bordeaux il testo resta bianco: cambia solo il fondo. */
  background-color: var(--primary-color);
  border-color: transparent;
  color: var(--white-color);
}

/* ------------------------------------------------------------------
 * Recensioni — avatar con l'iniziale
 *
 * Al posto della foto di un ritratto (che sarebbe il volto di una persona
 * diversa da chi ha scritto) si usa l'iniziale su fondo colorato, come fa
 * Google quando l'autore non ha immagine di profilo.
 * ------------------------------------------------------------------ */
.author-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex: 0 0 60px;
  font-family: var(--heading-font);
  font-size: 24px;
  line-height: 1;
  color: var(--white-color);
  /* L'iniziale è decorativa (il nome è scritto accanto): non va selezionata
   * né letta due volte dagli screen reader. */
  user-select: none;
}

/* Cinque tinte che stanno insieme al bordeaux del sito. La classe la
 * assegna il template in base al nome, così un autore ha sempre lo stesso
 * colore. */
.author-initial--0 { background-color: #882733; }
.author-initial--1 { background-color: #4a6670; }
.author-initial--2 { background-color: #7d6544; }
.author-initial--3 { background-color: #5c6b52; }
.author-initial--4 { background-color: #6b4f63; }

/* ------------------------------------------------------------------
 * Meteo di Catania nel footer
 *
 * Widget costruito dal JS del tema con i dati di Open-Meteo. Il footer ha
 * fondo scuro, quindi testo e icone sono chiari.
 * ------------------------------------------------------------------ */
.footer-weather {
  font-size: 15px;
}

.footer-weather__loading {
  margin: 0;
  opacity: 0.6;
}

/* Riga della temperatura attuale. */
.footer-weather__now {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer-weather__now i {
  font-size: 26px;
  line-height: 1;
  color: var(--white-color);
}

.footer-weather__temp {
  font-family: var(--heading-font);
  font-size: 28px;
  line-height: 1;
  color: var(--white-color);
}

.footer-weather__desc {
  opacity: 0.75;
}

/* Previsione a tre giorni. */
.footer-weather__days {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-weather__days li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.footer-weather__day {
  /* Larghezza fissa: senza, le colonne si disallineano da un giorno
   * all'altro perché i nomi hanno lunghezze diverse. */
  min-width: 42px;
  text-transform: capitalize;
  opacity: 0.75;
}

.footer-weather__days i {
  font-size: 16px;
  line-height: 1;
  min-width: 20px;
}

.footer-weather__range {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * Pagina Contatti — form e recapiti
 * ------------------------------------------------------------------ */
.contact-form-box,
.contact-info-box {
  padding: 40px;
  border-radius: 30px;
  background-color: var(--gray-color);
}

/* ⚠️ Solo il FORM si allunga a tutta colonna. La card dei recapiti aveva
 * anch'essa `height: 100%` e, dato che le righe Bootstrap sono flex,
 * veniva stirata fino all'altezza del form: sotto i quattro recapiti
 * restava mezza card vuota. Senza altezza imposta si ferma al proprio
 * contenuto. */
.contact-form-box {
  height: 100%;
}

@media (max-width: 767.98px) {
  .contact-form-box,
  .contact-info-box {
    padding: 26px 20px;
  }
}

/* Sotto i 992px le due colonne si impilano: serve aria tra loro. */
@media screen and (max-width: 991.98px) {
  .contact-form-box {
    margin-bottom: 30px;
  }
}

.contact-form-box label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--heading-font);
  font-size: 16px;
  color: var(--heading-color);
}

/* Asterisco dei campi obbligatori. */
.required-mark {
  margin-left: 4px;
  color: var(--primary-color);
}

.contact-form-box .form_control {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--white-color);
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--text-color);
  transition: border-color 0.3s ease-out;
}

.contact-form-box .form_control:focus {
  outline: none;
  border-color: var(--primary-color);
}

.contact-form-box textarea.form_control {
  resize: vertical;
  min-height: 140px;
}

.contact-form-box .theme-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ⚠️ Honeypot: nascosto SENZA `display:none` né `visibility:hidden`, che
 * alcuni bot riconoscono e saltano. Lo si toglie dal flusso visivo lasciandolo
 * nel DOM; `aria-hidden` nel markup lo nasconde agli screen reader. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Messaggio di esito dell'invio: vuoto finché non c'è nulla da dire. */
.form-feedback {
  margin-top: 18px;
  margin-bottom: 0;
  font-size: 15px;
}

.form-feedback:empty {
  display: none;
}

.form-feedback.is-success {
  color: #1a7f42;
}

.form-feedback.is-error {
  color: var(--primary-color);
}

/* La mappa in fondo alla pagina Contatti. */
.contact-map .map-box iframe {
  width: 100%;
  height: 420px;
  border: none;
  border-radius: 30px;
}

@media (max-width: 767.98px) {
  .contact-map .map-box iframe {
    height: 300px;
  }
}

/* ------------------------------------------------------------------
 * Pagina 404 / errore
 *
 * ⚠️ L'header è `position: absolute`, quindi NON occupa spazio nel flusso:
 * il contenuto gli scorre sotto. Le altre pagine se ne accorgono perché la
 * testata (`.page-hero`) ha 195px di `padding-top`; la 404 non ha testata e
 * con i soli 120px di `pt-120` il titolo finiva nascosto dietro la barra.
 *
 * L'header è alto 145px (100 della barra principale + 45 di quella dei
 * recapiti): si parte da lì e si aggiunge il respiro della sezione.
 * ------------------------------------------------------------------ */
.luxivo-error-sec {
  padding-top: 245px;
}

@media (max-width: 767px) {
  /* Sotto i 767px la barra dei recapiti è nascosta (`display: none`) e la
   * principale scende a 80px: serve molto meno spazio. */
  .luxivo-error-sec {
    padding-top: 160px;
  }
}

/* ------------------------------------------------------------------
 * Selettore di lingua (IT / EN) nella barra superiore.
 * Non fa parte del tema Luxivo: è aggiunto per il multilingua.
 *
 * Vive come ultimo <li> della lista dei contatti, subito dopo WhatsApp:
 * eredita così flex, allineamento e `gap` della lista, e il tema gli toglie
 * da solo il separatore verticale (`li:last-child::after { display: none }`).
 * ------------------------------------------------------------------ */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.language-switch a {
  color: inherit;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  transition: opacity 0.3s ease-out;
}

.language-switch a:hover {
  opacity: 1;
}

/* Lingua attualmente attiva: piena e sottolineata. */
.language-switch a.is-active {
  opacity: 1;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.language-switch .sep {
  opacity: 0.4;
  font-size: 14px;
  line-height: 1;
}

/* ------------------------------------------------------------------
 * Selettore di lingua DENTRO il menu a panino.
 *
 * ⚠️ Perché ne servono due: sotto i 768px il tema nasconde tutta la barra
 * superiore (`.cs_site_header.cs_style_1 .cs_top_header { display: none }`,
 * luxivo.css), e lì dentro c'era l'unico selettore. Da telefono l'inglese
 * diventava irraggiungibile: non c'è riconoscimento automatico della lingua
 * del browser né redirect, quindi restava solo scrivere /en a mano.
 *
 * Sopra i 1199px questo è nascosto: a quella larghezza il menu è in linea e
 * la barra superiore col suo selettore è visibile, quindi mostrarli entrambi
 * darebbe due comandi identici nella stessa schermata.
 * ------------------------------------------------------------------ */
.cs_nav_language {
  display: none;
}

@media screen and (max-width: 1199.98px) {
  .cs_nav_language {
    display: block;
  }

  /* Staccato dalle voci di navigazione: è un'impostazione, non una pagina.
   * La riga sopra lo separa senza bisogno di un'etichetta. */
  .cs_nav .cs_nav_list > li.cs_nav_language {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #F0F0F0;
  }

  .language-switch--menu {
    justify-content: center;
    gap: 10px;
    padding: 6px 24px 2px;
  }

  /* Bersagli comodi al pollice: i due codici sono corti, senza padding
   * sarebbero due zone di tocco da pochi pixel. */
  .language-switch--menu a {
    color: var(--heading-color);
    font-size: 16px;
    opacity: 0.55;
    padding: 8px 14px;
    border-radius: 4px;
    transition: background-color 0.25s ease-out, color 0.25s ease-out,
      opacity 0.25s ease-out;
  }

  .language-switch--menu a:hover,
  .language-switch--menu a:focus-visible {
    opacity: 1;
    background-color: var(--primary-soft);
    color: var(--primary-color);
  }

  /* La lingua attiva è piena e in colore, senza sottolineatura: qui è un
   * bottone selezionato, non un link in una riga di testo. */
  .language-switch--menu a.is-active {
    opacity: 1;
    color: var(--primary-color);
    background-color: var(--primary-soft);
    text-decoration: none;
  }

  .language-switch--menu .sep {
    display: none;
  }
}

/* ------------------------------------------------------------------
 * Camere (dal catalogo Prodotti)
 * ------------------------------------------------------------------ */

/* Il tema non prevede un fallback per la cover mancante: senza immagine il
 * box collassa. Manteniamo l'ingombro con un fondo neutro.
 *
 * ⚠️ Solo su `.style-one` (le schede del carosello in home), dove l'immagine
 * riempie tutto il riquadro. Applicandolo a `.luxivo-room-item` in generale,
 * il fondo colorato spuntava anche nell'elenco camere (`.style-three`), dove
 * le due foto sono separate da un gap di 30px: lì deve restare bianco. */
.luxivo-room-item.style-one .room-image {
  background-color: var(--primary-soft);
  min-height: 246px;
}

.luxivo-room-item.style-one .room-image img {
  width: 100%;
  height: 246px;
  object-fit: cover;
}

/* Stessa cosa per le anteprime di blog e guide. */
.luxivo-blog-post-item .post-thumbnail img,
.luxivo-service-item .service-thumbnail img {
  width: 100%;
  object-fit: cover;
}

.luxivo-blog-post-item .post-thumbnail img {
  height: 320px;
}

.luxivo-service-item .service-thumbnail img {
  height: 308px;
}

/* ------------------------------------------------------------------
 * Accessibilità: il tema usa <h5 class="accordion-title"> come pulsante.
 * Rendiamo evidente che è cliccabile e gestiamo il focus da tastiera.
 * ------------------------------------------------------------------ */
.accordion-title {
  cursor: pointer;
}

.accordion-title:focus-visible,
.language-switch a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

/* Le sezioni vuote (nessun contenuto nel CMS) non devono lasciare buchi. */
.section-empty {
  display: none;
}

/* ------------------------------------------------------------------
 * Pagina camera — scheda tecnica ("Caratteristiche della camera")
 *
 * I campi arrivano dalla scheda tecnica del PRODOTTO, quindi sono
 * variabili di numero e lunghezza: "Wi-Fi" sta in due parole, "Occupazione
 * massima: 2 persone" in quattro.
 *
 * ⚠️ Il blocco stava in testa alla pagina, a tutta larghezza e con le voci
 * centrate una accanto all'altra: con dodici campi le etichette si
 * toccavano e andavano a capo a metà parola. Ora sta nella colonna del
 * contenuto, e questa griglia manda a capo per colonne intere invece di
 * comprimere le singole voci.
 *
 * `auto-fit` + `minmax`: le colonne si adattano allo spazio disponibile,
 * da tre su desktop a una sola su telefono, senza media query.
 * ------------------------------------------------------------------ */
/* Un gruppo per ogni sezione della scheda ("La camera", "Tariffe"...).
 * Lo stacco tra gruppi è più ampio del passo tra le voci: è quello che fa
 * leggere l'elenco come sezioni distinte invece che come una lista unica. */
.room-details-wrapper .room-specs-group:not(:last-child) {
  margin-bottom: 26px;
}

.room-details-wrapper .room-specs-group__title {
  font-size: 20px;
  margin-bottom: 12px;
}

.room-details-wrapper .room-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
}

.room-details-wrapper .room-spec {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 17px;
  line-height: 1.5;
}

/* `flex-shrink: 0` e un filo di margine sopra: senza, l'icona si
 * schiaccerebbe sulle voci che vanno a capo su due righe e resterebbe
 * disallineata rispetto alla prima riga di testo. */
.room-details-wrapper .room-spec i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--primary-color);
}

/* La cover grande non deve deformarsi con proporzioni diverse dal previsto. */
.room-details-wrapper .room-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Il contenuto dell'editor (Descrizione Estesa) eredita la spaziatura del tema. */
.room-details-wrapper .room-content-box img {
  max-width: 100%;
  height: auto;
}

.room-details-wrapper .room-content-box ul:not(.check-list):not(.services-list) {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 30px;
}

/* Prezzo in testa alla pagina camera. */
.room-details-wrapper .share-button .price {
  font-size: 32px;
  font-family: var(--heading-font);
  color: var(--primary-color);
  line-height: 1.2;
}

.room-details-wrapper .share-button .price span {
  font-size: 16px;
  font-family: var(--body-font);
  color: var(--text-color);
}

/* ------------------------------------------------------------------
 * Riquadro "Prenota il tuo soggiorno" (sidebar della pagina camera)
 *
 * ⚠️ Nel tema originale il riquadro conteneva un form: la distanza tra il
 * testo e il pulsante veniva dai margini dei campi (`.form-group`,
 * `margin-bottom: 25px`). Qui il form è sostituito da un paragrafo + un
 * pulsante, e siccome `p` ha `margin: 0` globale e `.theme-btn` non ha
 * margine superiore, i due finivano attaccati.
 * ------------------------------------------------------------------ */
.room-booking-widget .widget-content p {
  margin-bottom: 25px;
}

/* Il pulsante occupa tutta la larghezza del riquadro: da solo, allineato a
 * sinistra, sembrava un frammento staccato invece di una chiamata all'azione. */
.room-booking-widget .widget-content .theme-btn {
  width: 100%;
}

/* ------------------------------------------------------------------
 * Elenco camere (`/camere`) — layout "room-list" del tema
 * ------------------------------------------------------------------ */

/* Le foto dell'elenco arrivano dal CMS con proporzioni qualsiasi: senza
 * un'altezza comune le due colonne risulterebbero scalinate. */
.luxivo-room-item.style-three .room-image img {
  height: 420px;
  object-fit: cover;
}

@media screen and (max-width: 991.98px) {
  .luxivo-room-item.style-three .room-image img {
    height: 260px;
  }
}

/* ⚠️ Le due foto NON devono poter crescere oltre la loro percentuale.
 *
 * Il tema le dimensiona con `width: 40%` / `60%`, ma sono elementi flex: la
 * `width` è solo un suggerimento, e con `height` fissa + `object-fit` il
 * browser calcola la base sul rapporto NATURALE della foto. Il risultato è
 * che le immagini sbordano dalla colonna e finiscono sopra al testo.
 * `flex: 0 0 auto` le blocca sulla larghezza dichiarata.
 *
 * `min-width: 0` è l'altra metà della regola: senza, un elemento flex non
 * scende mai sotto la propria dimensione minima di contenuto e sborda comunque. */
.luxivo-room-item.style-three .room-image img {
  flex: 0 0 auto;
  min-width: 0;
}

/* Le percentuali del tema (40% + 60%) fanno 100% e NON tengono conto del
 * `gap: 30px`: insieme sforano la colonna. Si toglie metà gap a ciascuna,
 * così le due foto più lo spazio in mezzo tornano esattamente al 100%. */
.luxivo-room-item.style-three .room-image img:nth-child(1) {
  width: calc(40% - 15px);
}

.luxivo-room-item.style-three .room-image img:nth-child(2) {
  width: calc(60% - 15px);
}

@media (max-width: 767.98px) {
  /* Sotto i 768px il tema stringe il gap a 15px. */
  .luxivo-room-item.style-three .room-image img:nth-child(1) {
    width: calc(40% - 7.5px);
  }

  .luxivo-room-item.style-three .room-image img:nth-child(2) {
    width: calc(60% - 7.5px);
  }
}

/* Con una foto sola occupa tutta la colonna (il tema le darebbe il 40%,
 * lasciando mezza riga vuota).
 *
 * ⚠️ Il selettore ripete `:nth-child(1)` apposta: quello delle regole qui
 * sopra ha specificità più alta della sola classe, quindi `.image-single`
 * da sola perderebbe e la foto resterebbe al 40%. */
.luxivo-room-item.style-three .room-image img.image-single:nth-child(1) {
  width: 100%;
}

/* Sulle righe pari il tema sposta il respiro del testo da sinistra a destra
 * (`padding-left: 0; padding-right: 30px`), perché lì le foto stanno a
 * destra. Lo pareggiamo ai 25px delle righe dispari, così la distanza tra
 * testo e foto è la stessa in tutte le righe. */
.luxivo-room-wrapper .luxivo-room-item.style-three:nth-child(even) .room-content {
  padding-right: 25px;
}

@media screen and (max-width: 1199.98px) {
  .luxivo-room-wrapper .luxivo-room-item.style-three:nth-child(even) .room-content {
    padding-right: 0;
  }
}

/* Il tema non prevede un margine sopra il pulsante "Tutte le camere". */
.mt-50 {
  margin-top: 50px;
}

/* Richiamo alla prenotazione in fondo all'elenco camere.
 * Fondo tenue del colore del sito per staccarlo dalle schede, senza il velo
 * scuro di `.luxivo-cta-sec` (che presuppone una foto di sfondo). */
.rooms-booking-cta {
  background-color: var(--primary-soft);
}

.rooms-booking-cta h3 {
  font-size: 36px;
}

.rooms-booking-cta p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------
 * Galleria camera (griglia + lightbox)
 * ------------------------------------------------------------------ */
.room-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.room-gallery-item {
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}

.room-gallery-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}

.room-gallery-item:hover img,
.room-gallery-item:focus-visible img {
  transform: scale(1.05);
}

.room-gallery-item:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

/* La lightbox esiste nel DOM solo dopo il primo clic, ed è nascosta
 * finché non riceve .is-open. */
.room-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background-color: rgba(22, 25, 33, 0.94);
}

.room-lightbox.is-open {
  display: flex;
}

.room-lightbox__figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  text-align: center;
}

.room-lightbox__img {
  max-width: 100%;
  /* Lascia spazio alla didascalia sotto la foto. */
  max-height: calc(100vh - 140px);
  object-fit: contain;
}

.room-lightbox__caption {
  margin-top: 12px;
  color: var(--white-color);
  font-size: 15px;
}

.room-lightbox__close,
.room-lightbox__nav {
  flex: 0 0 auto;
  border: none;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--white-color);
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}

.room-lightbox__nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
}

.room-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
}

.room-lightbox__close:hover,
.room-lightbox__nav:hover,
.room-lightbox__close:focus-visible,
.room-lightbox__nav:focus-visible {
  background-color: var(--primary-color);
}

/* Con una sola foto le frecce non servono. */
.room-lightbox.is-single .room-lightbox__nav {
  display: none;
}

@media (max-width: 767.98px) {
  .room-lightbox {
    padding: 12px;
  }

  .room-lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

/* ------------------------------------------------------------------
 * Firma dello studio, sotto il copyright.
 *
 * Volutamente più piccola e smorzata della riga di copyright: è una
 * firma, non un'informazione che il visitatore sta cercando. Il link
 * si accende al passaggio per restare comunque riconoscibile.
 * ------------------------------------------------------------------ */
.copyright-text .powered-by {
  margin-top: 4px;
  font-size: 13px;
  /* ⚠️ Non `opacity` sul paragrafo: l'opacità del padre non è annullabile
   * dal figlio, quindi il link non avrebbe potuto accendersi al passaggio.
   * Si smorza il COLORE, che invece il link può sovrascrivere. */
  color: rgba(255, 255, 255, 0.55);
}

.copyright-text .powered-by a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.25s ease-out;
}

.copyright-text .powered-by a:hover,
.copyright-text .powered-by a:focus-visible {
  color: var(--white-color);
  text-decoration: none;
}

/* ------------------------------------------------------------------
 * Icone social servite come SVG (es. TripAdvisor, che Bootstrap Icons
 * non ha).
 *
 * ⚠️ L'SVG è applicato come MASCHERA, non come `<img>`: il colore lo dà
 * `background-color: currentColor`, quindi l'icona eredita il `color`
 * del link e ne segue l'hover esattamente come i glifi del font. Con un
 * `<img>` resterebbe del colore salvato nel file (qui quasi nero, cioè
 * invisibile sul footer scuro) e non reagirebbe al passaggio del mouse.
 *
 * Il `mask-image` è inline nel template, perché il percorso del file
 * cambia tra sviluppo (locale) e produzione (CDN).
 * ------------------------------------------------------------------ */
.social-box a .social-svg {
  display: inline-block;
  /* 1em invece di una misura fissa: il link non imposta `font-size`, quindi
   * i glifi Bootstrap accanto ereditano quello del testo. Legando l'icona
   * alla stessa unità resta della loro stessa grandezza anche se un domani
   * cambia il corpo del footer. */
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ------------------------------------------------------------------
 * Hero della home: spazio tra il testo e la foto.
 *
 * ⚠️ Nel tema le due metà si toccano: lo slider è in posizione assoluta
 * sulla METÀ DESTRA della finestra (`.hero-image-slider { width: 50% }`)
 * e il testo sta in una colonna `col-xl-6`, cioè l'altra metà esatta.
 * L'ultima parola di ogni riga finisce così appiccicata alla fotografia,
 * senza margine di respiro.
 *
 * Si aggiunge il distacco a DESTRA del testo, non un padding al
 * contenitore: il testo si restringe di quel tanto e il titolo va a capo
 * prima, mentre la foto resta dov'è. Intervenire sullo slider avrebbe
 * invece scoperto lo sfondo sul bordo destro della pagina.
 *
 * Solo da 1200px in su: sotto quella soglia il tema passa a una colonna
 * sola, con la foto come sfondo scuro dietro al testo, e lì il problema
 * non esiste.
 * ------------------------------------------------------------------ */
@media screen and (min-width: 1200px) {
  .luxivo-hero_three .hero-content {
    padding-right: 60px;
  }
}

/* Schermi molto larghi: la colonna di testo diventa lunga da leggere, e
 * il distacco può crescere senza comprimere nulla. */
@media screen and (min-width: 1650px) {
  .luxivo-hero_three .hero-content {
    padding-right: 90px;
  }
}

/* ------------------------------------------------------------------
 * Hero: la foto deve riempire tutta l'area, non solo la parte alta.
 *
 * ⚠️ BUG EREDITATO DAL TEMA, non una scelta di stile. Il tema è nato per
 * il carosello **Slick** e dà `height: 100%` alle SUE classi
 * (`.slick-list`, `.slick-track`). Qui usiamo **Swiper**, i cui
 * contenitori si chiamano `.swiper`, `.swiper-wrapper` e `.swiper-slide`:
 * nessuno di loro riceve un'altezza, Swiper non ne assegna una propria,
 * e la catena si spezza. L'immagine resta così alta quanto le pare
 * (su mobile circa un terzo dello spazio) e sotto compare la velatura
 * scura `rgba(22,25,33,0.8)` stesa sul vuoto: è quel "grigio".
 *
 * Non serve nessuna foto in più: la stessa immagine deve solo arrivare
 * in fondo. Si ricostruisce la catena delle altezze per Swiper.
 * ------------------------------------------------------------------ */
.luxivo-hero_three .hero-image-slider .swiper,
.luxivo-hero_three .hero-image-slider .swiper-wrapper,
.luxivo-hero_three .hero-image-slider .swiper-slide {
  height: 100%;
}

/* `object-fit: cover` perché le foto sono verticali (958×861) mentre lo
 * spazio su telefono è molto più alto che largo: senza, `height: 100%`
 * le stirerebbe deformando la stanza. Così riempiono e si ritagliano. */
.luxivo-hero_three .hero-image-slider .single-image-slide img {
  object-fit: cover;
  object-position: center;
}

/* Sopratitolo "PALAZZO SPECIALE" leggibile anche su telefono.
 *
 * ⚠️ Altra dimenticanza del tema: sotto i 1200px il testo finisce sopra la
 * foto scurita e il tema porta al bianco `h1`, `p` e il box avatar — ma
 * NON `.sub-title`, che resta del colore primario (qui il bordeaux
 * #882733). Su fondo scuro il contrasto è troppo basso per leggerlo.
 *
 * Bianco pieno come il titolo: è la stessa "voce" e condividono lo
 * sfondo. */
@media screen and (max-width: 1199.98px) {
  .luxivo-hero_three .hero-content .sub-title {
    color: var(--white-color);
  }
}

/* ------------------------------------------------------------------
 * Hero su telefono: velatura più leggera + ombra sul testo.
 *
 * ⚠️ La velatura NON è nuova: il tema ne ha già una a
 * `rgba(22,25,33,0.8)`. È talmente densa che la fotografia sotto quasi
 * non si vede — da lì l'impressione di "fondo grigio piatto". Qui viene
 * ALLEGGERITA, non aggiunta: una seconda sovrapposta avrebbe solo
 * incupito ancora.
 *
 * Al posto di una tinta uniforme si usa una sfumatura: più scura dove
 * corre il testo, più trasparente in alto e in fondo, così la foto
 * respira e le lettere restano staccate dallo sfondo. È la stessa
 * tecnica dei poster: si scurisce dove serve leggere, non ovunque.
 *
 * L'ombra sul testo fa il resto del lavoro. Serve perché una foto non è
 * mai uniforme: anche con la velatura, una parete chiara dietro una
 * lettera bianca ne mangia il contorno. L'ombra garantisce il distacco
 * qualunque cosa capiti dietro, e a questi valori (sfocata e poco
 * opaca) non si percepisce come ombra ma come maggiore nitidezza.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1199.98px) {
  .luxivo-hero_three .hero-image-slider:after {
    /* ⚠️ `z-index` indispensabile, altro strascico del passaggio da Slick
     * a Swiper: `swiper-bundle.css` dichiara `.swiper { z-index: 1 }`,
     * mentre questa velatura non ha z-index (quindi `auto`, cioè 0 nel
     * contesto). Il risultato è che il carosello si dipinge SOPRA la
     * velatura e la nasconde del tutto: la foto usciva senza alcuna
     * schermatura. Slick non dichiarava z-index, per questo il tema
     * originale non ne aveva bisogno. */
    z-index: 2;
    background-color: transparent;
    background-image: linear-gradient(
      to bottom,
      rgba(22, 25, 33, 0.45) 0%,
      rgba(22, 25, 33, 0.62) 38%,
      rgba(22, 25, 33, 0.62) 72%,
      rgba(22, 25, 33, 0.48) 100%
    );
  }

  /* Ombra morbida: raggio ampio e opacità bassa, nessuno scostamento
   * verticale marcato — altrimenti il testo sembrerebbe "in rilievo"
   * invece che semplicemente più leggibile. */
  .luxivo-hero_three .hero-content .sub-title,
  .luxivo-hero_three .hero-content h1 {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  }

  /* Il paragrafo è più piccolo e fitto: un'ombra larga lo impasterebbe,
   * quindi raggio minore. */
  .luxivo-hero_three .hero-content p {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }
}

/* ------------------------------------------------------------------
 * Immagini: mai deformate quando si restringe lo schermo.
 *
 * ⚠️ Il tema dichiara solo `img { max-width: 100% }` (luxivo.css) e si
 * dimentica il compagno `height: auto`. Gli `<img>` dei template portano
 * gli attributi `width`/`height` (es. 522x370), che servono al browser
 * per riservare lo spazio ed evitare il salto del layout al
 * caricamento. Ma quando la larghezza scende sotto i 522px, `max-width`
 * stringe la base MENTRE l'altezza resta inchiodata a 370px: la foto si
 * schiaccia in orizzontale e sembra stirata in verticale.
 *
 * `height: auto` dice al browser di ricalcolare l'altezza in proporzione
 * e vale per TUTTE le immagini del sito: gli attributi restano al loro
 * posto (e continuano a prevenire il salto del layout), ma non vincolano
 * più le proporzioni.
 *
 * Unica eccezione le foto dell'hero, che un'altezza ce l'hanno per
 * scelta (ritagliate con `object-fit` per riempire l'area): sono
 * rimesse a posto dalla regola qui sotto.
 * ------------------------------------------------------------------ */
img {
  height: auto;
}

/* L'hero torna a riempire l'altezza: lì il ritaglio è voluto. */
.luxivo-hero_three .hero-image-slider .single-image-slide img {
  height: 100%;
}

/* ------------------------------------------------------------------
 * Frecce del carosello camere: visibili anche senza la foto di sfondo.
 *
 * ⚠️ Nel tema le frecce sono BIANCHE con un bordo grigio chiarissimo
 * (#D8DDE1) perché stanno sopra `.room-bg`, la fotografia che occupa il
 * 45% destro della sezione. Sotto i 1200px quella foto è nascosta
 * (`display: none`) ma le frecce restano bianche: finiscono bianco su
 * bianco e spariscono, come si vede confrontando desktop e telefono.
 *
 * Qui prendono il colore primario, con bordo dello stesso colore: si
 * leggono sul fondo chiaro e restano coerenti con gli altri comandi del
 * sito. Al tocco si riempiono di bordeaux con la freccia bianca, che è
 * esattamente il comportamento che il tema già dà all'hover.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1199.98px) {
  .luxivo-room_one .custom-prev,
  .luxivo-room_one .custom-next {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
  }

  /* `:focus-visible` insieme a `:hover`: su telefono il passaggio del
   * mouse non esiste, ma chi naviga da tastiera deve comunque vedere
   * dov'è il fuoco. */
  .luxivo-room_one .custom-prev:hover,
  .luxivo-room_one .custom-next:hover,
  .luxivo-room_one .custom-prev:focus-visible,
  .luxivo-room_one .custom-next:focus-visible {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
}

/* ------------------------------------------------------------------
 * Icone della riga "superficie · letti · bagno" nei riquadri camera.
 *
 * ⚠️ Sono SVG inline e non le PNG del tema (`squre.png`, `bed.png`,
 * `bath.png`): quei file NON esistono, né qui né nel pacchetto acquistato
 * — il componente Room1 li referenzia ma il pacchetto non li include.
 * Nemmeno Bootstrap Icons copre il caso: in questa versione non c'è alcun
 * glifo di letto o di vasca.
 *
 * `currentColor` nei tracciati (vedi il mixin) + `1em` qui: le icone
 * prendono colore e dimensione dal testo accanto, quindi restano allineate
 * a qualunque corpo e non servono file da mantenere.
 * ------------------------------------------------------------------ */
.room-meta .room-meta__icon {
  width: 1em;
  height: 1em;
  /* Le icone hanno la base sulla linea del testo: senza questa correzione
   * "galleggiano" rispetto alle lettere accanto. */
  vertical-align: -0.125em;
  flex: 0 0 auto;
}

/* Nell'elenco camere la riga sta in una colonna più stretta: se le tre voci
 * non ci stanno vanno a capo invece di sfondare il riquadro. */
.luxivo-room-item.style-three .room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 25px;
}

/* ------------------------------------------------------------------
 * Pagina Contatti — icone dei recapiti.
 *
 * ⚠️ `.luxivo-info-box.style-two` nasce per il FOOTER, che ha lo sfondo
 * scuro: il tema le dà `color: var(--white-color)`. Nella pagina Contatti
 * lo stesso blocco sta su fondo chiaro, quindi le icone risultavano
 * bianche su bianco — si vedeva solo il cerchietto del bordo.
 *
 * La correzione è ancorata a `.contact-info-box`, il contenitore della
 * sola pagina Contatti: il footer usa la stessa classe e lì il bianco è
 * giusto, quindi NON va toccato.
 * ------------------------------------------------------------------ */
.contact-info-box .luxivo-info-box.style-two .icon {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* ==================================================================
 * MAPPA DEL SITO (/sitemap.html)
 *
 * Tabella costruita con CSS Grid e non con <table>: le righe sono link
 * (`<a>`), e un `<a>` non può contenere `<tr>`. Così l'intera riga è
 * cliccabile invece del solo titolo — su telefono fa una differenza
 * sostanziale nella facilità di centrare il bersaglio.
 * ================================================================== */

/* Riepilogo in alto: due dati, non una tabella. */
.sitemap-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sitemap-summary__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background-color: var(--gray-color);
  font-size: 15px;
}

.sitemap-summary__label {
  color: var(--text-color);
  opacity: 0.75;
}

.sitemap-summary__value {
  font-weight: 700;
  color: var(--primary-color);
}

.sitemap-filter__input {
  width: 100%;
  max-width: 420px;
  padding: 12px 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 15px;
  background-color: var(--white-color);
  transition: border-color 0.25s ease-out;
}

.sitemap-filter__input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.sitemap-table {
  border: 1px solid var(--border-color);
  border-radius: 18px;
  /* `hidden` per far seguire ai figli gli angoli arrotondati: senza, la
   * prima e l'ultima riga sborderebbero dagli angoli del contenitore. */
  overflow: hidden;
}

/* Le quattro colonne, condivise da intestazione e righe. */
.sitemap-table__head,
.sitemap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 130px 130px;
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
}

.sitemap-table__head {
  background-color: var(--gray-color);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color);
  opacity: 0.7;
}

.sitemap-group__head {
  padding: 12px 22px;
  background-color: var(--primary-soft);
  color: var(--primary-color);
  font-family: var(--heading-font);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.sitemap-group__count {
  opacity: 0.65;
  font-weight: 400;
}

.sitemap-row {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #F3F3F3;
  transition: background-color 0.2s ease-out;
}

.sitemap-row:last-child {
  border-bottom: none;
}

.sitemap-row:hover,
.sitemap-row:focus-visible {
  background-color: var(--primary-soft);
  color: inherit;
}

.sitemap-row__url {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sitemap-row__title {
  font-weight: 600;
  color: var(--heading-color);
}

/* L'indirizzo per esteso, sotto il titolo: `break-all` perché gli slug
 * lunghi non hanno spazi dove andare a capo e sfonderebbero la colonna. */
.sitemap-row__loc {
  font-size: 13px;
  color: var(--text-color);
  opacity: 0.65;
  word-break: break-all;
}

.sitemap-row__priority {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sitemap-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background-color: var(--border-color);
  overflow: hidden;
}

.sitemap-bar__fill {
  display: block;
  height: 100%;
  background-color: var(--primary-color);
}

.sitemap-row__priority-value {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}

.sitemap-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: var(--primary-soft);
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
}

.sitemap-row__date {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
  opacity: 0.8;
}

.sitemap-empty {
  margin-top: 20px;
  padding: 18px;
  border-radius: 12px;
  background-color: var(--gray-color);
  text-align: center;
}

.sitemap-xml-note {
  margin-top: 22px;
  font-size: 14px;
}

.sitemap-xml-note a {
  color: var(--primary-color);
}

/* ------------------------------------------------------------------
 * Telefono: la griglia a quattro colonne non ci sta. Ogni riga diventa
 * una scheda e i tre dati secondari portano la propria etichetta, presa
 * dall'attributo `data-label` del markup (le stesse parole
 * dell'intestazione, quindi già tradotte).
 * ------------------------------------------------------------------ */
@media screen and (max-width: 767.98px) {
  .sitemap-table__head {
    display: none;
  }

  .sitemap-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 18px;
  }

  .sitemap-row__priority,
  .sitemap-row__freq,
  .sitemap-row__date {
    font-size: 13px;
  }

  .sitemap-row__priority::before,
  .sitemap-row__freq::before,
  .sitemap-row__date::before {
    content: attr(data-label) ': ';
    opacity: 0.6;
  }

  .sitemap-row__priority {
    gap: 8px;
  }

  /* Su una riga sola la barra si prenderebbe tutto lo spazio rimasto:
   * qui basta un accenno accanto alla percentuale. */
  .sitemap-bar {
    flex: 0 0 90px;
  }
}