/* =========================================================
   Polline — components.css
   Stati :hover / :focus estratti dal design.
   Sono marcati !important perché il markup conserva gli stili
   inline originali: se rifattorizzi il markup in classi,
   puoi togliere gli !important.
   ========================================================= */

.hv-1:hover,
.hv-1:focus-visible {
  background: var(--color-surface-soft) !important;
}

.hv-2:hover,
.hv-2:focus-visible {
  background: var(--color-sky) !important;
  color: var(--color-ink) !important;
}

.hv-3:hover,
.hv-3:focus-visible {
  background: var(--color-card-purple) !important;
  color: var(--color-ink) !important;
}

.hv-4:hover,
.hv-4:focus-visible {
  background: var(--color-highlight) !important;
  transform: translateY(2px) !important;
  box-shadow: 0 8px 0 0 var(--color-highlight-shadow) !important;
}

.hv-5:hover,
.hv-5:focus-visible {
  transform: translateY(2px) !important;
  box-shadow: 0 8px 0 0 var(--color-shadow-neutral) !important;
  color: var(--color-sky) !important;
}

.hv-6:hover,
.hv-6:focus-visible {
  color: var(--color-footer-link-hover) !important;
}

.hv-7:hover,
.hv-7:focus-visible {
  color: var(--color-highlight) !important;
}

.hv-8:hover,
.hv-8:focus-visible {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 30px rgba(26,43,74,0.14) !important;
}

.hv-9:hover,
.hv-9:focus-visible {
  color: var(--color-ink) !important;
}

.hv-10:hover,
.hv-10:focus-visible {
  background: var(--color-surface) !important;
}

/* Footer: link dei loghi membership, nessun effetto hover visibile,
   solo il focus ring da tastiera. */
.footer-badge-link:focus-visible {
  outline: 2px solid var(--color-inverse);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Carosello recensioni in loop (pagina Chi siamo): pausa al passaggio
   del mouse o quando un elemento al suo interno ha il focus. */
.marquee-hoverpause:hover,
.marquee-hoverpause:focus-within {
  animation-play-state: paused;
}

/* Loghi membership sulla pagina Chi siamo: bordo evidenziato in hover/focus. */
.chi-siamo-member-link:hover,
.chi-siamo-member-link:focus-visible {
  border-color: var(--color-highlight) !important;
  transform: translateY(-2px);
}

/* Nav desktop: sei voci più il pulsante. Le voci non vanno mai a capo e, tra 900 e 1119px,
   si stringono per restare su una riga. */
.site-nav a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1119px) {
  .site-nav { gap: 2px !important; }
  .site-nav a { padding: 10px 9px !important; font-size: 0.88rem !important; }
  .site-nav a.hv-2 { padding: 12px 16px !important; margin-left: 4px !important; }
  .site-nav .nav-dd-link { padding: 10px 0 10px 9px !important; font-size: 0.88rem !important; }
  .site-nav .nav-dd-btn { margin-right: 2px; width: 26px; }
  .site-nav .nav-dd-item { padding: 12px 14px !important; font-size: inherit !important; }
}

/* Menu a tendina del Laboratorio (header desktop). Il nome resta un link alla pagina hub,
   la freccia apre l'elenco degli strumenti (anche al passaggio del mouse). */
.nav-dd { position: relative; display: flex; align-items: center; border-radius: 999px; transition: background 0.2s ease; }
.nav-dd:hover, .nav-dd:focus-within, .nav-dd.is-open, .nav-dd.is-active { background: var(--color-surface-soft); }
.nav-dd-link { padding: 10px 2px 10px 16px; color: var(--color-ink); font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
.nav-dd.is-active .nav-dd-link { font-weight: 600; }
.nav-dd-link:hover { color: var(--color-ink); }
.nav-dd-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px; margin-right: 6px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--color-ink); cursor: pointer; }
.nav-dd-btn svg { transition: transform 0.25s ease; }
.nav-dd.is-open .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-btn:focus-visible, .nav-dd-link:focus-visible, .nav-dd-item:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 2px; }
.nav-dd-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 340px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-surface); border-radius: 24px; box-shadow: 0 18px 40px -12px rgba(26,43,74,0.3);
  animation: dd-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-dd-panel[hidden] { display: none; }
.nav-dd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.nav-dd-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; color: var(--color-ink); transition: background 0.15s ease; }
.nav-dd-item:hover { background: var(--color-surface-soft-alt); color: var(--color-ink); }
.nav-dd-item.is-current { background: var(--color-surface-soft); }
.nav-dd-all { margin-bottom: 4px; border-bottom: 1px solid rgba(26,43,74,0.1); border-radius: 16px 16px 8px 8px; font-weight: 800; }
.nav-dd-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-ink); }
.nav-dd-text { display: flex; flex-direction: column; gap: 1px; }
.nav-dd-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 0.98rem; line-height: 1.2; white-space: nowrap; }
.nav-dd-all .nav-dd-name { font-weight: 800; }
.nav-dd-desc { font-size: 0.82rem; line-height: 1.3; color: var(--color-text-muted); white-space: nowrap; }