/*
Theme Name: Esperia 2026
Theme URI: https://abitaresociale.com/
Description: Tema figlio di Twenty Twenty-Five per i siti del Fondo Esperia (Abitare Sociale).
             Usa SOLO componenti del nucleo di WordPress (blocchi nativi, theme.json) e font
             serviti dal nostro server: nessun page builder, nessuna licenza, nessuna CDN
             esterna. Scelta fatta per durare: il nucleo di WordPress e i temi "Twenty" sono
             mantenuti dal progetto WordPress, mentre il tema precedente (Studius di
             RocketTheme) non e' piu' mantenuto dal 30/06/2025.
Author: D.P.S. Soluzioni Informatiche S.r.l.
Template: twentytwentyfive
Version: 1.5.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: esperia-2026
*/

/* --- Solo i dettagli che theme.json non copre. Niente altro: meno CSS, meno cose da rompere. --- */

/* Contatori della sezione "Requisiti": linea sopra l'etichetta, come nel sito storico. */
.esperia-contatore { text-align: center; }
.esperia-contatore .esperia-numero {
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  margin: 0 0 .6rem;
  /* ombra: i numeri stanno sopra una fotografia e devono restare leggibili sempre */
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.esperia-contatore .esperia-etichetta {
  margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  padding-top: .7rem;
  border-top: 2px solid currentColor;
  display: inline-block;
  font-size: .95rem;
  opacity: .92;
}

/* Schede delle citta': la foto non si deforma e la scheda resta della stessa altezza. */
.esperia-scheda { height: 100%; display: flex; flex-direction: column; }
.esperia-scheda figure.wp-block-image { margin: 0 0 1.1rem; }
.esperia-scheda figure.wp-block-image img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.esperia-scheda .wp-block-buttons { margin-top: auto; padding-top: .9rem; }

/* Il pannello chiaro sopra la fotografia, come nel sito storico.
   Dentro un blocco Copertina WordPress rende bianco tutto il testo: qui va riportato scuro,
   altrimenti resta bianco su bianco (difetto visto e corretto il 16/09/2026). */
.esperia-pannello { backdrop-filter: blur(2px); }
.wp-block-cover .esperia-pannello,
.wp-block-cover .esperia-pannello h1,
.wp-block-cover .esperia-pannello h2,
.wp-block-cover .esperia-pannello h3,
.wp-block-cover .esperia-pannello p { color: var(--wp--preset--color--contrast); }
.wp-block-cover .esperia-pannello h2 { color: var(--wp--preset--color--esperia-notte); }
.wp-block-cover .esperia-pannello a { color: var(--wp--preset--color--esperia-blu); }

/* Rispetto di chi ha chiesto meno animazioni (accessibilita'). */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== Pagine interne (18/09/2026) ===== */

/* Fotografia grande in alto, come nel sito storico (misurata il 21/09/2026 da 320 a 1940 px, ogni 4 px):
   nessuna altezza fissa, la decide il testo; margine sopra e sotto il 4% della larghezza, ai lati il 10% da
   1216 px (76rem) in su; fotografia come sfondo allineata in alto a sinistra, senza velo; contenuto con 10 px di
   margine e 24 px di spazio interno; titolo al 3,5% della larghezza, interlinea 1, 10 px sopra e sotto, iniziali
   maiuscole; sottotitolo 16 px o l'1,3% della larghezza se maggiore, interlinea 1,5, 34 px sopra e sotto. */
.wp-block-cover.esperia-eroe { min-height: 0 !important; padding: 4vw 0 !important; align-items: flex-start; }
@media (min-width: 76rem) { .wp-block-cover.esperia-eroe { padding: 4vw 10% !important; } }
.wp-block-cover.esperia-eroe > .wp-block-cover__background { opacity: 0 !important; }
.wp-block-cover.esperia-eroe > .wp-block-cover__image-background { object-position: 0 0 !important; }
.wp-block-cover.esperia-eroe > .wp-block-cover__inner-container { margin: 10px !important; padding: 24px; width: auto; max-width: none; flex: 1; }
.wp-block-cover.esperia-eroe > .wp-block-cover__inner-container > * { max-width: none !important; }
.esperia-eroe .esperia-eroe-titolo {
  color: #fff; font-size: 3.5vw !important; font-weight: 300; line-height: 1; letter-spacing: normal;
  text-transform: capitalize; padding: 10px 0; margin: 0 !important; text-shadow: none;
}
.esperia-eroe .esperia-eroe-sottotitolo {
  color: #fff; font-size: max(16px, 1.3vw) !important; line-height: 1.5; letter-spacing: normal;
  margin: 34px 0 !important; text-shadow: none;
}

/* Corpo: titolo leggero come nel sito storico, righe separatrici sottili. */
.esperia-corpo h1 { font-weight: 300; margin-bottom: 1.6rem; }
.esperia-corpo .wp-block-separator {
  border: 0; border-top: 1px solid #e2e2e2; opacity: 1; margin-top: 1.8rem; margin-bottom: 1.8rem;
}
/* Immagine della notizia: e' una locandina con testo, deve restare leggibile (larga come il testo). */
.esperia-corpo .wp-block-post-featured-image { margin: 1.2rem 0 1.6rem; }
.esperia-corpo .wp-block-post-featured-image img { max-width: 100%; height: auto; }

/* Voce di menu della sezione in cui ci si trova, in blu come nel sito storico. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--esperia-blu);
}

/* Voci con sottomenu (18/09/2026): come nel sito storico non portano a una pagina, aprono il sottomenu.
   Il menu e' impostato su «apri al clic» (submenuVisibility "click"): le voci diventano pulsanti e il tocco
   su tablet e telefono apre il sottomenu. In quella modalita' WordPress spegne l'apertura al passaggio del
   mouse; qui la si riaccende SOLO per chi ha un mouse, con gli stessi valori della regola :hover di
   WordPress 7.1 (wp-includes/blocks/navigation/style.css). */
@media (hover: hover) {
  .wp-block-navigation .has-child.open-on-click:hover > .wp-block-navigation__submenu-container {
    height: auto; min-width: 200px; opacity: 1; overflow: visible; visibility: visible; width: auto;
  }
}

/* Sottomenu su computer e tablet come nel sito storico (valori misurati sul vecchio il 18/09/2026):
   riquadro bianco con ombra, voci nere in minuscolo su una riga (11,52 px, spaziatura 0,1em, margine 10 px),
   voce della pagina aperta in blu su fondo azzurrino. WordPress da' ai sottomenu i colori del menu a tutto
   schermo del telefono (blu notte, con classi di colore che hanno !important): qui valgono solo fuori da quel
   menu, percio' serve !important anche qui. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  background-color: #fff !important;
  color: #000 !important;
  border: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
}
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: #000;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: none;
  white-space: nowrap;
  padding: 10px;
}
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--esperia-blu);
  background-color: rgba(47, 59, 125, .2);
}

/* Menu a tutto schermo del telefono (fondo blu notte): la voce della pagina aperta in bianco attenuato,
   come nel sito storico. Il blu qui non si leggerebbe (blu su blu notte). */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, .6);
}

