/*
Theme Name:   Hello Elementor Child — OPI Crotone
Theme URI:    https://thinkthevibe.com
Description:  Child theme di Hello Elementor per il sito OPI Crotone. Design system "Ionio" — sviluppo VIBE S.R.L.S.
Author:       VIBE S.R.L.S.
Author URI:   https://thinkthevibe.com
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child-opi
*/

/* ==========================================================================
   OPI CROTONE — Design system "Ionio"
   Variabili di riferimento (i colori si impostano nei Global di Elementor;
   qui servono solo per il CSS custom)
   ========================================================================== */
:root {
  --opi-petrolio: #0B3C49;
  --opi-petrolio-scuro: #072B35;
  --opi-teal: #10707E;
  --opi-acqua: #E9F4F4;
  --opi-acqua-chiara: #F5FAFA;
  --opi-corallo: #E8604C;
  --opi-corallo-scuro: #D14A36;
  --opi-bordo: #D6E5E5;
  --opi-azzurro: #8FD3D9;
}

/* ==========================================================================
   1. STICKY HEADER (Elementor Header & Footer Builder)
   Il builder applica la classe .ehf-header al body e #masthead al wrapper.
   ========================================================================== */
.ehf-header #masthead {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
}

/* Ombra leggera quando la pagina scorre sotto l'header */
.ehf-header #masthead {
  box-shadow: 0 1px 0 var(--opi-bordo);
}

/* ==========================================================================
   2. HOVER CARD — aggiungere la classe "opi-card" nel campo
      Avanzate > Classi CSS del container in Elementor
   ========================================================================== */
.opi-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.opi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px rgba(11, 60, 73, .16) !important;
  border-color: var(--opi-teal) !important;
}

/* Variante per card su fondo scuro (sezione Formazione) */
.opi-card-dark {
  transition: background .2s ease, border-color .2s ease;
}
.opi-card-dark:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .30) !important;
}

/* ==========================================================================
   3. BOTTONI — classe "opi-btn" sul widget Pulsante (Avanzate > Classi CSS)
   ========================================================================== */
.opi-btn .elementor-button {
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.opi-btn:hover .elementor-button {
  transform: translateY(-2px);
}
.opi-btn-corallo .elementor-button {
  box-shadow: 0 8px 24px rgba(232, 96, 76, .35);
}
.opi-btn-corallo:hover .elementor-button {
  background-color: var(--opi-corallo-scuro) !important;
}

/* ==========================================================================
   4. LINEA ECG — animazione del battito
      Classe "opi-pulse" sul widget HTML che contiene l'SVG
   ========================================================================== */
.opi-pulse svg path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: opi-battito 4.5s ease-out forwards;
}
@keyframes opi-battito {
  to { stroke-dashoffset: 0; }
}

/* ==========================================================================
   5. ACCESSIBILITÀ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .opi-pulse svg path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .opi-card:hover,
  .opi-btn:hover .elementor-button {
    transform: none;
  }
}

/* Focus visibile su link e bottoni (requisito WCAG per ente pubblico) */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid var(--opi-corallo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   6. RIFINITURE
   ========================================================================== */
/* Smoothing dei font display */
h1, h2, h3 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Link nelle liste documenti: micro-slide su hover
   (classe "opi-lista-doc" sul widget Icon List) */
.opi-lista-doc .elementor-icon-list-item a {
  transition: color .15s ease, padding-left .15s ease;
}
.opi-lista-doc .elementor-icon-list-item a:hover {
  color: var(--opi-teal);
  padding-left: 10px;
}