@charset "UTF-8";
/*!
 * Mooto · layout.css
 * 全局组件：顶部导航 / 抽拉菜单 / 全屏搜索 / 手机底部导航 / 提示条 / 背景音乐
 * 全站只加载一次。原站把这一整段复制了 6 次（每个页面一次）。
 */

/* ============================================================
   1. 复选框驱动的遮罩层
   原站用 :checked + ~ 兄弟选择器的写法，不依赖 JS 就能开合，
   这里保留该思路（更稳、更快、无 JS 也不失效），
   同时补上 aria 与 Esc 关闭（见 theme.js）。
   ============================================================ */
.toggle-input {
	position: fixed;
	top: -9999px;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.menu-overlay,
.search-overlay {
	display: none;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 99999;
}

#menuToggle:checked ~ .menu-overlay {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: clamp(24px, 4vh, 44px);
	background: #fff;
}

#searchToggle:checked ~ .search-overlay {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 var(--pad);
	background: #fff;
}

/* ============================================================
   2. 顶部导航
   ============================================================ */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--nav-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0 var(--pad);
	background: rgba(255, 255, 255, .86);
	border-bottom: 1px solid transparent;
	transition: background .35s ease, border-color .35s ease;
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
}

.nav.is-solid { background: rgba(255, 255, 255, .98); border-bottom-color: var(--line); }

.nav__zone { display: flex; align-items: center; min-width: 0; }
.nav__zone--l { justify-content: flex-start; }
.nav__zone--r { justify-content: flex-end; }

.nav__side { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }

.nav__link {
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--fg);
	opacity: .55;
	transition: opacity .3s;
	white-space: nowrap;
}

.nav__link:hover,
.nav__link.current-menu-item,
.nav__link[aria-current="page"] { opacity: 1; }

/* Logo：大字 + 小字 */
.nav__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var(--fg);
	white-space: nowrap;
}

.nav__logo-main {
	font-size: clamp(30px, 3.2vw, 46px);
	letter-spacing: .18em;
	margin-right: -.18em;
	font-weight: 500;
	line-height: 1;
	transition: color .3s ease;
}

.nav__logo-sub {
	font-size: clamp(8px, .62vw, 10px);
	letter-spacing: .4em;
	margin-right: -.4em;
	margin-top: .65em;
	font-weight: 300;
	color: var(--muted);
	line-height: 1;
	font-family: var(--sans);
}

.nav__logo img { max-height: 46px; width: auto; }

/* 移动端图标按钮（桌面端隐藏） */
.nav__icons { display: none; align-items: center; gap: 0; }

.nav__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--fg);
	opacity: .72;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: opacity .25s ease;
}

.nav__icon:hover { opacity: 1; }
.nav__icon:active { opacity: .45; }
.nav__icon svg { width: 19px; height: 19px; pointer-events: none; }

.nav__icon.is-playing svg { animation: music-pulse 1.2s ease-in-out infinite; }
@keyframes music-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* 背景音乐播放器 */
.mooto-audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ============================================================
   3. 抽拉菜单
   ============================================================ */
.menu-overlay a {
	font-size: clamp(20px, 2.4vw, 28px);
	letter-spacing: .26em;
	color: var(--fg);
	opacity: .7;
	transition: opacity .3s;
	position: relative;
	z-index: 2;
}

.menu-overlay a:hover { opacity: 1; }

.menu-backdrop { position: absolute; inset: 0; cursor: default; }

.menu-close {
	position: absolute;
	top: calc(var(--nav-h) / 2);
	right: var(--pad);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fg);
	opacity: .5;
	cursor: pointer;
	touch-action: manipulation;
	z-index: 3;
}

.menu-close:hover { opacity: 1; }
.menu-close svg { width: 22px; height: 22px; pointer-events: none; }

/* ============================================================
   4. 全屏搜索
   ============================================================ */
.search-close {
	position: absolute;
	top: calc(var(--nav-h) / 2);
	right: var(--pad);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fg);
	opacity: .5;
	cursor: pointer;
	touch-action: manipulation;
	z-index: 3;
}

.search-close:hover { opacity: 1; }
.search-close svg { width: 22px; height: 22px; pointer-events: none; }

.search-box { width: min(760px, 100%); text-align: center; }

.search-kicker {
	font-size: 10px;
	letter-spacing: .5em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: clamp(24px, 3.5vh, 40px);
}

.search-form {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(10, 10, 10, .2);
	padding-bottom: 14px;
	transition: border-color .4s ease;
}

.search-form:focus-within { border-bottom-color: rgba(10, 10, 10, .8); }

.search-input {
	flex: 1;
	font-family: var(--serif);
	font-size: clamp(22px, 3.4vw, 42px);
	font-weight: 300;
	letter-spacing: .06em;
	color: var(--fg);
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.search-input::placeholder { color: rgba(10, 10, 10, .2); }

.search-submit {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fg);
	opacity: .5;
	cursor: pointer;
}

.search-submit:hover { opacity: 1; }
.search-submit svg { width: 20px; height: 20px; pointer-events: none; }

.search-hot {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px 24px;
	margin-top: clamp(30px, 4.5vh, 50px);
}

.search-hot span { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }

