@charset "UTF-8";
/**
 * 宝鸡青铜器博物院 · 站点头尾配色
 *
 * 只做一件事：把页眉、页脚统一到首页（bjqtm-home）的青铜绿 + 土金 + 米白。
 *
 * 两条注意：
 *   1. 页眉导航由 Max Mega Menu 生成，样式表是
 *      wp-content/uploads/maxmegamenu/style.css（自动生成，不能手改）。
 *      下面凡是 #mega-menu-wrap-max_mega_menu_1 开头的选择器，都是按生成文件里的
 *      原选择器逐条覆盖的，靠加载顺序取胜，所以本文件必须在它之后加载。
 *   2. 页脚那排大按钮的背景色写在区块行内样式里（透明），hover 只能用 !important 压。
 */

.bj-top,
.bj-footer {
	--bj-ink: #1b2a26;
	--bj-ink-2: #55655e;
	--bj-teal: #2f6b5c;
	--bj-teal-dk: #1d453b;
	--bj-teal-dp: #16332c;
	--bj-gold: #c2a05a;
	--bj-gold-lt: #e9c98a;
	--bj-gold-dk: #9c7c3a;
	--bj-cream: #faf8f3;
	--bj-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif;
	--bj-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", Arial, sans-serif;

	font-family: var(--bj-sans);
}

/* ===== 页眉 ===== */
.bj-top {
	position: relative;
	background-image: linear-gradient(100deg, #16332c 0%, #1d453b 44%, #2b6353 100%);
}

.bj-top::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(194, 160, 90, 0), var(--bj-gold) 40%, rgba(194, 160, 90, .18));
	pointer-events: none;
}

.bj-top .wp-block-site-logo img {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

/* 搜索按钮：金色图标，悬停转白 */
.bj-top .search-btn .wp-block-search__button,
.bj-top .search-btn button {
	color: var(--bj-gold-lt);
	transition: color .25s ease;
}

.bj-top .search-btn .wp-block-search__button:hover,
.bj-top .search-btn button:hover {
	color: #fff;
}

/* ---- 顶部导航：条目 ---- */
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link {
	padding: 0 20px;
	font-size: 16px;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .92);
	background: transparent;
	transition: color .25s ease, background-color .25s ease;
}

/* 金色下划线：默认收在中间，悬停时向两边展开 */
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: var(--bj-gold-lt);
	transition: left .3s cubic-bezier(.22, .61, .36, 1), right .3s cubic-bezier(.22, .61, .36, 1);
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
	color: var(--bj-gold-lt);
	background: rgba(255, 255, 255, .07);
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link::after,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link::after {
	left: 18px;
	right: 18px;
}

@media only screen and (min-width: 769px) {
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link:hover,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link:focus {
		color: #fff;
		background: rgba(255, 255, 255, .1);
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link:hover::after,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link:focus::after {
		left: 18px;
		right: 18px;
	}
}

/* ---- 顶部导航：下拉（米白卡片，与首页板块同色） ---- */
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu {
	background: var(--bj-cream);
	box-shadow: 0 18px 40px rgba(9, 26, 21, .26);
}

/* 金色上沿放在第一个子项上，而不是 ul 上：
   站点的子项全都设成了「不在桌面显示」，桌面端下拉是空的，
   挂在 ul 上会在导航条下面露出一条多余的金线。 */
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item:first-child > a.mega-menu-link {
	border-top: 2px solid var(--bj-gold);
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
	padding: 0 18px;
	background: transparent;
	color: var(--bj-ink);
	font-size: 15px;
	line-height: 3;
	border-left: 2px solid transparent;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease, padding-left .22s ease;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
	padding-left: 24px;
	background: #fff;
	color: var(--bj-teal);
	border-left-color: var(--bj-gold);
}

/* ---- 移动端抽屉 ---- */
@media only screen and (max-width: 768px) {
	#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle + #mega-menu-max_mega_menu_1 {
		background: linear-gradient(180deg, #16332c, #1d453b);
	}

	#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
	#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
	#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
		background-color: #fff;
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link {
		color: rgba(255, 255, 255, .92);
		background: transparent;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link::after {
		display: none;
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
		color: var(--bj-gold-lt);
		background: rgba(255, 255, 255, .06);
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
		background: rgba(0, 0, 0, .16);
		color: rgba(255, 255, 255, .82);
		border-left: 0;
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
		padding-left: 18px;
		background: rgba(0, 0, 0, .26);
		color: var(--bj-gold-lt);
	}
}

/* ===== 页脚 ===== */
.bj-footer {
	position: relative;
	background-image:
		radial-gradient(120% 170% at 100% 0%, rgba(194, 160, 90, .16) 0%, rgba(194, 160, 90, 0) 58%),
		linear-gradient(165deg, #1d453b 0%, #245a4b 54%, #16332c 100%);
}

.bj-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(194, 160, 90, 0), var(--bj-gold) 45%, rgba(194, 160, 90, .2));
	pointer-events: none;
}

/* 页脚那排大按钮：行内把背景写成了透明，只有 hover 需要压一下 */
.bj-footer .wp-block-button__link {
	border: 1px solid rgba(233, 201, 138, .32);
	transition: background-color .28s ease, border-color .28s ease, transform .28s ease;
}

.bj-footer .wp-block-button__link:hover {
	background-color: rgba(233, 201, 138, .16) !important;
	border-color: var(--bj-gold);
	transform: translateY(-2px);
}

.bj-footer .wp-block-button__link img {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}

/* 二维码 */
.bj-footer .wp-block-image img {
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(9, 26, 21, .28);
}

.bj-footer a {
	transition: color .22s ease;
}

.bj-footer a:hover {
	color: var(--bj-gold-lt);
}

@media (prefers-reduced-motion: reduce) {
	.bj-footer .wp-block-button__link,
	.bj-footer .wp-block-button__link:hover {
		transform: none;
	}
}