/* Printeez Top Bar block (printeez/top-bar) — the announcement bar authored
 * as the `top-bar` menu on /menus, mirroring the app's
 * PublicSiteHelpers.top_bar/1 (apps/print_simple_web/assets/css/header.scss
 * `.top-bar-navigation-menu`). One row on the app's dark slab: the ticker takes the free
 * width, contact links sit to its right; below 640px the links show only
 * their icon (the label stays the accessible name). Not sticky — it scrolls
 * away above the header.
 *
 * Colors are plain values mirroring the app's rendered tokens (no
 * skin-token system exists WP-side): slab #020912 (--color-fill), text #fff
 * (--color-base), tan hover #cdb18c (--color-alt).
 */

.ps-top-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	box-sizing: border-box;
	padding: 0.375rem 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: #020912;
	color: #ffffff;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.ps-top-bar *,
.ps-top-bar *::before,
.ps-top-bar *::after {
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.ps-top-bar {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* Shell / empty: no reserved height — an absent bar must not leave a gap. */
.ps-top-bar--shell,
.ps-top-bar--empty {
	display: none;
}

.ps-top-bar a {
	color: inherit;
	text-decoration: none;
}

/* The block exposes no typography controls: pin the app's 0.875rem/1.25rem
   regular type on every text run so theme link/paragraph sizes never leak
   in (the theme's font family still applies, by design). */
.ps-top-bar .ps-top-bar__link,
.ps-top-bar .ps-top-bar__label,
.ps-top-bar .ps-top-bar__message,
.ps-top-bar .ps-top-bar__message p,
.ps-top-bar .ps-top-bar__message a {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/* touch-action: pan-y lets the shared script read horizontal swipes
   (one-message-at-a-time stepping) while vertical page scroll still works. */
.ps-top-bar__ticker {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	gap: 0.5rem;
	touch-action: pan-y;
}

.ps-top-bar__messages {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Authored ticker controls (app parity): an optional inline max-width caps
   the column; `--center` centers the column and its text. */
.ps-top-bar__messages--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Continuous marquee (`mode: marquee`): the track holds an even number of
   identical message groups (two from the server; the shared script clones
   more until the track is at least twice the container), so translating it
   by half its width loops with no seam. The gap lives on each message so
   group widths stay equal. The 40s duration is only the no-JS fallback —
   the script sets the real one from the authored speed (px/s) and the
   measured width. Pauses on hover. */
.ps-top-bar__messages--marquee {
	text-overflow: clip;
}

.ps-top-bar__marquee-track {
	display: inline-flex;
	align-items: center;
	width: max-content;
	animation: ps-top-bar-marquee 40s linear infinite;
}

.ps-top-bar__marquee-group {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.ps-top-bar__marquee-group .ps-top-bar__message {
	padding-right: 3rem;
	animation: none;
}

.ps-top-bar__ticker--marquee:hover .ps-top-bar__marquee-track,
.ps-top-bar__ticker--marquee:focus-within .ps-top-bar__marquee-track {
	animation-play-state: paused;
}

@keyframes ps-top-bar-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* The shared ticker module reveals a message by clearing `hidden`; the
   keyframe restarts each time the element is rendered again, so every
   incoming message fades and rises without a JS timer. */
.ps-top-bar__message {
	animation: ps-top-bar-message-in 0.35s ease-out;
}

.ps-top-bar__message[hidden] {
	display: none;
}

.ps-top-bar__message p {
	display: inline;
	margin: 0;
}

.ps-top-bar__message-link {
	text-underline-offset: 2px;
}

.ps-top-bar__message-link:hover,
.ps-top-bar__message-link:focus-visible {
	text-decoration: underline;
}

@keyframes ps-top-bar-message-in {
	from {
		opacity: 0;
		transform: translateY(0.375rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-top-bar__message,
	.ps-top-bar__marquee-track {
		animation: none;
	}
}

/* App parity (header.scss `.top-bar-navigation-menu__ticker-step` + the app's base button
   chrome): a 1.75rem outlined disc in the bar's text color holding a 1rem
   chevron; the outline brightens on hover/focus. */
/* Left-aligned messages: both step buttons sit together in front. */
.ps-top-bar__ticker-steps {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.25rem;
}

/* App parity (header.scss `.top-bar-navigation-menu__ticker-step` on top of the app's base
   button chrome): the bare 1rem chevron in the bar's text color, padding
   removed, a transparent 1px border and 0.375rem radius, and a white 20%
   wash on hover/focus. Theme button styles are reset explicitly. */
.ps-top-bar .ps-top-bar__ticker-step {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0.375rem;
	background: transparent;
	box-shadow: none;
	color: #ffffff;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ps-top-bar .ps-top-bar__ticker-step:hover,
.ps-top-bar .ps-top-bar__ticker-step:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	outline: none;
}

.ps-top-bar__chevron {
	width: 1rem;
	height: 1rem;
}

/* Contact links group at the right edge — margin-left:auto keeps them there
   even when no ticker resolves to fill the left. */
.ps-top-bar__links {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}

.ps-top-bar__link {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.375rem;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.ps-top-bar__link:hover,
.ps-top-bar__link:focus-visible {
	color: #cdb18c;
}

.ps-top-bar__link--inert,
.ps-top-bar__link--inert:hover {
	color: rgba(255, 255, 255, 0.6);
}

/* On phones the icon stands in for the hidden label, so it is 50% larger
   (1.5rem below 640px, 1rem above — app parity). */
.ps-top-bar__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	align-items: center;
	justify-content: center;
}

@media (min-width: 640px) {
	.ps-top-bar__icon {
		width: 1rem;
		height: 1rem;
	}
}

.ps-top-bar__icon svg {
	width: 100%;
	height: 100%;
}

/* Mobile: an iconed link collapses to its icon; label-only links stay. */
@media (max-width: 639px) {
	.ps-top-bar__label--with-icon {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}