/*
 Theme Name:   Hello Elementor Child
 Description:  Tema Child per personalizzare Hello Elementor
 Author:       Dalia Abbruciati
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* CSS custom importato da tema padre */
:root {
  --colore-brand: #1a237e;
  --colore-brand-hover: #000051;
  --colore-testo-btn: #ffffff;
}

/* CTA menu HFE: lo stile bottone va sulla voce .menu-cta (vedi assets/nav-cta.js).
   HFE lo mette anche sull'ultima voce del menu, che con Weglot e' lo switcher
   lingua: qui gliela togliamo. */
/* Weglot avvolge l'anchor, quindi discendente e non figlio diretto. */
.hfe-nav-menu li.menu-item-weglot a.hfe-menu-item.elementor-button,
.hfe-flyout-wrapper li.menu-item-weglot a.hfe-menu-item.elementor-button {
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  /* stesso bianco delle altre voci del menu (Weglot forza #333) */
  color: #fff !important;
}

/* In dropdown/flyout le regole Elementor del dropdown hanno specificita' maggiore
   di .menu-item a.hfe-menu-item.elementor-button: qui riportiamo il bottone. */
nav.hfe-dropdown li.menu-cta > a.hfe-menu-item.elementor-button,
nav.hfe-dropdown-expandible li.menu-cta > a.hfe-menu-item.elementor-button,
.hfe-flyout-wrapper li.menu-cta > a.hfe-menu-item.elementor-button {
  margin-top: 15px;
  border-radius: 100px;
  background-color: var(--e-global-color-accent);
  color: #fff;
  text-align: center;
}

/* ===== GLOW / BAGLIORE MAGENTA HERO ===== */
.elementor-element-7426c920 {
  position: relative;
  isolation: isolate; /* tiene il glow sotto al contenuto */
}

.elementor-element-7426c920::after {
  content: "";
  position: absolute;
  top: -40px; /* quanto sporge sopra la sezione */
  left: 50%;
  width: 680px;
  height: 680px;
  z-index: 0; /* dietro ai widget */
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(184, 43, 230, 0.22) 0%,
    /* cuore del bagliore */ rgba(184, 43, 230, 0.06) 38%,
    /* alone medio */ transparent 68%
  ); /* sfuma nel nero */
  filter: blur(8px); /* morbidezza extra */
  transform: translateX(-50%);
  /* Pulsazione + orbita sullo stesso layer */
  animation:
    mh-pulse 7s ease-in-out infinite,
    mh-orbit 6s linear infinite;
}

/* Orbita: il glow gira lungo un cerchio di ~70px di raggio */
@keyframes mh-orbit {
  0% {
    transform: translateX(-50%) translate(70px, 0);
  }
  25% {
    transform: translateX(-50%) translate(0, 70px);
  }
  50% {
    transform: translateX(-50%) translate(-70px, 0);
  }
  75% {
    transform: translateX(-50%) translate(0, -70px);
  }
  100% {
    transform: translateX(-50%) translate(70px, 0);
  }
}

/* Pulsazione lenta del bagliore */
@keyframes mh-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.06);
  }
}

/* I widget interni devono stare sopra il glow */
.elementor-element-7426c920 > * {
  position: relative;
  z-index: 1;
}

/* Su mobile riduci il glow per non sbordare */
@media (max-width: 767px) {
  .elementor-element-7426c920::after {
    width: 420px;
    height: 420px;
  }
}

/* ===== SFONDO CONDIVISO HERO + ECOSISTEMA (wrapper 23db0d2) ===== */
.elementor-element-23db0d2 {
  position: relative;
  background-color: #000000 !important;
  overflow: hidden;
  isolation: isolate;
}

/* Griglia tech che sfuma verso il fondo */
.elementor-element-23db0d2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 70%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

/* I due cerchi concentrici (un solo pseudo, due radial-gradient) */
.elementor-element-23db0d2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 500px,
      transparent 259px,
      rgba(255, 255, 255, 0.06) 260px,
      transparent 261px
    ),
    radial-gradient(
      circle at 50% 500px,
      transparent 379px,
      rgba(255, 255, 255, 0.035) 380px,
      transparent 381px
    );
}

/* I due figli del wrapper: sfondo trasparente per mostrare griglia + cerchi */
.elementor-element-7426c920,   /* hero */
.elementor-element-3034535b {
  /* ecosistema */
  background-color: transparent !important;
  background-image: none !important;
}

