/*
 * cl-brands.css — the brand (social) icons, and nothing else.
 *
 * WHAT:  @font-face for "Font Awesome 5 Brands" plus the class-to-glyph map for
 *        the social networks a dealer site can actually show.
 * WHY:   Three copies of Font Awesome used to load on every page. The Motors
 *        vendor copy was removed earlier in this audit; the Elementor copy
 *        (fontawesome.css 72 KB + solid.css + the 78 KB FA5 solid webface) was
 *        loading only because the brand glyph map lived inside it — every solid
 *        icon on the site already resolves to the FA6 face in
 *        assets/vendor/mst. That whole Elementor stack is gone now and this
 *        file replaces it: ~1 KB of CSS and a 3.4 KB webfont subset against
 *        233 KB of duplicate Font Awesome.
 * FONT:  assets/fonts/cl-brands.woff2 — fa-brands-400 subset to the 24 glyphs
 *        listed below. Adding a new social network to the Theme Editor means
 *        adding its glyph here AND re-subsetting the font to include it, or the
 *        icon renders as an empty box.
 * NOTE:  The family name stays "Font Awesome 5 Brands" because that is what the
 *        legacy templates and the Elementor-generated CSS in uploads reference.
 */

@font-face {
	font-family: "Font Awesome 5 Brands";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("fonts/cl-brands.woff2") format("woff2");
}

/*
 * The base rule every icon class needs. It used to come from Elementor's
 * fontawesome.css, and dropping that sheet without replacing this made every
 * solid icon box one pixel shorter, because the glyph fell back to the
 * inherited line height. Nothing else in that 72 KB file was doing any work.
 */
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
}

/*
 * Solid icons. Elementor's solid.css used to point these at "Font Awesome 5
 * Free" at weight 900, and the FA5 face it named is gone now, so the weight is
 * restated here against the FA6 face that assets/vendor/mst actually loads.
 * Without it the element inherits weight 400 while the only face on the page
 * is a 900, which leaves the browser matching across weights.
 */
.fa,
.fas {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

.fab {
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
}

.fa-facebook:before {
	content: "\f09a";
}

.fa-facebook-f:before {
	content: "\f39e";
}

.fa-facebook-square:before {
	content: "\f082";
}

.fa-instagram:before {
	content: "\f16d";
}

.fa-instagram-square:before {
	content: "\e055";
}

.fa-youtube:before {
	content: "\f167";
}

.fa-youtube-square:before {
	content: "\f431";
}

.fa-tiktok:before {
	content: "\e07b";
}

.fa-twitter:before {
	content: "\f099";
}

.fa-twitter-square:before {
	content: "\f081";
}

.fa-linkedin:before {
	content: "\f08c";
}

.fa-linkedin-in:before {
	content: "\f0e1";
}

.fa-pinterest:before {
	content: "\f0d2";
}

.fa-pinterest-p:before {
	content: "\f231";
}

.fa-snapchat:before {
	content: "\f2ab";
}

.fa-snapchat-ghost:before {
	content: "\f2ac";
}

.fa-whatsapp:before {
	content: "\f232";
}

.fa-whatsapp-square:before {
	content: "\f40c";
}

.fa-yelp:before {
	content: "\f1e9";
}

.fa-google:before {
	content: "\f1a0";
}

.fa-google-plus-g:before {
	content: "\f0d5";
}

.fa-vimeo:before {
	content: "\f40a";
}

.fa-vimeo-v:before {
	content: "\f27d";
}

.fa-x-twitter:before {
	content: "\e9ca";
}