/* Il riquadro di focus serve a chi usa la tastiera: resta con il tasto Tab, ma non compare dopo un tocco o
   un clic (le voci con sottomenu ora sono pulsanti e ricevono il focus quando si toccano). */
.wp-block-navigation :where(a, button):focus:not(:focus-visible) { outline: none; }

/* I tre pulsanti delle citta': ben distanziati; su telefono uno sotto l'altro, larghi. */
.esperia-pulsanti { gap: 1rem; }
.esperia-pulsanti .wp-block-button__link { border-radius: 0; }
@media (max-width: 781px) {
  .esperia-pulsanti { flex-direction: column; align-items: stretch; }
  .esperia-pulsanti .wp-block-button,
  .esperia-pulsanti .wp-block-button__link { width: 100%; text-align: center; }
}

/* Fotografie dei progetti: tutte della stessa misura, anche nell'ultima riga. */
.esperia-galleria.wp-block-gallery { justify-content: center; margin-top: var(--wp--preset--spacing--40); }
.esperia-galleria.wp-block-gallery figure.wp-block-image { flex-grow: 0 !important; }
.esperia-galleria.wp-block-gallery figure.wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Collegamenti dentro la fotografia grande (es. il numero di telefono): bianchi e sottolineati,
   altrimenti il blu dei link sparisce sulla foto velata di blu (visto nel confronto del 18/09). */
