/**
 * EAAS Theme - Social Icons Styles
 *
 * @package    EAAS
 * @version    2.5
 * @author     Rodolphe
 * @link       https://enaccordavecsoi.fr
 * @file       social-icons.css
 */

.footer-social {
    display: flex;
    gap: var(--social-gap, 15px);
    margin-top: var(--spacing-md, 20px);
}

.footer-social a {
    width: var(--social-icon-size, 40px);
    height: var(--social-icon-size, 40px);
    border-radius: var(--social-border-radius, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--white);
    background: var(--overlay-light, rgba(255, 255, 255, 0.1));
}

.footer-social a:hover {
    transform: translateY(var(--hover-lift-sm, -3px));
}

.footer-social a[aria-label="Facebook"] {
    background: var(--social-facebook-bg, #1877F2);
}

.footer-social a[aria-label="Facebook"]:hover {
    background: var(--social-facebook-bg-hover, #0A66C2);
}

.footer-social a[aria-label="X"],
.footer-social a.x-twitter {
    background: var(--social-twitter-bg, #000000);
}

.footer-social a[aria-label="X"]:hover,
.footer-social a.x-twitter:hover {
    background: var(--social-twitter-bg-hover, #1a1a1a);
}

.footer-social a[aria-label="LinkedIn"] {
    background: var(--social-linkedin-bg, #0A66C2);
}

.footer-social a[aria-label="LinkedIn"]:hover {
    background: var(--social-linkedin-bg-hover, #004182);
}

.footer-social a[aria-label="Instagram"] {
    background: var(--social-instagram-bg, linear-gradient(135deg, #833AB4 0%, #E1306C 25%, #FD1D1D 50%, #F77737 75%, #FCAF45 100%));
}

.footer-social a[aria-label="Instagram"]:hover {
    background: var(--social-instagram-bg-hover, linear-gradient(135deg, #6D2C91 0%, #C2185B 25%, #D41A1A 50%, #E86B2B 75%, #E89B2B 100%));
}

.footer-social a[aria-label="YouTube"] {
    background: var(--social-youtube-bg, #FF0000);
}
.footer-social a[aria-label="YouTube"]:hover {
    background: var(--social-youtube-bg-hover, #CC0000);
}

.footer-social a[aria-label="TikTok"] {
    background: var(--social-tiktok-bg, #000000);
}
.footer-social a[aria-label="TikTok"]:hover {
    background: var(--social-tiktok-bg-hover, #25F4EE);
}

.footer-social a[aria-label="Pinterest"] {
    background: var(--social-pinterest-bg, #BD081C);
}
.footer-social a[aria-label="Pinterest"]:hover {
    background: var(--social-pinterest-bg-hover, #8C0615);
}

.footer-social a[aria-label="WhatsApp"] {
    background: var(--social-whatsapp-footer-bg, #25D366);
}
.footer-social a[aria-label="WhatsApp"]:hover {
    background: var(--social-whatsapp-footer-bg-hover, #128C7E);
}

.footer-social a[aria-label="Telegram"] {
    background: var(--social-telegram-bg, #0088cc);
}
.footer-social a[aria-label="Telegram"]:hover {
    background: var(--social-telegram-bg-hover, #006699);
}

.footer-social a[aria-label="GitHub"] {
    background: var(--social-github-bg, #333333);
}
.footer-social a[aria-label="GitHub"]:hover {
    background: var(--social-github-bg-hover, #24292e);
}

.footer-social a[aria-label="Discord"] {
    background: var(--social-discord-bg, #5865F2);
}
.footer-social a[aria-label="Discord"]:hover {
    background: var(--social-discord-bg-hover, #4752C4);
}

.footer-social a.social-custom {
    background: var(--social-custom-bg, #6c757d);
}
.footer-social a.social-custom:hover {
    background: var(--social-custom-bg-hover, #495057);
}

.footer-social a.social-custom img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* ========================================
   Responsive Social Icons
   ======================================== */

/* Mobile (max 767px) */
@media screen and (max-width: 767px) {
    .footer-social {
        gap: var(--spacing-sm, 12px);
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-social a {
        width: calc(var(--social-icon-size, 40px) * 0.9);
        height: calc(var(--social-icon-size, 40px) * 0.9);
        min-width: calc(var(--social-icon-size, 40px) * 0.9);
        min-height: calc(var(--social-icon-size, 40px) * 0.9);
    }
}

/* Small Mobile (max 480px) */
@media screen and (max-width: 480px) {
    .footer-social {
        gap: var(--spacing-sm, 10px);
    }

    .footer-social a {
        width: calc(var(--social-icon-size, 40px) * 0.85);
        height: calc(var(--social-icon-size, 40px) * 0.85);
        min-width: calc(var(--social-icon-size, 40px) * 0.85);
        min-height: calc(var(--social-icon-size, 40px) * 0.85);
    }
}

/* Very Small Mobile (max 360px) */
@media screen and (max-width: 360px) {
    .footer-social {
        gap: var(--spacing-xs, 8px);
    }

    .footer-social a {
        width: calc(var(--social-icon-size, 40px) * 0.8);
        height: calc(var(--social-icon-size, 40px) * 0.8);
        min-width: calc(var(--social-icon-size, 40px) * 0.8);
        min-height: calc(var(--social-icon-size, 40px) * 0.8);
    }
}