/**
 * Shared responsive social icons — home, contact, service request.
 *
 * Size scale (button box × glyph):
 *   ≤575px  → 60px × 24px
 *   default → 68px × 28px
 *   ≥576px  → 76px × 30px
 *   ≥992px  → 84px × 32px
 */

#home,
#contacts,
#service-request {
    --py-social-btn: 6.75rem;
    --py-social-icon: 1.75rem;
}

@media only screen and (min-width: 576px) {
    #home,
    #contacts,
    #service-request {
        --py-social-btn: 6.75rem;
        --py-social-icon: 1.875rem;
    }
}

@media only screen and (min-width: 992px) {
    #home,
    #contacts,
    #service-request {
        --py-social-btn: 5.25rem;
        --py-social-icon: 2rem;
    }
}

@media only screen and (max-width: 575px) {
    #home,
    #contacts,
    #service-request {
        --py-social-btn: 5.75rem;
        --py-social-icon: 2.5rem;
    }
}

/* --- Home (#home) — .social-share list --- */

#home .social-share-inner-left .social-share {
    flex-wrap: wrap;
    margin: -0.5rem;
}

#home .social-share-inner-left .social-share li {
    margin: 0.5rem;
}

#home .social-share-inner-left .social-share li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--py-social-btn);
    height: var(--py-social-btn);
    line-height: 1;
    position: relative;
}

#home .social-share-inner-left .social-share li a svg {
    width: var(--py-social-icon);
    height: var(--py-social-icon);
    position: relative;
    z-index: 2;
}

/* --- Contact & service request — .social-icone --- */

#contacts .contact-about-area .social-area,
#service-request .contact-about-area .social-area {
    margin-top: 1.5rem;
}

#contacts .contact-about-area .social-area .name,
#service-request .contact-about-area .social-area .name {
    margin-bottom: 0.75rem;
}

#contacts .contact-about-area .social-area .social-icone,
#service-request .contact-about-area .social-area .social-icone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 1.125rem;
    margin-top: 0;
}

#contacts .contact-about-area .social-area .social-icone a,
#service-request .contact-about-area .social-area .social-icone a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--py-social-btn);
    height: var(--py-social-btn);
    margin-right: 0;
    line-height: 1;
    position: relative;
}

#contacts .contact-about-area .social-area .social-icone a svg,
#service-request .contact-about-area .social-area .social-icone a svg {
    width: var(--py-social-icon);
    height: var(--py-social-icon);
}

@media only screen and (max-width: 991px) {
    #contacts .contact-about-area .social-area,
    #service-request .contact-about-area .social-area {
        text-align: center;
    }

    #contacts .contact-about-area .social-area .social-icone,
    #service-request .contact-about-area .social-area .social-icone {
        justify-content: center;
    }
}

@media only screen and (max-width: 575px) {
    #contacts .contact-about-area .social-area .social-icone,
    #service-request .contact-about-area .social-area .social-icone {
        gap: 0.75rem 0.875rem;
    }
}