/* ============================================================
   Updates Ticker — Continuous Single-Line Horizontal Marquee
   Version 2.0 — Mobile-first, GPU-accelerated
   ============================================================ */

.ticker-container {
	height: 40px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background-color: #faf8f4;
	color: #3d2b1f;
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(160, 120, 48, 0.15);
	font-family: 'Outfit', 'Helvetica Neue', sans-serif;
}

/* Red "UPDATES" badge — fixed width, never shrinks */
.ticker-caption {
	height: 100%;
	width: 110px;
	min-width: 110px;
	flex-shrink: 0;
	background-color: #EC0B43;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	z-index: 10;
	box-shadow: 3px 0 10px rgba(0,0,0,0.12);
}

.ticker-caption p {
	margin: 0;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	white-space: nowrap;
}

.ticker-caption .caption-arrow {
	display: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Clipping wrapper — takes remaining width */
.ticker-marquee-wrapper {
	overflow: hidden;
	flex: 1;
	height: 100%;
	position: relative;
}

/* The track — JS will set --ticker-width and drive the animation */
.ticker-marquee {
	display: inline-flex;
	white-space: nowrap;
	height: 100%;
	align-items: center;
	animation: ticker-run var(--ticker-duration, 30s) linear infinite;
}

.marquee-content {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding-right: 80px;
}

.marquee-item {
	color: #3d2b1f;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	display: inline;
}

.marquee-item:hover {
	color: #a07830;
	text-decoration: none;
}

.marquee-separator {
	color: #a07830;
	font-weight: 700;
	font-size: 13px;
	padding: 0 14px;
	user-select: none;
	display: inline;
}

/* translate from 0 → the measured negative pixel width of ONE copy
   JS writes this via a CSS custom property on .ticker-marquee */
@keyframes ticker-run {
	0%   { transform: translateX(0); }
	100% { transform: translateX(var(--ticker-offset, -100%)); }
}

/* ── Mobile ≤ 499px ─────────────────────────────────────── */
@media (max-width: 499px) {
	.ticker-container  { height: 36px; }
	.ticker-caption    { width: 32px; min-width: 32px; }
	.ticker-caption p  { display: none; }
	.ticker-caption .caption-arrow { display: flex; }
	.marquee-item      { font-size: 12px; }
	.marquee-separator { padding: 0 10px; }
}

/* ── Tablet 500–767px ────────────────────────────────────── */
@media (min-width: 500px) and (max-width: 767px) {
	.ticker-caption    { width: 90px; min-width: 90px; }
	.ticker-caption p  { font-size: 11px; letter-spacing: 1px; }
}

/* ── Dark Exhibition Theme ───────────────────────────────── */
.theme-dark-exhibition .ticker-container {
	background-color: #111111;
	border-bottom: 1px solid rgba(222, 188, 126, 0.15);
}
.theme-dark-exhibition .ticker-caption {
	background: linear-gradient(135deg, #b89355, #8c6a30);
}
.theme-dark-exhibition .marquee-item  { color: #e5e5e5; }
.theme-dark-exhibition .marquee-item:hover { color: #debc7e; }
.theme-dark-exhibition .marquee-separator  { color: #debc7e; }