/**
 * Kanso 多语言插件 — 语言切换器样式
 * 前缀 .kanso-ml-* ，不依赖主题类名。
 *
 * 切换器优先挂载进页脚社交图标行（.wp-block-social-links 内的 li），
 * 页脚没有社交图标行时退回右下角固定浮层。
 * 按钮显示当前语言国旗，尺寸与页脚社交图标一致；下拉列表只显示各国国旗，
 * 语言名通过 title / aria-label 提供。
 */

.kanso-ml-switcher {
	--kanso-ml-accent: var(--wp--preset--color--theme-3, #0f6ecd);
	--kanso-ml-bg: var(--wp--preset--color--theme-2, #ffffff);

	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	z-index: 999;
}

.kanso-ml-switcher.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* 当前语言按钮：无边框无背景 */
.kanso-ml-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	appearance: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.kanso-ml-current:hover {
	opacity: 0.8;
	transform: scale(1.08);
}

.kanso-ml-flag {
	width: 16px;
	height: 12px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 2px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
	flex: none;
}

/* 下拉列表：只显示国旗，无文字。
 * 默认（切换器原位时）向下展开；浮动模式下改为向上弹出、限制高度可向下滚动。 */
.kanso-ml-list {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: var(--kanso-ml-bg);
	border: 1px solid var(--kanso-ml-accent); /* fallback：不支持 color-mix 的老浏览器 */
	border: 1px solid color-mix(in srgb, var(--kanso-ml-accent) 30%, transparent);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	/* visibility 单独处理：收起时延迟到淡出结束再隐藏，展开时立即生效。
	   若放在 0.15s 过渡里，展开的一瞬间计算样式仍是 hidden，focus() 会被浏览器忽略。 */
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.kanso-ml-switcher:hover .kanso-ml-list,
.kanso-ml-switcher:focus-within .kanso-ml-list,
.kanso-ml-switcher.is-open .kanso-ml-list {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

/* 浮动切换器（固定在页面右下角）：列表向上弹出，限制高度可向下滚动（语言多时可滑动浏览） */
.kanso-ml-float .kanso-ml-list {
	left: auto;
	right: 0;
	top: auto;
	bottom: calc(100% + 8px);
	max-height: 40vh;
	overflow-y: auto;
	transform: translateY(-4px);
}

.kanso-ml-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 列表项是 <button>（1.2.0 起由 <a href="javascript:..."> 改语义），需完全重置默认外观 */
.kanso-ml-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 6px;
	margin: 0;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	appearance: none;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
	transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.kanso-ml-item:hover {
	background: var(--kanso-ml-accent); /* fallback：不支持 color-mix 的老浏览器 */
	background: color-mix(in srgb, var(--kanso-ml-accent) 14%, transparent);
	transform: scale(1.1);
	text-decoration: none;
}

.kanso-ml-item.is-current {
	outline: 1px solid var(--kanso-ml-accent);
	outline-offset: 1px;
}

/* 键盘焦点：只用 :focus-visible，鼠标点击不出现方框，键盘 Tab 时看得见位置 */
.kanso-ml-current:focus-visible {
	outline: 2px solid var(--kanso-ml-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.kanso-ml-item:focus-visible {
	outline: 2px solid var(--kanso-ml-accent);
	outline-offset: 1px;
}

/* 切换结果播报（读屏用，视觉隐藏） */
.kanso-ml-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 浮动切换器：默认固定在页面右下角（无社交图标行时的兜底；被 JS 挂载进页脚后自动切换形态）。
 * 使用 !important 防御主题规则覆盖：Kanso 主题有 `body > .wp-site-blocks + * { position: relative; z-index: 1 }`，
 * 当 wp-site-blocks 的下一兄弟节点（如 speculationrules script）缺失时，本浮层会成为该选择器的匹配目标，
 * 导致 position:fixed 失效、掉到文档底部左侧并被音乐播放器遮挡（实测复现）。!important 确保定位始终生效。 */
.kanso-ml-float {
	/* 默认隐藏，避免刷新时在右下角闪现 fixed 兜底形态；
	 * JS 挂载进页脚（.kanso-ml-in-footer）或确认走兜底（.kanso-ml-fallback）后才显示。 */
	visibility: hidden;
	position: fixed !important;
	top: auto !important;
	right: 24px !important;
	bottom: 16px !important;
	left: auto !important;
	z-index: 99999 !important;
	/* 容器高度收敛为按钮高度：避免继承主题行高产生多余行盒，使按钮底缘精确对齐 16px（与 Discord 底缘一致） */
	line-height: 1 !important;
}

/* JS 完成挂载/兜底决策后显示 */
.kanso-ml-float.kanso-ml-in-footer,
.kanso-ml-float.kanso-ml-fallback {
	visibility: visible;
}

/* 翻译库没加载成功（本地文件被拦 / 网络中断）：不留点了没反应的死按钮 */
.kanso-ml-no-translate .kanso-ml-float {
	display: none !important;
}

.kanso-ml-float .kanso-ml-switcher {
	margin-left: 0;
}

/* 切换器挂载进页脚后的形态：与社交图标同排同距、随页面自然滚动，不跟随屏幕 */
.kanso-ml-float.kanso-ml-in-footer {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	z-index: auto !important;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	margin: 0;
}

/* 页脚内挂载槽位：继承 .wp-block-social-links 的 flex gap（间距与社交图标间间距一致） */
.kanso-ml-footer-slot {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.kanso-ml-float.kanso-ml-in-footer .kanso-ml-switcher {
	margin-left: 0; /* 间距由 .wp-block-social-links 的 gap 统一提供 */
}

/* 右下角按钮：与页脚社交图标一样大（36×36），当前语言国旗铺满圆形 */
.kanso-ml-float .kanso-ml-current .kanso-ml-flag {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

.kanso-ml-float .kanso-ml-switcher:hover .kanso-ml-list,
.kanso-ml-float .kanso-ml-switcher:focus-within .kanso-ml-list,
.kanso-ml-float .kanso-ml-switcher.is-open .kanso-ml-list {
	transform: translateY(0);
}

/* 窄屏：下拉列表限制高度可滚动 */
@media (max-width: 600px) {
	.kanso-ml-list {
		max-height: 60vh;
		overflow-y: auto;
	}
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
	.kanso-ml-current,
	.kanso-ml-item,
	.kanso-ml-list {
		transition: none !important;
	}

	.kanso-ml-current:hover,
	.kanso-ml-item:hover {
		transform: none;
	}
}

/* =====================================================================
 * 夜间模式按钮：恢复 tabor Dark Mode Toggle Block 初始胶囊开关样式。
 * 这里不再覆盖 track/selector/icon 外观；仅保留焦点框与触摸高亮清除，
 * 避免点击后出现蓝色方框（不影响胶囊外观）。
 * ===================================================================== */

/* 清除点击夜间按钮后出现的蓝色焦点框（tabor 原版 :focus-visible 描边 + 浏览器焦点环） */
.wp-block-tabor-dark-mode-toggle__input:focus + .wp-block-tabor-dark-mode-toggle__track,
.wp-block-tabor-dark-mode-toggle__input:focus-visible + .wp-block-tabor-dark-mode-toggle__track {
	outline: none !important;
	box-shadow: none !important;
}

/* 手机端点击高亮（-webkit-tap-highlight-color）是点击后出现蓝色方框的主因，一并清除 */
.wp-block-tabor-dark-mode-toggle,
.wp-block-tabor-dark-mode-toggle *,
.kanso-ml-switcher,
.kanso-ml-current,
.kanso-ml-item {
	-webkit-tap-highlight-color: transparent;
}