/* FIB Ad Bar: one white line pinned to the bottom of the screen. */

.fib-ad-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99990;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 8px env(safe-area-inset-bottom, 0);
	background: #e9edf2;
	color: #222;
	border-top: 1px solid #d3d9e1;
	box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
	font-family: inherit;
	font-size: 14px;
	line-height: 40px;
	-webkit-text-size-adjust: 100%;
}

.fib-ad-bar *,
.fib-ad-bar *::before,
.fib-ad-bar *::after {
	box-sizing: border-box;
}

/* The small "AD" tag sits in the top-left corner, out of the way, so the text gets the full width. */
.fib-ad-bar__label {
	position: absolute;
	top: 0;
	left: 3px;
	z-index: 2;
	padding: 0 3px;
	background: #fff;
	border: 1px solid #aeb7c3;
	border-radius: 2px;
	color: #4f5b6a;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 10px;
	text-transform: uppercase;
	pointer-events: none;
}

.fib-ad-bar__track {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	overflow: hidden;
}

.fib-ad-bar__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: #1a1a1a;
	text-decoration: none;
	/* Waiting off-screen at the right edge, well out of sight so two ads are never close together. The track clips it. */
	transform: translateX(150%);
	/* The flight time is set by the script from Settings (--fib-slide). One easing for in and out keeps two banners from overlapping. */
	transition: transform var(--fib-slide, 6s) cubic-bezier(0.45, 0, 0.55, 1);
}

/* The plane that tows the text (image: assets/plane.png) (shown when an ad has no icon of its own). */
.fib-ad-bar__plane {
	flex: 0 0 auto;
	display: block;
	width: 54px;
	height: auto;
	animation: fib-bob 1.8s ease-in-out infinite alternate;
}

/* The tow line behind the plane: one thin line that opens into a short V towards the text. */
.fib-ad-bar__tow {
	flex: 0 0 auto;
	width: 18px;
	height: 24px;
	margin-right: 3px;
	color: #2b2f36;
}

@keyframes fib-bob {
	from { transform: translateY(-1.5px) rotate(-2deg); }
	to { transform: translateY(1.5px) rotate(1deg); }
}

/* The ad itself: plain text on the bar's own background, with the optional icon in front. */
.fib-ad-bar__banner {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	height: 26px;
	line-height: 26px;
}

.fib-ad-bar__icon {
	flex: 0 0 auto;
	margin-right: 7px;
	font-size: 16px;
	line-height: 1;
}

.fib-ad-bar__textwrap {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* Long text slides inside the banner while it is parked (see the script). */
.fib-ad-bar__text {
	display: inline-block;
	white-space: nowrap;
	font-weight: 600; /* semi-bold reads better on a small screen and costs only about 3% in width */
}

/* Set by the script when the text is only a hair too wide: drop the arrow instead of sliding. */
.fib-ad-bar__item.no-arrow .fib-ad-bar__text::after {
	display: none;
}

.fib-ad-bar__text::after {
	content: "\203A";
	margin-left: 6px;
	color: #5b6674;
}

/* On screen, standing still. */
.fib-ad-bar__item.is-active {
	transform: none;
}

/* Sliding out to the left. */
.fib-ad-bar__item.is-leaving {
	transform: translateX(-150%);
}

.fib-ad-bar__item.no-anim {
	transition: none;
}

.fib-ad-bar__item:hover .fib-ad-bar__text,
.fib-ad-bar__item:focus .fib-ad-bar__text {
	color: #000;
	text-decoration: underline;
}

.fib-ad-bar__item:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: -2px;
}

/* Desktop: text centred in the line. */
@media (min-width: 768px) {
	.fib-ad-bar {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Desktop has room for a slightly bigger size. */
	.fib-ad-bar__text {
		font-size: 15px;
	}

	/* Desktop: the parked banner sits in the middle of the line. */
	.fib-ad-bar__item {
		justify-content: center;
	}
}

/* Room at the bottom of the page so the bar never covers buttons or footer links. */
body.has-fib-ad-bar {
	padding-bottom: var(--fib-ad-bar-h, 41px);
}

/*
 * Keep the site's other bottom-of-screen widgets clear of the bar.
 * Only applies while the bar is on the page (body.has-fib-ad-bar).
 *
 * TranslatePress language switcher: a slim vertical tab on the right edge,
 * halfway down. To use the left edge instead, swap right/left below
 * (right: auto; left: 0) and mirror the border-radius (0 6px 6px 0).
 */
body.has-fib-ad-bar .trp-language-switcher.trp-floating-switcher {
	top: 50% !important;
	bottom: auto !important;
	right: 0 !important;
	left: auto !important;
	transform: translateY(-50%);
	border-radius: 6px 0 0 6px !important;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15) !important;
}

body.has-fib-ad-bar .trp-floating-switcher .trp-language-item {
	writing-mode: vertical-rl;
	padding: 14px 6px !important;
	min-height: 0;
}

/* Theme's back-to-top button: sit just above the bar. */
body.has-fib-ad-bar #backtotop {
	bottom: calc(var(--fib-ad-bar-h, 41px) + 16px) !important;
}

@media (prefers-reduced-motion: reduce) {
	.fib-ad-bar__item {
		transition: none;
	}

	.fib-ad-bar__plane {
		animation: none;
	}
}

@media print {
	.fib-ad-bar {
		display: none;
	}

	body.has-fib-ad-bar {
		padding-bottom: 0;
	}
}