/**
 * The promotional bar.
 *
 * The scroll is one CSS animation on a track that holds the messages twice.
 * When the first copy has travelled exactly its own width (-50% of the track)
 * the animation restarts — and because the second copy now sits where the
 * first began, the seam cannot be seen. No JavaScript runs per frame, so it
 * stays smooth on a phone and costs nothing on the main thread.
 *
 * On layout: this theme's header is `position: fixed; inset: 0 0 auto`, pinned
 * to the top of the window. Anything printed in the normal flow at the top of
 * the body therefore ends up *underneath* it, with the logo and menu drawn on
 * top of the messages. That is why the bar floats in a corner by default: it
 * never meets the header, never shifts the page, and works with the
 * transparent-overlay hero used on inner pages. The pinned layout is still
 * available and moves the header down to make room.
 */

.iwp-bar {
	--iwp-bg: #2d5a4e;
	--iwp-text: #faf7f2;
	--iwp-accent: #c4955a;
	--iwp-size: 14px;
	--iwp-speed: 40s;

	display: flex;
	align-items: center;
	background: var(--iwp-bg);
	color: var(--iwp-text);
	font-family: var(--iw-font-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
	font-size: var(--iwp-size);
	line-height: 1.4;
	overflow: hidden;
}

/* ── Floating in a corner (the default) ────────────────────────────────── */

.iwp-bar--float_right,
.iwp-bar--float_left {
	position: fixed;
	bottom: 20px;
	/* Under a modal or a cookie banner, over ordinary page content. */
	z-index: 40;
	width: min(420px, calc(100vw - 40px));
	padding: 2px 2px 2px 4px;
	border-radius: 999px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
	animation: iwp-rise .45s ease both;
}

.iwp-bar--float_right { right: 20px; }
.iwp-bar--float_left { left: 20px; }

@keyframes iwp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Pinned above the header ───────────────────────────────────────────── */

.iwp-bar--top {
	position: fixed;
	inset: 0 0 auto;
	width: 100%;
	/* One above the theme's fixed header, which sits at 50. */
	z-index: 51;
}

/*
 * Move the theme's header down by exactly the bar's height, and the page with
 * it. --iwp-bar-h is measured and set by the script, because the height
 * changes with the chosen text size and when the messages wrap.
 */
body.iwp-has-top-bar .iw-nav { top: var(--iwp-bar-h, 0px); }
body.iwp-has-top-bar { padding-top: var(--iwp-bar-h, 0px); }

/* ── The scrolling part ────────────────────────────────────────────────── */

.iwp-bar__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	/* Fades the text in and out at the edges instead of clipping it dead. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.iwp-bar__track {
	display: flex;
	width: max-content;
	animation: iwp-scroll var(--iwp-speed) linear infinite;
}

.iwp-bar--right .iwp-bar__track { animation-name: iwp-scroll-right; }

.iwp-bar__run {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 11px 0;
}

.iwp-bar--float_right .iwp-bar__run,
.iwp-bar--float_left .iwp-bar__run { padding: 9px 0; }

.iwp-bar__item {
	flex: 0 0 auto;
	padding: 0 4px;
	white-space: nowrap;
	font-weight: 500;
	letter-spacing: .01em;
}

/*
 * No underline. These are promotional headlines running past, not prose, and
 * an underline on moving text reads as noise. The hover colour and the cursor
 * are what say it is clickable. Stated for every link state so a theme rule
 * cannot put the underline back.
 */
.iwp-bar__link,
.iwp-bar__link:link,
.iwp-bar__link:visited,
.iwp-bar__link:hover,
.iwp-bar__link:focus,
.iwp-bar__link:active {
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
	box-shadow: none;
	transition: color .2s ease;
}

.iwp-bar__link:hover,
.iwp-bar__link:focus-visible { color: var(--iwp-accent); }

.iwp-bar__link:focus-visible {
	outline: 2px solid var(--iwp-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.iwp-bar__sep {
	flex: 0 0 auto;
	padding: 0 18px;
	color: var(--iwp-accent);
	opacity: .85;
}

.iwp-bar--pause:hover .iwp-bar__track,
.iwp-bar--pause:focus-within .iwp-bar__track { animation-play-state: paused; }

.iwp-bar__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	opacity: .7;
	cursor: pointer;
	transition: opacity .2s ease, background .2s ease;
}

.iwp-bar__close:hover,
.iwp-bar__close:focus-visible { opacity: 1; background: rgba(255, 255, 255, .14); }

/* The track holds two identical copies, so one copy is exactly half of it. */
@keyframes iwp-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes iwp-scroll-right {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

/* Somebody who has asked their system for less movement should not be given a
   permanently moving banner. The messages are all still there — the first few
   sit still instead of scrolling. */
@media (prefers-reduced-motion: reduce) {
	.iwp-bar__track { animation: none; width: 100%; }
	.iwp-bar__run:nth-child(2) { display: none; }

	.iwp-bar__run {
		flex-wrap: wrap;
		justify-content: center;
		gap: 2px 0;
		width: 100%;
	}

	.iwp-bar__item { white-space: normal; text-align: center; }
	.iwp-bar__viewport { -webkit-mask-image: none; mask-image: none; }

	.iwp-bar--float_right,
	.iwp-bar--float_left { border-radius: 18px; animation: none; }
}

/* ── Phones ────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.iwp-bar { font-size: calc(var(--iwp-size) - 1px); }
	.iwp-bar__sep { padding: 0 12px; }

	/* A corner pill is cramped on a phone, so it becomes a strip across the
	   bottom instead — still clear of the header, still easy to dismiss. */
	.iwp-bar--float_right,
	.iwp-bar--float_left {
		right: 10px;
		left: 10px;
		bottom: 10px;
		width: auto;
		border-radius: 14px;
	}

	.iwp-bar__viewport {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
	}
}

/* Printing a scrolling advert wastes ink. */
@media print {
	.iwp-bar { display: none; }
}