/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Kaushan+Script&family=Raleway:wght@400;500;600;800&display=swap');
/* NOTA: prima del lancio sostituire l'import con i woff2 self-hosted (GDPR). */

/* ==========================================================
   FORZA ITALIA GIOVANI — sistema di design
   Classi da assegnare ai widget Elementor.
   Prefisso fi- per evitare collisioni con tema e plugin.
   ========================================================== */

:root{
  --fi-turchese:#16B1BD;
  --fi-turchese-cupo:#16B1BD;
  --fi-blu:        #111827;   /* blu profondo — superfici scure e testo */
  --fi-blu-2:      #1B2840;   /* blu secondario, per distinguere due superfici scure */
  /* alias di compatibilita: i nomi vecchi puntano ai nuovi valori */
  --fi-turchese-fondo:var(--fi-blu-2);
  --fi-inchiostro:var(--fi-blu);
  --fi-nebbia:#EDF5F8;
  --fi-bordo:#D3E4EB;
  --fi-grigio:#4A5565;

  --fi-display:'Anton', Impact, sans-serif;
  --fi-testo:'Raleway', system-ui, sans-serif;
  --fi-firma:'Kaushan Script', cursive;

  /* impostare con l'URL del pattern caricato in Libreria media */
  --fi-pattern:url('/wp-content/uploads/2026/09/pattern-loghi.png');
}

/* ---------- LA FASCIA — dispositivo grafico principale ----------
   Si assegna al widget Titolo. Ogni riga del titolo va in un <span>
   con classe fi-riga: il rettangolo si adatta alla lunghezza del testo. */
.fi-fascia .elementor-heading-title,
.fi-fascia h1, .fi-fascia h2, .fi-fascia h3{
  font-family:var(--fi-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:.005em;
}
.fi-fascia .fi-riga{
  display:table;
  padding:.13em .26em;
  margin-bottom:.04em;
}
.fi-fascia .fi-riga:nth-child(odd){
  background:#fff;
  color:var(--fi-turchese-cupo);
  transform:rotate(-.9deg);
}
.fi-fascia .fi-riga:nth-child(even){
  background:var(--fi-turchese-cupo);
  color:#fff;
  transform:rotate(.6deg);
}
/* variante per sezioni chiare: prima riga turchese, seconda turchese */
.fi-fascia--chiara .fi-riga:nth-child(odd){
  background:var(--fi-turchese-cupo);
  color:#fff;
}

/* ---------- Tipografia di servizio ---------- */
.fi-occhiello{
  font-family:var(--fi-testo);
  font-size:.8125rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--fi-turchese-fondo);
}
.fi-occhiello--chiaro{ color:rgba(255,255,255,.85); }

.fi-prosa{
  font-family:var(--fi-testo);
  font-size:1.25rem; line-height:1.62;
  color:var(--fi-grigio); max-width:60ch;
}
.fi-prosa--chiaro{ color:rgba(255,255,255,.9); }

.fi-firma{
  font-family:var(--fi-firma);
  line-height:1.1;
}

.fi-punti ul, ul.fi-punti{ list-style:none; padding:0; margin:0; }
.fi-punti li{
  position:relative; padding-left:30px; margin-bottom:12px;
  color:var(--fi-grigio);
}
.fi-punti li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:14px; height:4px; background:var(--fi-turchese);
}

.elementor-widget.fi-link .elementor-button,
a.fi-link{
  font-weight:800; font-size:.8125rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--fi-turchese-fondo);
  background:transparent; padding:0 0 3px;
  border:0; border-bottom:3px solid var(--fi-turchese);
  border-radius:0;
}
.elementor-widget.fi-link--chiaro .elementor-button, a.fi-link--chiaro{
  color:#fff; border-bottom-color:rgba(255,255,255,.6);
}

/* ---------- Bottoni ----------
   Regola di contrasto: il turchese brillante non regge testo bianco
   (2,4:1). Come superficie va sempre con testo inchiostro. */
