/* ============================================================
   social-icons.css
   The therapist's social links, on both the search results card and
   the public profile.

   The icons are masked spans rather than <img> elements. An image
   cannot be recoloured by CSS, so a hover colour change is impossible
   with <img>; masking the SVG and painting through it with
   background-color makes the colour an ordinary CSS property.
   ============================================================ */

/* Back to a plain row — the torn sheet is the whole card's background
   now, not a strip under these. */
.tcard-social,
.profile-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.tcard-social a,
.profile-social a {
    display: inline-flex;
    line-height: 0;
}

/* ---------- the icons ---------- */
.soc-icon {
    display: block;
    /* Height-led, not a fixed square: these icons are not all square — the
       play button is wide, the note is tall — so forcing both dimensions
       would squash them. Equal height lines them up on one baseline. */
    height: 29px;
    background-color: var(--justicePurple);
    transition: background-color .15s ease;
}

.tcard-social a:hover .soc-icon,
.profile-social a:hover .soc-icon {
    background-color: var(--justiceOrange);
}

/* Each icon carries its own width, taken from the artwork's proportions, so
   nothing is stretched to fit a common box. */
.soc-facebook  { width: 29px; -webkit-mask: url('../images/Icons/SocialMedia/Facebook-Purple.svg')  center / contain no-repeat; mask: url('../images/Icons/SocialMedia/Facebook-Purple.svg')  center / contain no-repeat; }
.soc-instagram { width: 29px; -webkit-mask: url('../images/Icons/SocialMedia/Instagram-Purple.svg') center / contain no-repeat; mask: url('../images/Icons/SocialMedia/Instagram-Purple.svg') center / contain no-repeat; }
.soc-linkedin  { width: 29px; -webkit-mask: url('../images/Icons/SocialMedia/Linkedin-Purple.svg')  center / contain no-repeat; mask: url('../images/Icons/SocialMedia/Linkedin-Purple.svg')  center / contain no-repeat; }
.soc-tiktok    { width: 27px; -webkit-mask: url('../images/Icons/SocialMedia/Tiktok-Purple.svg')    center / contain no-repeat; mask: url('../images/Icons/SocialMedia/Tiktok-Purple.svg')    center / contain no-repeat; }
.soc-x         { width: 27px; -webkit-mask: url('../images/Icons/SocialMedia/X-Purple.svg')         center / contain no-repeat; mask: url('../images/Icons/SocialMedia/X-Purple.svg')         center / contain no-repeat; }
.soc-youtube   { width: 37px; -webkit-mask: url('../images/Icons/SocialMedia/Youtube-Purple.svg')   center / contain no-repeat; mask: url('../images/Icons/SocialMedia/Youtube-Purple.svg')   center / contain no-repeat; }

/* Larger on the profile page, where they are the page's own links rather
   than one line inside a result card. */
.profile-social .soc-icon { height: 44px; }
.profile-social .soc-facebook,
.profile-social .soc-instagram,
.profile-social .soc-linkedin { width: 44px; }
.profile-social .soc-tiktok,
.profile-social .soc-x        { width: 41px; }
.profile-social .soc-youtube  { width: 56px; }