/* ==========================================================================
   PROFILE SOCIAL LINKS MODULE
   --------------------------------------------------------------------------
   Purpose:
   - Styles custom SVG-based social icons displayed on BuddyBoss profiles
   - Controls layout, sizing, hover effects, and brand color overrides
   - Ensures consistent rendering across desktop and mobile

   Exclusions:
   - No BuddyBoss core overrides (belongs in buddyboss-overrides.css)
   - No profile field UI (belongs in profile-ui.css)
   - No snapshot UI (belongs in snapshots.css)
   - No listing or directory UI (belongs in directory.css)
   - No GravityForms or GravityView styling

   Related JS:
   - profile.js (social link normalization and icon mapping)

   Sections:
   1. Base layout and container styling
   2. Icon sizing and structure
   3. Brand color overrides
   4. Mobile adjustments
   5. SVG rendering fixes
   ========================================================================== */


/* ==========================================================================
   1. Base layout and container styling
   ========================================================================== */

.profile-social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 10px 0 25px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    height: auto !important;
}

#buddypress .profile-social-links {
    padding: 0 !important;
    margin: 10px 0 25px !important;
}


/* ==========================================================================
   2. Icon sizing and structure
   ========================================================================== */

.profile-social-links .social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    will-change: transform;
    transform: translateZ(0);
}

.profile-social-links .social-icon-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: #000 !important;
}

.profile-social-links .social-icon-link span {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    color: inherit !important;
}

.profile-social-links .social-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    transition: transform 0.2s ease !important;
    fill: #000 !important;
}

.profile-social-links .social-icon:hover svg {
    transform: scale(1.1) !important;
}

.profile-social-links .social-icon-fallback {
    background: #eee !important;
    color: #000 !important;
    font-size: 8px !important;
    text-align: center !important;
    line-height: 28px !important;
    border-radius: 4px !important;
    font-family: sans-serif !important;
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
}


/* ==========================================================================
   3. Brand color overrides
   ========================================================================== */

.profile-social-links .social-icon[title="facebook"] .social-icon-link { color: #1877F2 !important; }
.profile-social-links .social-icon[title="x"] .social-icon-link { color: #000000 !important; }
.profile-social-links .social-icon[title="instagram"] .social-icon-link { color: #E4405F !important; }
.profile-social-links .social-icon[title="linkedin"] .social-icon-link { color: #0077B5 !important; }
.profile-social-links .social-icon[title="youtube"] .social-icon-link { color: #FF0000 !important; }
.profile-social-links .social-icon[title="tiktok"] .social-icon-link { color: #000000 !important; }
.profile-social-links .social-icon[title="threads"] .social-icon-link { color: #000000 !important; }
.profile-social-links .social-icon[title="bluesky"] .social-icon-link { color: #1D9BF0 !important; }
.profile-social-links .social-icon[title="whatsapp"] .social-icon-link { color: #25D366 !important; }
.profile-social-links .social-icon[title="discord"] .social-icon-link { color: #5865F2 !important; }
.profile-social-links .social-icon[title="tumblr"] .social-icon-link { color: #36465D !important; }
.profile-social-links .social-icon[title="truth social"] .social-icon-link { color: #BC1B21 !important; }
.profile-social-links .social-icon[title="mastodon"] .social-icon-link { color: #6364FF !important; }
.profile-social-links .social-icon[title="wechat"] .social-icon-link { color: #07BA07 !important; }
.profile-social-links .social-icon[title="pinterest"] .social-icon-link { color: #E60023 !important; }
.profile-social-links .social-icon[title="snapchat"] .social-icon-link { color: #FFFC00 !important; }
.profile-social-links .social-icon[title="telegram"] .social-icon-link { color: #0088CC !important; }
.profile-social-links .social-icon[title="github"] .social-icon-link { color: #181717 !important; }
.profile-social-links .social-icon[title="reddit"] .social-icon-link { color: #FF4500 !important; }
.profile-social-links .social-icon[title="twitch"] .social-icon-link { color: #9146FF !important; }


/* ==========================================================================
   4. Mobile adjustments
   ========================================================================== */

@media (max-width: 768px) {
  .profile-social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .profile-social-links .social-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 2px !important;
  }
}


/* ==========================================================================
   5. SVG rendering fixes
   ========================================================================== */

.social-icon-link.social-icon-fallback {
  display: none !important;
}

.social-icon-isolation svg {
  all: unset;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  fill: currentColor !important;
}