/* incrediblefox.com - menu "progetti / categorie" (18/10/2026).
   Lavora con menu-progetti-categorie.js, che aggiunge le classi m2-top, m2-cat-li, m2-open.
   Le voci vengono dal menu Joomla "proj-menu-2"; le classi m2-progetti, m2-categorie, m2-cat
   sono impostate nelle voci (Classe CSS del link). */

/* ---------- Computer (Maximenu verticale) ---------- */
/* I sottomenu non si aprono più di lato al passaggio del mouse: stanno sotto la voce e si aprono al clic */
.m2-top > .floatck,
.m2-cat-li > .floatck {
  display: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.m2-top.m2-open > .floatck,
.m2-cat-li.m2-open > .floatck {
  display: block !important;
}
.m2-top .maxidrop-main,
.m2-top div.maximenuck2,
.m2-top ul.maximenuck2 {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* rientro delle voci: 12 px sotto progetti/categorie, 24 px dentro una categoria
   (html body serve a superare le regole di Maximenu legate all'id del modulo) */
html body .m2-top li.level2 > a,
html body .m2-top li.level2 > span {
  padding-left: 12px !important;
}
html body .m2-top li.level3 > a {
  padding-left: 24px !important;
}
.m2-top li.maximenuck {
  float: none !important;
  display: block !important;
  width: auto !important;
}
/* niente frecce di Maximenu sulle voci che si aprono */
.m2-top > span::after,
.m2-top > span::before,
.m2-cat-li > span::after {
  display: none !important;
  content: none !important;
}

/* ---------- Telefono (Mobile Menu CK, a fisarmonica) ---------- */
.m2-mtop > .mobilemenuck-submenu,
.m2-mcat > .mobilemenuck-submenu {
  display: none !important;
}
.m2-mtop.m2-open > .mobilemenuck-submenu,
.m2-mcat.m2-open > .mobilemenuck-submenu {
  display: block !important;
}
.m2-mtop > .menuck > .mobilemenuck-togglericon,
.m2-mcat > .menuck > .mobilemenuck-togglericon {
  display: none !important;
}
.mobilemenuck .m2-progetti,
.mobilemenuck .m2-categorie,
.mobilemenuck .m2-cat {
  color: rgb(64, 64, 64) !important;
  font-size: 1rem !important;
  line-height: 1.6rem !important;
}

/* ---------- Aspetto comune ---------- */
.m2-progetti,
.m2-categorie,
.m2-cat {
  cursor: pointer;
}
/* riga con "progetti" e "categorie" affiancati (creata dal JS); le intestazioni originali si nascondono */
.m2-top > .m2-progetti,
.m2-top > .m2-categorie,
.m2-mtop > .menuck {
  display: none !important;
}
.m2-switch {
  display: block !important;
  float: none !important;
  margin-top: 0.5rem;
}
html body .m2-sw-btn {
  display: inline-block;
  cursor: pointer;
  margin: 0 16px 0 0;
  padding: 0;
  border-bottom: 1px solid transparent;
}
/* nel menu del telefono le voci hanno 35 px di rientro e 4 px di margine (.menuck) */
.mobilemenuck .m2-switch {
  padding-left: 35px;
  margin-left: 4px;
}
.mobilemenuck .m2-sw-btn {
  color: rgb(64, 64, 64) !important;
  font-size: 1rem !important;
  line-height: 1.6rem !important;
}
/* quella aperta è sottolineata in azzurro, come il passaggio del mouse sulle voci */
html body .m2-sw-btn.m2-on {
  border-bottom-color: #00bfff;
}
/* categorie: + chiusa, − aperta */
.m2-cat .titreck-title::before {
  content: "+ ";
}
.m2-cat-li.m2-open > .m2-cat .titreck-title::before,
.m2-mcat.m2-open > .menuck > .m2-cat .titreck-title::before {
  content: "\2212  ";
}

/* ---------- Telefono: al tocco la parola diventa azzurra, come col mouse sul computer (19/10/2026) ---------- */
/* niente sottolineatura al tocco */
html body .mobilemenuck .mobilemenuck-item a:hover,
html body .mobilemenuck .mobilemenuck-item a:active,
html body .mobilemenuck .mobilemenuck-item a:focus,
html body .mobilemenuck .mobilemenuck-item .m2-touch,
html body .mobilemenuck .m2-sw-btn:hover,
html body .mobilemenuck .m2-sw-btn.m2-touch,
html body .mobilemenuck .m2-cat:hover,
html body .mobilemenuck .m2-cat.m2-touch {
  text-decoration-line: none !important;
}
/* parola azzurra (m2-touch è aggiunta dal JS mentre il dito è sulla voce) */
html body .mobilemenuck a.proj:hover,
html body .mobilemenuck a.proj:active,
html body .mobilemenuck a.proj.m2-touch,
html body .mobilemenuck a.voce-menu.m2-touch:not(.voce-nome):not(.voce-slogan),
html body .mobilemenuck .m2-sw-btn.m2-touch,
html body .mobilemenuck .m2-cat.m2-touch {
  color: #00bfff !important;
}
/* sul telefono il cambio di colore è più rapido (sul computer resta la dissolvenza di 0,4 s) */
html body .mobilemenuck a,
html body .mobilemenuck .m2-sw-btn,
html body .mobilemenuck .m2-cat {
  transition: color 0.12s !important;
}

/* ---------- Fondo pagina dei progetti: "< precedente" e "successivo >" (19/10/2026) ---------- */
.m2-pagenav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  max-width: 1140px;
  margin: 3rem auto 5.5rem;   /* spazio sotto: icone social e copyright sono fissi in basso */
  padding: 0 15px;
  font-size: 10pt;
  letter-spacing: 0.049rem;
}
html body .m2-pagenav a {
  color: rgb(64, 64, 64);
  text-decoration: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  transition: color 0.4s;
}
html body .m2-pagenav a:hover,
html body .m2-pagenav a:focus,
html body .m2-pagenav a.m2-touch {
  color: #00bfff !important;
}
.m2-pagenav .m2-next {
  margin-left: auto;
  text-align: right;
}
.m2-pagenav .m2-arr {
  font-family: Arial, Helvetica, sans-serif;
}
.m2-pagenav .m2-prev .m2-arr { margin-right: 0.5em; }
.m2-pagenav .m2-next .m2-arr { margin-left: 0.5em; }
@media (max-width: 640px) {
  .m2-pagenav { font-size: 0.95rem; margin-top: 2.5rem; }
  html body .m2-pagenav a { transition: color 0.12s; }
}

/* ---------- Freccia "torna su" di Astroid: freccetta sottile > girata in su, senza cerchio ---------- */
html body #astroid-backtotop {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 10px !important;
  bottom: 70px !important;     /* prima 20 px: toccava il copyright */
}
html body #astroid-backtotop i {
  display: none !important;
}
html body #astroid-backtotop::before {
  content: ">";
  display: inline-block;
  transform: rotate(-90deg);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  line-height: 1;
  color: #00bfff;
}

