/* Selettore lingua nella barra annunci inferiore (sotto l'header) —
   vedi inc/tfa-language-switcher.php
   Sta nella colonna destra della griglia, quindi è un normale elemento in
   flusso: niente posizionamento assoluto. */

/* ---------------------------------------------------------------------
   ALLINEAMENTO CON LE ICONE AZIONE DELL'HEADER

   L'header usa: .grid.no-pad-menu { max-width:1800px; margin:0 auto }
   con padding di 24px DENTRO le colonne (style.css:95 e :117).
   La barra inferiore invece aveva i 24px sulla barra e il contenitore da
   1800px dentro: sopra i ~1850px di viewport le due geometrie divergono e
   il selettore finiva 24px più a destra delle icone.

   Qui allineiamo i due contenitori: padding tolto dalla barra e spostato
   nella griglia, esattamente come nell'header. Così colonna destra
   (selettore) e colonna sinistra (menu About/Artist) cadono sulla stessa
   verticale di icone azione e burger, a qualsiasi larghezza.
   --------------------------------------------------------------------- */
.mc-announce.mc-announce--below-header{
  padding-left: 0;
  padding-right: 0;
}

.mc-below-header-grid{
  padding-left: 24px;
  padding-right: 24px;
}

/* Il framework applica padding:0 20px a qualunque classe contenga "col"
   ([class*='col'] in alux.min.css): sulla sotto-nav sballa l'allineamento
   con il burger. */
.mc-below-header__left .mc-announce__col--subnav{
  padding-left: 0;
  padding-right: 0;
}

.mc-below-header__right .mc-lang{
  display: flex;
  align-items: center;
  gap: 8px;

  background: transparent;          /* sfondo trasparente sulla barra */
  color: inherit;                   /* eredita il #333 della barra */
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.4;
}

/* Separatore fra le lingue */
.mc-lang__item + .mc-lang__item::before{
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 8px;
  vertical-align: middle;
  background: currentColor;
  opacity: .3;
}

.mc-lang__item{
  display: inline-flex;
  align-items: center;
  padding: 1px 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  opacity: .45;                     /* lingua non attiva: in secondo piano */
  border-bottom: 1px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
}

.mc-lang__item:hover,
.mc-lang__item:focus-visible{
  opacity: .8;
  color: inherit;
  text-decoration: none;
}

/* Lingua selezionata */
.mc-lang__item.is-active{
  opacity: 1;
  font-weight: 700;
  cursor: default;
  border-bottom-color: currentColor;
}

.mc-lang__item:focus-visible{
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

/* La colonna destra della barra inferiore ospita anche i social (oggi
   nascosti): se vengono riattivati, teniamo distanziati i due blocchi. */
.mc-below-header__right{
  gap: 22px;
}

@media (max-width: 600px){
  .mc-below-header__right .mc-lang{ font-size: 13px; gap: 6px; }
  .mc-lang__item + .mc-lang__item::before{ margin-right: 6px; height: 10px; }
}

/* ---------------------------------------------------------------------
   DRAWER (menu hamburger)

   Sotto i 768px la barra annunci inferiore è display:none
   (responsive.css:1028), quindi il selettore vive qui. Il blocco lingua e
   quello social stanno insieme in fondo al pannello: il margin-top:auto —
   che in tfa-nav.css sta sull'etichetta social — lo spostiamo sulla nostra,
   così l'ordine in fondo è Lingua → Seguici sui social.
   --------------------------------------------------------------------- */
@media (max-width: 1023px){

  .tfa-drawer__lang-label{
    display: block;
    margin: auto 18px 8px;
    padding-top: 18px;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: .04em;
    color: #777;
  }

  /* non più il primo blocco in fondo: niente auto qui */
  .tfa-drawer .tfa-drawer__social-label{
    margin-top: 0;
    padding-top: 14px;
  }

  .tfa-drawer__lang{
    margin: 0 18px;
  }

  .tfa-drawer .mc-lang{
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 16px;              /* area di tocco comoda sul telefono */
    font-weight: 500;
    letter-spacing: .04em;
    color: #333;
  }

  .tfa-drawer .mc-lang__item{
    padding: 6px 0;               /* ~30px di altezza tappabile */
    opacity: .5;
  }

  .tfa-drawer .mc-lang__item.is-active{
    opacity: 1;
    font-weight: 700;
  }

  .tfa-drawer .mc-lang__item + .mc-lang__item::before{
    height: 14px;
    margin-right: 14px;
  }
}