/**
 * style.css — mod_mostra-social  v1
 * Icone social grandi, visibili, con effetto hover animato.
 * Usa CSS custom properties per dimensione e colore brand.
 */

/* ── Contenitore ─────────────────────────────────────────────────────────── */
.mms-social-wrap {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* ── Allineamento ────────────────────────────────────────────────────────── */
.mms-social-wrap.mms-align-left   .mms-social-list { justify-content: flex-start; }
.mms-social-wrap.mms-align-center .mms-social-list { justify-content: center; }
.mms-social-wrap.mms-align-right  .mms-social-list { justify-content: flex-end; }

/* ── Lista icone ─────────────────────────────────────────────────────────── */
.mms-social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* ── Singola voce ────────────────────────────────────────────────────────── */
.mms-social-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Link/bottone icona ──────────────────────────────────────────────────── */
.mms-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--mms-size, 48px);
    height: var(--mms-size, 48px);
    border-radius: 50%;
    background-color: var(--mms-color, #555);
    color: #fff;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}

/* ── Hover: zoom + ombra più marcata ─────────────────────────────────────── */
.mms-social-link:hover,
.mms-social-link:focus-visible {
    transform: scale(1.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
    filter: brightness(1.08);
    outline: 3px solid transparent;
}

/* ── Focus accessibile ───────────────────────────────────────────────────── */
.mms-social-link:focus-visible {
    outline: 3px solid var(--mms-color, #555);
    outline-offset: 3px;
}

/* ── SVG interno ─────────────────────────────────────────────────────────── */
.mms-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width:  58%;
    height: 58%;
    line-height: 1;
}

.mms-icon svg {
    width:  100%;
    height: 100%;
    fill: #ffffff;
    display: block;
}

/* ── Testo accessibile visivamente nascosto ──────────────────────────────── */
.mms-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Instagram: gradiente brand invece del colore piatto ─────────────────── */
.mms-instagram .mms-social-link {
    background: linear-gradient(
        135deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    );
}

/* ── X (Twitter): sfondo scuro con bordo sottile ─────────────────────────── */
.mms-x .mms-social-link {
    background-color: #000;
    border: 1.5px solid rgba(255,255,255,0.12);
}

/* ── Responsive: riduce il gap su mobile ─────────────────────────────────── */
@media (max-width: 480px) {
    .mms-social-list {
        gap: 8px;
    }
}