/*
====================================================================
ETRUSCAFORM v2.9.9 — Social Fix, Slider Fix, Footer Contrast, Images
====================================================================
Data: 2026-02-20

Modifiche:
1. Team cards — Social icons visibili (override display:none di v2-6)
   + spazio verticale dopo pulsante Bio
2. Price slider dark mode — Thumb centrato sulla track line
3. Footer — Contrasto indirizzo migliorato (light mode e dark footer)
4. Chi Siamo immagini — Supporto customizer per missione e accreditamento

Note architettura:
- v2-6-updates.css nasconde .ef-team-card__social con display:none!important
- v2.9.8 definisce i social dentro .ef-team-card__info overlay
- v2.9.9 sovrascrive il display:none e aggiunge fix per slider/footer
- Ordine cascade: …→ v2.9.8 → v2.9.9 (questo file vince)
====================================================================
*/


/* ══════════════════════════════════════════════
   1. TEAM CARDS — SOCIAL ICONS VISIBILI
   ══════════════════════════════════════════════
   v2-6-updates.css L262 impone:
     .ef-team-card__social { display: none !important; }
   Serve specificità più alta per vincere.
   ══════════════════════════════════════════════ */

/* Override del display:none di v2-6 — specificità: 0,3,0 */
.ef-team-card .ef-team-card__info .ef-team-card__social {
  display: flex !important;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

/* Assicura che social a dentro il nuovo overlay funzionino */
.ef-team-card .ef-team-card__info .ef-team-card__social a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.ef-team-card .ef-team-card__info .ef-team-card__social a:hover {
  background: var(--color-secondary, #d07c39);
  color: #ffffff !important;
  transform: scale(1.15);
}

.ef-team-card .ef-team-card__info .ef-team-card__social a svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Spazio verticale dopo pulsante Bio */
.ef-team-card__info {
  padding-bottom: 1.2rem !important;
}

/* Bio button — un po' di margine sotto */
.ef-team-card__bio-btn {
  margin-bottom: 0.3rem;
}


/* ══════════════════════════════════════════════
   2. PRICE SLIDER DARK MODE — THUMB CENTRATO
   ══════════════════════════════════════════════
   Il thumb (20px) è più alto del track (6px).
   In dark mode il thumb cade sotto la linea.
   Fix: centrare il thumb rispetto al track con
   margin-top negativo e posizionamento corretto.
   ══════════════════════════════════════════════ */

/* Assicura che il container del track abbia spazio per il thumb */
.ef-el__price-track {
  position: relative;
  height: 6px;
  margin: 12px 0; /* era 8px, serve più spazio per thumb overflow */
}

/* Input range centrato verticalmente */
.ef-el__price-track input[type="range"] {
  position: absolute;
  width: 100%;
  height: 6px;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 2;
}

/* WebKit thumb — centrato sulla track */
.ef-el__price-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 3px solid var(--color-secondary, #d07c39);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: -8px; /* (22 - 6) / 2 = 8 — centra su track di 6px */
  position: relative;
  z-index: 3;
}

.ef-el__price-track input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 12px rgba(208, 124, 57, 0.4);
}

/* Firefox thumb */
.ef-el__price-track input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: #fff;
  border: 3px solid var(--color-secondary, #d07c39);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Firefox track — deve essere trasparente */
.ef-el__price-track input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
  height: 6px;
}

/* Dark mode — thumb con bordo più visibile */
[data-theme="dark"] .ef-el__price-track input[type="range"]::-webkit-slider-thumb {
  background: #ffffff;
  border-color: var(--color-secondary, #d07c39);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin-top: -8px;
}

[data-theme="dark"] .ef-el__price-track input[type="range"]::-moz-range-thumb {
  background: #ffffff;
  border-color: var(--color-secondary, #d07c39);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Fill bar in dark mode — z-index corretto */
[data-theme="dark"] .ef-el__price-fill {
  z-index: 1;
}


/* ══════════════════════════════════════════════
   3. FOOTER — CONTRASTO INDIRIZZO
   ══════════════════════════════════════════════
   L'indirizzo nel footer è un <span> dentro <li>,
   non un <a>, quindi non riceve lo styling dei link.
   Fix: dare allo span lo stesso colore (o più chiaro)
   dei link nel footer.
   ══════════════════════════════════════════════ */

/* Span e testo non-link nel footer — stessa visibilità dei link */
.ef-footer__column li span,
.ef-footer__column li {
  color: rgba(250, 246, 241, 0.75);
  font-size: 0.95rem;
}

/* Light mode footer (vecchio template con sfondo chiaro) */
#content-footer-section li span,
#content-footer-section li {
  color: rgba(57, 17, 14, 0.8);
}

/* Dark footer explicit */
[data-theme="dark"] .ef-footer__column li span {
  color: rgba(250, 246, 241, 0.75);
}


/* ══════════════════════════════════════════════
   4. CHI SIAMO — IMMAGINI DA CUSTOMIZER
   ══════════════════════════════════════════════
   Stili per le immagini caricate via customizer
   per missione e accreditamento.
   ══════════════════════════════════════════════ */

.ef-mission-image img,
.ef-accred-visual img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

/* Accred card quando ha immagine custom */
.ef-accred-visual--has-image {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.ef-accred-visual--has-image img {
  border-radius: 16px;
}


/* ══════════════════════════════════════════════
   FINE v2.9.9
   ══════════════════════════════════════════════ */