/* VArisotto — descrizioni al passaggio del cursore (home page)
   Sostituisce il tooltip nativo del browser, lento e non stilizzato, con una
   bolla coerente con la palette del sito. Funziona anche da tastiera: il
   riquadro compare al focus, così chi naviga con Tab legge le stesse
   descrizioni di chi usa il mouse. */
.vr-tip{
  box-sizing:border-box;
  position:fixed;
  z-index:9999;
  max-width:300px;
  padding:9px 12px;
  border-radius:10px;
  background:#2b2620;
  color:#faf6ef;
  font-family:var(--wp--preset--font-family--sans, Arial, Helvetica, sans-serif);
  font-size:.82rem;
  font-weight:500;
  line-height:1.45;
  letter-spacing:.1px;
  box-shadow:0 8px 24px rgba(43,38,32,.28);
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease;
  text-align:left;
  overflow-wrap:anywhere;
}
.vr-tip[data-open="1"]{opacity:1;transform:none}
.vr-tip::after{
  content:"";
  position:absolute;
  left:var(--vr-tip-arrow,50%);
  width:0;height:0;
  margin-left:-6px;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
}
.vr-tip[data-side="top"]::after{top:100%;border-top:6px solid #2b2620}
.vr-tip[data-side="bottom"]::after{bottom:100%;border-bottom:6px solid #2b2620}
/* Evidenzia ciò che si sta leggendo, senza spostare nulla nel layout. */
.vr-tip-target{outline:2px solid rgba(112,45,64,.55);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  .vr-tip{transition:none;transform:none}
}