@property --hdr-p {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

/* 页头形态 = 滚动进度 --hdr-p（0→1）：0 = 贴顶全宽透明，1 = 收成居中胶囊。
   几何 / 底色 / 模糊 / 投影全部由这一个变量插值，JS 每帧按滚动位置写入 ——
   于是页头是「跟着滚动从两边慢慢收」，而不是切一下类名跳过去。
   ⚠️ 旧实现是 .scrolled 切类 + transition，但 width 根本不在过渡列表里，
   宽度是瞬间跳变的（其它属性却要 0.3s）—— 两者不同步就是「卡顿感」的来源。 */
.site-header {
	--hdr-p: 0;
	--hdr-inset-max: 0px;
	--hdr-inset: calc(var(--hdr-p) * var(--hdr-inset-max));
	background-color: rgba(255, 255, 255, calc(0.72 * var(--hdr-p))) !important;
	padding: 0;
	width: auto;
	position: fixed;
	left: var(--hdr-inset);
	right: var(--hdr-inset);
	top: calc(var(--hdr-p) * 12px);
	margin: 0;
	max-width: none;
	border-radius: calc(var(--hdr-p) * 14px);
	box-shadow: 0 8px 28px rgba(30, 41, 59, calc(0.14 * var(--hdr-p)));
	float: none;
	display: block;
	clear: both;
	z-index: 9999;
	transition: --hdr-p 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 滚动进行中：关掉 --hdr-p 的过渡。否则每帧写入的新值都在「追赶」上一帧的目标值，
   表现就是迟滞、跟不上手 —— 滚动本身已经足够平滑了。 */
.site-header.hdr-live {
	transition: none !important;
}

/* 只有真的有底色时才开毛玻璃/描边：p=0 挂 backdrop-filter 会白白多一个合成层 */
.site-header.hdr-capsule {
	backdrop-filter: blur(calc(var(--hdr-p) * 16px)) saturate(calc(1 + 0.5 * var(--hdr-p)));
	-webkit-backdrop-filter: blur(calc(var(--hdr-p) * 16px)) saturate(calc(1 + 0.5 * var(--hdr-p)));
	border: 1px solid rgba(255, 255, 255, calc(0.65 * var(--hdr-p)));
}

/* 胶囊外观已全部交给 --hdr-p 插值（见文件头），这里不再有 .scrolled 的几何规则；
   类名仍由 JS 维护（p≥0.5 加上），只给其它样式表里的配套规则用。 */


.header-top {
	width: 100%;
	background-color: transparent !important;
}


.header-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 calc(30px - var(--hdr-p) * 4px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	background-color: transparent !important;
}


.header-left {
	display: flex;
	align-items: center;
}

/* 收缩过程中禁止内容被压缩：中间态的空间来自两侧空隙，flex 项一旦可收缩，
   空隙还没吃完就可能先压内容 —— 登录按钮会被压成竖排两行（实测踩过） */
.header-left,
.header-right,
.header-icons > * {
	flex-shrink: 0;
}

.site-logo {
	display: flex;
	align-items: center;
}

.logo-img {
	height: 36px;
	width: auto;
	display: block;
}

/* 主导航：自己不被压缩，并吃掉右侧剩余空间 —— 于是菜单贴左、图标被顶到最右 */
.main-nav {
	flex: 0 0 auto;
	margin-right: auto;
}

.main-nav ul {
	list-style: none;
	display: flex;
	gap: 25px;
	margin: 0;
	padding: 0;
}

.main-nav a {
	color: #333;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: color 0.3s ease;
	white-space: nowrap;        /* 宁可整体溢出，也不要菜单项折成两行 */
}

.main-nav a:hover,
.main-nav a.active {
	color: #4a6cf7;
}

.main-nav .menu-item-has-children {
	position: relative;
}

.main-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	margin-left: 6px;
	vertical-align: middle;
	transition: transform 0.3s ease;
}

.main-nav .menu-item-has-children:hover > a::after {
	transform: rotate(180deg);
}

.main-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 160px;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 0;
	padding: 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
	z-index: 1000;
	display: block !important;
	flex-direction: column !important;
	border: 1px solid rgba(74, 108, 247, 0.08);
}

.main-nav .menu-item-has-children:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav .sub-menu li {
	padding: 0;
	margin: 2px 0;
}

.main-nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	font-size: 14px;
	color: #333;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
	border-radius: 8px;
}

.main-nav .sub-menu a:hover {
	background-color: rgb(66, 121, 248);
	color: #ffffff;
}

