/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Child theme for Hello Elementor
Author: Elementor Team
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
*/

/* ========================================================================
   ANIMATIONS — PRE-HIDE + KEYFRAMES + VARIANTI
   ======================================================================== */

/* =========================================================
   PRE-HIDE (solo frontend): evita flash iniziale
   ========================================================= */
html.anim-prehide body:not(.elementor-editor-active)
  .anim:not(.animate),
html.anim-prehide body:not(.elementor-editor-active)
  .anim-stag:not(.animate){
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0,30px,0) !important; /* default: dal basso */
}

/* Variante orizzontale dichiarativa */
html.anim-prehide body:not(.elementor-editor-active)
  .fade-right:not(.animate){
  transform: translate3d(30px,0,0) !important;
}

/* Mega-menu: pre-hide sul TITOLO interno (no layout shift) */
html.anim-prehide body:not(.elementor-editor-active)
  .anim-cont .menu .e-n-menu .e-n-menu-title:not(.animate){
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =========================================================
   STATO ANIMATO (usa keyframe, il delay lo mette il JS)
   ========================================================= */
.anim.animate,
.anim-stag.animate{
  visibility: visible !important;
  animation-name: fadeUp30;                 
  animation-duration: 1s;                
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  animation-fill-mode: both;
}

/* Variante orizzontale (menu & co.) */
.fade-right.animate{ animation-name: fadeRight30 !important; }

/* Velocità alternative (opzionali) */
.fast.animate{ animation-duration: .6s !important; }
.slow.animate{ animation-duration: 1.5s !important; }

/* Distanze verticali opzionali */
.lift-20.animate{ animation-name: fadeUp20 !important; }
.lift-40.animate{ animation-name: fadeUp40 !important; }
.lift-60.animate{ animation-name: fadeUp60 !important; }

/* Distanze orizzontali opzionali per .fade-right */
.fade-right.shift-20.animate{ animation-name: fadeRight20 !important; }
.fade-right.shift-40.animate{ animation-name: fadeRight40 !important; }
.fade-right.shift-60.animate{ animation-name: fadeRight60 !important; }

/* ===== Keyframes ===== */
@keyframes fadeUp20   { 0%{opacity:0;transform:translate3d(0,20px,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeUp30   { 0%{opacity:0;transform:translate3d(0,30px,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeUp40   { 0%{opacity:0;transform:translate3d(0,40px,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeUp60   { 0%{opacity:0;transform:translate3d(0,60px,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }

@keyframes fadeRight20{ 0%{opacity:0;transform:translate3d(20px,0,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeRight30{ 0%{opacity:0;transform:translate3d(30px,0,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeRight40{ 0%{opacity:0;transform:translate3d(40px,0,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeRight60{ 0%{opacity:0;transform:translate3d(60px,0,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }

/* =========================================================
   EDITOR: mostra sempre tutto (niente pre-hide / animazioni)
   ========================================================= */
body.elementor-editor-active .anim,
body.elementor-editor-active .anim-stag,
body.elementor-editor-active .anim-cont .menu .e-n-menu .e-n-menu-title{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* Accessibilità: riduci motion se richiesto dall’utente */
@media (prefers-reduced-motion: reduce){
  .anim.animate, .anim-stag.animate{ animation-duration: .01ms !important; }
}


/* ========================================================================
   2) BASE/RESET UTILI
   ======================================================================== */
.elementor-icon-wrapper,
.elementor-menu-toggle__icon--open,
figure, img{
  line-height: 0 !important;
}
.elementor-widget-container p:last-child,
.elementor-widget p:last-child{
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

/* =========================================================
   3) FONT (self-host, Media Library)
   ========================================================= */

/* 3.1 @font-face (URL dalle Media: root-relative così vale in staging e live) */

/* PLUS JAKARTA SANS – variable (200–800) */
@font-face{
  font-family:"Plus Jakarta Sans VF";
  src:url("/wp-content/uploads/PlusJakartaSans.woff2") format("woff2-variations");
  font-weight:200 800;
  font-stretch:100%;
  font-style:normal;
  font-display:swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+20AC, U+2010-205E, U+2074, U+2122;
}

/* OUTFIT – variable (100–900) */
@font-face{
  font-family:"Outfit VF";
  src:url("/wp-content/uploads/Outfit.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:100%;
  font-style:normal;
  font-display:swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+20AC, U+2010-205E, U+2074, U+2122;
}

/* MERRIWEATHER ITALIC – variable (300–900) */
@font-face{
  font-family:"Merriweather VF";
  src:url("/wp-content/uploads/Merriweather-Italic.woff2") format("woff2-variations");
  font-weight:300 900;
  font-stretch:100%;
  font-style:italic;
  font-display:swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+20AC, U+2010-205E, U+2074, U+2122;
}

/* 3.2 Variabili tipografiche (dimensioni fluide) */
:root{
  --lh-heading:1.08;
  --lh-copy:1.6;

  --fs-h1:   clamp(2.25rem,  calc(0.375rem + 5vw), 5.625rem); /* 36→90 */
  --fs-h2:   clamp(1.5rem,   calc(1rem + 1.6667vw), 2.5rem);  /* 24→40 */
  --fs-h3:   clamp(1.375rem, calc(1.0625rem + 1.0417vw), 2rem);/* 22→32 */
  --fs-h4:   clamp(1.25rem,  calc(1rem + 0.8333vw), 1.75rem); /* 20→28 */
  --fs-h5:   clamp(1.125rem, calc(0.9375rem + 0.625vw), 1.5rem);/* 18→24 */
  --fs-h6:   clamp(1rem,     calc(0.875rem + 0.4167vw), 1.25rem);/*16→20*/
  --fs-p:    clamp(1rem,     calc(0.9375rem + 0.2083vw),1.125rem);/*16→18*/
  --fs-lead: clamp(1.125rem, calc(0.9375rem + 0.625vw), 1.5rem); /* 18→24 */
  --fs-small:clamp(0.875rem, calc(0.8125rem + 0.2083vw),1rem);   /* 14→16 */
  --fs-menu: clamp(1rem,     calc(0.875rem + 0.4167vw), 1.25rem);/* 16→20 */

  --fs-h3-xl: clamp(1.75rem, calc(0.625rem + 3.75vw), 4rem); /* 28→64 */
  --fs-h4-xl: clamp(1.5rem,  calc(0.375rem + 2.9vw), 3rem);  /* 24→48 */
}

/* 3.3 Famiglie di default (bassa specificità) */
:where(body){ 
  font-family:"Plus Jakarta Sans VF", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:where(h1,h2,h3,h4,h5,h6){
  font-family:"Outfit VF", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 3.4 Default ereditabili (clamp) */
/* Se in Elementor lasci vuota la Dimensione → eredita questi valori */
:where(.elementor, body) h1{ font-size:var(--fs-h1); line-height:var(--lh-heading); letter-spacing:-0.015em; }
:where(.elementor, body) h2{ font-size:var(--fs-h2); line-height:1.1; }
:where(.elementor, body) h3{ font-size:var(--fs-h3); line-height:1.15; }
:where(.elementor, body) h4{ font-size:var(--fs-h4); line-height:1.2; }
:where(.elementor, body) h5{ font-size:var(--fs-h5); line-height:1.25; }
:where(.elementor, body) h6{ font-size:var(--fs-h6); line-height:1.3; letter-spacing:0.02em; }

:where(.elementor, body) p     { font-size:var(--fs-p);    line-height:var(--lh-copy); }
:where(.elementor, body) small { font-size:var(--fs-small); line-height:1.5; }
:where(.elementor, body) .lead p, 
:where(.elementor, body) .p.lead *{ font-size:var(--fs-lead); line-height:1.5; }
:where(.elementor, body) .lead h3,
:where(.elementor, body) .h3.lead *{ font-size:var(--fs-h3-xl); line-height:1.1; }
:where(.elementor, body) .lead h4,
:where(.elementor, body) .h4.lead *{ font-size:var(--fs-h4-xl); line-height:1.2; }

:where(.elementor, body) .elementor-button,
:where(.elementor, body) .btn-text,
:where(.elementor, body) .btn-text *,
:where(.elementor, body) .menu-text,
:where(.elementor, body) .menu-text *,
:where(.elementor, body) .menu .elementor-nav-menu .elementor-item,
:where(.elementor, body) .menu .e-n-menu .e-n-menu-item,
:where(.elementor, body) .menu .e-n-menu-title-text,
:where(.elementor, body) .menu .elementor-button,
:where(.elementor, body) .menu .elementor-button .elementor-button-text { font-size:var(--fs-menu); line-height:1.2; }

/* 3.5 Utility famiglie (opt-in) */
.font-outfit{ font-family:"Outfit VF", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.font-plus  { font-family:"Plus Jakarta Sans VF", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.font-merri { font-family:"Merriweather VF", serif; }

/* Scope per HTML widget / container specifico */
.scope-outfit, .scope-outfit *{ font-family:"Outfit VF", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.scope-plus,   .scope-plus   *{ font-family:"Plus Jakarta Sans VF", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.scope-merri,  .scope-merri  *{ font-family:"Merriweather VF", serif; }

/* 3.6 Utility dimensioni opzionali (se vuoi forzarle via classi) */
.as-h1, .h1{ font-size:var(--fs-h1); line-height:var(--lh-heading); letter-spacing:-0.015em; }
.as-h2, .h2{ font-size:var(--fs-h2); line-height:1.1; }
.as-h3, .h3{ font-size:var(--fs-h3); line-height:1.15; }
.as-h4, .h4{ font-size:var(--fs-h4); line-height:1.2; }
.as-h5, .h5{ font-size:var(--fs-h5); line-height:1.25; }
.as-h6, .h6{ font-size:var(--fs-h6); line-height:1.3; letter-spacing:0.02em; }
.as-p, .p{       font-size:var(--fs-p);  line-height:var(--lh-copy); }
.as-lead, .lead{    font-size:var(--fs-lead); line-height:1.55; }
.as-small, .small{   font-size:var(--fs-small); line-height:1.5; }
.as-h3-xl, .h3-xl{   font-size:var(--fs-h3-xl); line-height:1.12; text-wrap:balance; overflow-wrap:anywhere; hyphens:auto; }
.as-h4-xl, .h4-xl{   font-size:var(--fs-h4-xl); line-height:1.12; text-wrap:balance; overflow-wrap:anywhere; hyphens:auto; }

/* 3.7 Utility varie (peso/spacing/stile) */
.w-300{font-weight:300;} .w-400{font-weight:400;} .w-500{font-weight:500;}
.w-600{font-weight:600;} .w-700{font-weight:700;} .w-800{font-weight:800;} .w-900{font-weight:900;}
.maiusc{text-transform:uppercase;} .minusc{text-transform:lowercase;}
.italic{font-style:italic;} .no-italic{font-style:normal;}
.ls-2{letter-spacing:.125rem;} .ls-4{letter-spacing:.25rem;} .ls-6{letter-spacing:.375rem;}
.ls-8{letter-spacing:.5rem;} .ls-10{letter-spacing:.625rem;} .ls-12{letter-spacing:.75rem;}

.menu-text, .btn-text{ font-size:var(--fs-menu); line-height:1.2; }



/* ========================================================================
   4) COMPONENTI / UI (Swiper, Gradient buttons/text, Menu, Icone)
   ======================================================================== */

/* Swiper progress pill */
.swiper-pagination.swiper-pagination-progressbar{
  height: 8px;
  background: var(--e-global-color-secondary);
  border-radius: 9999px;
  overflow: hidden;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
  display:block;
  height:100%;
  width:100% !important;
  position:relative;
  background:transparent !important;
  transform:none !important;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: var(--progress-pct, 0%);
  background:#fff;
  border-radius:9999px;
  transition: width var(--duration, 500ms) linear;
}

/* Gradient Border utility (gb-outline) */
.gb-outline{
  --gb-fill:  var(--e-global-color-secondary);
  --gb-c1:    #CCD5EB;
  --gb-c2:    #A3BCF5;
  --gb-angle: 180deg;
  --gb-br:    999rem;
  --gb-bw:    2px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gb-br);
  border: var(--gb-bw) solid transparent;
  background-color: transparent !important;
  background-image:
    linear-gradient(var(--gb-fill), var(--gb-fill)),
    linear-gradient(var(--gb-angle), var(--gb-c1) 20%, var(--gb-c2) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 2px 24px 0 rgba(255,255,255,.30);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}
.gb-outline:hover,
.gb-outline:focus,
.gb-outline:focus-visible{
  outline: none !important;
  box-shadow: 0 6px 28px 0 rgba(255,255,255,.35);
}

/* Gradient Text */
.text-gradient{
  background: linear-gradient(180deg, #FFF 0%, #A3BCF5 100%);
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-dark{
  background: linear-gradient(180deg, #0D1011 0%, #757575 100%);
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Menu pill gradient + shadows */
@media screen and (min-width: 480px){
  .menu .e-n-menu-title, .menu .submenu {
    border-radius: 999rem;
    border: 2px solid transparent;
    background-image:
      linear-gradient(var(--e-global-color-secondary), var(--e-global-color-secondary)),
      linear-gradient(180deg, #CCD5EB 20%, #A3BCF5 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 2px 24px 0 rgba(255,255,255,.30);
  }
  .menu .e-n-menu-title:hover, .menu .submenu:hover 
  .menu .e-n-menu-title:focus, .menu .submenu:focus {
    background-image:
      linear-gradient(var(--e-global-color-secondary), var(--e-global-color-secondary)),
      linear-gradient(180deg, #CCD5EB 20%, #A3BCF5 100%);
  }
  .contacts a{ box-shadow: 0 2px 24px 0 rgba(255,255,255,.30); }
}

/* Menu toggle / icone */
.elementor-widget-n-menu .e-n-menu-toggle { color: var(--n-menu-toggle-icon-color); }
.elementor-widget-n-menu .e-n-menu-toggle svg { fill: currentColor !important; stroke: currentColor; }
.menu .e-n-menu-dropdown-icon svg{ fill:none !important; width:1.5rem !important; height:1.5rem !important; }

/* Header mobile wrapper */
@media screen and (max-width: 479px){
  body .elementor-widget-n-menu .e-n-menu-heading{ padding:1rem 0; background:var(--e-global-color-text); }
  body .e-n-menu-wrapper{
    box-shadow:
      0 1px 0 rgba(255,255,255,.10) inset,
      0 24px 24px -16px rgba(255,255,255,.15) !important;
  }
}
/* Icone SVG generali */
.icon{
	min-width: auto;
}
.icon svg{ 
    fill: none !important;
	aspect-ratio: 1/1;
    width: 1.5rem !important;
	min-width: 1.5rem !important;
    height: 1.5rem !important;
}
.icon svg *{ 
	stroke-width: 2px !important; 
}
svg.icon-tabler, svg.icon-tabler *{ 
	stroke-width: 2.5px; 
}