/* ============================================================================
   VSA26 — HEADER / FOOTER
   Portato da vsa26-prototype/src/layout/Layout.css, con due adattamenti alla
   struttura che genera wp_nav_menu() invece del <NavLink> di React Router:
     .vsa-head__sub        → .vsa-head__nav .sub-menu   (classe di default di WP)
     li > a.is-current     → li.current-menu-item > a   (WP marca il <li>, non il link)
   Tutto il resto è identico riga per riga.
   ========================================================================== */

.vsa-skip {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--vsa-ink); color: var(--vsa-paper); padding: 0.8em 1.2em;
}
.vsa-skip:focus { left: var(--vsa-gutter); top: 0.5rem; }

/* --- Header ------------------------------------------------------------- */
.vsa-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--vsa-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vsa-rule);
}
.vsa-head__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vsa-space-md); min-height: 4.25rem;
}
.vsa-head__logo { display: block; flex: none; line-height: 0; }
.vsa-head__logo svg { display: block; height: 2.6rem; width: auto; }

.vsa-head__nav { display: none; }
.vsa-head__nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--vsa-space-sm); }
.vsa-head__nav > ul > li { position: relative; }
.vsa-head__nav a {
  font-family: var(--vsa-font-display); font-size: var(--vsa-fs-xs);
  letter-spacing: var(--vsa-tracking-wide); text-transform: uppercase;
  padding-block: 1.4rem; display: inline-block;
}
.vsa-head__nav > ul > li.current-menu-item > a,
.vsa-head__nav > ul > li.current-menu-parent > a { color: var(--vsa-accent-ink); }
.vsa-head__nav .sub-menu {
  position: absolute; left: 0; top: 100%; min-width: 14rem;
  list-style: none; margin: 0; padding: var(--vsa-space-2xs) 0;
  background: var(--vsa-paper); border: 1px solid var(--vsa-rule);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--vsa-dur) var(--vsa-ease), transform var(--vsa-dur) var(--vsa-ease), visibility var(--vsa-dur);
}
.vsa-head__nav > ul > li:hover .sub-menu,
.vsa-head__nav > ul > li:focus-within .sub-menu { opacity: 1; visibility: visible; transform: none; }
.vsa-head__nav .sub-menu a { display: block; padding: 0.55em var(--vsa-space-sm); }
.vsa-head__nav .sub-menu a:hover { background: var(--vsa-paper-alt); }

.vsa-head__right { display: flex; align-items: center; gap: var(--vsa-space-xs); flex: none; }
.vsa-head__search {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  color: var(--vsa-ink-muted);
  transition: color var(--vsa-dur) var(--vsa-ease);
}
.vsa-head__search:hover { color: var(--vsa-ink); }
/* Il selettore di lingua: una voce sola, l'altra lingua. Sta accanto
   alla lente e ne condivide l'altezza di riga, così i tre comandi di
   destra restano allineati sulla stessa base. */
.vsa-head__lang {
  font-family: var(--vsa-font-display); font-size: var(--vsa-fs-xs);
  letter-spacing: var(--vsa-tracking-wide);
  color: var(--vsa-ink-muted); text-decoration: none;
  padding: 0.25em 0.1em;
  transition: color var(--vsa-dur) var(--vsa-ease);
}
.vsa-head__lang:hover,
.vsa-head__lang:focus-visible { color: var(--vsa-ink); }
/* Sotto la soglia dell'hamburger il selettore vive nel cassetto: due
   copie dello stesso link sono due volte lo stesso comando, e in una
   barra stretta la seconda toglie spazio senza aggiungere niente. */
.vsa-head__lang { display: none; }
@media (min-width: 62rem) { .vsa-head__lang { display: inline-block; } }

/* Nel cassetto il selettore sta in fondo, staccato dalle voci di menu:
   non è una destinazione fra le altre, è un cambio di registro. */
.vsa-drawer__foot {
  margin-top: var(--vsa-space-lg);
  padding-top: var(--vsa-space-sm);
  border-top: 1px solid var(--vsa-rule);
}
.vsa-drawer__lang {
  font-family: var(--vsa-font-display); font-size: var(--vsa-fs-sm);
  letter-spacing: var(--vsa-tracking-wide);
  color: var(--vsa-ink-muted); text-decoration: none;
}
.vsa-drawer__lang:hover,
.vsa-drawer__lang:focus-visible { color: var(--vsa-ink); }