/* ===== BOX CTA "PRENOTA ASSESSMENT" ===== */
.elementor-element-7f1fbdc {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 43, 230, 0.25);
  border-radius: 26px;
  background: linear-gradient(
    150deg,
    rgba(184, 43, 230, 0.08),
    rgba(255, 255, 255, 0.01)
  );
  padding: 72px 56px;
  isolation: isolate;
}

/* Glow magenta in alto a sinistra */
.elementor-element-7f1fbdc::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -60px;
  width: 420px;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 43, 230, 0.2), transparent 70%);
}

/* Glow magenta in basso a destra */
.elementor-element-7f1fbdc::after {
  content: "";
  position: absolute;
  bottom: -160px;
  right: -40px;
  width: 420px;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(184, 43, 230, 0.12),
    transparent 70%
  );
}

/* Contenuto sopra ai glow */
.elementor-element-7f1fbdc > * {
  position: relative;
  z-index: 1;
}

/* ===== CARD "MYHYDRA - PIATTAFORMA FLAGSHIP" (stile box assessment) ===== */
.elementor-element-6807d34 {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 43, 230, 0.25);
  border-radius: 26px;
  background: linear-gradient(
    150deg,
    rgba(184, 43, 230, 0.08),
    rgba(255, 255, 255, 0.01)
  );
  padding: 56px 48px;
  isolation: isolate;
}

/* Glow magenta in alto a sinistra */
.elementor-element-6807d34::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -60px;
  width: 420px;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 43, 230, 0.2), transparent 70%);
}

/* Glow magenta in basso a destra */
.elementor-element-6807d34::after {
  content: "";
  position: absolute;
  bottom: -160px;
  right: -40px;
  width: 420px;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(184, 43, 230, 0.12),
    transparent 70%
  );
}

/* Contenuto sopra ai glow */
.elementor-element-6807d34 > * {
  position: relative;
  z-index: 1;
}

/* ── Footer responsive ─────────────────────────────── */

/* Desktop (≥992px): row layout, items spaced out */
@media (min-width: 992px) {
  .site-footer .footer-inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.5rem;
  }
  .site-footer .footer-inner .site-branding {
    flex: 0 0 auto;
  }
  .site-footer .footer-inner .site-navigation {
    flex: 1 1 auto;
    justify-content: center;
  }
  .site-footer .footer-inner .copyright {
    flex: 0 0 auto;
  }
}

/* Tablet (576px–991px): wrap, nav full-width on second row */
@media (min-width: 576px) and (max-width: 991px) {
  .site-footer .footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .site-footer .footer-inner .site-branding {
    flex: 1 1 auto;
  }
  .site-footer .footer-inner .copyright {
    flex: 0 0 auto;
  }
  .site-footer .footer-inner .site-navigation {
    flex: 1 1 100%;
    justify-content: center;
  }
  .site-footer .footer-inner .site-navigation ul.menu {
    justify-content: center;
  }
}

/* Mobile (<576px): stack, center everything */
@media (max-width: 575px) {
  .site-footer .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
  .site-footer .footer-inner .site-branding,
  .site-footer .footer-inner .site-navigation,
  .site-footer .footer-inner .copyright {
    width: 100%;
    max-width: none;
    justify-content: center;
    text-align: center;
  }
  .site-footer .footer-inner .site-navigation ul.menu {
    justify-content: center;
  }
  .site-footer .footer-inner .copyright {
    justify-content: center;
  }
}

/* ----- WPForms edits ------------------ */
/* Rende il bottone largo al 100% solo per il form con ID 123 */
#wpforms-273 .wpforms-submit-container button[type="submit"] {
  width: 100% !important;
  border-radius: 24px;
}

/* ----- Hover lift card ------------------ */
/* Selettore .elementor .card-lift: stessa specificita' della classe globale
   generata da Elementor, ma questo foglio e' caricato dopo, quindi vince. */
