/* ===== 顶部导航 ===== */
.topnav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--nav-h);
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-border);
	/* 背景色/边框色一起过渡，否则 .glass 切换时会硬跳。
	   backdrop-filter 不参与过渡（无法插值），由下面单独处理。 */
	transition: transform .25s ease,
		background-color .25s ease,
		border-color .25s ease;
}

/* 停在页面顶部时：半透明 + 背景模糊。首页的 hero 顶在导航之下，
   所以这里能真实糊出 wallpaper；其他页面背后是纯色 body，效果等同纯色。
   -webkit- 前缀不能省，Safari 需要它才认 backdrop-filter。
   rgba 底色不能给全不透明，否则模糊完全看不见。
   色值走 --c-nav-glass：浅色下是半透明白，暗色下是半透明黑。 */
.topnav.glass {
	background-color: var(--c-nav-glass);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom-color: var(--c-border);
}

/* 不支持 backdrop-filter 的浏览器降级为不透明，避免文字压在糊内容上读不清。
   Chrome/Firefox 只认标准属性，Safari 只认 -webkit- 前缀，所以必须用
   not ((A) or (B)) —— 少了括号无法与 or 组合，单独写 not (A) 会在
   Chrome 上误判为不支持（它确实不支持 -webkit- 前缀），导致毛玻璃整个失效。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.topnav.glass {
		background-color: var(--c-bg);
	}
}

.topnav.hidden {
	transform: translateY(-100%);
}

.topnav-inner {
	height: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* 左侧标题 */
.brand {
	font-size: 16px;
	font-weight: 600;
	color: var(--c-title);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.brand:hover {
	color: var(--c-primary);
}

/* 右侧菜单 */
.nav-menu {
	display: flex;
	align-items: center;
	gap: 2px;
}

.nav-menu a {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 12px;
	font-size: 14px;
	color: var(--c-text);
	border: 1px solid transparent;
	white-space: nowrap;
	transition: all .15s ease;
}

.nav-menu a:hover {
	color: var(--c-primary);
	background: var(--c-primary-soft);
}

.nav-menu a.active {
	color: var(--c-primary);
	border-color: var(--c-primary);
}

.nav-menu .nav-external {
	width: 34px;
	padding: 0;
	justify-content: center;
	font-size: 15px;
}

/* 汉堡按钮（桌面隐藏） */
.hamburger {
	display: none;
	width: 34px;
	height: 34px;
	padding: 7px 6px;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid transparent;
}

.hamburger-bar {
	display: block;
	width: 100%;
	height: 1.5px;
	background: var(--c-text);
	transition: transform .25s ease, opacity .2s ease;
}

.hamburger:hover .hamburger-bar {
	background: var(--c-primary);
}

.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
	transform: translateY(7.75px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
	opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
	transform: translateY(-7.75px) rotate(-45deg);
}

/* ===== 右侧一组：菜单 + 主题切换 ===== */
/* 包一层 flex 是为了让 .topnav-inner 的 space-between 仍然是
   「品牌靠左、其余靠右」；三个子元素直接摊在 .topnav-inner 里
   space-between 会把他们均匀分开，按钮跑到中间去。 */
.nav-right {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* 主题切换按钮：与 .nav-external 同尺寸（34×34），一排图标才对得齐。 */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 15px;
	color: var(--c-text);
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.theme-toggle:hover {
	color: var(--c-primary);
	background: var(--c-primary-soft);
}

/* 三个状态图标，只显示当前设置对应的那个。
   这一步交给 CSS 而不是 JS：首屏内联脚本已经把 data-theme 写好了，
   纯选择器就能对上，JS 里少维护一份「图标该是哪个」的状态。 */
.toggle-auto,
.toggle-light,
.toggle-dark {
	display: none;
}

/* 「跟随系统」= html 上没有显式 data-theme（内联脚本只在这一档不写属性），
   或者显式写了 auto。两个选择器都要留，否则从手动切回 auto 时图标会消失。 */
:root:not([data-theme="light"]):not([data-theme="dark"]) .toggle-auto,
:root[data-theme="auto"] .toggle-auto {
	display: inline;
}

:root[data-theme="light"] .toggle-light {
	display: inline;
}

:root[data-theme="dark"] .toggle-dark {
	display: inline;
}

/* ===== 移动端 ===== */
@media screen and (max-width: 768px) {
	.topnav-inner {
		padding: 0 14px;
	}

	.hamburger {
		display: flex;
	}

	.nav-menu {
		position: absolute;
		top: var(--nav-h);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 14px;
		background: var(--c-bg);
		border-bottom: 1px solid var(--c-border);
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		transition: max-height .3s ease, opacity .2s ease, visibility .3s;
	}

	.nav-menu.show {
		max-height: 60vh;
		overflow-y: auto;
		opacity: 1;
		visibility: visible;
	}

	.nav-menu a {
		height: 44px;
		justify-content: flex-start;
		border: 0;
		border-bottom: 1px solid var(--c-border);
	}

	.nav-menu a.active {
		color: var(--c-primary);
		background: var(--c-primary-soft);
	}

	.nav-menu .nav-external {
		width: 100%;
		justify-content: flex-start;
		padding-left: 10px;
		border-bottom: 0;
	}

	.brand {
		font-size: 15px;
	}
}