.elementor-widget.fi-btn .elementor-button{
  font-family:var(--fi-testo); font-weight:800;
  font-size:.8125rem; letter-spacing:.045em; text-transform:uppercase;
  border-radius:0; border:2px solid transparent;
  padding:13px 24px;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.elementor-widget.fi-btn--pieno .elementor-button{ background:var(--fi-turchese); color:var(--fi-inchiostro); }
.elementor-widget.fi-btn--pieno .elementor-button:hover{ background:var(--fi-inchiostro); color:#fff; }
.elementor-widget.fi-btn--bianco .elementor-button{ background:#fff; color:var(--fi-turchese-fondo); }
.elementor-widget.fi-btn--bianco .elementor-button:hover{ background:var(--fi-nebbia); }
.elementor-widget.fi-btn--contorno .elementor-button{ background:transparent; color:#fff; border-color:#fff; }
.elementor-widget.fi-btn--contorno .elementor-button:hover{ background:#fff; color:var(--fi-turchese-fondo); }
.elementor-widget.fi-btn--scuro .elementor-button{ background:transparent; color:var(--fi-inchiostro); border-color:var(--fi-inchiostro); }
.elementor-widget.fi-btn--scuro .elementor-button:hover{ background:var(--fi-inchiostro); color:#fff; }
.elementor-widget.fi-btn--grande .elementor-button{ padding:17px 34px; font-size:1.0625rem; letter-spacing:.03em; }

/* ---------- Pattern di loghi per l'hero ----------
   Da mettere sul container: classe fi-pattern.
   L'URL si imposta in --fi-pattern (vedi :root). */
.fi-pattern{ position:relative; }
/* ::after e non ::before: Elementor usa gia ::before sui container
   per l'overlay di sfondo, e le due regole si annullano. */
.fi-pattern::after{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--fi-pattern);
  background-size:132px 132px; background-repeat:repeat;
  pointer-events:none;
}
.fi-pattern > *{ position:relative; z-index:1; }

/* ---------- Ticker notizie ---------- */
.fi-ticker{
  display:flex; align-items:stretch; overflow:hidden;
  background:var(--fi-inchiostro); color:#fff;
  font-family:var(--fi-testo); font-size:.8125rem;
}
.fi-ticker__etichetta{
  flex:0 0 auto; display:flex; align-items:center;
  background:var(--fi-turchese); color:var(--fi-inchiostro);
  padding:9px 18px; white-space:nowrap;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.fi-ticker__pista{
  flex:1 1 auto; display:flex; align-items:center; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.fi-ticker__lista{
  display:flex; flex:0 0 auto; gap:44px;
  list-style:none; margin:0; padding:0 22px; white-space:nowrap;
  animation:fi-scorri 46s linear infinite;
}
.fi-ticker__pista:hover .fi-ticker__lista{ animation-play-state:paused; }
.fi-ticker a{ color:#fff; text-decoration:none; opacity:.88; }
.fi-ticker a:hover{ opacity:1; text-decoration:underline; }
@keyframes fi-scorri{ from{transform:translateX(0);} to{transform:translateX(-100%);} }

/* ---------- Card ---------- */
.fi-card{ background:#fff; border:2px solid var(--fi-bordo); transition:border-color .16s ease, box-shadow .16s ease; }
.fi-card:hover{ border-color:var(--fi-turchese-cupo); box-shadow:8px 8px 0 var(--fi-turchese); }

/* filetto turchese sopra i titoli delle news */
.fi-filetto{ border-top:4px solid var(--fi-turchese); padding-top:18px; }

/* ---------- Accessibilità ---------- */
:focus-visible{ outline:3px solid var(--fi-inchiostro); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .fi-ticker__lista{ animation:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- Mobile ---------- */
@media (max-width:680px){
  .fi-ticker__etichetta{ display:none; }
  .fi-prosa{ font-size:1.0625rem; }
}

/* ---------- Footer ---------- */
.fi-piede-col h2{ font-size:.8125rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px; color:var(--fi-inchiostro); }
.fi-piede-col ul{ list-style:none; margin:0; padding:0; }
.fi-piede-col li{ margin-bottom:9px; }
.fi-piede-col a{ color:var(--fi-inchiostro); text-decoration:none; font-weight:500; font-size:.8125rem; }
.fi-piede-col a:hover{ text-decoration:underline; text-underline-offset:3px; }
.fi-coda, .fi-coda p{ color:rgba(255,255,255,.85); font-size:.8125rem; margin:0; }
.fi-coda a{ color:rgba(255,255,255,.85); text-decoration:none; }
.fi-coda a:hover{ text-decoration:underline; }
.fi-coda-legale a + a{ margin-left:20px; }

/* ==========================================================
   MOVIMENTO
   Tutto disattivato automaticamente da prefers-reduced-motion
   (regola gia presente piu sopra).
   ========================================================== */

/* Il pattern di loghi deriva lentamente in diagonale */
.fi-pattern::after{ animation:fi-deriva 90s linear infinite; }
@keyframes fi-deriva{ from{ background-position:0 0; } to{ background-position:132px 264px; } }

/* Zoom lentissimo sulle foto di sfondo (ken burns) */
.fi-zoom{ overflow:hidden; }
.fi-zoom img{ animation:fi-respiro 30s ease-in-out infinite alternate; will-change:transform; }
@keyframes fi-respiro{ from{ transform:scale(1); } to{ transform:scale(1.09); } }

/* Superficie blu che respira: gradiente in lento movimento */
.fi-vivo{
  background-image:linear-gradient(115deg, var(--fi-blu) 0%, #17263F 40%, var(--fi-blu) 75%);
  background-size:220% 220%;
  animation:fi-onda 26s ease-in-out infinite;
}
@keyframes fi-onda{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* Le fasce dei titoli si aprono a tendina quando entrano in viewport.
   Si aggancia alla classe .animated che Elementor mette sul widget
   quando lo imposti con una animazione di entrata. */
@keyframes fi-rivela{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }

/* Nastro diagonale turchese scorrevole, per spezzare le sezioni */
.fi-nastro{ background:var(--fi-turchese); overflow:hidden; transform:rotate(-1.6deg); margin-inline:-3%; width:106%; }
.fi-nastro ul{
  display:flex; gap:56px; list-style:none; margin:0; padding:14px 28px;
  white-space:nowrap; font-family:var(--fi-display); text-transform:uppercase;
  font-size:1.4rem; color:var(--fi-blu);
  animation:fi-scorri 40s linear infinite;
}

/* ==========================================================
   RETE DI SICUREZZA + RIVELAZIONE ALLO SCROLL
   Elementor marca i widget con .elementor-invisible e conta su
   uno script (waypoint) per toglierla. Se quello script non
   carica, il contenuto resta invisibile per sempre. Qui lo
   neutralizziamo e facciamo la rivelazione in CSS puro.
   ========================================================== */
.elementor-invisible{ visibility:visible !important; opacity:1 !important; animation-name:none !important; }

@keyframes fi-sali{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .fi-entra{
      animation:fi-sali .8s cubic-bezier(.22,.61,.36,1) both;
      animation-timeline:view(); animation-range:entry 0% entry 55%;
    }
    .fi-fascia .fi-riga{
      animation:fi-rivela .8s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline:view(); animation-range:entry 0% entry 50%;
    }
    .fi-fascia .fi-riga:nth-child(2){ animation-range:entry 8% entry 60%; }
    .fi-fascia .fi-riga:nth-child(3){ animation-range:entry 16% entry 70%; }
  }
}

/* ---------- Correzioni di rifinitura ---------- */
/* Le ancore non devono finire sotto l'header sticky */
[id]{ scroll-margin-top:96px; }

/* Bottoni che non devono andare a capo */
.fi-nowrap .elementor-button{ white-space:nowrap; }

/* Voce di menu della sezione corrente */
.elementor-nav-menu a.elementor-item:hover,
.elementor-nav-menu a.elementor-item-active{ opacity:1; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
/* Nessuno scorrimento orizzontale: il nastro ruotato deborda
   di proposito, ma non deve creare barra di scorrimento. */
body{ overflow-x:hidden; }

@media (max-width:1024px){
  .fi-nastro ul{ font-size:1.15rem; gap:40px; }
}
@media (max-width:767px){
  .fi-nastro ul{ font-size:1rem; gap:28px; padding:11px 20px; }
  .fi-prosa{ font-size:1.0625rem; }
  /* le ancore scendono: su mobile l'header e piu basso */
  [id]{ scroll-margin-top:76px; }
}

/* ---------- Colonna di foto affiancata a un testo lungo ----------
   Le immagini si dividono in parti uguali l'altezza della colonna
   di testo accanto: funziona con qualsiasi lunghezza di testo,
   senza dover ritoccare le proporzioni ogni volta. */
.fi-foto-colonna{ align-self:stretch; }
.fi-foto-colonna > .elementor-widget-image{ flex:1 1 0; min-height:0; }
.fi-foto-colonna > .elementor-widget-image > .elementor-widget-container,
.fi-foto-colonna figure,
.fi-foto-colonna .elementor-image{ height:100%; }
.fi-foto-colonna img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:767px){
  /* su mobile la colonna va sotto il testo: altezze fisse, non divise */
  .fi-foto-colonna > .elementor-widget-image{ flex:0 0 auto; }
  .fi-foto-colonna img{ height:auto; aspect-ratio:16/10; }
}