/* Kadence Child Salento — la veste del sito italiano (mondo-sito, site.css).
   Contratto: docs/contratti/stile.md. Niente URL in questo file, nemmeno nei
   commenti: il gate li respinge. */

/* Marcellus, servito dal tema: lettere incise come sulle epigrafi in pietra.
   Un peso solo, il normale. `swap`: il titolo compare subito col carattere di
   sistema e cambia quando il serif e' pronto. Licenza OFL in font/. */
@font-face {
  font-family: Marcellus;
  src: url("font/marcellus.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Palette pietra e Ionio, stessi valori del sito italiano. Di Kadence si
   ridefiniscono solo accento e accento alternativo (link e bottoni): testi e
   fondi restano al Customizer. Kadence ricava `--global-palette10` dalla
   palette1, e i blocchi colorati «Palette 1» la seguono. */
:root {
  --sp-serif: Marcellus, Georgia, "Times New Roman", serif;
  --sp-ionio: #0D4A5A;
  --sp-ionio-2: #0A3845;
  --sp-tufo: #D8B57A;
  --sp-tufo-chiaro: #EBD6AE;
  --sp-tufo-scuro: #9C7440;
  --sp-notte: #13262E;
  --sp-bianco: #FFFFFF;
  --global-palette1: var(--sp-ionio);
  --global-palette2: var(--sp-ionio-2);
}

/* ------------------------------------------------------------------ titoli
   `body` davanti: il CSS aggiuntivo del Customizer mette Playfair su h1-h3 a
   pari specificita' ed e' stampato dopo questo foglio. Marcellus non ha il
   grassetto: niente grassetto finto, che sbava le grazie. */
body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--sp-serif);
  font-weight: 400;
  font-synthesis: style;
}

/* ------------------------------------------------------------------ targa
   Il titolo di articoli e pagine sta su una targa di tufo, come sul sito
   italiano. Notte su tufo: contrasto 8,04. Niente animazione: sta in cima
   alla pagina, ed e' cio' su cui si misura la velocita' di apertura.
   `.sp-targa` la mette a mano su qualunque titolo, dall'editor. */
h1.entry-title,
.sp-targa {
  display: inline-block; max-width: 100%; box-sizing: border-box;
  padding: .45em .8em .5em; border-radius: 3px;
  background: var(--sp-tufo); color: var(--sp-notte);
  box-shadow: 0 6px 0 var(--sp-tufo-scuro), 0 18px 26px -14px rgba(19, 38, 46, .5);
}

/* ---------------------------------------------------------------- testata
   Fondo notte, come l'anteprima approvata. Il selettore lungo e' quello che
   Kadence usa per la testata fissa: ripetuto qui, a pari specificita' e
   dopo, la testata resta notte anche quando si attacca in cima.
   Le due righe con `body` sono per la testata trasparente, che sul vivo e'
   accesa sugli articoli: Kadence le toglie il fondo con
   `.transparent-header #masthead` (da 1025 px) e
   `.mobile-transparent-header #masthead` (fino a 1024), che battono
   `#masthead` da solo. Con `body` davanti vincono queste, qualunque sia
   l'ordine dei fogli. */
#masthead,
body.transparent-header #masthead,
body.mobile-transparent-header #masthead,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
  background: var(--sp-notte);
}

/* Fino a 1024 px la testata trasparente di Kadence sta in `position:
   absolute` sopra la cima della pagina: alta 80 px contro un margine di
   3rem (2rem fino a 767), cioe' 48 e 32 px col carattere base a 16, una
   volta opaca coprirebbe l'inizio dell'immagine in evidenza. Qui torna nel
   flusso, come sulle pagine con la testata normale. Da 1025 px il margine
   e' 5rem, 80 px a base 16: non copre niente e resta dov'e' (con una base
   piu' piccola di 16 coprirebbe: caso non coperto, vedi il contratto).
   Blocco a parte: la testata fissa, qui sopra, non deve prendere questa
   regola. */
@media (max-width: 1024px) {
  body.mobile-transparent-header #masthead {
    position: relative;
  }
}

/* Le regole che seguono portano `!important` perche' il CSS aggiuntivo del
   Customizer lo usa su questi stessi elementi (titolo del sito e voci del
   menu in #1A1A1A, quasi invisibile su notte) ed e' stampato dopo: fra due
   `!important` vince il selettore piu' specifico, e questi lo sono. */
