/* =============================================================
   ヘッドラインティッカー（最新ブログ記事 5件・右→左）
   - バーは画面最上部に fixed（Inspiro の fixed ヘッダーのさらに上）
   - .slabo-has-ticker でヘッダー（.headroom）と本文をバー高さ分だけ下げる
   ============================================================= */

:root {
	--slabo-ticker-h: 40px;
}

.slabo-ticker {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001; /* Inspiro .site-header.headroom = 1000 の上 */
	display: flex;
	align-items: center;
	height: var(--slabo-ticker-h);
	background: #000;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	overflow: hidden;
}

/* 左端の固定ラベル */
.slabo-ticker__label {
	flex: none;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 16px;
	background: var(--slabo-accent, #0bb4aa);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	white-space: nowrap;
}

/* 流れる領域 */
.slabo-ticker__viewport {
	flex: 1;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.slabo-ticker__track {
	display: flex;
	height: 100%;
	width: max-content;
	animation: slabo-ticker-scroll 45s linear infinite;
}
.slabo-ticker:hover .slabo-ticker__track {
	animation-play-state: paused;
}
.slabo-ticker__group {
	display: flex;
	align-items: center;
	flex: none;
	min-width: 100vw; /* 記事が少なくても途切れずループさせる */
	padding: 0 32px;
	gap: 48px;
	box-sizing: border-box;
}

/* 記事1件 */
.slabo-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	font-size: 13px;
	line-height: 1;
}
.slabo-ticker__item:hover,
.slabo-ticker__item:focus {
	color: var(--slabo-accent, #0bb4aa);
	text-decoration: none;
}
.slabo-ticker__date {
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	letter-spacing: 0.06em;
}
.slabo-ticker__item:hover .slabo-ticker__date {
	color: inherit;
}
.slabo-ticker__title {
	font-weight: 500;
}

@keyframes slabo-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* グループ2つ分の半分＝1グループ分 */
}

/* 動きを減らす設定のユーザーにはアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
	.slabo-ticker__track { animation: none; }
}

/* =============================================================
   ヘッダー・本文のオフセット
   Inspiro: .site-header.headroom { position:fixed; top:0 }
            .admin-bar:not(.side-nav-open) .headroom { top:32px }
   ============================================================= */

/* 本文（通常フロー）をバー高さ分だけ下げる。fixed要素には効かない */
body.slabo-has-ticker {
	margin-top: var(--slabo-ticker-h);
}

/* fixedヘッダーをバーの下へ */
body.slabo-has-ticker .site-header.headroom {
	top: var(--slabo-ticker-h);
}

/* WP管理バー（デスクトップ 32px）：ティッカーを管理バーの下、ヘッダーをさらに下へ */
body.slabo-has-ticker.admin-bar .slabo-ticker {
	top: 32px;
}
body.slabo-has-ticker.admin-bar:not(.side-nav-open) .headroom {
	top: calc(32px + var(--slabo-ticker-h));
}

/* 管理バーはモバイル（≤782px）で46px */
@media screen and (max-width: 782px) {
	body.slabo-has-ticker.admin-bar .slabo-ticker {
		top: 46px;
	}
	body.slabo-has-ticker.admin-bar:not(.side-nav-open) .headroom {
		top: calc(46px + var(--slabo-ticker-h));
	}
}

/* SP：少し薄くして情報量を確保 */
@media screen and (max-width: 64em) {
	:root {
		--slabo-ticker-h: 34px;
	}
	.slabo-ticker__label {
		padding: 0 10px;
		font-size: 10px;
		letter-spacing: 0.12em;
	}
	.slabo-ticker__group {
		padding: 0 20px;
		gap: 32px;
	}
	.slabo-ticker__item {
		font-size: 12px;
	}
	.slabo-ticker__track {
		animation-duration: 30s;
	}
}