/* Arcobaleno Creativo - micro-rifiniture VG sopra il clone Squarespace.
   Nessuna regola cambia colori, font, dimensioni, crop o struttura:
   solo transizioni, reveal allo scroll e stati di focus.
   Tutto il movimento e' confinato sotto html.vg-anim, che lo script
   aggiunge solo quando l'utente non ha chiesto riduzione del movimento. */

:root {
  --vg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vg-reveal-duration: 560ms;
  --vg-hover-duration: 240ms;
}

/* ---------- Reveal allo scroll ---------- */

html.vg-anim .fe-block:not(.vg-in),
html.vg-anim .gallery-strips-item:not(.vg-in) {
  opacity: 0;
  transform: translateY(14px);
}

html.vg-anim .fe-block,
html.vg-anim .gallery-strips-item {
  transition:
    opacity var(--vg-reveal-duration) var(--vg-ease),
    transform var(--vg-reveal-duration) var(--vg-ease);
}

html.vg-anim .fe-block.vg-in,
html.vg-anim .gallery-strips-item.vg-in {
  opacity: 1;
  transform: none;
}

/* ---------- Pulsanti ---------- */

/* Il tema dichiara "transition: .1s opacity" sui pulsanti con una regola
   piu' specifica di qualunque selettore ragionevole scrivibile qui.
   Senza questo override il micro-movimento risulterebbe a scatto: si
   aggiunge transform mantenendo la transizione di opacita' originale. */
.sqs-block-button-element {
  transition:
    transform var(--vg-hover-duration) var(--vg-ease),
    opacity 0.1s linear !important;
}

@media (hover: hover) and (pointer: fine) {
  html.vg-anim .sqs-block-button-element:hover {
    transform: translateY(-2px);
  }
}

html.vg-anim .sqs-block-button-element:active {
  transform: translateY(0);
}

/* ---------- Immagini cliccabili della gallery ---------- */

html.vg-anim .gallery-strips-item-wrapper {
  overflow: hidden;
}

html.vg-anim .gallery-strips-lightbox-link img,
html.vg-anim .sqs-block-image a img {
  transition: transform 500ms var(--vg-ease);
}

@media (hover: hover) and (pointer: fine) {
  html.vg-anim .gallery-strips-lightbox-link:hover img,
  html.vg-anim .sqs-block-image a:hover img {
    transform: scale(1.02);
  }
}

/* ---------- Menu: solo ammorbidimento degli stati gia' esistenti ---------- */

.header-nav-item a,
.header-nav-folder-item a,
.header-menu-nav-item a {
  transition:
    color var(--vg-hover-duration) var(--vg-ease),
    opacity var(--vg-hover-duration) var(--vg-ease);
}

html.vg-anim .header-nav-folder-content {
  transition:
    opacity var(--vg-hover-duration) var(--vg-ease),
    transform var(--vg-hover-duration) var(--vg-ease);
}

/* ---------- Focus visibile per navigazione da tastiera ---------- */

a:focus-visible,
button:focus-visible,
.sqs-block-button-element:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- CTA WhatsApp che sostituisce il form ---------- */

/* La specificita' serve a superare la regola Squarespace che allinea
   i blocchi pulsante in coda alla propria area di griglia. */
/* Il blocco Squarespace e' un flex in colonna allineato a sinistra da
   regole del tema che non possiamo riscrivere senza toccare il loro CSS.
   Qui si forza il solo centraggio della CTA, senza cambiare colori,
   dimensioni o spaziature: l'!important e' limitato a queste due regole. */
.fluid-engine .vg-wa.sqs-block.button-block {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  width: 100%;
}

