/* Announcement bar above the site header. One fixed look from the theme tokens (css/runko.css, every page): the
   text like the main menu, the accent only in the icon, the link arrow and a faint glow in the bottom line. */
.pah-ticker {
	--pah-ticker-accent: var(--pa-color-accent);

	position: relative;
	z-index: 50;
	width: 100%;
	background: var(--pa-color-surface);
	border-bottom: 1px solid var(--pa-color-line);
	color: var(--pa-color-ink);
	font-family: var(--pa-font-display);
	font-size: 15px;
	font-weight: var(--pa-weight-display);
	letter-spacing: .08em;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
}

.pah-ticker--spotify {
	--pah-ticker-accent: var(--pa-color-spotify);
}

/* Glow in the middle of the bottom line, like the listening bar */
.pah-ticker::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--pah-ticker-accent) 75%, transparent) 50%, transparent 80%);
}

/* Front page: the header lies on the hero below the bar, not over it */
.pah-ticker ~ .pa-site-header--home {
	top: auto;
}

.pah-ticker__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: calc(var(--pa-width-wide) + 2 * var(--pa-gutter));
	margin: 0 auto;
	padding: 9px var(--pa-gutter);
}

.pah-ticker__icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--pah-ticker-accent);
}

.pah-ticker__icon-svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The texts lie on top of each other, so the bar keeps the height of the longest one while they rotate */
.pah-ticker__content {
	display: grid;
	min-width: 0;
}

.pah-ticker__item {
	grid-area: 1 / 1;
	margin: 0;
	text-wrap: balance;
}

.pah-ticker__item[hidden] {
	display: block;
	visibility: hidden;
}

.pah-ticker a,
.pah-ticker a:visited,
.pah-ticker a:hover,
.pah-ticker a:focus,
.pah-ticker a:active {
	color: inherit !important;
	text-decoration: none !important;
}

/* Arrow after the link instead of an underline, it moves a little on hover. An inline box (not inline-block), so
   it never wraps alone to the next line. */
.pah-ticker a::after {
	content: "\2060"; /* word joiner: the box counts as part of the last word */
	padding-left: calc(1.5em + 3px);
	background: var(--pah-ticker-accent);
	/* Two-value positions: Firefox drops the whole mask on the three-value form ("right 3px center") */
	-webkit-mask: var(--pa-icon-arrow) calc(100% - 3px) 50% / 1.05em no-repeat;
	mask: var(--pa-icon-arrow) calc(100% - 3px) 50% / 1.05em no-repeat;
	transition: -webkit-mask-position .15s ease, mask-position .15s ease;
}

.pah-ticker a:hover::after,
.pah-ticker a:focus-visible::after {
	-webkit-mask-position: 100% 50%;
	mask-position: 100% 50%;
}

/* Highlight in the accent colour (the font has one weight) */
.pah-ticker strong,
.pah-ticker b {
	font-weight: inherit;
	color: var(--pah-ticker-accent);
}