/**
 * BFP front-end styles — language switcher.
 *
 * WordPress rewrites flag emoji into <img class="emoji"> (an SVG of the flag),
 * so we crop that rectangular image into a circle to render round flags.
 * Edit the values below freely; changes show after a page refresh.
 */

.bfp-lang-switcher {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5em;
	align-items: center;
}

.bfp-lang-switcher--flags {
	gap: .4em;
	padding-top: 1em;
}

.bfp-lang-switcher .bfp-lang-link {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	text-decoration: none;
}

/* Round flags — only for style="flags".
 *
 * The PHP renders a real flag image (.bfp-flag-img from flagcdn) that fills its
 * whole canvas, so object-fit:cover crops it into a clean circle with no zoom
 * and no transparent gaps. */
.bfp-lang-switcher--flags .bfp-lang-link {
	display: inline-flex;
	gap: 0;
}

.bfp-lang-switcher--flags .bfp-lang-link,
.bfp-lang-switcher--flags .bfp-lang-link.is-active {
	background: none;
}

.bfp-lang-switcher--flags .bfp-flag-img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: none;
	/* Non-active flags: light gray border. Active flags override to a black ring below. */
	border: 1px solid #ddd;
}

/* BFP active-language override: no background fill, solid black ring. */
.bfp-lang-switcher .bfp-lang-link.is-active,
.bfp-lang-switcher .bfp-lang-link[aria-current="true"] {
	background: transparent !important;
	background-color: transparent !important;
}
.bfp-lang-switcher--flags .bfp-lang-link.is-active .bfp-flag-img,
.bfp-lang-switcher--flags .bfp-lang-link[aria-current="true"] .bfp-flag-img {
	border-color: #000 !important;
	border-width: 1px !important;
}