/* =========================================================
   BARRA MENU SUPERIORE + INFERIORE — IDENTICHE
   ========================================================= */
.main-nav,
.bottom-nav{
  box-sizing:border-box !important;
}

/* Data e ora sempre affiancate */
.main-nav .nav-datetime,
.bottom-nav .nav-datetime{
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  white-space:nowrap !important;
  text-align:center !important;
}
.main-nav .nav-datetime .nav-date,
.main-nav .nav-datetime .nav-time,
.bottom-nav .nav-datetime .nav-date,
.bottom-nav .nav-datetime .nav-time{
  display:inline !important;
  margin:0 !important;
  line-height:1 !important;
}

/* La barra in fondo mantiene esattamente lo stesso aspetto */
.bottom-nav{
  margin-top:12px !important;
  margin-bottom:0 !important;
}

/* Smartphone: barra leggibile e scorribile orizzontalmente, senza tagliare
   pulsanti o data/ora */
@media (max-width:900px){
  .main-nav,
  .bottom-nav{
    height:44px !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .main-nav::-webkit-scrollbar,
  .bottom-nav::-webkit-scrollbar{display:none !important;}
  .main-nav a,
  .bottom-nav a{
    flex:0 0 auto !important;
  }
  .main-nav .nav-datetime,
  .bottom-nav .nav-datetime{
    flex:0 0 auto !important;
    min-width:145px !important;
    padding:5px 7px !important;
    gap:5px !important;
  }
}

@media (max-width:560px){
  .main-nav,
  .bottom-nav{
    height:43px !important;
    padding-left:5px !important;
    padding-right:5px !important;
    gap:1px !important;
  }
  .main-nav a,
  .bottom-nav a{
    font-size:8.5px !important;
    padding:8px 7px !important;
  }
  .main-nav .nav-datetime,
  .bottom-nav .nav-datetime{
    min-width:125px !important;
    font-size:8px !important;
    padding:5px 4px !important;
    gap:4px !important;
  }
  .main-nav .nav-datetime .nav-date,
  .bottom-nav .nav-datetime .nav-date{font-size:8px !important;}
  .main-nav .nav-datetime .nav-time,
  .bottom-nav .nav-datetime .nav-time{font-size:9px !important;}
}


/* Barra inferiore dentro il contenitore principale del sito */
.page > .bottom-nav{
  width:100% !important;
  box-sizing:border-box !important;
}

/* SMARTPHONE: tutta la barra menu + data/ora visibile nello schermo */
@media (max-width:430px){
  .main-nav,
  .bottom-nav{
    height:40px !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    padding:0 2px !important;
    gap:0 !important;
  }
  .main-nav a,
  .bottom-nav a{
    flex:0 0 auto !important;
    font-size:7px !important;
    line-height:1 !important;
    padding:7px 3px !important;
    margin:0 !important;
  }
  .main-nav .nav-datetime,
  .bottom-nav .nav-datetime{
    flex:0 0 auto !important;
    min-width:101px !important;
    width:101px !important;
    padding:3px 2px !important;
    gap:3px !important;
    font-size:7px !important;
    line-height:1 !important;
  }
  .main-nav .nav-datetime .nav-date,
  .bottom-nav .nav-datetime .nav-date{
    font-size:7px !important;
  }
  .main-nav .nav-datetime .nav-time,
  .bottom-nav .nav-datetime .nav-time{
    font-size:7px !important;
  }
}

/* =========================================================
   SMARTPHONE — MENU PIÙ LEGGIBILE, DATA/ORA PIÙ VICINA A CONTATTI
   ========================================================= */
@media (max-width:430px){
  .main-nav,
  .bottom-nav{
    height:40px !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    padding:0 2px !important;
    gap:0 !important;
  }
  .main-nav a,
  .bottom-nav a{
    flex:0 0 auto !important;
    font-size:8.2px !important;
    line-height:1 !important;
    padding:7px 4px !important;
    margin:0 !important;
  }
  .main-nav .nav-datetime,
  .bottom-nav .nav-datetime{
    flex:0 0 78px !important;
    width:78px !important;
    min-width:78px !important;
    padding:3px 1px !important;
    margin-left:0 !important;
    gap:2px !important;
    font-size:7.8px !important;
    line-height:1 !important;
  }
  .main-nav .nav-datetime .nav-date,
  .bottom-nav .nav-datetime .nav-date,
  .main-nav .nav-datetime .nav-time,
  .bottom-nav .nav-datetime .nav-time{
    font-size:7.8px !important;
  }
}

/* BORDO 3D SUI 4 PULSANTI DEL MENU — stesso stile del sito */
.main-nav > a,
.bottom-nav > a{
  border:1px solid #173b67 !important;
  border-radius:18px !important;
  box-shadow:
    3px 3px 0 rgba(23,59,103,.20),
    3px 3px 8px rgba(20,40,70,.28),
    inset 0 2px 0 rgba(255,255,255,.78),
    inset -2px 0 0 rgba(23,59,103,.12) !important;
}

.main-nav > a:hover,
.bottom-nav > a:hover{
  border-color:#173b67 !important;
  box-shadow:
    3px 3px 0 rgba(23,59,103,.20),
    3px 3px 8px rgba(20,40,70,.28),
    inset 0 2px 0 rgba(255,255,255,.78),
    inset -2px 0 0 rgba(23,59,103,.12) !important;
}

/* =========================================================
   NAVIGAZIONE - FINITURA PULSANTI
   Queste regole sono volutamente alla fine del file per
   prevalere sulle impostazioni precedenti del menu.
   ========================================================= */
.main-nav > a,
.page > .bottom-nav > a,
nav.main-nav.bottom-nav > a{
  border-radius:7px !important;
  transition:transform .16s ease, box-shadow .16s ease !important;
}

.main-nav > a:hover,
.page > .bottom-nav > a:hover,
nav.main-nav.bottom-nav > a:hover{
  transform:translateY(-3px) !important;
  box-shadow:
    5px 7px 0 rgba(23,59,103,.20),
    5px 7px 12px rgba(20,40,70,.32),
    inset 0 2px 0 rgba(255,255,255,.78),
    inset -2px 0 0 rgba(23,59,103,.12) !important;
}