#masthead .site-branding .site-title,
#masthead .site-branding .site-title a {
  font-family: var(--sp-serif) !important;
  font-weight: 400;
  color: var(--sp-bianco) !important;
}

/* Il logo del vivo ha il testo nero su fondo trasparente: su notte
   sparirebbe. Bianco pieno, come nell'anteprima approvata. */
#masthead .site-branding .custom-logo {
  filter: brightness(0) invert(1);
}

/* Le voci della testata desktop. Il sottomenu a tendina ha fondo chiaro e i
   suoi colori: qui si toccano solo le voci di primo livello. La voce della
   pagina aperta si riconosce da `aria-current`, che WordPress mette sia nei
   menu veri sia in quello di ripiego (le classi invece cambiano). */
#masthead #site-navigation .primary-menu-container > ul > li.menu-item > a {
  color: var(--sp-tufo-chiaro) !important;
}
#masthead #site-navigation .primary-menu-container > ul > li.menu-item > a:hover,
#masthead #site-navigation .primary-menu-container > ul > li.menu-item > a:focus-visible,
#masthead #site-navigation .primary-menu-container > ul > li.menu-item > a[aria-current="page"] {
  color: var(--sp-bianco) !important;
}
/* La voce Contact, che il Customizer fa bottone oro: diventa tufo con lo
   spessore di pietra, notte sopra (8,04). */
#masthead #site-navigation .primary-menu-container > ul > li.menu-item > a[href$="/contact/"] {
  background-color: var(--sp-tufo);
  color: var(--sp-notte) !important;
  box-shadow: 0 4px 0 var(--sp-tufo-scuro);
}
#masthead #site-navigation .primary-menu-container > ul > li.menu-item > a[href$="/contact/"]:hover {
  background-color: var(--sp-tufo-chiaro);
  color: var(--sp-notte) !important;
}

/* Il bottone che apre il menu sul telefono. */
#masthead .mobile-toggle-open-container .menu-toggle-open {
  color: var(--sp-tufo-chiaro);
}
#masthead .mobile-toggle-open-container .menu-toggle-open:hover,
#masthead .mobile-toggle-open-container .menu-toggle-open:focus-visible {
  color: var(--sp-bianco);
}

/* ------------------------------------------------------------------ lastre
   La foto posata su uno spessore di tufo, come le schede del sito italiano.
   Automatica sulle card dell'archivio; `.sp-lastra` la mette a mano su un
   blocco immagine o un gruppo, dall'editor. */
.sp-lastra,
.loop-entry .post-thumbnail {
  display: block; overflow: hidden;
  border-radius: 3px; background: var(--sp-tufo-chiaro);
  transform-origin: 50% 100%;
  box-shadow: 0 7px 0 var(--sp-tufo-scuro), 0 18px 24px -14px rgba(19, 38, 46, .55);
}

/* --------------------------------------------------------------------- moto
   La lastra arriva coricata e si alza mentre entra nello schermo, legata allo
   scorrimento e non a un cronometro. Tre condizioni la tengono in piedi:
   - chi ha chiesto meno movimento non la riceve: e' questo `@media`, e non
     il blocco `reduce` piu' sotto, a garantire che con `reduce` non parta
     nessuna animazione;
   - `@supports`: dove lo scorrimento non e' una linea del tempo (Firefox)
     la lastra e' semplicemente ferma;
   - niente opacita': un testo a meta' dissolvenza non si legge.
   `perspective()` sta dentro il `transform` perche' il genitore di una
   lastra messa a mano non e' noto: senza, l'inclinazione la schiaccia.
   `backwards` e non `both`: finito l'ingresso la lastra torna senza
   `transform`, che altrimenti resterebbe per sempre e farebbe da contenitore
   a cio' che ha dentro (`position: fixed`, impilamento). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sp-lastra,
    .loop-entry .post-thumbnail {
      animation: sp-alzati linear backwards;
      animation-timeline: view();
      animation-range: entry 5% entry 100%;
    }
  }
}

@keyframes sp-alzati {
  from {
    transform: perspective(1100px) rotateX(42deg) translateY(1.5rem);
    box-shadow: 0 2px 0 var(--sp-tufo-scuro), 0 4px 8px -6px rgba(19, 38, 46, .4);
  }
  to {
    transform: perspective(1100px) rotateX(0deg) translateY(0);
  }
}

/* Chi ha chiesto meno movimento non lo riceve da nessuna parte: `*` vale per
   ogni animazione e transizione del sito, anche di Kadence e dei plugin.
   Restano gli stati, sparisce il tragitto. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------ la mappa del Salento (T-005)
   Solo per il markup di `inc/mappa.php` (contratto mappa.md); valori dal sito IT, `site.css` T-007/T-009/T-033.
   Classi, variabili, @property e keyframes col prefisso `sp-`: una @property e' una registrazione globale, e
   un `--px` di un plugin con valore in px diventerebbe invalido. Le @property servono perche' una variabile
   non registrata non si anima: senza, la lastra salta in posizione invece di sollevarsi. */
