/* ==========================================================================
   Orologiando – effetti del sito
   Da caricare sul frontend (vedi enqueue-orologiando.php).
   Classi usate nei JSON di Elementor:
     .oro-service              contenitore "Servizio" (riga dell'indice servizi)
     .oro-icon                 svg dell'icona
     .oro-a                    elemento animato dentro l'icona (+ una classe oro-a--…)
     .oro-rings                cerchi concentrici di sfondo (+ oro-rings--hero / oro-rings--cta)
     .oro-photo                widget Immagine ritagliato a formato (+ oro-photo--219/169/43/45/arch)
   ========================================================================== */

/* ---- riga servizio ---- */
.oro-service {
  transition: background-color .25s ease;
}

@media (hover:hover) and (pointer:fine) {
  .oro-service:hover {
    background-color: #121c330a;
  }
}

/* ---- icone: base ---- */
.oro-icon {
  overflow: visible;
}

.oro-a {
  animation-iteration-count: infinite;
  animation-play-state: paused;  /* a riposo l'icona è ferma */
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* ---- keyframes ---- */
@keyframes oro-spin-cw {
  to {
    transform: rotate(360deg);
  }
}

@keyframes oro-spin-ccw {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes oro-swing {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(14deg);
  }
  50% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(-14deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes oro-wobble {
  0%,100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

@keyframes oro-dot {
  0%,55%,100% {
    opacity: 1;
  }
  25% {
    opacity: .15;
  }
}

/* ---- orologi: ingranaggi che si ingranano ---- */
.oro-a--gear-big {
  animation-name: oro-spin-cw;
  animation-duration: 7s;
  animation-timing-function: linear;
}

.oro-a--gear-small {
  animation-name: oro-spin-ccw;
  animation-duration: 3.8s;
  animation-timing-function: linear;
}

.oro-a--gear-tiny {
  animation-name: oro-spin-cw;
  animation-duration: 2.4s;
  animation-timing-function: linear;
}

/* ---- pendoli: oscillazione ---- */
.oro-a--swing {
  animation-name: oro-swing;
  animation-duration: 2.6s;
  animation-timing-function: ease-in-out;
  transform-box: view-box;
  transform-origin: 130px 14px;  /* punto di sospensione */
}

/* ---- pile e cinturini: pila che ondeggia, fori del cinturino che si accendono in sequenza ---- */
.oro-a--wobble {
  animation-name: oro-wobble;
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
}

.oro-a--dot {
  animation-name: oro-dot;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

.oro-a--dot:nth-child(2) {
  animation-delay: .25s;
}

.oro-a--dot:nth-child(3) {
  animation-delay: .5s;
}

.oro-a--dot:nth-child(4) {
  animation-delay: .75s;
}

/* ---- quando si muovono ---- */
/* mouse: al passaggio sulla riga (o con la tastiera sul link) */
.oro-service:hover .oro-a,
.oro-service:focus-within .oro-a {
  animation-play-state: running;
}

/* touch (smartphone e tablet, niente hover): si muovono subito, in continuo */
@media (hover:none), (pointer:coarse) {
  .oro-a {
    animation-play-state: running;
  }
}

/* il JS mette in pausa le icone fuori dallo schermo (solo risparmio batteria) */
.oro-icon.is-offscreen .oro-a {
  animation-play-state: paused !important;
}

/* chi ha "riduci animazioni" attivo non vede movimento */
@media (prefers-reduced-motion:reduce) {
  .oro-a {
    animation: none !important;
  }
}

/* ==========================================================================
   Cerchi concentrici di sfondo – solo CSS, nessuna immagine.
   Si attivano aggiungendo una classe al contenitore ESTERNO della sezione
   (Avanzate → Classi CSS):
     hero (blu notte):   oro-rings oro-rings--hero
     invito (ambra):     oro-rings oro-rings--cta
   ========================================================================== */
.e-con.oro-rings {
  position: relative;
  overflow: hidden;
  --overflow: hidden;
  isolation: isolate;
}

.oro-rings::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle,#000 18%,transparent 68%);
  mask-image: radial-gradient(circle,#000 18%,transparent 68%);
}

/* hero: cerchi ambra a destra */
.oro-rings--hero::after {
  width: 1250px;
  height: 1250px;
  right: -420px;
  top: 42%;
  transform: translateY(-50%);
  background: repeating-radial-gradient(circle at center,transparent 0 6px,rgba(255,186,56,.10) 6px 7px);
}

/* invito: cerchi blu notte a sinistra */
.oro-rings--cta::after {
  width: 900px;
  height: 900px;
  left: -260px;
  top: 50%;
  transform: translateY(-50%);
  background: repeating-radial-gradient(circle at center,transparent 0 6px,rgba(15,27,48,.12) 6px 7px);
}

@media (max-width:1024px) {
  .oro-rings--hero::after {
    width: 900px;
    height: 900px;
    right: -340px;
  }

  .oro-rings--cta::after {
    width: 700px;
    height: 700px;
    left: -240px;
  }
}

@media (max-width:767px) {
  .oro-rings--hero::after {
    width: 640px;
    height: 640px;
    right: -260px;
    top: 30%;
  }

  .oro-rings--cta::after {
    width: 520px;
    height: 520px;
    left: -200px;
  }
}

/* ==========================================================================
   Foto (widget Immagine di Elementor con classe "oro-photo oro-photo--FORMATO")
   Il formato ritaglia l'immagine senza deformarla (object-fit: cover):
     oro-photo--219  panoramica 21:9      oro-photo--169  16:9
     oro-photo--43   4:3                   oro-photo--45   4:5 verticale
     oro-photo--arch 4:5 con ritaglio ad arco e bordo ambra
     oro-photo--round 1:1 con ritaglio tondo e bordo ambra
   ========================================================================== */
.oro-photo {
  overflow: hidden;
  border-radius: 8px;
}

.oro-photo > .elementor-widget-container {
  height: 100%;
}

.oro-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oro-photo--219 {
  aspect-ratio: 21/9;
}

.oro-photo--169 {
  aspect-ratio: 16/9;
}

.oro-photo--43 {
  aspect-ratio: 4/3;
}

.oro-photo--45 {
  aspect-ratio: 4/5;
}

.oro-photo--arch {
  aspect-ratio: 4/5;
  max-width: 440px;
  margin-inline: auto;
  border-radius: 999px 999px 8px 8px;
  border: 2px solid #FFBA38;
}

.oro-photo--round {
  aspect-ratio: 1 / 1;
  max-width: 440px;
  margin-inline: auto;
  border-radius: 50%;
  border: 2px solid #FFBA38;
}

/* nelle card delle fasi la foto è a filo con il bordo della card */
.oro-step-card .oro-photo {
  border-radius: 0;
}

/* ==========================================================================
   Header – widget "Menu di WordPress" (Elementor Pro)
   Non serve nessuna classe: agisce direttamente sul widget del menu e sul logo.
   Usa :has(), supportato da tutti i browser recenti.
   ========================================================================== */

/* 1) logo e hamburger centrati nella riga: niente spazio sotto l'hamburger */
.elementor-widget-nav-menu,
.elementor-widget-theme-site-logo {
  align-self: center !important;
}

.elementor-widget-nav-menu .elementor-menu-toggle {
  margin: 0;
  padding: 0;
  background-color: transparent !important;
  color: #F6F6F3 !important;
}

.elementor-widget-nav-menu .elementor-menu-toggle svg {
  fill: #F6F6F3 !important;
}

/* 2) il menu a discesa si apre sotto l'header, a tutta larghezza.
      Senza "Larghezza intera: estendi" Elementor lo lascia nel flusso della pagina:
      per questo allungava l'header e restava stretto come l'hamburger. */
.e-con .e-con:has(.elementor-widget-nav-menu),
.elementor-widget-nav-menu,
.elementor-widget-nav-menu > .elementor-widget-container {
  position: static !important;   /* nessun elemento "relative" tra il menu e l'header */
}

.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  position: absolute !important;   /* fuori dal flusso: non allunga più l'header */
  z-index: 9997;
  top: 100%;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  margin-top: 0 !important;
  background-color: #0F1B30;
  border-top: 1px solid rgba(246, 246, 243, .26);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .55);
}

/* a menu aperto: occupa tutta l'altezza dello schermo sotto l'header
   (100% qui è l'altezza dell'header, perché il menu è posizionato rispetto a lui) */
.elementor-widget-nav-menu .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  height: calc(100vh - 100%) !important;
  height: calc(100dvh - 100%) !important;   /* iPhone/Android: tiene conto della barra del browser */
  max-height: none !important;
  padding-bottom: calc(6vh + env(safe-area-inset-bottom));   /* sposta il centro un po' più in alto, otticamente più bilanciato */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* voci centrate in verticale; con margin:auto, se lo schermo è basso (telefono in orizzontale)
   l'elenco parte comunque dall'alto e si può scorrere, senza tagliare le prime voci */
.elementor-widget-nav-menu .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul {
  margin-block: auto;
  width: 100%;
}

/* 3) voci del menu a discesa: colori, testo e allineamento con il logo */
.elementor-widget-nav-menu .elementor-nav-menu--dropdown a {
  padding: 16px 5vw !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: #F6F6F3 !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(246, 246, 243, .26) !important;
}

.elementor-widget-nav-menu .elementor-nav-menu--dropdown a:hover,
.elementor-widget-nav-menu .elementor-nav-menu--dropdown a:focus,
.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item-active {
  color: #FFBA38 !important;
}

@media (max-width: 767px) {
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown a {
    padding-left: 7.5vw !important;
    padding-right: 7.5vw !important;
  }
}

/* ==========================================================================
   Icone aggiuntive (pagina pile e cinturini):
   pila con alone che pulsa, cinturino con fori che si accendono, vetro con riflesso che scorre
   Le righe "oro-service oro-service--static" hanno le animazioni sempre attive
   e non hanno hover né puntatore (nessun link).
   ========================================================================== */
@keyframes oro-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: .35;
  }
  50% {
    transform: scale(1.07);
    opacity: 1;
  }
}

@keyframes oro-glint {
  0% {
    transform: translate(-60px, 50px);
    opacity: 0;
  }
  20%, 60% {
    opacity: .9;
  }
  100% {
    transform: translate(70px, -60px);
    opacity: 0;
  }
}

.oro-a--pulse {
  animation-name: oro-pulse;
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
}

.oro-a--glint {
  animation-name: oro-glint;
  animation-duration: 2.8s;
  animation-timing-function: ease-in-out;
}

/* righe "oro-service--static" (senza link): animazioni sempre attive fin dal caricamento,
   nessun effetto hover e nessun puntatore. Valgono per mouse, touch e tastiera. */
.oro-service--static .oro-a {
  animation-play-state: running;
}

.oro-service.oro-service--static:hover {
  background-color: transparent;
  cursor: default;
}

/* ==========================================================================
   Mappa Google (widget "Google Maps" di Elementor con classe oro-map)
   ========================================================================== */
.oro-map {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(18, 28, 51, .22);
}