/* La Via del Sé — pulsanti di condivisione degli articoli.
   Colori e caratteri vengono da styles.css: qui non se ne inventano di nuovi. */

.share {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
}

.share__title {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--viola-deep);
}

.share__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* 44 x 44 px è la misura minima perché un dito colpisca il bersaglio senza
   sbagliare: vale anche per i pulsanti che mostrano solo l'icona. */
.share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--viola);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.share__btn svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.share__btn:hover {
  border-color: var(--viola);
  background: rgba(92, 73, 151, 0.07);
}

.share__btn:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
}

/* Il pulsante principale: è la condivisione di sistema, quella che sul
   telefono offre a chi legge le sue app invece di quelle scelte da noi. */
.share__btn--main {
  background: var(--viola);
  border-color: var(--viola);
  color: var(--avorio);
  padding: 0 20px;
}

.share__btn--main:hover {
  background: var(--viola-deep);
  border-color: var(--viola-deep);
}

/* L'etichetta dei pulsanti con la sola icona: invisibile, ma presente.
   Va nascosta così e non con display:none, altrimenti i lettori di schermo
   non la leggono e si sente soltanto "pulsante". */
.share__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

/* Altezza fissa di una riga: il messaggio compare senza far sobbalzare
   il testo che sta sotto. */
.share__feedback {
  margin: 14px 0 0;
  min-height: 1.4em;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--inchiostro-soft);
}

.share[hidden] { display: none; }

@media (max-width: 520px) {
  .share__btn--main { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .share__btn { transition: none; }
}