/* Social icons variant styles */

/* Teal variant - convert white icons to teal #056977 */
#social-icons.social-icons-variant-teal .social-icon {
    filter: brightness(0) saturate(100%) invert(22%) sepia(95%) saturate(1500%) hue-rotate(165deg) brightness(0.95) contrast(1.05);
}

/* White variant - keep icons white (default, no filter needed) */
#social-icons.social-icons-variant-white .social-icon {
    filter: none;
}

/* Social icons hover effect */
#social-icons .social-icon {
    transition: opacity 0.3s ease;
}

#social-icons .social-icon:hover {
    opacity: 0.7;
}

/* Ensure social icons are visible and properly sized */
#social-icons {
    display: flex !important;
    align-items: center;
}

#social-icons .social-icon {
    display: block;
    width: auto;
    height: 18px; /* Keep original height from site.css */
}

/* Mobile adjustments - only reduce gap, keep original height */
@media (max-width: 767.98px) {
    #social-icons.social-icons-group {
        gap: 1rem !important;
    }
}

@media (max-width: 575.98px) {
    #social-icons.social-icons-group {
        gap: 0.75rem !important;
    }
}