/* ==========================================================================
   ECLIPSEMC — 03. HEADER + NAVIGAZIONE
   Carica come nuovo Asset CSS chiamato: eclipsemc-header-nav.css
   Classi reali da header.twig / navigation.twig
   ========================================================================== */

/* ===== FONT GLOBALE STORE =====
   Cambia SOLO questo valore per aggiornare il font in tutto lo store.
   Ricorda: se cambi font qui, aggiorna anche l'import in head.twig */
:root{
  --store-font: 'Orbitron', sans-serif;
}

body,
button,
input,
select,
textarea{
  font-family: var(--store-font) !important;
}

.site-home-categories{
  display: none !important;
}

.site-header{
  background: rgba(7,5,13,0.6) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.site-header-inner{
  padding: 16px 32px !important;
}

.site-title a{
  display:flex; align-items:center; gap:16px;
  text-decoration:none !important;
}
.site-title img{
  width:150px !important; height:150px !important; max-height:150px !important;
  border-radius:16px;
  box-shadow: 0 0 28px rgba(168,85,247,.7);
}
.site-title, .site-title .eclipse-name-text{
  color:#fff !important;
  font-size:20px !important;
}

/* Il markup del tema mostra SOLO il logo (nessun testo nel DOM),
   quindi generiamo noi il nome dello store accanto all'immagine */
.site-title a::after{
  content: "EclipseMC";
  font-family: var(--store-font);
  font-weight:800;
  font-size:75px;
  letter-spacing:1px;
  color:#fff;
  white-space:nowrap;
}

/* box "server IP" e "discord" nell'header */
.site-header-inner .info{
  background: var(--color-brighter-bg) !important;
  border: 1px solid rgba(139,92,246,.2) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
.site-header-inner .info .title{
  color:#e6e3f0 !important;
}
.site-header-inner .info .action{
  color: var(--color-primary) !important;
}

/* Nel box "server IP" sostituiamo l'icona persona col logo EclipseMC. */
.site-header-inner .info.server .image{
  content: url("https://dunb17ur4ymx4.cloudfront.net/webstore/logos/ad0c35e1f5964cc89e229593297515663124cfc7.png") !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}

/* banner promozionale in cima */
.site-sale-banner{
  background: linear-gradient(135deg,#7c3aed,#c026d3) !important;
  color:#fff !important;
  font-weight:700 !important;
  text-align:center !important;
}

/* menu di navigazione orizzontale — stile "pillole" */

/* ===== IMPOSTAZIONI RAPIDE PILLOLE =====
   Cambia questi 4 valori per ridimensionare tutte le pillole insieme */
:root{
  --pill-padding-v: 16px;   /* altezza (padding sopra/sotto) */
  --pill-padding-h: 28px;   /* larghezza (padding sinistra/destra) */
  --pill-font-size: 16px;   /* dimensione testo */
  --pill-gap: 14px;         /* spazio tra una pillola e l'altra */
}

.navigation-horizontal{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.navigation-horizontal .menu{
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  background: rgba(15,12,25,.6) !important;
  border: 1px solid rgba(139,92,246,.2) !important;
  border-radius: 16px !important;
  padding: 10px !important;
}
.navigation-horizontal > ul{
  background: transparent !important;
  border: none !important;
}
.navigation-horizontal li{
  display: block;
}
.navigation-horizontal .log-out{
  display: none !important;
}
.navigation-horizontal > ul > li > a{
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: var(--pill-padding-v) var(--pill-padding-h) !important;
  background: rgba(139,92,246,.08) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-family: var(--store-font) !important;
  text-transform: uppercase;
  font-size: var(--pill-font-size) !important;
  transition: all .2s ease;
}
.navigation-horizontal a{
  color:#e6e3f0 !important;
}
.navigation-horizontal > ul > li > a:hover,
.navigation-horizontal > ul > li > a.link-active{
  color: #fff !important;
  border-color: var(--color-primary) !important;
  background: rgba(168,85,247,.18) !important;
}

/* freccina ▾ accanto alle voci che hanno sottomenu, come "SURVIVAL" nell'esempio */
.navigation-horizontal li.has-children > a::after{
  content: "▾";
  font-size: 12px;
  margin-left: 4px;
  transition: transform .18s ease;
}
.navigation-horizontal li.has-children:hover > a::after{
  transform: rotate(180deg);
}

/* ===== DROPDOWN SOTTOMENU (categorie con sottocategorie/pacchetti) ===== */

.navigation-horizontal li.has-children{
  position: relative;
}

/* nascondi di default il sottomenu */
.navigation-horizontal li.has-children > ul{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px !important;
  margin: 0;
  margin-top: 10px;
  list-style: none;

  background: var(--color-brighter-bg) !important;
  border: 1px solid rgba(139,92,246,.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 50;
}

/* "ponte" invisibile che copre il gap tra la pillola e il dropdown,
   così il mouse non perde mai l'hover passando da uno all'altro */
.navigation-horizontal li.has-children::before{
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 49;
}

/* mostra SOLO al passaggio del mouse o al click (force-open via JS).
   Rimosso .expanded: non si apre più fisso quando sei dentro quella categoria. */
.navigation-horizontal li.has-children:hover > ul,
.navigation-horizontal li.has-children.force-open > ul{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* voci dentro il dropdown */
.navigation-horizontal li.has-children > ul li{
  width: 100%;
}
.navigation-horizontal li.has-children > ul a{
  display: block !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--store-font) !important;
  text-transform: none !important;
  white-space: nowrap;
  color: #e6e3f0 !important;
}
.navigation-horizontal li.has-children > ul a:hover,
.navigation-horizontal li.has-children > ul a.link-active{
  background: rgba(168,85,247,.18) !important;
  color: #fff !important;
}

/* il pulsante "toggle" generato dal tema: nascondilo su desktop,
   il dropdown si apre già in hover. Su mobile invece serve al click */
.navigation-horizontal .toggle{
  display: none;
}
@media (max-width: 900px){
  .navigation-horizontal li.has-children:hover > ul{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .navigation-horizontal li.has-children.force-open:hover > ul{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .navigation-horizontal .toggle{
    display: inline-flex;
  }
  .navigation-horizontal li.has-children.force-open > ul{
    position: static;
    box-shadow: none;
    transform: none;
  }
}