/* ==========================================================================
   Pagine testuali: /brochure/ e /privacy-policy/.
   Fascia del titolo, misura di lettura, schede della brochure, informativa.
   Valori presi dagli stili calcolati del sito vivo: tema Augustine
   (main.min.css), kit Elementor post-6.css, post-3.css, post-11963.css e CSS
   inline delle due pagine.
   ========================================================================== */

/* --------------------------------------------------- fascia titolo pagina */
/* Stessi nomi di pagina-contatti.css e pagina-rooms.css: e' un blocco comune a
   tutte le pagine interne e andrebbe in base.css al primo giro di pulizia.
   Qui la fascia e' 520px (il CSS inline di /brochure/ e /privacy-policy/ dice
   520, non i 515 di /rooms/ e /contatti/). */
.titolo-pagina{
  position:relative;
  height:520px;
  background-color:#fafafa;
  overflow:hidden;
}
.titolo-pagina__foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;   /* il tema usava background-position: center 0 */
}
.titolo-pagina__contenuto{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  max-width:var(--griglia);
  margin-inline:auto;
  padding-inline:20px;
  text-align:center;
}
.titolo-pagina__titolo{
  margin:0;
  font-family:var(--display);
  font-size:72px;
  font-weight:400;
  line-height:79.99px;
  letter-spacing:-2.88px;
  color:var(--bianco);
}

/* --------------------------------------------------------------- corpo */
/* #qodef-page-inner ha padding 100px 0; la colonna Elementor ne aggiunge 10:
   110px sopra e sotto. La misura di lettura viva e' 1080px (griglia 1100 meno
   i 10px di respiro della colonna per lato). */
.pagina-testo{padding:110px 0}
.pagina-testo__corpo{
  max-width:1080px;
  margin-inline:auto;
}

/* ------------------------------------------------- brochure: le schede */
.brochure-schede__barra{
  display:flex;
  overflow:hidden;
  border-bottom:1px solid #d5d8dc;
}
.brochure-schede__linguetta{
  padding:20px 25px;
  border:1px solid transparent;
  border-bottom:0;
  /* copre la riga della barra quando la scheda e' aperta */
  margin-bottom:-1px;
  font-family:'Roboto',var(--corpo);
  font-size:22px;
  font-weight:500;
  line-height:1;
  color:var(--nero);
  background:transparent;
  cursor:pointer;
}
.brochure-schede__linguetta[aria-selected="true"]{
  border-color:#d5d8dc;
  background:var(--bianco);
  color:#125d81;
}
.brochure-schede__pannello{
  padding:20px;
  border:1px solid #d5d8dc;
  border-top:0;
  font-family:'Roboto',var(--corpo);
  font-size:16px;
  font-weight:400;
  line-height:29.92px;
  color:#070000;
}

/* elenco dei locali e dei luoghi: pallino dentro il testo, come nel tema */
.brochure-elenco{
  margin:0 0 24px;
  padding:0;
  list-style:disc inside;
}
.brochure-elenco__voce{margin-bottom:29.92px}
.brochure-elenco__voce:last-child{margin-bottom:0}
.brochure-elenco__nome{font-weight:700}
.brochure-elenco__mappa{text-decoration:underline}

/* ------------------------------- pagine legali: privacy, cookie, termini */
/* Un documento che si deve leggere, non sfogliare: misura di riga stretta,
   titoli di paragrafo in Forum ma alla misura del titolo piccolo (i 72px
   dell'informativa di WordPress facevano una parola per riga), testo sul grigio
   forte di base.css e non sul tenue, che su bianco sta sotto il 4,5:1. */
.legale{
  font-family:var(--corpo);
  font-size:16px;
  font-weight:400;
  line-height:29.92px;
  color:var(--testo);
}
.legale p{margin:0 0 18px}
.legale a{color:var(--accento);text-decoration:underline;text-underline-offset:3px}
.legale a:hover{text-decoration-thickness:2px}
.legale strong{font-weight:600;color:var(--testo-forte)}

.legale__apertura{
  max-width:62ch;
  margin:0 0 46px;
  font-size:18px;
  line-height:33.66px;
}
.legale__aggiornamento{
  margin:0 0 34px;
  font-size:14px;
  font-weight:500;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--grigio);
}

/* ------------------------------------------------------------ sommario */
.legale__sommario{
  margin:0 0 56px;
  padding:28px 32px;
  border:1px solid var(--linea);
}
.legale__sommario-titolo{
  margin:0 0 14px;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:600;
  letter-spacing:2.1px;
  text-transform:uppercase;
  color:var(--accento);
}
.legale__sommario ol{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:voce;
  columns:2;
  column-gap:40px;
}
.legale__sommario li{
  margin:0 0 6px;
  counter-increment:voce;
  break-inside:avoid;
}
.legale__sommario li::before{
  content:counter(voce) ". ";
  color:var(--grigio);
}