.fluid-engine .vg-wa .sqs-block-content {
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Il pulsante WhatsApp riusa le classi pulsante del tema Squarespace,
   quindi eredita font, colore, radius e dimensioni originali del sito.
   Qui si garantisce solo un'area di tocco adeguata su mobile. */
.vg-wa .sqs-block-button-element {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- FAQ: apertura piu' morbida ---------- */

/* Lo script Squarespace alterna display none/block sul pannello, quindi non
   esiste uno stato intermedio da animare con una transizione. Un'animazione
   sul contenuto interno parte da sola a ogni riapertura e non tocca l'altezza,
   cosi' il salto di layout resta identico a prima. */
html.vg-anim .accordion-item__dropdown .accordion-item__description {
  animation: vg-accordion-open 320ms var(--vg-ease) both;
}

@keyframes vg-accordion-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Ammorbidisce la trasformazione piu'/meno gia' prevista dal tema. */
.accordion-icon-container .plus__vertical-line,
.accordion-icon-container .plus__horizontal-line {
  transition:
    transform 300ms var(--vg-ease),
    opacity 300ms var(--vg-ease);
}

.accordion-item__click-target .accordion-item__title {
  transition: opacity var(--vg-hover-duration) var(--vg-ease);
}

@media (hover: hover) and (pointer: fine) {
  html.vg-anim .accordion-item__click-target:hover .accordion-item__title {
    opacity: 0.72;
  }
}

/* ---------- Pagina Eventi ---------- */

/* I nove eventi diventano cliccabili senza cambiare aspetto: il colore e la
   decorazione restano quelli del testo, cambia solo la risposta al passaggio
   del mouse e l'area di tocco, che prima non esisteva affatto. */
/* Il selettore e' volutamente specifico: il tema sottolinea ogni link dentro
   ai blocchi di testo, e qui il link avvolge titolo e descrizione. */
.sqs-html-content a.vg-evento,
a.vg-evento {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--vg-hover-duration) var(--vg-ease);
}

@media (hover: hover) and (pointer: fine) {
  html.vg-anim .vg-evento:hover {
    opacity: 0.72;
  }
}

/* Il titolo della pagina e' lo stesso della sezione in home, dove pero' e' un
   H2. Qui deve essere H1 perche' e' il titolo della pagina, ma la resa resta
   quella originale riusando la scala tipografica del tema. */
h1.vg-titolo-eventi {
  font-size: var(--heading-2-size);
  line-height: 1.1;
}

/* ---------- Pagina 404 ---------- */

/* Header e footer sono quelli reali del sito: qui si compone solo il centro
   della pagina, riusando i pulsanti nativi cosi' come sono. */
.vg-404 {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 24px 112px;
  text-align: center;
}

.vg-404__code {
  font-family: "Young Serif", serif;
  font-size: 56px;
  line-height: 1;
  margin: 0 0 24px;
  opacity: 0.35;
}

.vg-404__title {
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 20px;
}

.vg-404__text {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 40px;
}

.vg-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Fuori da una sezione con tema, i pulsanti Squarespace ripiegano sul nero.
   Qui vengono riportati ai colori del pulsante primario usato nel resto del
   sito, cosi' la 404 non sembra appartenere a un altro progetto. */
.vg-404__actions .sqs-block-button-element {
  background-color: #d5e5f4;
  color: #000;
}

@media (max-width: 767px) {
  .vg-404 {
    padding: 64px 20px 80px;
  }

  .vg-404__title {
    font-size: 30px;
  }

  .vg-404__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Pagine legali ---------- */

/* Ricalcano il ritmo delle pagine di testo del sito (FAQ): fascia con il
   titolo sullo sfondo ad acquerello, poi il corpo sul fondo azzurro chiaro.
   Font e colori sono quelli del tema: qui si definisce solo la misura di
   lettura e la spaziatura verticale, che il tema non prevede per testi lunghi. */
/* L'header del sito e' in position: absolute sopra il contenuto: senza questo
   spazio in alto il titolo finirebbe sotto il logo e il menu.
   152px e' l'altezza dell'header da tablet in su, 130px sotto. */
.vg-legale-hero {
  background-size: cover;
  background-position: center;
  padding: 170px 20px 64px;
  text-align: center;
}

@media (min-width: 768px) {
  .vg-legale-hero {
    padding: 208px 24px 96px;
  }
}

.vg-legale-hero__titolo {
  margin: 0 0 16px;
  font-size: var(--heading-1-size);
  line-height: 1.1;
  color: #000;
}

.vg-legale-hero__data {
  margin: 0;
  font-size: 17px;
  color: #000;
}

.vg-legale {
  background-color: #d5e5f4;
  color: #000;
  padding: 72px 24px 88px;
}

/* Circa 70 caratteri per riga: sotto questa misura un testo lungo si legge,
   sopra l'occhio perde la riga di ritorno. */
.vg-legale__testo {
  max-width: 720px;
  margin: 0 auto;
}

/* Il tema colora i titoli con la tinta chiara pensata per le sezioni scure:
   su questo fondo azzurro risulterebbero quasi illeggibili. */
.vg-legale__testo h2,
.vg-legale__testo h3 {
  color: inherit;
}

.vg-legale__testo h2 {
  font-size: 27px;
  line-height: 1.25;
  margin: 56px 0 18px;
}

.vg-legale__testo h3 {
  font-size: 20px;
  line-height: 1.3;
  margin: 36px 0 14px;
}

.vg-legale__testo h2:first-child,
.vg-legale__testo h3:first-child {
  margin-top: 0;
}

.vg-legale__testo p,
.vg-legale__testo li {
  font-size: 17px;
  line-height: 1.75;
}

.vg-legale__testo p {
  margin: 0 0 18px;
}

.vg-legale__testo ul {
  margin: 0 0 24px;
  padding-left: 22px;
}

.vg-legale__testo li {
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .vg-legale {
    padding: 56px 20px 72px;
  }

  .vg-legale__testo h2 {
    font-size: 23px;
    margin-top: 44px;
  }

  .vg-legale__testo h3 {
    font-size: 19px;
  }
}

/* ---------- Rispetto della riduzione movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  html.vg-anim .fe-block,
  html.vg-anim .gallery-strips-item,
  .sqs-block-button-element,
  html.vg-anim .gallery-strips-lightbox-link img,
  html.vg-anim .sqs-block-image a img,
  html.vg-anim .header-nav-folder-content,
  .accordion-icon-container .plus__vertical-line,
  .accordion-icon-container .plus__horizontal-line,
  .accordion-item__click-target .accordion-item__title {
    transition: none !important;
  }

  html.vg-anim .accordion-item__dropdown .accordion-item__description {
    animation: none !important;
  }

  html.vg-anim .fe-block:not(.vg-in),
  html.vg-anim .gallery-strips-item:not(.vg-in) {
    opacity: 1;
    transform: none;
  }
}