.main-nav .sub-menu .menu-item-has-children > a {
	position: relative;
}

.main-nav .sub-menu .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}

.main-nav .sub-menu .menu-item-has-children:hover > a::after {
	transform: translateY(-50%) rotate(180deg);
}

.main-nav .sub-menu .menu-item-has-children > .sub-menu {
	position: absolute;
	top: 0;
	left: 100%;
	display: none;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 8px 0;
	margin: 0;
	min-width: 160px;
}

.main-nav .sub-menu .menu-item-has-children:hover > .sub-menu {
	display: block;
}

.main-nav .sub-menu .menu-item-has-children > .sub-menu li {
	padding-left: 20px;
}

.main-nav .sub-menu .menu-item-has-children > .sub-menu a {
	font-size: 13px;
	padding: 8px 20px;
	background-color: #fafafa;
}

.main-nav .sub-menu .menu-item-has-children > .sub-menu a:hover {
	background-color: #f0f0f0;
}

.main-nav .sub-menu {
	overflow: visible;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 30px;
	/* 占满 logo 右侧的剩余宽度：主导航贴左（紧跟 logo），搜索/通知/头像仍贴最右 */
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 40px;
}

.header-icons {
	display: flex;
	gap: 25px;
}

.icon-link {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.icon-link:hover {
	opacity: 0.7;
}

.icon-link img {
	height: 24px;
	width: auto;
	display: block;
}

.icon-link.user-icon,
.user-menu-container .icon-link.user-icon {
	cursor: default;
	transition: none;
}

.icon-link.user-icon:hover,
.user-menu-container .icon-link.user-icon:hover {
	opacity: 1;
}

.icon-link.user-icon img,
.header-icons .user-menu-container .icon-link.user-icon img,
#wpadminbar img.avatar {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid #f0f0f0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	padding: 0 !important;
}

body.knowledge-base .site-header,
body.single .site-header,
body.archive .site-header,
body.search .site-header,
body.home.knowledge-base .site-header,
body.teaching .site-header,
body.downloads-page .site-header,
body.front-profile-page .site-header,
body.guest-message-page .site-header {
	background-color: #ffffff !important;
	border: none !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

body.knowledge-base .header-top,
body.single .header-top,
body.archive .header-top,
body.search .header-top,
body.knowledge-base .header-container,
body.single .header-container,
body.archive .header-container,
body.search .header-container,
body.home.knowledge-base .header-top,
body.home.knowledge-base .header-container,
body.teaching .header-top,
body.teaching .header-container,
body.downloads-page .header-top,
body.downloads-page .header-container,
body.front-profile-page .header-top,
body.front-profile-page .header-container,
body.guest-message-page .header-top,
body.guest-message-page .header-container {
	background-color: #ffffff !important;
}

.user-menu-container {
	position: relative;
	display: inline-block;
}

.user-dropdown-menu {
	position: absolute;
	top: 100%;
	/* 与头像对齐：右缘收进头像右缘 8px，上缘离头像下缘只留 4px，
	   整体较原值往左上各收一点 */
	right: 8px;
	width: max-content;
	min-width: 0;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	list-style: none;
	margin: 4px 0 0 0;
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	z-index: 1000;
}

.user-menu-container:hover .user-dropdown-menu,
.user-dropdown-menu.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.user-dropdown-menu li {
	padding: 0;
}

.user-dropdown-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	font-size: 14px;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.user-dropdown-menu a:hover {
	background-color: rgba(74, 108, 247, 0.08);
	color: #4a6cf7;
}

.user-dropdown-menu .menu-divider {
	height: 1px;
	background-color: #eee;
	margin: 8px 0;
}

/* Login Modal Styles */
.login-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	animation: fadeIn 0.2s ease;
}

.login-modal-overlay.active {
	display: flex;
}

.login-modal-container {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 30px;
	min-width: 320px;
	max-width: 90%;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	animation: slideUp 0.3s ease;
}

.login-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.login-modal-header h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
}

.login-modal-close {
	background: none;
	border: none;
	font-size: 28px;
	color: #999;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
}

.login-modal-close:hover {
	background-color: #f5f5f5;
	color: #333;
}

.login-modal-body {
	padding: 10px 0;
}

.login-modal-desc {
	color: #666;
	font-size: 0.95rem;
	margin: 0 0 25px;
}

