/* Liquid Logo — stili minimi.
   Larghezza e padding arrivano dallo shortcode come variabili CSS.
   Il padding e' lo spazio in cui la deformazione si espande: senza,
   il liquido viene tagliato ai bordi. */

.liquid-logo {
  width: var(--liquid-logo-width, min(760px, 88vw));
  padding: var(--liquid-logo-pad, 6% 4%);
  box-sizing: content-box;
  margin-inline: auto;
  position: relative;
}

.liquid-logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.liquid-logo a {
  display: block;
  line-height: 0;
}

/* --- full width ---------------------------------------------------------
   Larghezza e margini definitivi li calcola lo script misurando la posizione
   reale dell'elemento: e' l'unico modo affidabile quando il tema applica
   "margin-left: auto !important" ai figli del contenitore. Qui restano solo
   il box model e un fallback se il JavaScript non parte. */
.liquid-logo--full {
  box-sizing: border-box !important;
  padding: var(--liquid-logo-pad, 3.5vw 2vw);
  width: auto;
  max-width: none !important;
  margin-inline: calc(50% - 50vw);
}

/* Se un antenato ritaglia, il full width non puo' funzionare: questa regola
   sblocca i contenitori piu' comuni dei temi a blocchi. */
.wp-site-blocks,
.entry-content,
.wp-block-post-content {
  overflow-x: clip;
}

/* --- hero ---------------------------------------------------------------
   Colonna flex: il logo si prende tutto lo spazio che avanza, la riga di
   testi resta in basso. Nessun padding da ritoccare per breakpoint: la
   dimensione del logo dentro il canvas la decide --liquid-logo-fill. */

.liquid-hero {
  display: flex;
  flex-direction: column;
  min-height: var(--liquid-hero-height, 100svh);
  gap: var(--liquid-hero-gap, 2rem);
  padding: var(--liquid-hero-pad, 4vw);
  box-sizing: border-box;
}

/* svh non e' ovunque: fallback per i browser piu' vecchi */
@supports not (height: 100svh) {
  .liquid-hero { min-height: var(--liquid-hero-height, 100vh); }
}

.liquid-hero__logo.liquid-logo {
  flex: 1 1 auto;
  min-height: 0;          /* senza questo il flex item non si comprime */
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  --liquid-logo-fill: 0.86;
}

/* In hero il logo esce dal flusso: l'altezza la decide il flex, non l'SVG.
   Il preserveAspectRatio di default lo centra e lo adatta, quindi anche il
   fallback senza WebGL resta corretto. */
.liquid-hero__logo.liquid-logo > svg,
.liquid-hero__logo.liquid-logo > a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.liquid-hero__logo.liquid-logo > a > svg {
  width: 100%;
  height: 100%;
}

.liquid-hero__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  font-size: clamp(0.6875rem, 2.3vw, 1.0625rem);
  line-height: 1.3;
}

/* Ogni testo puo' andare a capo su piu' righe, ma i due blocchi restano
   affiancati: min-width 0 e' quello che permette a un flex item di
   restringersi sotto la larghezza del suo contenuto. */
.liquid-hero__left,
.liquid-hero__right {
  flex: 0 1 auto;
  min-width: 0;
  text-wrap: balance;
}

.liquid-hero__right { text-align: right; }


/* La riga di testi non deve poter finire sotto il canvas del logo, che e'
   assoluto, ne' ereditare allineamenti strani dal contenitore del tema. */
.liquid-hero__foot {
  position: relative;
  z-index: 1;
  width: 100%;
  color: var(--liquid-hero-text, inherit);
  text-align: initial;
}

/* --- hero a filo dei bordi ----------------------------------------------
   Il logo esce dal padding della sezione con margini negativi pari al
   padding stesso, cosi' il canvas arriva ai bordi della finestra. I testi in
   basso restano rientrati, perche' a filo starebbero male. */

/* Solo bleed orizzontale. Con anche il margine negativo in alto il riquadro
   partiva dal bordo ma in basso si fermava prima dei testi, e il logo
   risultava otticamente alto. */
.liquid-hero--edge > .liquid-hero__logo.liquid-logo {
  margin-inline: calc(-1 * var(--liquid-hero-pad, 4vw));
  --liquid-logo-fill: 0.98;
}


/* Centraggio ottico: uno spostamento verticale del logo che non tocca il
   layout. La posizione del cursore viene letta da getBoundingClientRect,
   quindi l'interazione resta allineata al logo spostato. */
.liquid-hero__logo.liquid-logo {
  transform: translateY(var(--liquid-hero-offset, 0px));
}

.liquid-hero__foot {
  font-weight: var(--liquid-hero-weight, 700);
}

/* --- responsive ---------------------------------------------------------
   Padding e dimensione del logo scalano con clamp: niente salti fra un
   breakpoint e l'altro. I due testi restano sempre a sinistra e a destra. */

.liquid-hero {
  --liquid-hero-pad: clamp(1rem, 4vw, 3.5rem);
  --liquid-hero-gap: clamp(0.75rem, 2.5vh, 2rem);
}

/* Tablet e telefoni: il logo si stacca dai bordi, altrimenti le lettere
   sembrano tagliate e la deformazione non ha dove espandersi. */