.elementor .card-lift {
  border: 1px solid rgba(184, 43, 230, 0.12);
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.elementor .card-lift:hover,
.elementor .card-lift:focus-within {
  transform: translateY(-6px);
  border-color: rgba(184, 43, 230, 0.55);
  box-shadow:
    0 0 0 1px rgba(184, 43, 230, 0.25),
    0 0 24px rgba(184, 43, 230, 0.28),
    0 12px 24px rgba(0, 0, 0, .35);
}
@media (prefers-reduced-motion: reduce) {
  .elementor .card-lift { transition: none; }
  .elementor .card-lift:hover,
  .elementor .card-lift:focus-within { transform: none; }
}

/* ===== SWITCHER LINGUA WEGLOT (voce menu 745, dropdown) ===== */
/* ponytail: il testo "IT"/"EN" e' un nodo di testo dentro l'anchor, quindi
   font-size:0 invece di spegnere with_name su Weglot: quella e' remota,
   invisibile nel repo e vale per tutti gli switcher. Lo sprite bandiera sta
   su li.weglot-flags > a:before e ha width/height propri, non lo tocca.
   ponytail: !important su padding/background perche' post-314.css (Elementor,
   widget f49bf63) impone padding 15px/35px e background #fff con selettori a 5
   classi rigenerati a ogni salvataggio del template: inseguire la specificita'
   si rompe al primo re-save. */
.elementor .hfe-nav-menu li.menu-item-weglot > a,
.elementor .hfe-flyout-wrapper li.menu-item-weglot > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  width: 36px;
  height: 34px;
  min-width: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0;
  padding: 0 !important;
  background: transparent !important;
}

/* Weglot mette margin-right:10px sullo sprite: sballa il centraggio nei 36px. */
.elementor .hfe-nav-menu li.menu-item-weglot > a:before,
.elementor .hfe-flyout-wrapper li.menu-item-weglot > a:before {
  margin: 0 !important;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* La freccia HFE e' un glyph di icon font: senza questo muore con il testo. */
.elementor .hfe-nav-menu li.menu-item-weglot > a .sub-arrow,
.elementor .hfe-flyout-wrapper li.menu-item-weglot > a .sub-arrow {
  font-size: 10px !important;
  line-height: 1 !important;
}

/* Rettangolo largo come la bandiera (24px sprite + 12px padding) */
.elementor .hfe-nav-menu li.weglot-parent-menu-item > a,
.elementor .hfe-flyout-wrapper li.weglot-parent-menu-item > a {
  border: 1px solid rgba(184, 43, 230, 0.25);
  border-radius: 8px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.elementor .hfe-nav-menu li.weglot-parent-menu-item > a:hover,
.elementor .hfe-nav-menu li.weglot-parent-menu-item:focus-within > a,
.elementor .hfe-flyout-wrapper li.weglot-parent-menu-item > a:hover,
.elementor .hfe-flyout-wrapper li.weglot-parent-menu-item:focus-within > a {
  border-color: rgba(184, 43, 230, 0.55);
  box-shadow: 0 0 12px rgba(184, 43, 230, 0.25);
}

/* Pannello della tendina: stretto sulla bandiera, stesso vetro scuro delle card */
.elementor .hfe-nav-menu li.weglot-parent-menu-item .sub-menu {
  min-width: 0 !important;
  /* batte .elementor-element-f49bf63 ul.sub-menu{width:220px} di post-314.css */
  width: max-content !important;
  padding: 6px;
  border: 1px solid rgba(184, 43, 230, 0.25);
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
.elementor .hfe-nav-menu li.weglot-parent-menu-item .sub-menu li.menu-item-weglot > a {
  border-radius: 8px;
  transition: background-color .25s ease;
}
.elementor .hfe-nav-menu li.weglot-parent-menu-item .sub-menu li.menu-item-weglot > a:hover,
.elementor .hfe-nav-menu li.weglot-parent-menu-item .sub-menu li.menu-item-weglot > a:focus {
  background: rgba(184, 43, 230, 0.12) !important;
}

/* Dropdown mobile / flyout: il sub-menu e' inline, niente pannello sovrapposto */
.elementor nav.hfe-dropdown li.weglot-parent-menu-item .sub-menu,
.elementor nav.hfe-dropdown-expandible li.weglot-parent-menu-item .sub-menu,
.elementor .hfe-flyout-wrapper li.weglot-parent-menu-item .sub-menu {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .elementor .hfe-nav-menu li.menu-item-weglot > a,
  .elementor .hfe-flyout-wrapper li.menu-item-weglot > a {
    transition: none;
  }
}

/* ===== HEADER FISSA ALLO SCROLL ===== */
/* ponytail: sticky invece di fixed: l'header resta nel flusso, niente
   padding-top compensativo sul body ne' salto di layout. Elementor Pro
   (che avrebbe lo sticky nativo) non e' installato. */
.ehf-header #masthead {
  position: sticky;
  top: 0;
  z-index: 100; /* sopra i contenuti; sotto gli overlay Elementor (9999) */
  background-color: #000; /* header opaco: sotto ci scorre il contenuto */
}

/* Admin bar loggati: 32px desktop, 46px sotto i 783px */
.admin-bar.ehf-header #masthead {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar.ehf-header #masthead {
    top: 46px;
  }
}