/**
 * Social Icons Styles
 * 
 * @package Ensemble_Theme
 * @version 2.8.5
 */

/* ============================================
   BASE SOCIAL ICONS STYLES
   ============================================ */

.et-social-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.et-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.et-social-icon svg {
    display: block;
}

.et-social-icon:hover {
    color: var(--ensemble-primary, #ff0066);
    transform: scale(1.1);
}

/* ============================================
   HEADER & FOOTER SOCIAL ICONS (unified)
   ============================================ */

.et-header__social.et-social-icons,
.et-footer__social .et-social-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.et-header__social.et-social-icons {
    margin-right: 16px;
}

.et-header__social .et-social-icon,
.et-header__social.et-social-icons .et-social-icon,
.et-footer__social .et-social-icon {
    color: currentColor;
    transition: color 0.2s ease, transform 0.2s ease;
}

.et-header__social .et-social-icon:hover,
.et-header__social.et-social-icons .et-social-icon:hover,
.et-footer__social .et-social-icon:hover {
    color: var(--ensemble-primary, #ff0066);
    transform: scale(1.1);
}

.et-footer__social {
    display: flex;
    align-items: center;
}

/* Mobile: hide in header */
@media (max-width: 768px) {
    .et-header__social.et-social-icons {
        display: none;
    }
}

/* ============================================
   STYLE: BRANDED (Platform Colors)
   ============================================ */

.et-social-icons--branded .et-social-icon--facebook { color: #1877f2; }
.et-social-icons--branded .et-social-icon--instagram { color: #e4405f; }
.et-social-icons--branded .et-social-icon--x { color: #000000; }
.et-social-icons--branded .et-social-icon--linkedin { color: #0a66c2; }
.et-social-icons--branded .et-social-icon--youtube { color: #ff0000; }
.et-social-icons--branded .et-social-icon--tiktok { color: #000000; }
.et-social-icons--branded .et-social-icon--whatsapp { color: #25d366; }
.et-social-icons--branded .et-social-icon--spotify { color: #1db954; }
.et-social-icons--branded .et-social-icon--telegram { color: #26a5e4; }
.et-social-icons--branded .et-social-icon--email { color: #6b7280; }

.et-social-icons--branded .et-social-icon:hover {
    color: var(--ensemble-primary, #ff0066);
    transform: scale(1.1);
}

/* ============================================
   DARK MODE
   ============================================ */

.es-mode-dark .et-social-icon,
.et-mode-dark .et-social-icon {
    color: var(--ensemble-text-dark, #f5f5f5);
}

.es-mode-dark .et-social-icon:hover,
.et-mode-dark .et-social-icon:hover {
    color: var(--ensemble-primary, #ff0066);
    transform: scale(1.1);
}

.es-mode-dark .et-social-icons--branded .et-social-icon--x,
.et-mode-dark .et-social-icons--branded .et-social-icon--x,
.es-mode-dark .et-social-icons--branded .et-social-icon--tiktok,
.et-mode-dark .et-social-icons--branded .et-social-icon--tiktok {
    color: #ffffff;
}

/* ============================================
   CUSTOM SOCIAL ICONS (Image-based)
   ============================================ */

.et-social-icon--custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.et-social-icon--custom img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.et-social-icon--custom:hover img {
    transform: scale(1.1);
}

/* Default style - white icons like SVG icons, red/primary on hover */
.et-social-icons--default .et-social-icon--custom img {
    /* Make image white to match SVG icons */
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.et-social-icons--default .et-social-icon--custom:hover img {
    /* Approximate primary color (#ff0066) on hover */
    filter: brightness(0) invert(1) sepia(1) saturate(50) hue-rotate(310deg);
    opacity: 1;
}

/* Dark mode - same as default since icons are already white */
.es-mode-dark .et-social-icons--default .et-social-icon--custom img,
.et-mode-dark .et-social-icons--default .et-social-icon--custom img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.es-mode-dark .et-social-icons--default .et-social-icon--custom:hover img,
.et-mode-dark .et-social-icons--default .et-social-icon--custom:hover img {
    filter: brightness(0) invert(1) sepia(1) saturate(50) hue-rotate(310deg);
    opacity: 1;
}

/* Branded style - show custom icons in full color */
.et-social-icons--branded .et-social-icon--custom img {
    filter: none;
    opacity: 1;
}

.et-social-icons--branded .et-social-icon--custom:hover img {
    /* Still apply primary color on hover for consistency */
    filter: brightness(0) invert(1) sepia(1) saturate(50) hue-rotate(310deg);
}