/* =============================================
   BRAND COLOR TOKENS
   ============================================= */
:root {
  --color-facebook:     #3B5997;
  --color-twitter:      #2CA9E1;
  --color-x:            #000000;
  --color-google:       #DD4B39;
  --color-youtube:      #BE2D28;
  --color-linkedin:     #007AB9;
  --color-instagram:    #983FA3;
  --color-pinterest:    #D73532;
  --color-snapchat:     #F7E821;
  --color-yelp:         #FF0000;
  --color-angieslist:   #75AE43;
  --color-foursquare:   #09B9DF;
  --color-demandforce:  #154778;
  --color-healthgrades: #6A84AA;
  --color-zocdoc:       #2589A1;
  --color-realself:     #3A97B7;
  --color-rss:          #F57C14;
  --color-tiktok:       #983FA3;
  --color-threads:      #000000;
  --color-bluesky:      #0082F7;
}

/* =============================================
   BASE SPRITE ICON
   ============================================= */
.social-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('/wp-content/images/social-icons.png');
  background-repeat: no-repeat;
  background-size: 128px 128px; /* 4 cols x 32px, 4 rows x 32px */
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: middle;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-icon:hover { 
  color:#e95f3d!important;
  /*opacity: 0.75;*/
  /*transform: scale(1.1);*/
}

/* =============================================
   ROW 1 — Outline (y = 0)
   ============================================= */
.icon-facebook-outline  { background-position:    0px   0px; }
.icon-instagram-outline { background-position: -32px    0px; }
.icon-x-outline         { background-position: -64px    0px; }
.icon-tiktok-outline    { background-position: -96px    0px; }

/* =============================================
   ROW 2 — Outline (y = -32px)
   ============================================= */
.icon-whatsapp-outline  { background-position:    0px -32px; }
.icon-youtube-outline   { background-position:  -32px -32px; }
.icon-pinterest-outline { background-position:  -64px -32px; }
.icon-linkedin-outline  { background-position:  -96px -32px; }

/* =============================================
   ROW 3 — Filled brand colors (y = -64px)
   ============================================= */
.icon-facebook-filled   { background-position:    0px -64px; }  /* var(--color-facebook)   #3B5997 */
.icon-instagram-filled  { background-position:  -32px -64px; }  /* var(--color-instagram)  #983FA3 */
.icon-x-filled          { background-position:  -64px -64px; }  /* var(--color-x)          #000000 */
.icon-tiktok-filled     { background-position:  -96px -64px; }  /* var(--color-tiktok)     #983FA3 */

/* =============================================
   ROW 4 — Filled brand colors (y = -96px)
   ============================================= */
.icon-whatsapp-filled   { background-position:    0px -96px; }  /* #25D366                          */
.icon-youtube-filled    { background-position:  -32px -96px; }  /* var(--color-youtube)    #BE2D28 */
.icon-pinterest-filled  { background-position:  -64px -96px; }  /* var(--color-pinterest)  #D73532 */
.icon-linkedin-filled   { background-position:  -96px -96px; }  /* var(--color-linkedin)   #007AB9 */