.esperia-eroe a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

/* Pulsante del menu su telefono: tre barre blu, grande abbastanza da vedersi e da toccare. */
.wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--esperia-blu); padding: .25rem; }
.wp-block-navigation__responsive-container-open svg { width: 34px; height: 34px; }

/* Su telefono le fotografie dei progetti una per riga, grandi come nel carosello di prima. */
@media (max-width: 600px) {
  .esperia-galleria.wp-block-gallery figure.wp-block-image { width: 100% !important; }
}

/* Il numero di telefono non va mai a capo a meta' (visto su telefono il 18/09). */
a[href^="tel:"] { white-space: nowrap; }

/* ===== Animazioni come nel sito storico (21/09/2026) =====
   Valori misurati sul vecchio sito nel browser (computer 1440x900, tablet, telefono 390x664).
   Il codice che le muove e' in assets/js/esperia-animazioni.js; i caroselli usano Swiper 14.2.0. */

/* Testo letto solo dai lettori di schermo. */
.esperia-per-lettori {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Carosello «a ventaglio» delle fotografie: 40% dell'altezza dello schermo (30% nella home),
   250 px da 816 px di larghezza in giu' (51rem, la soglia del vecchio). Velo scuro al 10% come il vecchio. */
.esperia-galleria.wp-block-gallery.esperia-carosello-attivo {
  /* larghezza come il vecchio (misurata da 360 a 1920 px): la pagina meno 68 px; da 1216 px (76rem) in su
     l'80% della pagina meno 68 px. «cqw» = larghezza vera della pagina, senza la barra di scorrimento. */
  --esperia-largo: calc(100cqw - 68px);
  display: block; width: var(--esperia-largo); max-width: none;
  margin-left: calc((100% - var(--esperia-largo)) / 2) !important;
  margin-right: calc((100% - var(--esperia-largo)) / 2) !important;
}
@media (min-width: 76rem) {
  .esperia-galleria.wp-block-gallery.esperia-carosello-attivo { --esperia-largo: calc(80cqw - 68px); }
}
main.wp-block-group { container-type: inline-size; }
.esperia-carosello-attivo .swiper { height: 40vh; }
.esperia-carosello-attivo.esperia-basso .swiper { height: 30vh; }
@media (max-width: 51rem) {
  .esperia-carosello-attivo .swiper,
  .esperia-carosello-attivo.esperia-basso .swiper { height: 250px; }
}
.esperia-carosello-attivo .swiper-slide { height: 100%; position: relative; }
.esperia-carosello-attivo .swiper-slide figure.wp-block-image:not(#individual-image) {
  width: 100% !important; height: 100%; margin: 0;
}
.esperia-carosello-attivo .swiper-slide figure.wp-block-image img {
  width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; display: block;
}
.esperia-carosello-attivo .swiper-slide::after,
.esperia-diapositiva::after {
  content: ""; position: absolute; inset: 0; background: rgba(9, 13, 15, .1); pointer-events: none;
}

/* Presentazione della home: 68% dell'altezza dello schermo, 50% da 816 px in giu'.
   Prima che parta (o senza JavaScript) si vede solo la prima diapositiva. */
.esperia-presentazione { position: relative; }
.esperia-presentazione .swiper,
.esperia-presentazione > .esperia-diapositiva { height: 68vh; }
.esperia-presentazione:not(.esperia-presentazione-attiva) > .esperia-diapositiva ~ .esperia-diapositiva { display: none; }
.esperia-diapositiva { position: relative; overflow: hidden; margin: 0 !important; }
.esperia-presentazione .swiper-slide > .esperia-diapositiva { height: 100%; }
.esperia-diapositiva > figure.wp-block-image { position: absolute; inset: 0; margin: 0; }
.esperia-diapositiva > figure.wp-block-image a,
.esperia-diapositiva > figure.wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* come il vecchio: l'immagine parte dall'alto e si taglia sotto */
.esperia-diapositiva > figure.wp-block-image img { object-position: center top; }
.esperia-diapositiva > .esperia-solo-telefono { display: none; }
@media (max-width: 51rem) {
  .esperia-presentazione .swiper,
  .esperia-presentazione > .esperia-diapositiva { height: 50vh; }
}
/* le immagini e i testi da telefono invece entrano sotto 50,99rem (815,84 px): a 816 px il vecchio ha gia'
   l'altezza da telefono ma ancora immagine e testi da computer (misurato) */
@media (max-width: 50.99rem) {
  .esperia-diapositiva > .esperia-solo-computer { display: none; }
  .esperia-diapositiva > .esperia-solo-telefono { display: block; }
}

/* Titolo, testo e pulsante al centro della diapositiva. Vecchio, misurato da 390 a 3000 px: titolo 57,6 px;
   testo il maggiore fra 20,8 px e l'1,1% dello schermo; pulsante l'1% dello schermo (14,4 px a 1440). */
.esperia-didascalia {
  position: absolute; inset: 0; z-index: 2; margin: 0 !important; padding: 16px 48px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; pointer-events: none; letter-spacing: normal;
}
/* titolo e pulsanti larghi quanto il blocco (al massimo 700 px), testo 16 px piu' stretto per lato */
/* Larghezze del vecchio (misurate da 815 a 3000 px): testo largo 32,13 volte il suo carattere (668,3 px fino a
   1891 px di schermo, poi cresce con lo schermo), titolo e pulsanti 32 px in piu'. Il decimale conta: la prima riga
   di Villanova misura 668,3 px e nel vecchio ci sta per un soffio. */
.esperia-didascalia > * {
  pointer-events: auto; width: 100%; margin: 0 !important;
  max-width: calc(max(1.3rem, 1.1vw) * 32.1297 + 32px);
}
.esperia-didascalia .esperia-diapositiva-titolo { font-size: 3.6rem; font-weight: 500; line-height: 1.3; }
.esperia-didascalia .esperia-diapositiva-testo {
  font-size: max(1.3rem, 1.1vw); line-height: 1.3; width: calc(100% - 32px); max-width: calc(max(1.3rem, 1.1vw) * 32.1297); margin-top: 15px !important;
}
/* Il pulsante sta su una riga di testo da 16/24 px, con 8 px sotto, come nel vecchio: quando il pulsante e' piu'
   piccolo della riga (schermi da 816 a 1000 px) e' la riga a decidere l'altezza, e il blocco si centra uguale. */
.esperia-didascalia .wp-block-buttons {
  display: block; margin-top: 16px !important; text-align: center; font-size: 16px; line-height: 24px;
}
.esperia-didascalia .wp-block-buttons .wp-block-button { display: inline-block; vertical-align: baseline; margin: 0 0 8px; }
.esperia-didascalia .wp-block-button .wp-block-button__link {
  font-size: 1vw; font-weight: 700; line-height: 1.5; letter-spacing: normal; padding: .2rem .5rem;
  border: 2px solid transparent; border-radius: 0;
}
@media (max-width: 50.99rem) {
  .esperia-didascalia .esperia-diapositiva-testo { font-size: 1rem; }
  .esperia-didascalia .wp-block-button .wp-block-button__link { font-size: .8rem; padding: .4rem 1rem; }
}

/* Frecce bianche ai lati, a 16 px dal bordo (vecchio: 23x64 px, 17x48 px su telefono). */
.esperia-freccia {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  display: flex; align-items: center; justify-content: center;
  width: 23px; height: 64px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
}
.esperia-freccia svg { width: 23px; height: 38px; }
.esperia-freccia-prec { left: 16px; }
.esperia-freccia-succ { right: 16px; }
.esperia-freccia:focus:not(:focus-visible) { outline: none; }
.esperia-freccia:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 51rem) {
  .esperia-freccia { width: 17px; height: 48px; }
  .esperia-freccia svg { width: 17px; height: 28px; }
}

