/**
 * DacunaSite — Stili dei widget Elementor
 *
 * I widget non devono dipendere dalle classi globali del tema: `.social-network`
 * è definita sia in style.css sia negli stili inline dei contatti, e chi vince
 * dipende dall'ordine di caricamento. Qui ogni widget porta con sé il proprio
 * involucro (`.ds-el-*`), con specificità sufficiente a decidere il layout
 * senza ricorrere a !important.
 */

/* ---------------------------------------------------------------
   ICONE SOCIAL
   --------------------------------------------------------------- */
.ds-el-social ul.social-network {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ds-el-social ul.social-network li {
    display: block;
    margin: 0;
}

/* Tre classi + un elemento: batte sia `ul.social-network` di style.css
   sia `ul.social-network.vertical`, senza dover alzare la voce. */
.ds-el-social.ds-el-social--vertical ul.social-network {
    flex-direction: column;
    align-items: flex-start;
}

.ds-el-social ul.social-network li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ds-el-social ul.social-network li a i {
    line-height: 1;
}

/* --- variante chiara: icona scura su pastiglia chiara --- */
.ds-el-social--chiara ul.social-network li a {
    background: #e9ecf1;
    color: #1d2333;
    border: 1px solid transparent;
}

.ds-el-social--chiara ul.social-network li a:hover {
    background: #16181d;
    color: #ffffff;
}

/* --- variante scura: pensata per footer e sezioni a fondo nero --- */
.ds-el-social--scura ul.social-network li a {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .35);
}

.ds-el-social--scura ul.social-network li a:hover {
    background: #ffffff;
    color: #16181d;
    border-color: #ffffff;
}

/* Il colore dell'icona segue il link, non le regole globali del tema. */
.ds-el-social ul.social-network li a i,
.ds-el-social ul.social-network li a:hover i {
    color: inherit;
}

/* ---------------------------------------------------------------
   BOTTONE WHATSAPP
   --------------------------------------------------------------- */
.ds-el-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    text-decoration: none;
    line-height: 1.2;
    transition: filter .2s ease;
}

.ds-el-whatsapp:hover {
    filter: brightness(.92);
}

/* Senza testo il bottone diventa circolare, non un rettangolo vuoto. */
.ds-el-whatsapp--solo-icona {
    gap: 0;
    padding: 0;
    width: 52px;
    height: 52px;
}

.ds-el-whatsapp i {
    font-size: 1.15em;
    line-height: 1;
}

/* ---------------------------------------------------------------
   CONTATTO
   --------------------------------------------------------------- */
.ds-el-contatto {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ds-el-contatto a {
    color: inherit;
    text-decoration: none;
}

.ds-el-contatto a:hover {
    text-decoration: underline;
}