/**
 * Language Button — 语言切换按钮样式
 *
 * 按钮组会在文章开头及每个语言段落重复出现，因此样式集中在此文件，
 * 不再使用内联 style 属性。
 */

.lb-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.2em;
	/* 始终左对齐，不跟随段落标记的对齐方式 */
	justify-content: flex-start;
	text-align: left;
}

.lb-switcher__button {
	display: inline-block;
	padding: 6px 12px;
	background: #0073aa;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	transition: background-color 0.15s ease-in-out;
}

.lb-switcher__button:hover,
.lb-switcher__button:focus {
	background: #005177;
	color: #fff;
	text-decoration: none;
}

.lb-switcher__button:focus-visible {
	outline: 2px solid #005177;
	outline-offset: 2px;
}

/* 当前所在段落对应的按钮 */
.lb-switcher__button--active {
	background: #d54e21;
}

.lb-switcher__button--active:hover,
.lb-switcher__button--active:focus {
	background: #b03d17;
}

/* 讨论区按钮：跳转目标不是语言段落，用与蓝色同色系的青绿色区分 */
.lb-switcher__button--discussion {
	background: #00838f;
}

.lb-switcher__button--discussion:hover,
.lb-switcher__button--discussion:focus {
	background: #00646e;
}

.lb-switcher__button--discussion:focus-visible {
	outline-color: #00646e;
}

/**
 * 锚点本身不占据版面，但需要预留顶部空间：
 * 固定/吸顶导航栏会遮挡跳转后的段落标题。
 */
.lb-anchor {
	display: block;
	height: 0;
	overflow: hidden;
	scroll-margin-top: 80px;
}

html {
	scroll-behavior: smooth;
}

/* 尊重用户的减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.lb-switcher__button {
		transition: none;
	}
}