/* ==========================================================================
   ECLIPSEMC — 01. FONT + TOCCHI VISIVI (non coperti dalle variabili)
   Carica come Asset CSS: eclipsemc-01-extras.css
   (va caricato DOPO eclipsemc-00-variables.css)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap");

/* Il tema Exo imposta il font direttamente su body (non con una variabile),
   quindi qui serve !important per essere sicuri che vinca */
body{
  font-family: 'Inter', sans-serif !important;
}

/* Titoli, nome dello store, prezzi: font più "gaming/tecnico" */
.site-title,
.product-title,
.widget-title,
h1, h2, h3, h4, h5, h6{
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: .5px;
}

/* Prezzo in evidenza dentro le card prodotto, leggermente più marcato */
.store-product .price strong,
.store-product-tiered .price strong,
.store-product-full .price strong{
  color: var(--color-primary);
}

/* Bordo leggero + ombra sulle card prodotto per staccarle dallo sfondo */
.store-product,
.store-product-tiered,
.widget,
.category-description,
.store-text,
.store-category-tiered{
  border: 1px solid rgba(139,92,246,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Effetto hover leggero sulle card prodotto (solo estetico, non tocca la struttura) */
.store-product{
  transition: transform .2s ease, border-color .2s ease;
}
.store-product:hover{
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   ECLIPSEMC — ICONE NEL MENU DI NAVIGAZIONE
   Ogni voce ha le sue variabili: dimensione, offset verticale, contenuto.
   Funziona sia per emoji (testo) sia per immagini/GIF (via url).

   COME AGGIUNGERE UNA VOCE NUOVA:
   1) Trova lo slug esatto della voce (guarda data-slug="..." nell'HTML)
   2) Copia uno dei blocchi TEMPLATE qui sotto e cambia "SLUG_QUI"
   3) Se è un'emoji, usa il blocco "EMOJI". Se è un'immagine/gif, usa "IMMAGINE"
--------------------------------------------------------------------- */

/* base comune: spazio riservato per l'icona prima del testo, su TUTTE le voci */
.navigation-horizontal li > a {
  display: inline-flex !important;
  align-items: center !important;
}

.navigation-horizontal li > a::before {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji", sans-serif !important;
  line-height: 1 !important;
  transform: none !important;
}

/* =======================================================================
   VOCI ATTIVE
   ======================================================================= */

/* ---- Home (emoji) ---- */
.navigation-horizontal li[data-slug="home"] > a::before {
  content: "🏠" !important;
  font-size: 18px !important;   /* dimensione emoji */
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;  /* spazio dal testo */
  position: relative !important;
  top: -2px !important;            /* sposta su (-) o giù (+) per allineare */
}

/* ---- Survival (emoji) ---- */
.navigation-horizontal li[data-slug="survival"] > a::before {
  content: "⚔️" !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;
  position: relative !important;
  top: -2px !important;
}

/* =======================================================================
   TEMPLATE — copia/incolla e modifica per aggiungere altre voci
   ======================================================================= */

/* -- Template EMOJI / SIMBOLI (anche caratteri Unicode "strani") --
.navigation-horizontal li[data-slug="SLUG_QUI"] > a::before {
  content: "🎯" !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;
  position: relative !important;
  top: 0px !important;
}
*/

/* -- Template IMMAGINE (anche da link esterni, funziona anche con .gif) --
.navigation-horizontal li[data-slug="SLUG_QUI"] > a::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  background-image: url("https://esempio.com/icona.gif") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-right: 10px !important;
  position: relative !important;
  top: 0px !important;
}
*/