/**
 * Stile del menu pubblico, uguale su ogni pagina.
 * Caricato dopo style.css / sito.css: usa le stesse variabili.
 */

/* Le pagine documento non hanno style.css: la regola va ripetuta qui,
   altrimenti `hidden` non nasconde niente. */
[hidden] { display: none !important; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--orange2, #ffa45c);
  text-decoration: none;
  border: 1px solid rgba(255, 122, 24, .35);
  background: rgba(255, 122, 24, .12);
  border-radius: 999px;
  padding: 7px 12px;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}

.site-nav a:hover {
  background: rgba(255, 122, 24, .22);
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  background: var(--orange);
  border-color: var(--orange);
  color: #140a02;
  font-weight: 600;
}

.site-nav a[aria-current="page"]:hover { color: #140a02; }

/* La voce dell'account: stessa forma, peso diverso. */
.site-nav a.nav-account {
  border-color: rgba(242, 239, 232, .3);
  background: rgba(242, 239, 232, .07);
  color: var(--ink);
}
.site-nav a.nav-account:hover { background: rgba(242, 239, 232, .14); }
.site-nav a.nav-account[aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #0b0f16;
}

@media (max-width: 780px) {
  .top,
  .site-top { flex-wrap: wrap; }
  .top-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .site-nav {
    gap: 5px;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { font-size: 10px; padding: 5px 8px; }
}