@media (max-width: 900px) {
  .liquid-hero__logo.liquid-logo { --liquid-logo-fill: 0.9; }
  .liquid-hero--edge > .liquid-hero__logo.liquid-logo { --liquid-logo-fill: 0.9; }
}

@media (max-width: 520px) {
  .liquid-hero__logo.liquid-logo { --liquid-logo-fill: 0.86; }
  .liquid-hero--edge > .liquid-hero__logo.liquid-logo { --liquid-logo-fill: 0.86; }
}

/* Telefono in orizzontale: poca altezza, il logo va compresso e i testi
   ridotti, altrimenti non ci sta nulla. */
@media (max-height: 480px) and (orientation: landscape) {
  .liquid-hero { --liquid-hero-gap: 0.5rem; }
  .liquid-hero__logo.liquid-logo { --liquid-logo-fill: 0.8; }
  .liquid-hero__foot { font-size: clamp(0.625rem, 1.6vw, 0.875rem); }
}

/* Schermi molto larghi: il logo non deve diventare sproporzionato. */
@media (min-width: 1800px) {
  .liquid-hero__logo.liquid-logo { --liquid-logo-fill: 0.8; }
  .liquid-hero--edge > .liquid-hero__logo.liquid-logo { --liquid-logo-fill: 0.94; }
}

/* Su touch il trascinamento verticale deve continuare a scorrere la pagina;
   quello orizzontale deforma il logo. */
.liquid-logo canvas { touch-action: pan-y; }

/* --- entrata ------------------------------------------------------------
   Su schermi stretti il logo e' piu' piccolo e l'entrata risulta piu' lenta
   a parita' di durata: le lettere percorrono meno spazio. Si accorcia. */
@media (max-width: 640px) {
  .liquid-logo { --liquid-logo-enter-dur: 1.3; }
}

/* --- footer -------------------------------------------------------------
   Il logo e' lo sfondo della riga e il contenuto ci sta sopra. */

.liquid-foot {
  position: relative;
  width: 100%;
  min-height: var(--liquid-foot-height, 62svh);
  overflow: clip;          /* clip e non hidden: non rompe position sticky */
  isolation: isolate;
}

@supports not (height: 100svh) {
  .liquid-foot { min-height: var(--liquid-foot-height, 62vh); }
}

/* Il contenitore del logo riempie la riga. Il contenuto sta al suo interno e
   non accanto: cosi' il movimento del cursore sul testo raggiunge comunque il
   modulo per propagazione, e il liquido reagisce su tutta la superficie
   invece che solo negli spazi vuoti fra un elemento e l'altro. */
.liquid-foot .liquid-logo--bg {
  --liquid-logo-fill: 0.92;
  position: absolute;
  inset: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* L'SVG di partenza esce dal flusso: serve solo a generare la texture e a
   fare da ripiego se WebGL manca. */
.liquid-foot .liquid-logo--bg > svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--liquid-foot-crop, 18%) * -1);
  width: 100%;
  height: auto;
}

.liquid-foot .liquid-logo--bg > canvas {
  z-index: 0;
}

.liquid-foot__content,
.liquid-foot .liquid-foot__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: var(--liquid-foot-align, end);
  min-height: var(--liquid-foot-height, 62svh);
  padding: var(--liquid-foot-pad, clamp(1.5rem, 5vw, 4rem));
  box-sizing: border-box;
  gap: clamp(1rem, 2vw, 2rem);
}

/* Su fondo scuro il contenuto eredita il bianco. */
.liquid-foot--dark .liquid-foot__content { color: inherit; }

@media (max-width: 640px) {
  .liquid-foot { --liquid-foot-crop: 10%; }
  .liquid-foot .liquid-logo--bg { --liquid-logo-fill: 0.96; }
}

/* --- wordmark da footer -------------------------------------------------
   Solo il marchio, poco padding, niente contenuto sopra. L'altezza la
   decide il logo stesso: nessuna altezza minima, non e' una hero. */

.liquid-mark {
  width: 100%;
  padding-block: var(--liquid-mark-pad, clamp(1rem, 3vw, 2.5rem));
  padding-inline: 0;
  box-sizing: border-box;
  overflow: clip;
}

.liquid-mark .liquid-mark__logo.liquid-logo {
  width: 100%;
  max-width: none;
  margin: 0;
  /*
   * Il padding qui e' lo spazio in cui il marchio si allunga. Il canvas e'
   * posizionato su tutta la scatola di riempimento dell'elemento, quindi
   * questo padding lo fa crescere in altezza mentre la texture continua a
   * disegnare il logo alla sua misura. Senza, il marchio stirato verrebbe
   * tagliato dal bordo e non si vedrebbe alcun effetto.
   */
  padding-block: var(--liquid-mark-room, 7vw);
  padding-inline: 0;
  box-sizing: content-box;
}

/* Marchio tagliato dal bordo inferiore: lo spazio serve solo sopra, perche'
   lo stiramento cresce verso l'alto. Sotto non deve avanzare nulla,
   altrimenti il taglio non tocca il bordo del blocco. */
.liquid-mark--half {
  padding-block-end: 0;
}

.liquid-mark--half .liquid-mark__logo.liquid-logo {
  padding-block: var(--liquid-mark-room, 7vw) 0;
}