.search-hot a {
	font-size: 12.5px;
	letter-spacing: .12em;
	color: var(--soft);
	padding: 8px 4px;
	border-bottom: 1px solid transparent;
	transition: border-color .3s, color .3s;
}

.search-hot a:hover { border-bottom-color: rgba(10, 10, 10, .4); color: var(--fg); }

/* ============================================================
   5. 提示条
   ============================================================ */
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(96px + env(safe-area-inset-bottom));
	transform: translate(-50%, 12px);
	padding: 13px 24px;
	background: rgba(10, 10, 10, .94);
	color: #fff;
	font-size: 11px;
	letter-spacing: .24em;
	border-radius: 100px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, transform .35s ease, visibility .35s;
	z-index: 2147483647;
	pointer-events: none;
	white-space: nowrap;
	max-width: calc(100vw - 40px);
}

.toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ============================================================
   6. 手机端底部导航
   ============================================================ */
.tabbar { display: none; }

/* ============================================================
   6.5 返回顶部
   原站的表现：页面高度超过一屏才出现，点击平滑回到顶部。
   这里做成可配置（开关 / 图标 / 阈值 / 位置 / 圆或方），
   并且手机上会自动浮到底部导航之上，不会被挡住。
   ============================================================ */
.backtop {
	position: fixed;
	right: clamp(16px, 2.4vw, 34px);
	bottom: clamp(20px, 3vh, 40px);
	z-index: 1100;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fg);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .4s ease, transform .4s ease, visibility .4s ease, color .3s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.backtop.is-show { opacity: 1; visibility: visible; transform: translateY(0); }

.backtop__circle {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--line);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	transition: background .3s ease, border-color .3s ease;
}

.backtop:hover .backtop__circle { background: var(--fg); border-color: var(--fg); }
.backtop:hover { color: #fff; }
.backtop:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.backtop.is-show:active { transform: translateY(0) scale(.93); }

.backtop__icon { position: relative; z-index: 1; width: 18px; height: 18px; pointer-events: none; }

.backtop--left { right: auto; left: clamp(16px, 2.4vw, 34px); }
.backtop--plain .backtop__circle { background: transparent; border-color: rgba(10, 10, 10, .2); box-shadow: none; }
.backtop--plain:hover .backtop__circle { background: var(--fg); border-color: var(--fg); }
.backtop--square .backtop__circle { border-radius: var(--radius-sm); }

/* ============================================================
   7. 断点
   ============================================================ */
@media (max-width: 900px) {
	:root {
		--nav-h: 88px;
		--radius-sm: calc(10px * var(--radius-scale));
		--radius-md: calc(16px * var(--radius-scale));
		--radius-lg: calc(22px * var(--radius-scale));
	}

	.nav { grid-template-columns: 1fr auto 1fr; padding: 0 clamp(10px, 3vw, 20px); }
	.nav__side { display: none; }
	.nav__icons { display: flex; }

	.nav__logo-main { font-size: 24px; letter-spacing: .16em; margin-right: -.16em; }
	.nav__logo-sub { font-size: 7px; letter-spacing: .32em; margin-right: -.32em; margin-top: .5em; }
	.nav__logo img { max-height: 30px; }

	.search-close,
	.menu-close { top: calc(var(--nav-h) / 2); right: clamp(10px, 3vw, 20px); }

	.tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1200;
		height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: rgba(255, 255, 255, .98);
		border-top: 1px solid var(--line);
		align-items: stretch;
		justify-content: space-around;
		-webkit-backdrop-filter: saturate(180%) blur(12px);
		backdrop-filter: saturate(180%) blur(12px);
	}

	.tabbar__item {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding-top: 11px;
		gap: 5px;
		color: rgba(10, 10, 10, .42);
		font-size: 9px;
		letter-spacing: .12em;
		transition: color .3s;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		outline: none;
		cursor: pointer;
		background: transparent;
		border: 0;
		text-decoration: none;
	}

	.tabbar__item.is-active { color: var(--fg); }

	.tabbar__icon { width: 20px; height: 20px; pointer-events: none; }
	.tabbar__label { pointer-events: none; }

	.tabbar__item--center .tabbar__circle {
		position: absolute;
		top: -26px;
		left: 50%;
		transform: translateX(-50%);
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: var(--fg);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(0, 0, 0, .14);
		pointer-events: none;
	}

	.tabbar__item--center .tabbar__circle .tabbar__icon { width: 17px; height: 17px; color: #fff; }
	.tabbar__item--center .tabbar__label { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; }

	.footer { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }

	/* 底部导航存在时，返回顶部按钮上移，避免被遮住 */
	body.has-tabbar .backtop {
		bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
	}

	.backtop { width: 44px; height: 44px; right: clamp(12px, 3vw, 20px); }
	.backtop--left { right: auto; left: clamp(12px, 3vw, 20px); }
}

@media (max-width: 600px) {
	:root { --nav-h: 80px; }
	.nav__logo-main { font-size: 22px; }
	.nav__logo-sub { font-size: 6.5px; letter-spacing: .28em; margin-right: -.28em; }
	.search-input { font-size: 22px; }
}

/* 打印：去掉固定导航与遮罩 */
@media print {
	.nav,
	.tabbar,
	.toast,
	.backtop,
	.menu-overlay,
	.search-overlay { display: none !important; }
}