/**
 * T3 Live Social Follow — header styles (Enfold).
 * Selectors are scoped under #top #header to beat Enfold's menu rules.
 */

:root {
	--t3lsf-youtube: #ff0000;
	--t3lsf-youtube-hover: #cc0000;
	--t3lsf-x: #0f1419;
	--t3lsf-x-hover: #3a3f44;
	--t3lsf-muted: #6f6f6f;
	--t3lsf-focus: #286090; /* T3 Live blue, same as the Log In / Logout pill */
}

.t3lsf-svg {
	display: block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------
 * Menu items — "FOLLOW T3 LIVE  [YouTube] [X / Twitter]  LOGOUT"
 * .t3lsf-btn--pill (default) or .t3lsf-btn--circle
 * ------------------------------------------------------------------ */

#top #header .av-main-nav > li.t3lsf-item {
	display: flex;
	align-items: center;
}

#top #header .av-main-nav > li.t3lsf-item--youtube + li.t3lsf-item--x > a.t3lsf-btn {
	padding-left: 0;
}

#top #header .t3lsf-follow-label {
	display: block;
	padding: 0 8px 0 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--t3lsf-muted);
}

#top #header .av-main-nav > li.t3lsf-item > a.t3lsf-btn {
	display: block;
	padding: 0 3px;
	background: none;
	border: 0;
	text-decoration: none;
}

#top #header a.t3lsf-btn .t3lsf-btn__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
	padding: 7px 12px;
	border-radius: 16px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	transition: background-color 0.15s ease;
}

#top #header a.t3lsf-btn--youtube .t3lsf-btn__pill {
	background: var(--t3lsf-youtube);
}

#top #header a.t3lsf-btn--x .t3lsf-btn__pill {
	background: var(--t3lsf-x);
}

#top #header a.t3lsf-btn--youtube:hover .t3lsf-btn__pill,
#top #header a.t3lsf-btn--youtube:focus-visible .t3lsf-btn__pill {
	background: var(--t3lsf-youtube-hover);
}

#top #header a.t3lsf-btn--x:hover .t3lsf-btn__pill,
#top #header a.t3lsf-btn--x:focus-visible .t3lsf-btn__pill {
	background: var(--t3lsf-x-hover);
}

#top #header a.t3lsf-btn:focus {
	outline: none;
}

#top #header a.t3lsf-btn:focus-visible .t3lsf-btn__pill {
	outline: 2px solid var(--t3lsf-focus);
	outline-offset: 2px;
}

/* Circular style: icon-only round buttons (the name stays in aria-label). */
#top #header a.t3lsf-btn--circle .t3lsf-btn__pill {
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
}

#top #header a.t3lsf-btn--circle .t3lsf-svg {
	width: 15px;
	height: 15px;
}

#top #header a.t3lsf-btn--circle .t3lsf-btn__text {
	display: none;
}

/* Tighter desktop widths: drop the label, then the pill text. */
@media only screen and (max-width: 1279px) {
	#top #header .t3lsf-follow-label {
		display: none;
	}
}

@media only screen and (max-width: 1099px) {
	#top #header a.t3lsf-btn--pill .t3lsf-btn__pill {
		padding: 7px;
		border-radius: 50%;
	}

	#top #header a.t3lsf-btn--pill .t3lsf-btn__text {
		display: none;
	}
}

/* Enfold hides first-level items once the hamburger takes over. */
@media only screen and (max-width: 767px) {
	.responsive #top #header .av-main-nav > li.t3lsf-item {
		display: none;
	}
}

@media only screen and (max-width: 989px) {
	.responsive.html_mobile_menu_tablet #top #header .av-main-nav > li.t3lsf-item {
		display: none;
	}
}

/*
 * Hamburger overlay: Enfold clones the <a> into #av-burger-menu-ul, which
 * sits inside #header, so reset to an icon + name pill for either style.
 */
#top #wrap_all #av-burger-menu-ul li.t3lsf-item > a.t3lsf-btn .t3lsf-btn__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	padding: 7px 14px;
	border-radius: 16px;
}

#top #wrap_all #av-burger-menu-ul li.t3lsf-item > a.t3lsf-btn .t3lsf-btn__text {
	display: inline;
}

#top #wrap_all #av-burger-menu-ul li.t3lsf-item > a.t3lsf-btn .t3lsf-svg {
	width: 18px;
	height: 18px;
}