/* ------------------------------------------------------------- sezioni */
.legale__sezione{
  margin:0 0 48px;
  scroll-margin-top:90px;   /* l'ancora non finisce sotto la barra mobile */
}
.legale__titolo{
  margin:0 0 18px;
  font-family:var(--display);
  font-size:34px;
  font-weight:400;
  line-height:40.8px;
  letter-spacing:-1.38px;
  color:var(--nero);
  overflow-wrap:break-word;
}
.legale__sottotitolo{
  margin:32px 0 12px;
  font-family:var(--corpo);
  font-size:18px;
  font-weight:600;
  line-height:28px;
  letter-spacing:.2px;
  color:var(--testo-forte);
}

.legale__elenco{
  margin:0 0 18px;
  padding-left:22px;
  list-style:disc;
}
.legale__elenco li{margin:0 0 10px}
.legale__elenco--numerato{list-style:decimal}

/* --------------------------------------------------- riquadri in rilievo */
/* Il riepilogo in chiaro: quello che un ospite legge se non legge altro. */
.legale__nota{
  margin:0 0 40px;
  padding:26px 30px;
  border-left:3px solid var(--accento);
  background-image:linear-gradient(var(--crema-alto) 0%,var(--crema-basso) 100%);
}
.legale__nota p:last-child{margin-bottom:0}

/* Scheda del titolare: gli stessi dati ripetuti in fondo a ogni documento. */
.legale__scheda{
  margin:0 0 24px;
  padding:24px 30px;
  border:1px solid var(--linea);
}
.legale__scheda dt{
  font-size:13px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--grigio);
}
.legale__scheda dd{
  margin:0 0 14px;
  font-size:17px;
  color:var(--testo-forte);
}
.legale__scheda dd:last-child{margin-bottom:0}

/* Quello che il cliente deve ancora decidere: deve saltare all'occhio, non
   sparire in mezzo al testo. Non e' un errore, e' una casella da riempire. */
.legale__conferma{
  display:block;
  margin:0 0 18px;
  padding:14px 18px;
  border:1px dashed #b04a12;
  background:#fff6ef;
  font-size:15px;
  line-height:26px;
  color:#7a3106;
}
.legale__conferma strong{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#b04a12;
}
/* dentro un elenco o una tabella sta in riga, senza il riquadro pieno */
.legale__conferma--riga{
  display:inline;
  margin:0;
  padding:2px 6px;
  border:0;
  border-bottom:1px dashed #b04a12;
  background:transparent;
}
.legale__conferma--riga strong{display:inline;letter-spacing:1.1px}

/* ------------------------------------------------------------ tabelle */
/* Il contenitore scorre da solo: la tabella non deve mai allargare la pagina. */
.legale__tabella{
  margin:0 0 24px;
  overflow-x:auto;
}
.legale__dati{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:15px;
  line-height:24px;
  text-align:left;
}
.legale__dati caption{
  margin-bottom:12px;
  font-size:14px;
  color:var(--grigio);
  text-align:left;
}
.legale__dati th,
.legale__dati td{
  padding:12px 14px;
  border:1px solid var(--linea);
  vertical-align:top;
}
.legale__dati thead th{
  font-family:var(--corpo);
  font-size:13px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--nero);
  background:#fafafa;
}
.legale__dati tbody th{
  font-weight:600;
  color:var(--testo-forte);
}
.legale__vuota td{
  color:var(--grigio);
  font-style:italic;
}

/* --------------------------------------------------------- responsive */
@media (max-width:1024px){
  .titolo-pagina{height:400px}
  .pagina-testo{padding:80px 0}
}

@media (max-width:768px){
  .titolo-pagina__titolo{
    font-size:65px;
    line-height:72.22px;
    letter-spacing:-2.6px;
  }
  .legale__sommario ol{columns:1}
  .legale__sommario,
  .legale__nota,
  .legale__scheda{padding-inline:22px}
  /* una colonna: le due linguette si incolonnano a tutta larghezza */
  .brochure-schede__barra{
    flex-direction:column;
    border-bottom:0;
  }
  .brochure-schede__linguetta{
    margin-bottom:0;
    border:1px solid #d5d8dc;
    border-bottom:0;
    text-align:left;
  }
  .brochure-schede__linguetta:last-of-type{border-bottom:1px solid #d5d8dc}
  .brochure-schede__pannello{
    margin-top:-1px;
    padding:10px;
    border-top:1px solid #d5d8dc;
  }
}

@media (max-width:680px){
  .titolo-pagina__titolo{
    font-size:50px;
    line-height:55.55px;
    letter-spacing:-2px;
  }
  .legale__titolo{
    font-size:28px;
    line-height:34px;
    letter-spacing:-1px;
  }
  .legale__apertura{font-size:17px;line-height:31px}
}