/* TGG Subscriber Banner */

/* Default the offset variable to 0 so pre-JS state is safe */
:root {
	--tgg-banner-h: 0px;
}

/* Push body content and ALL fixed/sticky headers below the banner */
body {
	padding-top: var(--tgg-banner-h) !important;
}

#masthead,
.header-sticky-element,
.header_mobile56--sticky {
	top: var(--tgg-banner-h) !important;
}

#tgg-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999999;
	width: 100%;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

#tgg-banner.tgg-banner--hidden {
	display: none !important;
}

/* --- Amber (non-subscriber) --- */
.tgg-banner--amber {
	background: #fef3c7;
	border-bottom: 1.5px solid #f59e0b;
	color: #78350f;
}

/* --- Green (active subscriber) --- */
.tgg-banner--green {
	background: #d1fae5;
	border-bottom: 1.5px solid #10b981;
	color: #064e3b;
}

/* --- Inner layout --- */
.tgg-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 9px 16px;
	max-width: 100%;
}

.tgg-banner__message {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}

.tgg-banner__message strong {
	font-weight: 700;
}

.tgg-banner__sub {
	font-weight: 400;
	opacity: 0.85;
}

/* --- Subscribe button --- */
.tgg-banner__btn {
	display: inline-block;
	background: #1a1a2e;
	color: #fff !important;
	text-decoration: none !important;
	padding: 5px 18px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: opacity 0.15s;
}

.tgg-banner__btn:hover {
	opacity: 0.82;
}

/* --- Dismiss button (green banner) --- */
.tgg-banner__dismiss {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: #064e3b;
	opacity: 0.5;
	padding: 0 4px;
	transition: opacity 0.15s;
}

.tgg-banner__dismiss:hover {
	opacity: 1;
}

/* Position relative needed for the absolute dismiss button */
.tgg-banner--green .tgg-banner__inner {
	position: relative;
	padding-right: 44px;
}

/* --- Mobile --- */
@media ( max-width: 480px ) {
	.tgg-banner__inner {
		padding: 7px 12px;
		gap: 8px;
	}

	.tgg-banner__message {
		flex-direction: column;
		gap: 1px;
	}

	.tgg-banner__btn {
		padding: 5px 14px;
		font-size: 12px;
	}
}