/* Numeri che scorrono come un contachilometri (vecchio: Odometer, 2 secondi). */
.esperia-numero .esperia-cifra {
  display: inline-block; height: 1.05em; line-height: 1.05em; vertical-align: top;
  clip-path: inset(-.12em -1em);
}
.esperia-numero .esperia-rullo { display: block; transition: transform 2s ease; }
.esperia-numero .esperia-rullo > span { display: block; height: 1.05em; }

/* Passaggio del mouse come nel sito storico (misurato sul vecchio il 21/09/2026): i colori cambiano in 0,2 s,
   i collegamenti non si sottolineano (theme.json), le voci del menu diventano blu, i pulsanti si invertono
   (fondo bianco, scritta e bordo blu), i collegamenti del pie' di pagina si schiariscono a meta'.
   Il bordo di 2 px c'e' sempre, trasparente: il pulsante non cambia misura (padding ridotto di 2 px). */
a { transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
.wp-block-button .wp-block-button__link {
  border: 2px solid transparent;
  padding: calc(.7rem - 2px) calc(1.3rem - 2px);
  transition: color .2s, background-color .2s, border-color .2s;
}
.wp-block-button .wp-block-button__link:hover { border-color: var(--wp--preset--color--esperia-blu); }
@media (hover: hover) {
  .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--esperia-blu);
  }
}
.wp-site-blocks > footer a:hover { color: rgba(255, 255, 255, .5); }

