/* =========================================================
   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-accent-hover) !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;
}