/* Abito Sonoro: le sezioni WEARABLE / COMMUNITY / CANVAS vengono caricate dentro uno spaziatore
   RSPageBuilder alto 50 px; senza altezza automatica il resto della pagina (e la nav in fondo)
   finiva sopra le sezioni. (19/10/2026) */
html body .abito-content {
  height: auto !important;
}

/* Abito for fit / FIT//ALCHIMIA: le fasce con sfondo (immagine gialla e grigio chiaro) partivano
   sotto il menu fisso a sinistra e ne coprivano le voci. Sul computer lo sfondo parte dalla colonna
   dei contenuti: si nasconde la prima colonna (col-md-2, vuota) che sta sotto il menu. (19/10/2026) */
@media (min-width: 768px) {
  body.abito-for-fit-alias .page-content > section[style*="background-image"],
  body.abito-for-fit-alias .page-content > section[style*="background-color"] {
    clip-path: inset(0 0 0 16.6667%);
  }
}

/* ---------- Caroselli di foto (RSPageBuilder, Bootstrap 5) (19/10/2026) ----------
   Le frecce usavano un'icona Font Awesome 4 ("fa fa-chevron-…") che il sito non carica più:
   erano invisibili. Ora "<" e ">" sottili e azzurri, come le altre frecce del sito.
   Lo scorrimento automatico è tolto dal JS. */
html body .carousel .carousel-control-prev,
html body .carousel .carousel-control-next {
  opacity: 1 !important;
  width: 56px;
  background: none !important;
}
html body .carousel .carousel-control-prev > i,
html body .carousel .carousel-control-next > i,
html body .carousel .carousel-control-prev-icon,
html body .carousel .carousel-control-next-icon {
  display: none !important;
}
html body .carousel .carousel-control-prev::before,
html body .carousel .carousel-control-next::before {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  line-height: 1;
  color: #00bfff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
  transition: color 0.2s;
}
html body .carousel .carousel-control-prev::before { content: "<"; }
html body .carousel .carousel-control-next::before { content: ">"; }
html body .carousel .carousel-control-prev:hover::before,
html body .carousel .carousel-control-next:hover::before,
html body .carousel .carousel-control-prev:focus::before,
html body .carousel .carousel-control-next:focus::before {
  color: #ffffff;
}

