/*
CSS for Social Media Icons
*/


#social-media {
	display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	gap: 10px;
    padding-bottom: var(--wp--preset--spacing--50);
}

#social-media:has(.wp-block-page-list) {
    display: block;
    padding-bottom: 0;
}

.icon-wrapper i {
	align-content: center;
    text-align: center;
    border-radius: 7px;
    height: 45px;
	width: 45px;
    color: var(--wp--preset--color--white);
}


/* Facebook */
.icon-wrapper i.fa-facebook-f {
    background-color: var(--wp--preset--color--secondary);
    font-size: 29px;
}

.icon-wrapper i.fa-facebook-f.bg-brand {
    background-color: #3b5998;
}


/* Instagram */
.icon-wrapper i.fa-instagram {
    background-color: var(--wp--preset--color--secondary);
    font-size: 33px;
}

.icon-wrapper i.fa-instagram.bg-brand {
	background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
}


/* Twitter */
.icon-wrapper i.fa-x-twitter {
	background-color: var(--wp--preset--color--secondary);
	font-size: 27px;
}

.icon-wrapper i.fa-x-twitter.bg-brand {
	background-color: black;
}


/* YouTube */
.icon-wrapper i.fa-youtube {
    background-color: var(--wp--preset--color--secondary);
    font-size: 27px;
}

.icon-wrapper i.fa-youtube.bg-brand {
    background-color: #FF0000;
}


/* BlueSky */
.icon-wrapper i.fa-bluesky {
	background-color: var(--wp--preset--color--secondary);
    font-size: 27px;
}

.icon-wrapper i.fa-bluesky.bg-brand {
	background-color: #1083FE;
}


/* LinkedIn */
.icon-wrapper i.fa-linkedin-in {
	background-color: var(--wp--preset--color--secondary);
    font-size: 27px;
}

.icon-wrapper i.fa-linkedin-in.bg-brand {
	background-color: #0B66C2;
}


/* Google */
.icon-wrapper i.fa-google {
    background-color: var(--wp--preset--color--secondary);
    font-size: 25px; /* Scaled slightly smaller to match the weight of LinkedIn/X */
}

.icon-wrapper i.fa-google.bg-brand {
    background: conic-gradient(
        #ea4335 0deg 90deg,    /* Red */
        #fbbc05 90deg 180deg,  /* Yellow */
        #34a853 180deg 270deg, /* Green */
        #4285f4 270deg         /* Blue */
    );
}


/* TikTok */
.icon-wrapper i.fa-tiktok {
    background-color: var(--wp--preset--color--secondary);
    font-size: 27px;
}

.icon-wrapper i.fa-tiktok.bg-brand {
    background-color: #010101;
    text-shadow:
        -2px 1px 0px #EE1D52,   /* Red offset (left) */
         2px -1px 0px #69C9D0;  /* Cyan offset (right) */
}


/* Square Style */
.icon-wrapper i.style-square {
    border-radius: 0;
}

/* Circle Style */
.icon-wrapper i.style-circle {
    border-radius: 50%;
    height: 50px;
	width: 50px;
}


/* Background Color Options */
.icon-wrapper i.fa-facebook-f.bg-primary, 
.icon-wrapper i.fa-instagram.bg-primary, 
.icon-wrapper i.fa-x-twitter.bg-primary, 
.icon-wrapper i.fa-youtube.bg-primary, 
.icon-wrapper i.fa-bluesky.bg-primary, 
.icon-wrapper i.fa-linkedin-in.bg-primary, 
.icon-wrapper i.fa-google.bg-primary, 
.icon-wrapper i.fa-tiktok.bg-primary {background-color: var(--wp--preset--color--primary);}

.icon-wrapper i.fa-facebook-f.bg-secondary, 
.icon-wrapper i.fa-instagram.bg-secondary, 
.icon-wrapper i.fa-x-twitter.bg-secondary, 
.icon-wrapper i.fa-youtube.bg-secondary, 
.icon-wrapper i.fa-bluesky.bg-secondary, 
.icon-wrapper i.fa-linkedin-in.bg-secondary, 
.icon-wrapper i.fa-google.bg-secondary, 
.icon-wrapper i.fa-tiktok.bg-secondary {background-color: var(--wp--preset--color--secondary);}

.icon-wrapper i.fa-facebook-f.bg-contrast, 
.icon-wrapper i.fa-instagram.bg-contrast, 
.icon-wrapper i.fa-x-twitter.bg-contrast, 
.icon-wrapper i.fa-youtube.bg-contrast, 
.icon-wrapper i.fa-bluesky.bg-contrast, 
.icon-wrapper i.fa-linkedin-in.bg-contrast, 
.icon-wrapper i.fa-google.bg-contrast, 
.icon-wrapper i.fa-tiktok.bg-contrast {background-color: var(--wp--preset--color--contrast);}

.icon-wrapper i.fa-facebook-f.bg-black, 
.icon-wrapper i.fa-instagram.bg-black, 
.icon-wrapper i.fa-x-twitter.bg-black, 
.icon-wrapper i.fa-youtube.bg-black, 
.icon-wrapper i.fa-bluesky.bg-black, 
.icon-wrapper i.fa-linkedin-in.bg-black, 
.icon-wrapper i.fa-google.bg-black, 
.icon-wrapper i.fa-tiktok.bg-black {background-color: var(--wp--preset--color--black);}

.icon-wrapper i.fa-facebook-f.bg-white, 
.icon-wrapper i.fa-instagram.bg-white, 
.icon-wrapper i.fa-x-twitter.bg-white, 
.icon-wrapper i.fa-youtube.bg-white, 
.icon-wrapper i.fa-bluesky.bg-white, 
.icon-wrapper i.fa-linkedin-in.bg-white, 
.icon-wrapper i.fa-google.bg-white, 
.icon-wrapper i.fa-tiktok.bg-white {background-color: var(--wp--preset--color--white);}

.icon-wrapper i.fa-facebook-f.bg-transparent, 
.icon-wrapper i.fa-instagram.bg-transparent, 
.icon-wrapper i.fa-x-twitter.bg-transparent, 
.icon-wrapper i.fa-youtube.bg-transparent,
.icon-wrapper i.fa-bluesky.bg-transparent, 
.icon-wrapper i.fa-linkedin-in.bg-transparent, 
.icon-wrapper i.fa-google.bg-transparent, 
.icon-wrapper i.fa-tiktok.bg-transparent {background-color: transparent;}

/* Text Color Options */
.icon-wrapper i.fa-facebook-f.text-black, 
.icon-wrapper i.fa-instagram.text-black, 
.icon-wrapper i.fa-x-twitter.text-black, 
.icon-wrapper i.fa-youtube.text-black, 
.icon-wrapper i.fa-bluesky.text-black, 
.icon-wrapper i.fa-linkedin-in.text-black, 
.icon-wrapper i.fa-google.text-black, 
.icon-wrapper i.fa-tiktok.text-black {color: var(--wp--preset--color--black);}

.icon-wrapper i.fa-facebook-f.text-theme, 
.icon-wrapper i.fa-instagram.text-theme, 
.icon-wrapper i.fa-x-twitter.text-theme, 
.icon-wrapper i.fa-youtube.text-theme, 
.icon-wrapper i.fa-bluesky.text-theme, 
.icon-wrapper i.fa-linkedin-in.text-theme, 
.icon-wrapper i.fa-google.text-theme, 
.icon-wrapper i.fa-tiktok.text-theme {color: var(--wp--preset--color--primary);}