/* Voce di menu: filo sotto il testo al passaggio del mouse e sulla pagina
   corrente (header e footer). Il bordo trasparente è sempre presente così la
   riga non si sposta all'hover; il colore lo eredita dal testo, quindi
   funziona sia sull'header trasparente sull'hero sia sul footer scuro.
   Le classi le mette WordPress: `current-menu-item` sul <li> e
   `aria-current="page"` sul link, perché le voci sono di tipo pagina. */
.wp-block-navigation-item__content {
  border-bottom: 1px solid transparent;
  transition: border-color var(--wp--custom--transition-duration)
    var(--wp--custom--transition-timing-function);
}

.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus-visible,
.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item__content[aria-current="page"] {
  border-bottom-color: currentColor;
  text-decoration: none;
}

.wp-block-navigation-item__content[aria-current="page"] {
  font-weight: 700;
}

/* Il menu principale resta a scomparsa finché l'header non ha spazio a
   sufficienza: le sette voci in Cormorant, accanto al titolo del sito, stanno
   comode solo da 900px in su. WordPress passa alla versione mobile a 600px e
   il breakpoint non è configurabile, quindi lo si sposta qui.

   Il figlio diretto (>) è necessario: dentro l'overlay c'è un secondo blocco
   navigation, e senza il combinatore la seconda regola nasconderebbe le voci
   proprio a menu aperto. La classe arriva da parts/header.html. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .vb-nav-principale > .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .vb-nav-principale > .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}