/* File: /wp-content/themes/pandora-custom/assets/css/04-menu.css */
/* Menu icone rotonde ORIZZONTALE */

:root{
  --pandora-icon-size: 62px;
  --pandora-icon-gap: 18px;
  --pandora-text-display: none;
}

/* Menu ORIZZONTALE centrato */
#masthead.pandora-header .menu,
#masthead.pandora-header .main-navigation ul,
#masthead .main-navigation .menu{
  list-style: none !important;
  margin: 0 !important;
  padding: 15px 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  gap: var(--pandora-icon-gap) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

#masthead .menu-item,
#masthead .main-navigation li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: inline-flex !important;
  width: auto !important;
}

#masthead .menu-item::before{ display:none !important; }

#masthead .menu-item a,
#masthead .main-navigation a{
  background: transparent !important;
  border: 0 !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#masthead .pandora-menu-item-wrapper{
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#masthead .menu-item a img.pandora-menu-icon{
  width: var(--pandora-icon-size) !important;
  height: var(--pandora-icon-size) !important;
  min-width: var(--pandora-icon-size) !important;
  min-height: var(--pandora-icon-size) !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  background: #0a0514 !important;
  border: 2px solid rgba(131,0,254,0.35) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
  transition: .22s !important;
}

#masthead .menu-item a:hover img.pandora-menu-icon{
  transform: scale(1.12) !important;
  border-color: #8300fe !important;
  box-shadow: 0 0 20px rgba(131,0,254,0.65) !important;
}

#masthead .pandora-menu-text{
  display: var(--pandora-text-display) !important;
}

@media(max-width:768px){
  :root{ --pandora-icon-size: 52px; --pandora-icon-gap: 12px; }
}