/* Schede delle citta' nella home: ombra azzurra che compare in 1 s al passaggio del mouse (vecchio: 0 0 50px 5px, 5%). */
.esperia-scheda { box-shadow: 0 0 50px 5px rgba(47, 59, 125, 0); transition: box-shadow 1s; }
.esperia-scheda:hover { box-shadow: 0 0 50px 5px rgba(47, 59, 125, .05); }

/* Sottomenu come nel vecchio (misurato nel browser il 21/09/2026): si apre in dissolvenza in 0,3 s (WordPress: 0,1 s)
   e si chiude di colpo; le sue voci al passaggio del mouse diventano blu su fondo azzurrino in 0,35 s.
   Le voci principali con sottomenu (pulsanti) cambiano colore in 0,2 s come i collegamenti. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container { transition: opacity .3s ease-out; }
.wp-block-navigation button.wp-block-navigation-item__content { transition: color .2s ease-in-out; }
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  transition: color .35s ease, background-color .35s ease;
}
@media (hover: hover) {
  .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--esperia-blu); background-color: rgba(47, 59, 125, .2);
  }
}

/* Testata compatta come nel sito storico (misurata il 21/09/2026, computer 1440x900): alta 91 px, logo largo
   110 px, prima voce del menu a 27 px dall'alto. Il nuovo era alto 129 px piu' 19 px di margine sotto.
   Qui si toglie il margine fra testata e pagina, e quello del carosello della home dopo il titolo nascosto. */
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }
.esperia-presentazione > .swiper { margin-block-start: 0; }
/* Menu a tutto schermo del telefono: la prima voce subito sotto la X di chiusura (WordPress lascia 56 px). */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 32px; }

/* Loghi di Conio e Revalo (Community Manager) come nel sito storico, misurato il 21/09/2026 su 18 larghezze:
   larghi 110 px, allineati in alto, centrati al 37,5% e al 62,5% della pagina (40% e 60% da 1216 px = 76rem in su);
   sotto gli 816 px (51rem, soglie della griglia del vecchio) uno sotto l'altro, 68 px di distanza. */
.wp-block-group.esperia-loghi { display: grid; grid-template-columns: 25vw 25vw; justify-content: center; align-items: start; gap: 0; }
.wp-block-group.esperia-loghi > figure { justify-self: center; margin: 0; }
@media (min-width: 76rem) { .wp-block-group.esperia-loghi { grid-template-columns: 20vw 20vw; } }
@media (max-width: 50.99rem) { .wp-block-group.esperia-loghi { grid-template-columns: 1fr; row-gap: 68px; } }

