/**
 * Social Media Block Frontend Styles
 * 
 * Styles for the social media block on the frontend
 */

/* Social Media Block Icons */
.social-media-block .social-icon {
    position: relative;
}

/* Default state - blue icons */
.social-media-block .social-icon .social-icon-img {
    filter: brightness(0) saturate(100%) invert(47%) sepia(35%) saturate(1347%) hue-rotate(201deg) brightness(95%) contrast(86%);
}

/* Hover state - white icons */
.social-media-block .social-icon:hover .social-icon-img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(109deg) brightness(105%) contrast(105%);
}

/* Alternative approach using CSS masks (if SVGs support it) */
.social-media-block .social-icon-img.svg-blue {
    filter: brightness(0) saturate(100%) invert(47%) sepia(35%) saturate(1347%) hue-rotate(201deg) brightness(95%) contrast(86%);
}

.social-media-block .social-icon:hover .social-icon-img.svg-blue {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(109deg) brightness(105%) contrast(105%);
}