/* ===========================================================================
   页头 —— 顶部工具条 + 语言切换
   ---------------------------------------------------------------------------
   这一份只管页头多出来的那一条「工具条」。主头部（logo / 导航 / 购物车）
   还是主题自己的，不在这里重画。

   为什么工具条放在 <header> **外面**：
     主题把 header.wp-block-template-part 设成了 position:sticky。
     工具条要是塞进 <header> 里，就会跟着一起吸顶 —— 桌面端 137+40=177px、
     手机端 81+36=117px 的吸顶高度会吃掉太多首屏。放外面则滚走，
     只在刚进页面时可见，而那正是它最有用的时候。

   为什么语言切换放这儿而不是主导航：
     主导航已经有 8 项，再加 3 个语言项在 1280px 下会换行顶到第二行
     （实测 nav 高 96px）。收进一个「语言」下拉后主导航只剩一项的分量。

   全部用逻辑属性（inline-start / inline-end），阿拉伯语站切 dir="rtl" 时不用回头翻。
   颜色一律取 tokens.css 的变量，这里不出现硬编码的品牌色。
   =========================================================================== */

.dk-utilbar {
	background: var(--steel-900);
	color: var(--on-steel-2);
	font-size: var(--fs-xs);
	line-height: 1.4;
	/* 与页头同宽：主题页头是 alignfull 的，这里也整屏宽 */
	position: relative;
	/* ★ 必须高于页头。front.css 里 header.wp-block-template-part 是 z-index:60，
	   而语言下拉是向下展开的、刚好落在吸顶页头那一块上 —— 低于 60 就会被页头盖住，
	   表现是「点了没反应」。 */
	z-index: 70;
}

.dk-utilbar__inner {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 36px;
}

/* 左侧：联系方式。窄屏藏掉 —— 手机上留给语言切换，别让工具条折行。 */
.dk-utilbar__contact {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	min-width: 0;
}

.dk-utilbar__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: #d7e1e7;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s var(--ease);
}
.dk-utilbar__link:hover,
.dk-utilbar__link:focus-visible {
	color: #fff;
	text-decoration: underline;
}
.dk-utilbar__link svg {
	flex: none;
	opacity: 0.85;
}
.dk-utilbar__link .mono {
	font-family: var(--font-mono);
	letter-spacing: 0;
}

@media (max-width: 860px) {
	.dk-utilbar__contact {
		display: none;
	}
	.dk-utilbar__inner {
		justify-content: flex-end;
	}
}

/* ---------------------------------------------------------------------------
   语言切换 —— <details> 原生实现
   ---------------------------------------------------------------------------
   用 <details>/<summary> 而不是自己写 div + JS：天生的键盘可达性
   （Enter/Space 开合、Tab 进出），没有 JS 也能用。JS 只加两件锦上添花的事：
   点外面关掉、Esc 关掉，以及点选项时写 cookie。
   --------------------------------------------------------------------------- */
.dk-lang {
	position: relative;
	flex: none;
}

.dk-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 28px;
	padding: 0 var(--sp-2);
	border: 1px solid transparent;
	border-radius: var(--r-1);
	color: var(--on-steel-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	white-space: nowrap;
	list-style: none; /* 去掉 Safari/Chrome 的默认三角 */
	transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.dk-lang__btn::-webkit-details-marker {
	display: none;
}
.dk-lang__btn::marker {
	content: "";
}
.dk-lang__btn:hover,
.dk-lang[open] .dk-lang__btn {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
}
.dk-lang__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
}
.dk-lang__chev {
	transition: transform 0.15s var(--ease);
	opacity: 0.8;
}
.dk-lang[open] .dk-lang__chev {
	transform: rotate(180deg);
}

/* 当前语言名：窄屏只留地球图标 + 两字母代码，避免工具条被撑爆 */
.dk-lang__name {
	display: inline;
}
@media (max-width: 560px) {
	.dk-lang__name {
		display: none;
	}
}

.dk-lang__menu {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 6px);
	z-index: 30;
	margin: 0;
	padding: var(--sp-1);
	list-style: none;
	min-width: 13rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	box-shadow: var(--shadow-pop);
}

.dk-lang__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-1);
	color: var(--ink);
	font-size: var(--fs-ui);
	text-decoration: none;
	white-space: nowrap;
}
.dk-lang__item:hover,
.dk-lang__item:focus-visible {
	background: var(--surface-2);
	color: var(--brand-deep);
}
.dk-lang__item[aria-current="true"] {
	background: var(--brand-tint);
	color: var(--brand-deep);
	font-weight: var(--fw-semibold);
}
/* 语言代码小标。
   ⚠️ 默认**不设颜色** —— 同一个 .dk-lang__code 出现在两个底色完全相反的地方：
     工具条上是深底（--steel-900），下拉菜单里是白底。写成全局一个颜色，
     总有一处读不了。第一版就踩了这个：深底上用 --ink-3，实测 3.32:1 不合格。
     所以默认继承所在容器的文字色，只在白底的下拉菜单里显式压成 --ink-3。 */
.dk-lang__code {
	margin-inline-start: auto;
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	text-transform: uppercase;
}
.dk-lang__menu .dk-lang__code {
	color: var(--ink-3);
}
.dk-lang__menu .dk-lang__item[aria-current="true"] .dk-lang__code {
	color: var(--brand-deep);
}
.dk-lang__tick {
	flex: none;
	width: 14px;
	visibility: hidden;
}
.dk-lang__item[aria-current="true"] .dk-lang__tick {
	visibility: visible;
}

/* ---------------------------------------------------------------------------
   页脚语言切换 —— 手机上工具条滚走后就靠它
   ---------------------------------------------------------------------------
   ⚠️ 页脚是**深底**的（front.css 里 footer.wp-block-template-part 是 --steel-900）。
      所以这里不能用 --ink / --ink-3 那套给白底准备的颜色：
      第一版把当前语言写成了 var(--ink)（#0e1418），实测在深页脚上几乎看不见。
      下面全部改用 --on-steel-* 系列。
   --------------------------------------------------------------------------- */
.dk-footlang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	padding-block: var(--sp-4);
	margin-block-start: var(--sp-4);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: var(--fs-sm);
}
.dk-footlang__label {
	color: var(--on-steel-3);
	font-weight: var(--fw-semibold);
}
.dk-footlang a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--on-steel-2);
	text-decoration: none;
}
.dk-footlang a:hover,
.dk-footlang a:focus-visible {
	color: #fff;
	text-decoration: underline;
}
.dk-footlang a[aria-current="true"] {
	color: #fff;
	font-weight: var(--fw-semibold);
}
.dk-footlang .dk-lang__code {
	margin-inline-start: 0;
	color: var(--on-steel-3);
}
.dk-footlang a[aria-current="true"] .dk-lang__code {
	color: var(--on-steel-2);
}

/* DB-IP 的署名（CC BY 4.0 要求）。推到最右、压到最小、颜色再暗一档，
   但**不能低到读不出来** —— 署名要真的能看见才算署名。 */
.dk-footlang__credit {
	margin-inline-start: auto;
	color: var(--on-steel-3);
	font-size: var(--fs-2xs);
	text-decoration: none;
}
.dk-footlang__credit:hover,
.dk-footlang__credit:focus-visible {
	color: var(--on-steel-2);
	text-decoration: underline;
}