/* ===== Testata e menu come nel sito storico (misurati il 21/09/2026 su 15 larghezze, da 768 a 1920 px) =====
   Vecchio: margini laterali del 10% da 1216 px (76rem) in su, nessuno sotto; logo in una colonna del 15% e menu
   nell'85%, entrambi con 14 px di margine; voci allineate a sinistra, 10 px di margine per voce, freccia in 24 px;
   carattere allo 0,8% della larghezza dello schermo (11,52 px a 1440), spaziatura 0,1em, peso normale, nero.
   Sotto 816 px (51rem): pulsante del menu blu a sinistra e logo al centro. */
.esperia-testata { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 76rem) { .esperia-testata { padding-left: 10% !important; padding-right: 10% !important; } }
.esperia-testata > .wp-block-group { max-width: none !important; width: 100%; flex-wrap: nowrap; justify-content: flex-start !important; gap: 0; }
.esperia-testata .wp-block-site-logo { flex: 0 0 15%; padding: 0 14px; box-sizing: border-box; margin: 0; }
.esperia-testata .wp-block-site-logo img { max-width: 100%; height: auto; }
.esperia-testata nav.wp-block-navigation { flex: 0 0 85%; padding: 0 14px; box-sizing: border-box; margin: 0; }
.esperia-testata .wp-block-navigation__container { gap: 0 !important; justify-content: flex-start !important; }
.esperia-testata .wp-block-navigation__container > li > .wp-block-navigation-item__content {
  font-size: .8vw; letter-spacing: .1em; font-weight: 400; padding: 10px;
}
.esperia-testata .wp-block-navigation__container > li.has-child > .wp-block-navigation-item__content { padding-right: 0; }
.esperia-testata .wp-block-navigation .wp-block-navigation__container > li > .wp-block-navigation__submenu-icon {
  width: 24px; height: auto; margin: 0 10px 0 calc(.8vw * .367); padding: 0; /* lo spazio fra testo e freccia del vecchio */ display: inline-flex; justify-content: center; align-items: center;
}
.esperia-testata .wp-block-navigation__container > li > .wp-block-navigation__submenu-icon svg { width: .8vw; height: .8vw; stroke-width: 2px; }
.esperia-testata .wp-block-navigation__container > li:not(.current-menu-item):not(.current-menu-ancestor) > .wp-block-navigation-item__content,
.esperia-testata .wp-block-navigation__container > li:not(.current-menu-item):not(.current-menu-ancestor) > .wp-block-navigation__submenu-icon { color: #000; }
/* Pulsante del menu e logo al centro sotto 816 px, come il vecchio (WordPress lo farebbe solo sotto 600 px). */
@media (max-width: 50.99rem) {
  .esperia-testata > .wp-block-group { justify-content: center !important; }
  .esperia-testata .wp-block-site-logo { flex: 0 0 auto; padding: 0; }
  .esperia-testata nav.wp-block-navigation { position: absolute; left: 0; top: 0; flex: none; padding: 0; }
  .esperia-testata .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .esperia-testata .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  /* tre barre come il vecchio (misurate al quarto di pixel): 20,75 x 3,5 px, ogni 7 px, in un pulsante 40x40 */
  .esperia-testata .wp-block-navigation__responsive-container-open {
    position: absolute; left: 18px; top: 26px; width: 40px; height: 40px; padding: 0;
    background: linear-gradient(currentColor 0 0) 9.25px 3.75px / 20.75px 3.5px no-repeat,
                linear-gradient(currentColor 0 0) 9.25px 10.75px / 20.75px 3.5px no-repeat,
                linear-gradient(currentColor 0 0) 9.25px 17.5px / 20.75px 3.5px no-repeat;
  }
  .esperia-testata .wp-block-navigation__responsive-container-open svg { display: none; }
}

/* A capo normale come nel sito storico: Twenty Twenty-Five usa «text-wrap: pretty», che sposta parole alla riga
   dopo per evitare righe finali corte, e cosi' le righe non coincidono con il vecchio (visto il 21/09/2026). */
p, h1, h2, h3, h4, h5, h6, blockquote, figcaption, li, dt, dd { text-wrap: wrap; }

/* ===== Corpo della pagina come nel sito storico (misurato il 21/09/2026 a 390, 1194 e 1440 px) =====
   Colonna: margini laterali del 10% da 1216 px (76rem) in su, piu' 34 px (10 di margine + 24 di spazio interno);
   34 px sopra e sotto. Titolo 36,8 px peso normale blu, interlinea 72 px, 32 px sopra e 10 sotto; paragrafi
   16 px neri, interlinea 1,5 (vale anche per le parti scritte piu' grandi), 20,8 px sotto; elenchi 24 px sopra e sotto, rientro 24 px. */
.wp-block-group.esperia-corpo { padding: 34px !important; }
@media (min-width: 76rem) { .wp-block-group.esperia-corpo { padding-left: calc(10% + 34px) !important; padding-right: calc(10% + 34px) !important; } }
.wp-block-group.esperia-corpo > * { max-width: none !important; margin-top: 0; margin-bottom: 0; }
.esperia-corpo { color: #000; }
.wp-block-group.esperia-corpo > h1 { font-size: 36.8px !important; font-weight: 400; line-height: 72px; margin: 32px 0 10px; letter-spacing: normal; }
.wp-block-group.esperia-corpo > p { font-size: 16px; line-height: 1.5; margin: 0 0 20.8px; letter-spacing: normal; }
.wp-block-group.esperia-corpo > ul, .wp-block-group.esperia-corpo > ol { margin: 24px 0; padding-left: 24px; }
.wp-block-group.esperia-corpo li { font-size: 16px; line-height: 1.5; margin: 0; letter-spacing: normal; }
/* Nessuno spazio fra fotografia e testo (WordPress mette 19,2 px); titolo con 24 px di spazio sotto; riga separatrice
   come il vecchio: bordo inferiore di 1 px grigio chiaro, 24 px sopra e sotto. */
.wp-block-cover.esperia-eroe + .wp-block-group.esperia-corpo { margin-block-start: 0; }
.wp-block-group.esperia-corpo > h1 { padding-bottom: 24px; }
.wp-block-group.esperia-corpo > hr.wp-block-separator {
  margin: 24px 0; height: 0; border: 0; border-bottom: 1px solid rgba(231, 232, 234, .85); opacity: 1;
}

/* ===== Pulsanti e carosello in fondo alle pagine delle citta', come nel vecchio (misurati il 21/09/2026) =====
   Riga -> pulsanti 136,8 px; pulsanti -> carosello 92 px; carosello -> piede 34 px. Da 816 px (51rem) in su i tre
   pulsanti stanno in una griglia di tre colonne uguali (larga quanto la pagina meno il 10% per lato da 1216 px),
   ognuno centrato nella sua colonna; testo all'1% della larghezza in grassetto, spazio interno 3,2 x 8 px, bordo
   di 2 px trasparente. Sul telefono il vecchio li riduce a 3,9 px, illeggibili: li lasciamo leggibili (da decidere). */
.wp-block-group.esperia-coda { margin-top: 44.8px !important; padding: 0 0 34px !important; }
.esperia-coda > .esperia-galleria.wp-block-gallery { margin-top: 58px; margin-bottom: 0; }
@media (min-width: 51rem) {
  .esperia-coda > .wp-block-buttons.esperia-pulsanti {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 !important; max-width: none !important;
    padding: 34px 0;
  }
  .esperia-coda > .wp-block-buttons.esperia-pulsanti > .wp-block-button { justify-self: center; margin: 0; }
  .esperia-coda .esperia-pulsanti .wp-block-button__link {
    font-size: 1vw; font-weight: 700; line-height: 1.5; letter-spacing: normal; padding: 3.2px 8px;
    border: 2px solid transparent; box-sizing: border-box;
  }
}
@media (min-width: 76rem) {
  .esperia-coda > .wp-block-buttons.esperia-pulsanti { padding-left: 10%; padding-right: 10%; }
}

/* ===== Pie' di pagina come nel sito storico (misurato il 21/09/2026 a 390, 815, 816, 1194 e 1440 px) =====
   Fascia blu: 4 px di margine; righe con celle di 10 px di margine; logo Conio 110 px in una cella con 24 px di
   spazio interno; collegamenti 13,6 px (interlinea 1,5) a 24 px l'uno dall'altro, cella con 4 px di spazio interno;
   sotto 816 px i collegamenti vanno in colonna e la cella ha 48 px in piu' sotto. Fascia scura: margini laterali
   del 10% da 1216 px; diritti 14,4 px (interlinea 1,5) con 24 px sopra e sotto e una riga trasparente di 1 px;
   «Powered by» 8 pt in corsivo e logo EASYTM 150 x 42 px con 10 px ai lati, 20,8 px sotto. */
.esperia-piede { color: #fff; }
/* nel vecchio righe e fasce sono contenitori flessibili: i margini di celle vicine non si fondono */
.esperia-piede-sopra, .esperia-piede-sotto { display: flex; flex-direction: column; }
.esperia-piede a { color: #fff; text-decoration: none; transition: color .2s; }
.esperia-piede a:hover { color: rgba(255, 255, 255, .5); }
.esperia-piede-sopra { background: var(--wp--preset--color--esperia-blu); padding: 4px; }
.esperia-piede-sotto { background: var(--wp--preset--color--esperia-notte); }
@media (min-width: 76rem) { .esperia-piede-sotto { padding: 0 10%; } }
.esperia-piede-cella { margin: 10px; padding: 24px; text-align: center; font-size: 16px; line-height: 24px; }
.esperia-piede-logo { display: flex; justify-content: center; }
.esperia-piede-logo img { display: block; width: 110px; height: auto; }
.esperia-piede-menu { padding: 4px; }
.esperia-piede-menu ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; font-size: 13.6px; line-height: 1.5; }
.esperia-piede-menu li { margin: 0 24px 0 0; }
.esperia-piede-menu li:last-child { margin-right: 0; }
@media (max-width: 50.99rem) {
  .esperia-piede-menu { padding-bottom: 52px; }
  .esperia-piede-menu ul { flex-direction: column; }
}
.esperia-piede-diritti { border-top: 1px solid transparent; font-size: 14.4px; line-height: 1.5; }
.esperia-piede-powered { margin: 0 0 20.8px; font-size: 16px; line-height: 1.5; text-align: center; }
.esperia-piede-powered em { font-size: 8pt; }
.esperia-piede-powered img { display: inline-block; width: 150px; height: auto; vertical-align: middle; margin: 0 10px; }

/* Spaziatura delle lettere normale su tutto il sito come nel vecchio (Twenty Twenty-Five mette -0,1 px). */
body { letter-spacing: normal; }
/* Community Manager: nel vecchio fra testo e loghi ci sono un paragrafo vuoto, la fine della sezione e l'inizio
   di quella dei loghi: 112,8 px in piu' rispetto al margine del paragrafo (misurato a 390, 1194 e 1440 px). */
.wp-block-group.esperia-corpo > .wp-block-group.esperia-loghi { margin-top: 133.6px; } /* 112,8 + i 20,8 del paragrafo, che si fondono */
/* Il blocco dei pulsanti centra il suo contenuto come il vecchio (il pulsante e' gia' centrato: cambia solo il blocco). */
.esperia-coda .esperia-pulsanti .wp-block-button { text-align: center; }
/* Le due pagine di Napoli con pulsanti (Appartamenti disponibili, Modalita' di richiesta) nel vecchio non hanno il
   paragrafo vuoto prima dei pulsanti: riga -> pulsanti 92 px invece di 136,8. */
.wp-block-group.esperia-coda.esperia-coda-stretta { margin-top: 0 !important; }