.login-btn-primary {
	display: inline-block;
	padding: 12px 40px;
	background: linear-gradient(135deg, #4a6cf7 0%, #6366f1 100%);
	color: #ffffff;
	text-decoration: none;
	border-radius: 25px;
	font-weight: 500;
	font-size: 0.95rem;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.login-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(74, 108, 247, 0.4);
	text-decoration: none;
	color: #ffffff;
}

.login-modal-tip {
	color: #999;
	font-size: 0.8rem;
	margin: 20px 0 0;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Homepage login button */
.header-icons .login-trigger {
	display: inline-flex !important;
	white-space: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 8px 20px !important;
	background: linear-gradient(135deg, #4a6cf7 0%, #6366f1 100%) !important;
	color: #ffffff !important;
	text-decoration: none !important;
	border-radius: 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	border: none !important;
	cursor: pointer !important;
	line-height: 1.5 !important;
	height: auto !important;
}

.header-icons .login-trigger:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3) !important;
	text-decoration: none !important;
	color: #ffffff !important;
}

/* ============================================================
   页头 logo「描边自绘」动效（本站定制，需开启 bk_logo_animation）
   ------------------------------------------------------------
   原理：logo 仍是一张图，上面盖一层 <mask>；mask 里放几条白色描边，
   白线扫到哪里、logo 就露到哪里 —— 白描边就是「画笔」。每条描边用
   pathLength="1000" + dasharray="1000 1000"，把 stroke-dashoffset
   从 1000 动到 0，就是「这一笔画过去」。

   时间轴（总 ≈1.86s，共「三笔」；每笔内部再分段，段落首尾相接、中间不停顿）：
     第一笔  0.000s → 1.373s   环 → 尾巴 → 最下长横（一条连贯的线）
       · 环：自缺口下端（屏幕角 42°，4:20 方向）起笔，顺时针经正下 → 左 → 顶 → 右，
             收在缺口上端（32°，4:00 方向），恰好绕一圈 350°。
             ⚠️ 环的缺口是 logo 自带的（31°~42°）；描边若写成整圆，扫过缺口时会「空转」
             —— mask 扫到没有像素的地方，屏幕上什么都不发生。
       · 尾巴：自环的圆心线（≈337°，环的右上）斜下到右下。
             ⚠️ 起点必须留在圆心线上：尾笔画有一块「月牙」伸出环带之外，环带盖不到，只能由
             尾巴自己揭示 —— 起点往右下收（哪怕收到环带外缘）都会漏掉这块像素。
             ⚠️ 尾巴前 51.3% 行程走在已显示的环带里，但月牙那部分是有像素的 —— 别压缩它。
             ⚠️ 起笔时机＝环的笔尖走到 337°（＝环的 84.3%）时，与环最后一段交叠。
       · 最下长横：起点 1270。
             ⚠️ 尾巴是【平头】截在 (1305,1400) 的，它右下侧那块三角（约 4800px）环和尾巴
             都盖不到，只能靠下横自己揭示 —— 起点收到 1405 就会留下豁口（用户截图指出过）。
             1270 在缺口最左沿（1280）之左，左侧 14 单位落在尾巴已盖住的区域，空扫可忽略。
     第二笔  1.373s → 1.580s   中间横线（用户标注的「绿色」）。
             ⚠️ 起点 1125（环带右缘，保证不漏像素）。左段 1125~1290 被尾巴/环带盖住、
             本就没有新像素，若按长度配时会空扫三成行程＝看得见的停顿；所以中横单独用
             bk-logo-draw-middle，让左段只占 3.9% 时间掠过，右段仍与整体同速。
     第三笔  1.580s → 1.860s   最上短横（用户标注的「红色」），收笔即整只 logo 完成。
             ⚠️ 起点 1045：它左端融进环带外缘那一小块（半径 >446 的月牙）环带盖不到，
             收到 1085 会留下小豁口。

   节奏：每段时长按该笔画的**有效长度**分配（环 2043.4 / 尾 392.7 / 下横 522 /
   中横 583 / 上横 588 单位），于是笔画前端在整只 logo 上**匀速移动**（≈2105 单位/秒），
   读起来像同一支笔一路写下来。改长度或加段落时记得同步下面的 delay / duration。

   ⚠️「有效长度」的判定：沿描边中心线走一遍，只给「能产生新像素」的那部分计时。
   描边宽度（126~223）相对 logo（约 900）很粗，相邻笔画的重叠区、以及落在母体内部的
   起点，极容易整段吃掉行程 —— 这是「停顿感」的头号来源，改任何一处都要复核。

   ⚠️⚠️ 但「有效长度」只解决「停顿」，收紧起止点还有第二个陷阱：**端头形状**。
   复核覆盖时必须按 butt（平头）建模，不能用「点到线段距离 ≤ 半宽」—— 后者等价于圆头，
   会在每条描边端头外凭空多出一个半径长的半圆，把真实缺口算成「已覆盖」。
   下横起点当初就是被这个误判骗到了 1405，屏幕上留下一处豁口（用户截图指出）。
   正确模型：线段描边 = 沿轴投影 t∈[0,L] 的旋转矩形。改完起止点必须用平头模型重算覆盖。

   只跑一次（iteration-count: 1 + fill-mode: both），刷新页面才重放；
   基础态 dashoffset: 0 就是「已画完」，所以动画被禁用/不支持时也看得到完整 logo。
   ============================================================ */
.bk-logo {
	height: 36px;
	width: auto;
	display: block;
	overflow: visible;
}

/* 三段共用同一条 keyframes；「这是第几笔、什么时候开始走」全靠每条路径自己的
   animation-delay + animation-duration 控制：delay 一段接一段、时长按笔画长度分配。 */
.bk-logo .bk-logo-line {
	stroke-dashoffset: 0;                 /* 默认＝已画完 */
	animation-name: bk-logo-draw;
	animation-timing-function: linear;
	animation-iteration-count: 1;         /* 每次刷新只跑一遍 */
	animation-fill-mode: both;            /* 延迟期间保持「未画」，跑完停在「画完」 */
}

@keyframes bk-logo-draw {
	from { stroke-dashoffset: 1000; }
	to   { stroke-dashoffset: 0; }
}

/* 「空扫段」专用 keyframes 的原理：一条描边的起笔处若落在已经显示过的像素上（母体内部、
   被别的笔画盖住的交叉区），这段行程再怎么走屏幕上都不会有新内容 —— 按长度配时间就浪费掉，
   观感变成一顿一顿的「停顿」。所以把这段压到极短（屏幕上无从察觉，因为它本就没内容可露），
   剩下的行程仍按长度配时间，笔尖的有效速度就和整体一致。

   ⚠️ 但「这段真的没内容」必须量准再压：尾巴前 51.3% 虽然走在环带里，它的描边却有一块
   「月牙」伸到环带之外、是有像素的 —— 实测压缩后会一次性涌出 1645px，看得见的「闪」。
   所以尾巴不压、按长度配时；只有中横左段那种被尾巴整条盖住的，压缩才安全。 */
/* 中横专用：左段（1125→1290，占全长 28.3%）被尾巴整条盖住、本就没有新像素，
   只占 3.9% 时间掠过；余下 96.1% 时间走右段。 */
@keyframes bk-logo-draw-middle {
	from { stroke-dashoffset: 1000; }
	3.9% { stroke-dashoffset: 717; }   /* 717 = 已画 28.3%（左段走完） */
	to   { stroke-dashoffset: 0; }
}

/* ── 第一笔：环 → 尾巴 → 最下长横（首尾相接，中间不停顿，读起来是一条连贯的线）── */
.bk-logo .bk-logo-line--s1-ring       { animation-delay: 0s;     animation-duration: 0.971s; }
.bk-logo .bk-logo-line--s1-tail       { animation-delay: 0.819s; animation-duration: 0.306s; }
.bk-logo .bk-logo-line--s1-bar-bottom { animation-delay: 1.125s; animation-duration: 0.248s; }
/* ── 第二笔：中间横线 ── */
.bk-logo .bk-logo-line--s2-bar-middle { animation-name: bk-logo-draw-middle; animation-delay: 1.373s; animation-duration: 0.207s; }
/* ── 第三笔：最上短横（收笔即整只 logo 完成）── */
.bk-logo .bk-logo-line--s3-bar-top    { animation-delay: 1.580s; animation-duration: 0.280s; }

/* 尊重系统的「减少动态效果」：不画，直接显示完整 logo */
@media (prefers-reduced-motion: reduce) {
	.bk-logo .bk-logo-line {
		animation: none !important;
		stroke-dashoffset: 0 !important;
	}
}

/* 窄窗口（≤720px）：页头各间距收一收，避免主导航被挤到换行 */
@media (max-width: 720px) {
	.header-right { margin-left: 20px; gap: 16px; }
	.main-nav ul { gap: 16px; }
	.header-icons { gap: 16px; }

	/* 窄屏内容几乎占满一行：收缩量由 JS 兜底成最小 10px（见 measure），
	   即胶囊贴着两边各留 10px，不再强行收成窄条 */
	.site-header.scrolled .main-nav { margin-right: 16px; }
}