@property --sp-inclina { syntax: "<angle>"; inherits: true; initial-value: 50deg; }
@property --sp-gira { syntax: "<angle>"; inherits: true; initial-value: -14deg; }
@property --sp-px { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --sp-py { syntax: "<number>"; inherits: true; initial-value: 0; }

.sp-salento { overflow: hidden; }
.sp-palco-mappa { perspective: 1500px; perspective-origin: 50% 30%; padding: 2rem 0 1rem; transition: --sp-px .5s ease-out, --sp-py .5s ease-out; }
.sp-palco-mappa .sp-mappa {
  position: relative; width: 80%; max-width: 28rem; margin: 0 auto; transform-style: preserve-3d;
  transform: rotateX(calc(var(--sp-inclina) - var(--sp-py) * 12deg)) rotateZ(calc(var(--sp-gira) + var(--sp-px) * 14deg));
  animation: sp-solleva 1.8s cubic-bezier(.2, .75, .25, 1) both;
}
@keyframes sp-solleva { from { --sp-inclina: 0deg; --sp-gira: 0deg; } }
.sp-palco-mappa .sp-mare { position: absolute; inset: -6%; border-radius: 4px; background: radial-gradient(120% 90% at 40% 45%, #16627A 0, var(--sp-ionio) 55%, var(--sp-ionio-2) 100%); transform: translateZ(-1px); }
.sp-palco-mappa .sp-mare i { position: absolute; font: italic 1rem var(--sp-serif); color: #BFD8DE; letter-spacing: .2em; white-space: nowrap; }
.sp-palco-mappa .sp-mare i.sp-terra { font-size: .8rem; color: #E4ECE9; letter-spacing: .12em; transform: translateZ(1px); }
.sp-palco-mappa .sp-strato { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.sp-palco-mappa .sp-vicini { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.sp-palco-mappa .sp-spillo { position: absolute; width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(16.5px); }
.sp-palco-mappa .sp-spillo-su {
  position: absolute; left: -1rem; bottom: 0; width: 2rem; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%;
  /* Senza, con piu' spilli Chromium non dipinge le etichette a ovest: coperte dagli strati della lastra (T-005c). */
  transform-style: preserve-3d;
  transform: rotateZ(calc(0deg - var(--sp-gira) - var(--sp-px) * 14deg)) rotateX(calc(0deg - var(--sp-inclina) + var(--sp-py) * 12deg));
}
.sp-palco-mappa .sp-spillo-testa {
  display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #fff; color: var(--sp-ionio);
  font: 700 .85rem/1 system-ui, sans-serif; box-shadow: 0 0 0 2px var(--sp-ionio);
  animation: sp-spunta .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(1.1s + var(--n) * 60ms);
}
.sp-palco-mappa .sp-spillo.sp-ufficio .sp-spillo-testa { background: var(--sp-ionio); color: #fff; box-shadow: 0 0 0 2px #fff; }
.sp-palco-mappa .sp-spillo-gambo { width: 2px; height: var(--h); background: var(--sp-notte); opacity: .7; }
.sp-palco-mappa .sp-spillo-nome {
  position: absolute; bottom: calc(var(--h) + .2rem); white-space: nowrap; font: 600 .8rem system-ui, sans-serif;
  background: var(--sp-notte); color: #fff; padding: .15rem .45rem; border-radius: 3px; opacity: 0; transition: opacity .2s;
}
.sp-palco-mappa .sp-spillo.sp-ufficio .sp-spillo-nome, .sp-palco-mappa .sp-spillo-su:hover .sp-spillo-nome { opacity: 1; }
.sp-palco-mappa .sp-spillo.sp-piccolo .sp-spillo-testa { width: .9rem; height: .9rem; font-size: 0; background: var(--sp-ionio); }
.sp-palco-mappa .sp-ovest .sp-spillo-nome { right: calc(50% + 1.2rem); }
.sp-palco-mappa .sp-est .sp-spillo-nome { left: calc(50% + 1.2rem); }
.sp-palco-mappa .sp-spillo.sp-piccolo .sp-spillo-nome { bottom: calc(var(--h) - .2rem); }
.sp-palco-mappa .sp-piccolo.sp-ovest .sp-spillo-nome { right: calc(50% + .7rem); }
.sp-palco-mappa .sp-piccolo.sp-est .sp-spillo-nome { left: calc(50% + .7rem); }
@keyframes sp-spunta { from { transform: scale(0); } }
/* Lastra e spilli aspettano che la mappa entri nello schermo: la classe la mette lo script della mappa e la
   toglie quando la mappa si vede. Senza script la lastra si solleva al caricamento. */
.sp-palco-mappa.sp-aspetta .sp-mappa, .sp-palco-mappa.sp-aspetta .sp-spillo-testa { animation-play-state: paused; }
/* In stampa nessuno scorre fino alla mappa: senza questa riga uscirebbe piatta e senza spilli. */
@media print { .sp-palco-mappa.sp-aspetta .sp-mappa, .sp-palco-mappa.sp-aspetta .sp-spillo-testa { animation-play-state: running; } }
/* Credito OpenStreetMap accanto alla mappa: la guida OSMF chiede le mappe statiche attribuite «adjacent to
   the map». Largo e centrato come la `.sp-mappa`, resta sotto il suo angolo. #56656B = grigio del sito IT. */
.sp-salento .sp-credito-osm { width: 80%; max-width: 28rem; margin: .2rem auto 0; text-align: right; font-size: .72rem; color: #56656B; }
.sp-salento .sp-credito-osm a { color: inherit; text-decoration: none; }
.sp-salento .sp-credito-osm a:hover, .sp-salento .sp-credito-osm a:focus-visible { text-decoration: underline; }
/* Sul telefono un'etichetta di lato esce dallo schermo (Porto Cesareo, a ovest, misurato a 375 px sul sito
   IT): sopra la testa, centrata, ci sta. */
@media (max-width: 36rem) {
  /* Spazio per lo spillo piu' alto (n = 25) con la lastra inclinata dallo scorrimento: misurato a 320 e 375 px, T-005b. */
  .sp-palco-mappa { padding-top: 6.5rem; }
  .sp-palco-mappa .sp-ovest .sp-spillo-nome, .sp-palco-mappa .sp-piccolo.sp-ovest .sp-spillo-nome { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--h) + 2.1rem); }
  .sp-palco-mappa .sp-piccolo.sp-ovest .sp-spillo-nome { bottom: calc(var(--h) + 1.1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-palco-mappa, .sp-palco-mappa .sp-mappa, .sp-palco-mappa .sp-spillo-testa, .sp-palco-mappa .sp-spillo-nome { animation: none; transition: none; }
}

/* Il modo mini (scheda): ferma, piu' piccola, etichette sempre visibili e tutte a destra dello spillo. I
   selettori sono piu' pesanti e stanno dopo: devono vincere sulla regola del telefono qui sopra. */
.sp-palco-mappa.sp-mini { max-width: 26rem; margin: 1rem 0 0; padding: 1.5rem 0; overflow: hidden; }
/* 65%: il mare (inset -6%, girato e inclinato col mouse) resta dentro il palco, che lo taglia; al 70% esce di 6 px (T-005c). */
.sp-palco-mappa.sp-mini .sp-mappa { width: 65%; max-width: none; --sp-gira: -8deg; }
.sp-palco-mappa .sp-mappa.sp-quieta, .sp-palco-mappa .sp-mappa.sp-quieta .sp-spillo-testa { animation: none; }
.sp-palco-mappa.sp-mini .sp-spillo.sp-piccolo .sp-spillo-nome { left: calc(50% + .7rem); right: auto; transform: none; bottom: calc(var(--h) - .2rem); }
.sp-palco-mappa .sp-spillo.sp-fisso .sp-spillo-nome { opacity: 1; }
.sp-palco-mappa .sp-spillo.sp-qui .sp-spillo-testa { background: var(--sp-tufo); color: var(--sp-notte); box-shadow: 0 0 0 2px var(--sp-notte); }
/* 82,5% = bordo destro della mappa centrata al 65% nel palco largo al massimo 26rem. */
.sp-salento-mini .sp-credito-osm { width: 82.5%; max-width: 21.45rem; margin: 0 0 1.5rem; }