.vsa-head__burger { width: 1.75rem; height: 1.25rem; display: grid; align-content: space-between; }
.vsa-head__burger span { display: block; height: 1px; background: var(--vsa-ink); }

@media (min-width: 62rem) {
  .vsa-head__nav { display: block; }
  .vsa-head__burger { display: none; }
}

/* --- Drawer mobile ------------------------------------------------------ */
.vsa-drawer {
  position: fixed; inset: 4.25rem 0 0; z-index: 19;
  background: var(--vsa-paper); overflow-y: auto;
  padding: var(--vsa-space-md) var(--vsa-gutter) var(--vsa-space-xl);
}
.vsa-drawer ul { list-style: none; margin: 0; padding: 0; }
.vsa-drawer > nav > ul > li { border-bottom: 1px solid var(--vsa-rule); padding-block: var(--vsa-space-sm); }
.vsa-drawer > nav > ul > li > a {
  font-family: var(--vsa-font-display); font-size: var(--vsa-fs-xl); display: block;
}
.vsa-drawer .sub-menu { margin-top: var(--vsa-space-2xs); }
.vsa-drawer .sub-menu a { display: block; padding-block: 0.4em; color: var(--vsa-ink-muted); font-size: var(--vsa-fs-sm); }
@media (min-width: 62rem) { .vsa-drawer { display: none; } }

