/* ======================== */
/* TOOLTIP                  */
/* ======================== */
/* Tooltip CSS puro — riusabile su qualsiasi elemento.
   Come usarlo:
     1. Aggiungi position: relative all'elemento padre
     2. Aggiungi data-tooltip="testo" all'elemento HTML
     3. Aggiungi la classe .has-tooltip all'elemento HTML
   Esempio:
     <a class="nav-logo has-tooltip" data-tooltip="// you found it"> */

/* — Base — */
/* L'elemento con .has-tooltip deve avere position: relative
   perché ::after si posiziona rispetto ad esso. */
.has-tooltip {
  position: relative; /* contesto per il ::after */
}

/* — Tooltip — */
/* ::after genera il tooltip come pseudo-elemento.
   content: attr(data-tooltip) legge il testo dall'attributo HTML —
   cambiare data-tooltip in HTML aggiorna il tooltip senza toccare il CSS. */
.has-tooltip::after {
  content: attr(data-tooltip); /* testo preso dall'attributo HTML */

  /* — Posizionamento — */
  position: absolute;
  top: calc(100% + 10px);  /* sotto l'elemento padre + 10px di spazio */
  left: 50%;               /* bordo sinistro al centro del padre */
  transform: translateX(-50%) translateY(-4px);
  /* translateX(-50%): centra orizzontalmente rispetto al padre
     translateY(-4px): parte 4px in alto — scende al hover */

  /* — Tipografia — */
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;  /* non eredita uppercase dai genitori */
  white-space: nowrap;   /* nessun a capo */
  color: var(--accent);  /* viola accent dalla variabile globale */

  /* — Visibilità — */
  opacity: 0;            /* invisibile di default */
  pointer-events: none;  /* non intercetta click o hover */

  /* — Animazione — */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* — Stato hover — */
.has-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* scende in posizione */
}