/* ---------- Telefono: zoom con due dita anche sulle foto dei caroselli (19/10/2026) ----------
   Bootstrap mette "touch-action: pan-y" sui caroselli per riconoscere il trascinamento:
   su Android blocca lo zoom. Aggiungiamo pinch-zoom. */
html body .carousel,
html body .carousel.pointer-event {
  touch-action: pan-y pinch-zoom !important;
}

/* ---------- Telefono: tocca una foto per vederla a tutto schermo (menu-progetti-categorie.js) ---------- */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  main.astroid-component-area img { cursor: zoom-in; }
}
.m2-lb {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: none;
  background: rgba(0, 0, 0, 0.97);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.m2-lb.m2-lb-on { display: block; }
.m2-lb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.2s ease-out;
  will-change: transform;
}
.m2-lb.m2-lb-drag .m2-lb-img { transition: none; }
html body .m2-lb button {
  position: absolute;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 18px 12px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  cursor: pointer;
}
html body .m2-lb .m2-lb-close { top: 0; right: 4px; color: #ffffff; font-size: 38px; }
html body .m2-lb .m2-lb-prev,
html body .m2-lb .m2-lb-next {
  top: 50%;
  transform: translateY(-50%);
  color: #00bfff;
  font-size: 46px;
  text-shadow: 0 0 3px #000, 0 0 8px rgba(0, 0, 0, 0.9);
}
html body .m2-lb .m2-lb-prev { left: 2px; }
html body .m2-lb .m2-lb-next { right: 2px; }
.m2-lb-count {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: #cccccc;
  font: 13px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
}
html.m2-lb-noscroll,
html.m2-lb-noscroll body { overflow: hidden !important; }

/* Caroselli: le frecce stanno SOTTO la foto, al centro, non sopra l'immagine (richiesta del 19/10/2026) */
html body .carousel {
  margin-bottom: 48px;   /* spazio per le frecce: il carosello ha un altezza fissa */
}
html body .carousel .carousel-control-prev,
html body .carousel .carousel-control-next {
  top: auto !important;
  bottom: -48px !important;
  transform: none !important;   /* RSPageBuilder le centrava con translateY(-50%) */
  width: 44px !important;
  height: 44px !important;
}
html body .carousel .carousel-control-prev { left: calc(50% - 52px) !important; right: auto !important; }
html body .carousel .carousel-control-next { right: calc(50% - 52px) !important; left: auto !important; }
html body .carousel .carousel-control-prev::before,
html body .carousel .carousel-control-next::before {
  font-size: 30px;
  text-shadow: none;
}
html body .carousel .carousel-control-prev:hover::before,
html body .carousel .carousel-control-next:hover::before,
html body .carousel .carousel-control-prev:focus::before,
html body .carousel .carousel-control-next:focus::before {
  color: #404040;
}

/* Telefono: immagini RSPageBuilder con misura fissa nella pagina (es. Unlivable City, 600x600 px)
   uscivano dallo schermo. Al massimo larghe quanto la colonna, proporzioni mantenute. (19/10/2026) */
@media (max-width: 767px) {
  html body main.astroid-component-area .rspbld-image img {
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Didascalie con il nome del file (es. 2016_baule_d_airs_festival_sketch_…): parole lunghissime
   senza spazi che sul telefono allargavano la pagina (Media 654 px, Baule d'airs 565, Unlivable City 518).
   Vanno a capo solo quando non ci stanno. (19/10/2026) */
html body main.astroid-component-area p,
html body main.astroid-component-area li,
html body main.astroid-component-area figcaption {
  overflow-wrap: anywhere;
}

/* Caroselli: tutte le foto alla stessa altezza, intere (niente tagli), così il carosello non salta
   e le frecce sotto restano ferme. 400 px sul computer, 240 px sul telefono. (19/10/2026) */
html body main.astroid-component-area .carousel .carousel-item img,
html body .carousel .carousel-item img {
  width: 100% !important;
  height: 400px !important;
  max-height: none !important;
  object-fit: contain;
}
@media (max-width: 767px) {
  html body main.astroid-component-area .carousel .carousel-item img,
  html body .carousel .carousel-item img { height: 240px !important; }
}