/* ==========================================================================
   VIDIM — Componenti condivisi: Pulsante, Link, Lingua
   Fonte: docs/figma-spec/06-componenti-navigation.md e 00-design-system.md §7
   ========================================================================== */

/* --- Pulsante — master 6:291, 12 varianti (3 Stato x 2 Colore x 2 Tipologia)
   Nessuna variante Disabled esiste nel file. Nessuna variante ha icone.
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 43px;                 /* 12 + 19 + 12 */
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;         /* la label e gia maiuscola nel contenuto */
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Default */
.btn--primary-filled  { background: var(--gradient-btn-primary); color: var(--color-white); }
.btn--primary-outline { background: transparent; color: var(--color-primary);
                        box-shadow: inset 0 0 0 1px var(--color-primary); }
.btn--white-filled    { background: var(--gradient-btn-white); color: var(--color-tertiary); }
.btn--white-outline   { background: transparent; color: var(--color-white);
                        box-shadow: inset 0 0 0 1px var(--color-white); }

/* Hover — NB: le varianti Outline PERDONO lo stroke (06 §1.3) */
.btn--primary-filled:hover  { background: var(--gradient-btn-primary-hover); }
.btn--primary-outline:hover { background: rgb(0 142 208 / .1); box-shadow: none; }
.btn--white-filled:hover    { background: var(--gradient-btn-white-hover); }
.btn--white-outline:hover   { background: var(--gradient-btn-white); color: var(--color-tertiary); box-shadow: none; }

/* Pressato */
.btn--primary-filled:active  { background: var(--color-primary-900); }
.btn--primary-outline:active { background: var(--color-primary-900); color: var(--color-white); box-shadow: none; }
.btn--white-filled:active    { background: var(--color-neutral-300); }
.btn--white-outline:active   { background: var(--color-neutral-300); color: var(--color-tertiary); box-shadow: none; }

/* Focus — NON presente nel design Figma: aggiunto per accessibilita.
   Da validare con il designer. */
.btn:focus-visible { outline: 2px solid var(--color-primary-50); outline-offset: 2px; }

/* Coppia Pieno + Outline: ricorre 3 volte, larghezza totale 347px */
.btn-group { display: flex; flex-direction: row; gap: var(--space-3); }

/* --- Link — master 6:304, 2 varianti -------------------------------------- */
.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: 400;
  color: var(--color-white);
  text-decoration: none;
}
.link:hover,
.link.is-current {            /* la variante Hover marca anche la pagina corrente */
  text-decoration: underline solid;
  text-underline-position: from-font;
}

/* --- Lingua — master 6:8, 5 varianti -------------------------------------- */
.lingua {
  position: relative;
  width: 56px;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-tertiary);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: clip;
}
.lingua:hover { box-shadow: inset 0 0 0 1px var(--color-white); }

.lingua__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.lingua__world { width: 16px; height: 16px; }
.lingua__arrow { width: 8px;  height: 8px; }

/* Stati aperti: 56 x 112, gap 4, freccia ruotata, icone blu */
.lingua.is-open { gap: var(--space-1); }
.lingua.is-open .lingua__arrow { transform: rotate(180deg); }
.lingua.is-open .lingua__world,
.lingua.is-open .lingua__arrow { color: var(--color-primary); }

.lingua__option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 6.5px;         /* unico valore non base-8 fuori da Calendly */
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  border-radius: var(--radius-sm);
}
.lingua__option.is-selected { background: var(--color-white); color: var(--color-tertiary); }

/* La coppia di pulsanti (template-parts/blocchi/pulsanti.php) e' a volte
   allineata a sinistra e a volte centrata nella sezione: e' l'unica
   differenza fra le cinque ricorrenze di Maintenance. */
.btn-group--centrato { justify-content: center; }