/* --- Footer ------------------------------------------------------------- */
.vsa-foot { padding-block: var(--vsa-space-lg) var(--vsa-space-md); border-top: 1px solid var(--vsa-rule); }
.vsa-foot__inner {
  display: grid; gap: var(--vsa-space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.vsa-foot__logo { display: inline-block; line-height: 0; margin-bottom: var(--vsa-space-xs); }
.vsa-foot__logo svg { display: block; height: 4rem; width: auto; }
.vsa-foot__list { list-style: none; margin: var(--vsa-space-2xs) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.3em; font-size: var(--vsa-fs-sm); }
.vsa-foot__copy { margin-top: var(--vsa-space-lg); padding-top: var(--vsa-space-sm); border-top: 1px solid var(--vsa-rule); }
/* Riapre il banner del consenso. È un <button> e non un <a> perché non porta
   da nessuna parte — ma nella colonna deve leggersi come le voci accanto,
   quindi eredita .u-link e si riallinea al testo (il reset di button in
   base.css toglie il font, non l'allineamento verticale di default). */
.vsa-foot__prefs { font: inherit; color: inherit; text-align: left; vertical-align: baseline; }

/* --- Seguici — portato da SocialLinks.css (§11) -------------------------- */
.vsa-social { list-style: none; margin: var(--vsa-space-2xs) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.3em; font-size: var(--vsa-fs-sm); }
.vsa-social__link { display: inline-flex; align-items: center; gap: 0.6em;
  color: var(--vsa-ink-muted); transition: color var(--vsa-dur) var(--vsa-ease); }
.vsa-social__link svg { flex: none; }
.vsa-social__link:hover, .vsa-social__link:focus-visible { color: var(--vsa-ink); }

/* --- Contenuto generico (index.php) -------------------------------------- */
.u-h1 { font-size: var(--vsa-fs-xxl); }

/* --- Testata della pagina opera ------------------------------------------
   Il credito sotto l'immagine è la didascalia dell'opera, non l'intestazione
   della pagina: qui il titolo torna a essere un <h1> vero, con l'artista
   sopra e l'anno sotto. */
.vsa-work__head { margin-bottom: var(--vsa-space-lg); }
.vsa-work__head .u-eyebrow a:hover { color: var(--vsa-accent-ink); }
.vsa-work__title { font-size: var(--vsa-fs-xl); margin-block: var(--vsa-space-3xs); }

.vsa-artist__origin { margin-bottom: var(--vsa-space-xs); }

/* --- Pannello di ricerca — portato da SearchPanel.css (§10) -------------- */
.vsa-search { position: fixed; inset: 0; z-index: 40; }
.vsa-search[hidden] { display: none; }
.vsa-search__scrim { position: absolute; inset: 0; background: rgba(12, 11, 9, .5); }
.vsa-search__panel {
  position: relative; background: var(--vsa-paper);
  border-bottom: 1px solid var(--vsa-rule-strong);
  max-height: 100svh; overflow-y: auto;
  animation: vsa-search-in 240ms var(--vsa-ease);
}
@keyframes vsa-search-in { from { transform: translateY(-1rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vsa-search__panel { animation: none; } }

.vsa-search__bar {
  display: flex; align-items: center; gap: var(--vsa-space-xs);
  padding-block: var(--vsa-space-sm);
  border-bottom: 1px solid var(--vsa-rule);
  position: sticky; top: 0; background: var(--vsa-paper); z-index: 1;
}
.vsa-search__icon { color: var(--vsa-ink-muted); display: grid; place-items: center; flex: none; }
.vsa-search__bar input {
  flex: 1; font-family: var(--vsa-font-display); font-size: var(--vsa-fs-lg);
  border: 0; background: transparent; color: var(--vsa-ink); padding: 0.2em 0;
}
.vsa-search__bar input::placeholder { color: var(--vsa-ink-muted); }
.vsa-search__bar input:focus { outline: none; }
.vsa-search__bar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.vsa-search__close {
  flex: none; font-family: var(--vsa-font-display); font-size: var(--vsa-fs-micro);
  letter-spacing: var(--vsa-tracking-wide); text-transform: uppercase;
  color: var(--vsa-ink-muted); border: 1px solid var(--vsa-rule); padding: 0.5em 0.8em;
}
.vsa-search__close:hover { color: var(--vsa-ink); border-color: var(--vsa-ink); }

.vsa-search__body { padding-block: var(--vsa-space-md) var(--vsa-space-lg); }
.vsa-search__empty { padding-block: var(--vsa-space-md); }

.vsa-search__browse ul {
  list-style: none; margin: var(--vsa-space-xs) 0 0; padding: 0;
  display: grid; gap: var(--vsa-space-2xs);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
.vsa-search__browse a {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--vsa-space-sm); padding: var(--vsa-space-sm);
  border: 1px solid var(--vsa-rule);
  transition: background var(--vsa-dur) var(--vsa-ease), border-color var(--vsa-dur) var(--vsa-ease);
}
.vsa-search__browse a:hover { background: var(--vsa-paper-alt); border-color: var(--vsa-ink); }
.vsa-search__browse-label { font-family: var(--vsa-font-display); font-size: var(--vsa-fs-md); }
.vsa-search__count {
  font-family: var(--vsa-font-display); font-size: var(--vsa-fs-xs);
  color: var(--vsa-ink-muted); font-variant-numeric: tabular-nums;
}

.vsa-search__group + .vsa-search__group { margin-top: var(--vsa-space-md); }
.vsa-search__group ul { list-style: none; margin: var(--vsa-space-2xs) 0 0; padding: 0; }
.vsa-search__group a {
  width: 100%; display: flex; align-items: center; gap: var(--vsa-space-sm);
  padding: var(--vsa-space-2xs); text-align: left;
  border-bottom: 1px solid var(--vsa-rule);
  transition: background var(--vsa-dur) var(--vsa-ease);
}
.vsa-search__group a.is-cursor { background: var(--vsa-paper-alt); }
.vsa-search__group img,
.vsa-search__ph { width: 3rem; height: 3rem; flex: none; }
.vsa-search__group img { object-fit: cover; background: var(--vsa-paper-alt); }
.vsa-search__ph { border: 1px solid var(--vsa-rule); }
.vsa-search__text { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
.vsa-search__title { font-family: var(--vsa-font-display); font-size: var(--vsa-fs-md); }
.vsa-search__meta { font-size: var(--vsa-fs-xs); color: var(--vsa-ink-muted); }
.vsa-search__type {
  margin-left: auto; flex: none;
  font-family: var(--vsa-font-display); font-size: var(--vsa-fs-micro);
  letter-spacing: var(--vsa-tracking-wide); text-transform: uppercase; color: var(--vsa-ink-muted);
}