/* IIS Marquee — front end */
.iis-mq-wrap:empty { display: none; }

.iis-mq {
	--iis-mq-bg: #0b3d91;
	--iis-mq-fg: #ffffff;
	--iis-mq-lbg: #f5b301;
	--iis-mq-lfg: #0b1f44;
	--iis-mq-fs: 15px;
	display: flex;
	align-items: stretch;
	width: 100%;
	overflow: hidden;
	background: var(--iis-mq-bg);
	color: var(--iis-mq-fg);
	font-size: var(--iis-mq-fs);
	line-height: 1.4;
	box-sizing: border-box;
}
.iis-mq *, .iis-mq *::before, .iis-mq *::after { box-sizing: border-box; }

/* Label */
.iis-mq__label {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 26px 10px 16px;
	background: var(--iis-mq-lbg);
	color: var(--iis-mq-lfg) !important;
	font-weight: 700;
	font-size: 0.9em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
	transition: filter 0.2s ease;
}
a.iis-mq__label:hover, a.iis-mq__label:focus-visible { filter: brightness(1.08); }
.iis-mq__label::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	animation: iis-mq-pulse 1.6s ease-in-out infinite;
}

/* Scrolling area */
.iis-mq__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.iis-mq__track {
	display: flex;
	width: max-content;
	will-change: transform;
}
.iis-mq.is-ready .iis-mq__track {
	animation: iis-mq-scroll var(--iis-mq-dur, 30s) linear infinite;
}
.iis-mq[data-dir="right"] .iis-mq__track { animation-direction: reverse; }
.iis-mq[data-pause="1"]:hover .iis-mq__track,
.iis-mq[data-pause="1"]:focus-within .iis-mq__track { animation-play-state: paused; }

.iis-mq__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding-left: 28px;
}
.iis-mq__item {
	white-space: nowrap;
	padding: 10px 0;
	color: inherit !important;
	text-decoration: none !important;
}
a.iis-mq__item:hover, a.iis-mq__item:focus-visible { text-decoration: underline !important; }
.iis-mq__sep {
	padding: 0 24px;
	opacity: 0.65;
	font-size: 0.8em;
}
.iis-mq__sep--blank { padding: 0 32px; }

@keyframes iis-mq-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--iis-mq-shift, 50%))); }
}
@keyframes iis-mq-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.7); }
}

@media (max-width: 600px) {
	.iis-mq { font-size: calc(var(--iis-mq-fs) - 1px); }
	.iis-mq__label { padding: 8px 20px 8px 12px; font-size: 0.75em; }
	.iis-mq__item { padding: 8px 0; }
	.iis-mq__group { padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.iis-mq.is-ready .iis-mq__track { animation: none; }
	.iis-mq__label::before { animation: none; }
	.iis-mq__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
