/* ========================================
   FILE: contact.css
   DESCRIZIONE: Stili per la sezione dei Contatti (Contact).
   Gestisce la disposizione e gli effetti hover dell'elenco 
   dei link di contatto con animazioni laterali.
   ======================================== */

/* ========================================
   CONTACT LAYOUT & LINKS
   ======================================= */
#contact .description {
    font-size: 1.1rem;
    color: #000;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Stile base del link */
.contact-link-item {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #000;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    width: fit-content; /* L'hover si attiva solo sul contenuto reale */
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Stile base dell'icona SVG */
.contact-link-item svg {
    width: 20px;
    height: 20px;
    color: #000;
    transition: color 0.2s ease;
}

/* --- EFFETTO HOVER (Animazione) --- */
/* Cambia colore e sposta leggermente a destra */
.contact-link-item:hover {
    color: #1877F2;
    transform: translateX(6px);
}

/* Cambia il colore dell'icona in sincronia */
.contact-link-item:hover svg {
    color: #1877F2;
}