/* Le poche regole che servono alle pagine ripulite in automatico e che nel sito
   vecchio arrivavano dai font delle icone. Il resto lo scrive `ripulisci.py`. */

/* Un'icona e' un segno grande quanto il testo che la circonda. Solo dove
   l'originale la metteva dentro un cerchietto (riquadri dei valori, numeri) si
   aggiunge il cerchio: prima era il contrario, e nell'intestazione «Login» e
   «Register» uscivano come due palloni vuoti. */
.icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  /* ⛔ il ripiego va QUI, non su ::before: messo li' copriva il disegno vero.
     Se un disegno manca, la maschera vuota lascia il posto pulito invece di un
     quadratino pieno. */
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

.icona::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--icona) center / contain no-repeat;
  mask: var(--icona) center / contain no-repeat;
}

/* --- il cerchietto, solo dove ci vuole --- */
.kc-feature-boxes .icona,
.counters .icona {
  flex: none;
  width: 70px;
  height: 70px;
  border: 1px solid #008e96;
  border-radius: 50%;
  color: #008e96;
  transition: all .3s ease;
}

.kc-feature-boxes .icona::before,
.counters .icona::before { width: 24px; height: 24px; }

.kc-feature-boxes .icona { background: #fff; }
.kc-feature-boxes:hover .icona { background: #008e96; color: #fff; }

/* ---- fisarmonica: <details>, aperta e chiusa dal browser, zero programma ---- */

.fisarmonica { margin-bottom: 30px; }

.voce {
  border: 1px solid #e5e9ec;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #fff;
}

.voce > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  color: #464646;
  list-style: none;
}

.voce > summary::-webkit-details-marker { display: none; }

/* la freccetta a destra, che gira quando si apre */
.voce > summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid #8b98a5;
  border-bottom: 2px solid #8b98a5;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.voce[open] > summary::after { transform: rotate(-135deg); }
.voce > summary:hover { color: #008e96; }

/* dentro la fisarmonica il cerchietto dell'icona e' piccolo e senza bordo */
.voce > summary .icona {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
}

/* ⛔ 13/08/2026 — «i tab Su di me e Formazione hanno un problema visivo».
   Misurato: il riquadro bianco era alto 69px mentre il testo dentro ne occupava
   214, cioe' il testo USCIVA dal riquadro e la riga di bordo gli passava in
   mezzo. Causa: dentro c'e' un blocco del costruttore con `float:left`
   (`div.kc_text_block`), e un riquadro normale non si allarga per contenere una
   cosa che galleggia. `flow-root` e' il modo moderno di dire «questo riquadro
   contiene i suoi figli», senza i trucchi del clearfix.
   Prova: stesso riquadro, 69px prima -> 283px dopo. */
.voce-corpo {
  display: flow-root;
  padding: 0 18px 14px;
}
.voce-corpo > *:last-child { margin-bottom: 0; }

/* Sempre il 13/08: dentro le due voci convivevano TRE caratteri diversi —
   Poppins 14px (il nostro), `ui-sans-serif` 16px e Roboto 15px, incollati con
   il testo copiato da ChatGPT e da un altro sito dentro gli attributi `style`.
   Non e' contenuto: e' impalcatura di un altro sito. Il carattere e la misura
   tornano quelli del sito; grassetti, elenchi e testo restano intatti.
   Serve `!important` perche' quelle scritte stanno nell'attributo `style` del
   tag, e li' nessuna regola normale arriva. */
.voce-corpo *:not(a):not(img) {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.voce-corpo { font-size: 15px; line-height: 1.75; color: #515151; }

/* ---- scorrevole e giostra: una pista che scorre, due frecce ---- */

.scorrevole, .giostra { position: relative; }

.diapositive, .schede {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.diapositive::-webkit-scrollbar,
.schede::-webkit-scrollbar { display: none; }

.diapositiva,
.schede > .scheda {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
}

/* la giostra delle recensioni: una scheda per volta, spazio per le frecce */
.giostra { padding-inline: 70px; }
.schede > .scheda { padding: 4px 10px 24px; }

.diapositiva img {
  display: block;
  width: 100%;
  height: clamp(320px, 46vw, 660px);
  object-fit: cover;
}

.diapositiva figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  background: rgba(157, 211, 207, .6);
  color: #0c0c0c;
}

.diapositiva h2 {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.1;
  font-weight: 900;
  color: inherit;
}

.diapositiva p { margin: 0; font-weight: 700; letter-spacing: 1px; }

.bottone {
  display: inline-block;
  padding: 10px 26px;
  background: #0c0c0c;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}

.bottone:hover { background: #008e96; color: #fff; }

/* le frecce: quelle che Vitaliano ha chiesto per le recensioni */
.freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid #008e96;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  cursor: pointer;
}

.freccia::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid #008e96;
  border-left: 2px solid #008e96;
}

.freccia-sx { left: 14px; }
.freccia-dx { right: 14px; }
.freccia-sx::before { transform: translateX(2px) rotate(-45deg); }
.freccia-dx::before { transform: translateX(-2px) rotate(135deg); }
.freccia:hover { background: #008e96; }
.freccia:hover::before { border-color: #fff; }

/* ---- il pie' di pagina ----
   ⛔ Dentro e' tutto "flottante" (il modo con cui il costruttore metteva le
   colonne in fila): senza questo, il contenitore non prende altezza e il pie'
   di pagina sparisce del tutto pur essendo scritto nella pagina. */
.apus-footer,
.footer-builder-wrapper { display: flow-root; }

/* ⛔ Anche il corpo della pagina va "chiuso": le sezioni del costruttore sono
   flottanti, e senza questo il contenitore resta alto zero — il pie' di pagina
   finiva disegnato SOTTO al contenuto, invisibile. */
.corpo-pagina { display: flow-root; }

/* ---- la riga legale della home ----
   La home e' una pagina-bivio: due immagini, due pulsanti, niente intestazione e
   niente pie' di pagina. Era pero' l'UNICA delle 19 pagine senza il collegamento
   alla privacy (misurato dal vivo il 23/08/2026, pagina per pagina). Non si aggiunge
   un pie' di pagina intero — cambierebbe la pagina — ma la sola riga obbligatoria.
   I colori sono quelli che il sito usa gia': #002b46 il testo, #008e96 l'accento.
   Il riempimento sui collegamenti serve al dito: un bersaglio da ~42px. */
.pie-legale-home {
  margin: 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #002b46;
  background: #fff;
}

.pie-legale-home a {
  display: inline-block;
  padding: 10px 8px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pie-legale-home a:hover { color: #008e96; }
.pie-legale-home a:focus-visible { outline: 2px solid #008e96; outline-offset: 2px; }

/* ==================================================================
   Correzioni chieste da Vitaliano il 10/08/2026
   ================================================================== */

/* E7 — «richiedi un consulto»: era appiccicato al bordo dello schermo */
.kc-call-to-action {
  padding: 46px clamp(20px, 5vw, 60px);
}

.kc-call-to-action h2 { margin: 6px 0 14px; }
.kc-call-to-action .sub-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.kc-call-to-action .kc-cta-text { margin-bottom: 22px; }

/* E8 — le ultime dal blog: piu' aria, titoli piu' leggibili */
.widget-blog .entry-content { padding: 18px 0; }
.widget-blog .entry-title { font-size: 17px; line-height: 1.4; margin: 0 0 6px; }
.widget-blog .entry-title a { color: #002b46; }
.widget-blog .entry-title a:hover { color: #008e96; }
.widget-blog article + article { border-top: 1px solid #eef1f4; margin-top: 6px; }

/* E3 — il modulo dei contatti: campi veri, non righe nude */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
  width: 100%;
  max-width: 520px;
  padding: 12px 14px;
  border: 1px solid #d6dee6;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}

form textarea { min-height: 160px; resize: vertical; }

form input:focus,
form textarea:focus {
  outline: none;
  border-color: #008e96;
  box-shadow: 0 0 0 3px rgba(0, 142, 150, .15);
}

form label { display: block; margin-bottom: 6px; font-weight: 600; color: #464646; }
form p { margin-bottom: 18px; }

form input[type="submit"],
form button[type="submit"] {
  padding: 13px 34px;
  border: 0;
  border-radius: 6px;
  background: #008e96;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .2s ease;
}

form input[type="submit"]:hover,
form button[type="submit"]:hover { background: #00707a; }

/* E6 — lo scorrevole: lo scorrimento morbido lo fa il CSS, cosi' non litiga
   con l'aggancio delle diapositive; e la scritta entra con una dissolvenza */
.diapositive, .schede { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .diapositive, .schede { scroll-behavior: auto; }
}

.diapositiva figcaption > * { animation: entra .7s ease both; }
.diapositiva figcaption > *:nth-child(2) { animation-delay: .1s; }
.diapositiva figcaption > *:nth-child(3) { animation-delay: .2s; }

@keyframes entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* E9 — telefono e tavoletta: le colonne del costruttore restavano strette */
@media (max-width: 999px) {
  .kc-container, .container { max-width: 100%; padding-inline: 18px; }
  [class*="kc_col-"] { width: 100% !important; float: none !important; }
  .kc_row_inner { margin-inline: 0 !important; width: 100% !important; }
  .kc-call-to-action { padding: 34px 20px; }
  .giostra { padding-inline: 0; }
  .freccia { width: 38px; height: 38px; }
  .freccia-sx { left: -4px; }
  .freccia-dx { right: -4px; }
}

/* le schede dei professionisti: due per riga sul tavoletta, una sul telefono */
@media (max-width: 999px) {
  .kc_col-of-5 { width: 50% !important; float: left !important; }
  /* le colonne che il costruttore lascia vuote per centrare: sul computer
     servono, qui sono due buchi larghi mezzo schermo che sfasano le file */
  .colonna-vuota { display: none !important; }
}

/* la fila dei professionisti si centra solo sul computer: sotto i 1000px le
   colonne vanno in fila da sole e il centrato le stringerebbe (11/08/2026) */
@media (min-width: 1000px) {
  [data-professionisti] { display: flex; justify-content: center; }
}

@media (max-width: 600px) {
  .kc_col-of-5 { width: 100% !important; }
  .diapositiva h2 { font-size: 34px; }
  .diapositiva figcaption { gap: 8px; padding: 16px; }
}

/* il pannello del menu sul telefono: chiuso di suo, si apre col tasto MENU */
#apus-mobile-menu {
  position: fixed;
  inset: 0 30% 0 0;
  z-index: 60;
  overflow-y: auto;
  padding: 22px 18px;
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  transform: translateX(-102%);
  transition: transform .25s ease;
}

/* ⛔ 11/08/2026: non bastava rimettere a posto lo spostamento. Il foglio del tema
   nasconde il pannello in TRE modi insieme (`.apus-offcanvas`: visibility hidden,
   opacity 0 e translateX -100%), e qui se ne annullava uno solo: il tasto MENU
   accendeva la classe e non si vedeva niente. Provato con la fotografia: prima
   della correzione la pagina col menu «aperto» era identica byte per byte a
   quella col menu chiuso. */
body.menu-aperto #apus-mobile-menu {
  transform: none;
  visibility: visible;
  opacity: 1;
}

/* ⛔ 11/08/2026: dentro il menu del telefono la voce SERVIZI aveva una freccia
   che non apriva niente. Il tema teneva il sottomenu con `display:none` e a
   scoprirlo ci pensava un programma che qui non c'e' piu': dal telefono i sette
   servizi — cioe' il motivo per cui esiste il sito — **non si raggiungevano**.
   La voce «Servizi» per giunta porta a `#`, cioe' a nessuna pagina.
   Rimedio senza programma: il sottomenu si vede sempre, rientrato, e la freccia
   che non fa niente sparisce. */
#main-mobile-menu .has-submenu > .sub-menu { display: block; }
#main-mobile-menu .has-submenu > .icon-toggle { display: none; }
#main-mobile-menu .has-submenu > .sub-menu > li > a { padding-left: 34px; }

@media (min-width: 1000px) {
  #apus-mobile-menu, #apus-header-mobile { display: none; }
}

/* La pagina di SCELTA (quella che si vede scrivendo sinapsisalute.it).
   Non ha intestazione ne' pie' di pagina (richiesta di Vitaliano del 10/08), quindi la
   sua unica sezione era alta quanto i due riquadri: si vedeva una striscia di sfondo e i
   pulsanti restavano appiccicati in alto (segnalato l'11/08 guardando il sito di prova).
   Qui la sezione riempie lo schermo e tiene i riquadri al centro, come nell'originale. */
.s-518523 {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.s-518523 > .kc-row-container { width: 100%; }

/* ⛔ La riga legale non deve rubare lo schermo alla sezione ne' finire sotto la piega
   (misurato il 23/08/2026 a 1440x900: con la sezione a 100vh la riga cadeva a y=900,
   invisibile senza scorrere). Qui il corpo della pagina diventa una colonna alta quanto
   lo schermo: la sezione si prende quello che avanza, la riga si siede in fondo, e i due
   riquadri restano centrati come li vuole Vitaliano. `:has` isola la sola home; dove non
   funziona si torna a com'era prima, con la riga sotto la piega: peggio, non rotto. */
.corpo-pagina:has(> .pie-legale-home) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.corpo-pagina:has(> .pie-legale-home) > .s-518523 {
  min-height: 0;
  flex: 1;
}

/* la trappola per i robot del modulo contatti: un umano non la vede mai.
   Fuori schermo e non display:none, cosi' i programmi automatici la trovano
   e la compilano — smascherandosi. */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* la Galleria: le stesse foto della home, in griglia */
.galleria-foto {
  display: grid;
  /* 260px sul computer; sul telefono il 47% della larghezza, cosi' restano SEMPRE
     due foto per riga invece di una sola (scelta di Vitaliano, 11/08/2026). */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 47%), 1fr));
  gap: 14px;
  max-width: 1170px;
  margin: 0 auto 60px;
  padding-inline: 15px;
}

.galleria-foto .foto {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 3 / 2;
  background: #f2f5f7;
}

.galleria-foto .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.galleria-foto .foto:hover img { transform: scale(1.05); }

.galleria-foto .foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 142, 150, .35);
  opacity: 0;
  transition: opacity .3s ease;
}

.galleria-foto .foto:hover::after { opacity: 1; }

/* la lente: la foto grande sopra la pagina */
.lente {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(8, 20, 26, .92);
}

body.lente-aperta { overflow: hidden; }
body.lente-aperta .lente { display: flex; }

.lente img {
  max-width: min(1100px, 88vw);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.lente button {
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  flex: none;
}

.lente-sx, .lente-dx { width: 52px; height: 52px; position: relative; }

.lente-sx::before, .lente-dx::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

.lente-sx::before { transform: translateX(3px) rotate(-45deg); }
.lente-dx::before { transform: translateX(-3px) rotate(135deg); }

.lente-chiudi {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 46px;
  height: 46px;
  font-size: 26px;
  line-height: 1;
}

.lente button:hover { background: rgba(255, 255, 255, .25); }

/* chi gira col tabulatore deve VEDERE dove si trova */
.lente button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* con una foto sola le frecce non servono: via, e fuori anche dal tabulatore */
.lente-sola .lente-sx, .lente-sola .lente-dx { display: none; }

/* il dito deve poter strisciare orizzontalmente senza che il browser lo
   interpreti come uno scorrimento della pagina sotto */
.lente { touch-action: pan-y; }

@media (max-width: 700px) {
  .lente { padding: 12px; gap: 6px; }
  .lente-sx, .lente-dx { width: 40px; height: 40px; }
}

/* ==================================================================
   Il ritratto nella scheda del professionista (12/08/2026)
   Nel sito vivo la colonna accanto al nome nasce VUOTA: un buco largo
   un terzo, e sembra che manchi qualcosa. Ci va la foto che il sito ha
   gia' nella home e in «I professionisti» (la mette `ripulisci.py`).

   Le cinque foto arrivano da posti diversi (studio, ritaglio su bianco,
   parete grigia, stanza, locale): il quadrato uguale per tutte e il filo
   grigio le fanno leggere come una serie sola. Il filo serve anche a
   dare un bordo al ritaglio su fondo bianco, che se no galleggia.
   Nessun colore nuovo: `#e5e9ec` e' gia' del sito.
   ================================================================== */
.detail-lecturer .header-info .ritratto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;          /* misura dichiarata: la pagina non balla */
  object-fit: cover;
  object-position: 50% 0;       /* i visi stanno in alto in tutte e cinque */
  border: 1px solid #e5e9ec;
  border-radius: 6px;
}

/* Sul telefono la colonna diventa larga quanto lo schermo: un quadrato da
   390px spingerebbe nome e «Prenota ora» fuori dalla prima schermata. */
@media (max-width: 999px) {
  .detail-lecturer .header-info .ritratto {
    max-width: 168px;
    margin-bottom: 16px;
  }
}

/* ==================================================================
   13/08/2026 — «nelle schede dottore i testi sono appiccicati al bordo».
   Misurato a 390px quanto dista il testo dal bordo dello schermo:
       Chi siamo (pagina che Vitaliano ha approvato) ... 33px
       Osteopatia/Kinesiologia ....................... 55px
       schede dottore ................................ 18px   <- le piu' strette
   Non e' un guasto della ripulitura: anche il sito vivo sta a 15px. E' che
   la scheda e' l'unica pagina senza il rientro interno del costruttore.
   Causa esatta: `.row` porta -15px di margine e la colonna +15px di rientro,
   e i due si annullano; resta solo il rientro del contenitore.
   Rimedio: al telefono e alla tavoletta il `.row` non tira piu' indietro, e il
   rientro della colonna si vede. 18 + 15 = 33px, esattamente come Chi siamo.
   ================================================================== */
@media (max-width: 991px) {
  .detail-lecturer > .row { margin-left: 0; margin-right: 0; }
}