a{
  color: #FF7D09;
  text-decoration: none;
}

.contatti-titolo-pagina {
    text-align: center;
    padding-top: 40px;
}

/* Elenco verticale */
.contatti-lista{
  list-style: none;
  margin: 20px 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Ogni contatto = riga flessibile che può andare a capo */
.riga-contatto{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;                 /* consente di andare a capo su mobile */
}

/* Colonne */
.riga-contatto .col-icona{
  flex: 0 0 24px;                  /* icona fissa */
  width: 24px; height: 24px;
  filter: grayscale(1) brightness(0) invert(.35);
  margin-top: 2px;                 /* allinea meglio con il testo */
  order: 0;
}

.riga-contatto .col-label{
  flex: 0 0 180px;                 /* nome campo a larghezza fissa su desktop */
  color: var(--green, #77B93A);
  font-weight: 700;
  line-height: 1.3;
  order: 1;
}

.riga-contatto .col-valore{
  flex: 1 1 320px;                 /* il valore occupa lo spazio restante */
  color: var(--ink-600, #686565);
  line-height: 1.5;
  order: 2;
}

.riga-contatto a{
  color: var(--green-600, #5a8f2c);
  text-decoration: none;
}
.riga-contatto a:hover{ color: #FF7D09; }

.mappa-indirizzo{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 768px){
  .mappa-indirizzo{
    flex-direction: row;
  }
}

.mappa-indirizzo a{
  color: var(--green-600, #5a8f2c);
  text-decoration: none;
}
.mappa-indirizzo a:hover{ color: #FF7D09; }

#mappa{scroll-margin-top: 20px;}

/* Social icone nel valore */
.riga-contatto .social a{
  display: inline-block;
  margin-right: 10px;
}
.riga-contatto .social img{
  width: 24px; height: 24px;
}

/* ------- Breakpoint: telefoni piccoli -------- */
@media (max-width: 520px){
  .riga-contatto{
    align-items: flex-start;
  }

  .riga-contatto .col-label{
    flex: 0 0 auto;                /* evita label troppo larga */
    min-width: 0;
  }

  /* Metto il valore su una nuova riga, indentato alla stessa linea della label */
  .riga-contatto .col-valore{
    flex: 1 1 100%;
    order: 3;                      /* va sotto */
    margin-left: 36px;             /* identa: 24px icona + 12px gap */
  }
}

/* ------- Breakpoint: super compatti -------- */
@media (max-width: 360px){
  .riga-contatto .col-label{
    flex-basis: 100%;              /* label a tutta riga */
  }
  .riga-contatto .col-valore{
    margin-left: 36px;             /* mantiene l’indent */
  }
}