/**
 * Foglio di stile di QUESTO sito
 * Viene caricato dopo css/motore.css: qui stanno intestazione e pie' di pagina, e tutto
 * quello che in questo sito deve avere un aspetto diverso da quello di partenza del motore
 * (variabili di :root, classi dei blocchi). L'aggiornamento del motore non tocca questo file.
 */

/* header */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--top-bg, rgba(255, 255, 255, .7)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.top.loose { position: static; }
.top.bare { border-bottom: 0; }
/* logo al centro, le voci divise ai due lati accostate al logo */
.top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px 32px; padding-block: var(--bar-pad, 14px); }
/* logo a un lato (o nessun logo): le voci stanno tutte insieme, allineate come scelto nel pannello */
.top .wrap.side { display: flex; }
.top .wrap.side .nav { flex: 1; justify-content: var(--nav-align, flex-end); }
.top .wrap.side.logo-right .logo { order: 2; }
.top .nav { margin-inline: 0; }
.top .nav.l { justify-content: flex-end; }
.top .nav.r { justify-content: flex-start; }
.logo img { height: var(--logo-h, 28px); width: auto; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin-inline: -12px; }
.nav a { display: block; padding: 6px 12px; font-size: 1.05rem; font-weight: 300; color: var(--logo); transition: background-color .2s, color .2s; }
/* il colore del riquadro arriva da ogni voce (--h), il testo si adatta (--ht) */
.nav a:hover { background: var(--h, var(--brand)); color: var(--ht, var(--logo)); }

footer { background: var(--foot-bg, transparent); }
footer .wrap.center { flex-direction: column; justify-content: center; text-align: center; }
footer .wrap.center .nav { justify-content: center; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 32px; padding-block: 36px; }
footer p { font-size: .9rem; color: var(--muted); }

@media (max-width: 700px) {
  .top .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 4px; }
  .top .logo { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .top .wrap.side { flex-wrap: wrap; justify-content: center; }
  .top .wrap.side .logo { order: 0; flex-basis: 100%; display: flex; justify-content: center; }
  .top .wrap.side .nav { justify-content: center; }
}
@media (max-width: 480px) {
  .top .nav a { padding-inline: 7px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a { transition: none; }
}