/*
Theme Name: Hardford
Theme URI: https://hardfordmt.com/
Author: Your Studio
Author URI: https://hardfordmt.com/
Description: Hardford CNC 机床外贸站专用主题。深灰 + 荧光绿工业风，自带首页长篇版面、产品分类/详情模板、中英双语切换，不依赖任何父主题或页面构建器。
Version: 1.1.5
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hardford
Tags: business, industrial, custom-menu, featured-images, translation-ready, right-sidebar

Hardford theme, Copyright (C) 2026 Your Studio
Hardford theme is distributed under the terms of the GNU GPL v2 or later.

配色：深灰 #464646 / 荧光绿 #b3be01 / 浅绿 #d7dc7c
排版：Open Sans 600 做标题 + Montserrat 做正文、1300px 容器、
      h1 40px、h2 22px、正文 14px、按钮 3px 圆角 / 内距 12×24
首屏：背景大图 cover、min-height 650px、内容宽 1000px、文字居中白色
============================================================ */

:root {
	--green: #b3be01;
	--green-dark: #9aa300;
	--green-soft: #d7dc7c;
	--gray: #464646;
	--gray-2: #525252;
	--gray-3: #6a6a6a;
	--gray-soft: #8e8e8e;
	--ink: #2f2f2f;
	--paper: #ffffff;
	--paper-2: #f6f6f6;
	--line: #e0e0e0;

	--font-head: "Open Sans", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	--font-body: "Montserrat", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

	--container: 1300px;
	--pad: clamp(20px, 4vw, 40px);
	--radius: 3px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; margin: 0; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(48px, 6vw, 80px) 0; }
.section--paper { background: var(--paper-2); }
.section--gray { background: var(--gray); color: #fff; }
.section--green { background: var(--green); }
.section__title { font-size: 22px; }

.lead { max-width: 92ch; color: #5a5a5a; margin: 14px 0 0; }

/* ---------------- 按钮 ---------------- */
.btn {
	display: inline-block;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 24px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	background: var(--gray);
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .3s, color .3s, border-color .3s;
}

.btn:hover { background: var(--gray-2); }
.btn--green { background: var(--green); color: var(--ink); border-color: var(--green); }
.btn--green:hover { background: #fff; color: #000; border-color: var(--ink); }
.btn--outline { background: transparent; border-color: var(--gray); color: var(--gray); }
.btn--outline:hover { background: var(--gray); color: #fff; }
.btn--white { background: #fff; color: var(--ink); border-color: #fff; }
.btn--white:hover { background: transparent; color: #fff; border-color: #fff; }
.btn--block { display: block; width: 100%; text-align: center; }
.btn--sm { padding: 9px 18px; font-size: 13px; }

/* ---------------- 顶部信息条（深灰） ---------------- */
.topbar { background: var(--gray); color: #f5f5f5; font-size: 15.5px; font-weight: 600; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 54px; flex-wrap: wrap; }
.topbar__company { font-family: var(--font-head); }
.topbar__right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__contact { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.topbar__contact li { display: flex; align-items: center; gap: 8px; }
.topbar__contact svg { opacity: .85; width: 15px; height: 15px; }
.topbar__contact a:hover { color: var(--green-soft); }

/* ---------------- 主导航（白底，栏目居中） ---------------- */
.header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

body.admin-bar .header { top: 32px; }

.header__inner { display: flex; align-items: center; gap: 22px; min-height: 78px; }

.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand__logo { display: block; height: 46px; width: auto; }
.brand__text { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: .04em; color: var(--gray); }
/* 深色页脚里的 logo 要白色衬底，否则紫色笔画看不清 */
.footer .brand__logo { height: 40px; background: #fff; padding: 9px 12px; border-radius: var(--radius); }
.footer .brand__text { color: #fff; }

/* .nav 既是 wp_nav_menu 输出的 <ul>，也是默认导航的 <ul>，所以这里同时清掉列表样式 */
.nav { display: flex; align-items: center; margin: 0 auto; padding: 0; list-style: none; }
.nav > li,
.nav__item { position: relative; }
.nav ul { margin: 0; padding: 0; list-style: none; }

.nav > li > a,
.nav__item > a {
	display: block;
	color: var(--gray-3);
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 600;
	padding: 15px 14px;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.nav > li > a:hover,
.nav__item > a:hover,
.nav > li.current-menu-item > a,
.nav > li.current-menu-ancestor > a,
.nav > li.current_page_item > a,
.nav__item.current-menu-item > a { color: var(--ink); border-bottom-color: var(--green); }

/* 有下级时在文字后补一个小三角 */
.nav > li.menu-item-has-children > a::after {
	content: "▾";
	font-size: 10px;
	margin-left: 6px;
	color: var(--gray-soft);
	display: inline-block;
}

.nav__sub,
.nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 176px;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--green);
	box-shadow: 0 14px 30px rgba(20, 20, 20, .12);
	padding: 6px 0;
	display: none;
	z-index: 70;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub,
.nav > li:hover > .nav__sub,
.nav > li:focus-within > .nav__sub,
.nav li.menu-item-has-children:hover > .sub-menu,
.nav li.menu-item-has-children:focus-within > .sub-menu { display: block; }
.nav__sub a,
.nav .sub-menu a { display: block; padding: 9px 16px; font-size: 13.5px; color: var(--gray-3); border-bottom: 0; }
.nav__sub a:hover,
.nav .sub-menu a:hover { background: var(--paper-2); color: var(--ink); }

/* 子菜单里的更深一层，右侧弹出 */
.nav__sub .nav__sub,
.nav .sub-menu .sub-menu { top: -7px; left: 100%; }
.nav .sub-menu li { position: relative; }

.caret { font-size: 10px; color: var(--gray-soft); margin-left: 4px; }
.header__cta { flex: 0 0 auto; }

.lang { display: flex; border: 1px solid #8f8f8f; border-radius: var(--radius); overflow: hidden; }
.lang a { font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: #f5f5f5; padding: 9px 18px; }
.lang a[aria-current="true"] { background: var(--green); color: var(--ink); font-weight: 600; }

.nav-toggle {
	display: none;
	width: 40px; height: 40px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--gray);
	cursor: pointer;
	margin-left: auto;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; margin: 3px auto; }

/* ---------------- 右下角浮动联系 ---------------- */
.float-contact { position: fixed; right: 18px; bottom: 22px; z-index: 80; display: grid; gap: 8px; justify-items: end; }
.float-contact__item {
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--gray);
	color: #fff;
	border: 1px solid var(--gray-2);
	transition: background-color .25s, color .25s;
}
.float-contact__item:hover { background: var(--green); color: var(--ink); border-color: var(--green); }
.float-contact__bubble {
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--green);
	border-radius: var(--radius);
	padding: 9px 14px;
	box-shadow: 0 10px 24px rgba(20, 20, 20, .12);
	font-size: 12.5px;
	color: var(--gray-3);
}
.float-contact__bubble strong { display: block; font-family: var(--font-head); font-size: 13.5px; color: var(--ink); }

/* ---------------- 图片位（有图显示图，无图显示占位框） ---------------- */
.media {
	position: relative;
	display: grid;
	place-items: center;
	background: #f2f2f2;
	border: 1px solid var(--line);
	color: #a0a0a0;
	font-family: var(--font-head);
	font-size: 12px;
	letter-spacing: .1em;
	text-align: center;
	overflow: hidden;
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media__ph { padding: 12px; }
.media__ph span { display: block; }
.media__ph small {
	display: block;
	margin-top: 5px;
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0;
	color: #b5b5b5;
}

.media--dark { background: #4e4e4e; border-color: #5f5f5f; color: #cfcfcf; }
.media--dark .media__ph small { color: #9d9d9d; }
.media--card { aspect-ratio: 4 / 3; }
.media--photo { aspect-ratio: 4 / 3; }
.media--wide { aspect-ratio: 1000 / 729; }
.media--thumb { aspect-ratio: 4 / 3; }
.media--logo { aspect-ratio: 5 / 2; background: #4e4e4e; border-color: #5f5f5f; color: #b9b9b9; }
.media--logo .media__ph small { color: #9d9d9d; }
.media--cert { aspect-ratio: 1600 / 600; }

/* 卡片里的图片位去掉外框，避免和卡片边框叠成双线 */
.card .media { border: 0; border-bottom: 1px solid var(--line); }

/* ---------------- 首屏（整块背景大图） ---------------- */
.hero { background: var(--gray); }

.hero__stage {
	position: relative;
	/* 高度不写死：照片在文档流里按自身比例把 stage 撑开，
	   首屏高度 = 照片按当前屏宽换算出的高度，任何屏宽看到的都是整幅照片。
	   别在这里加 min-height，那会造出比照片更高的框，照片之外露出灰底。 */
	background: #4e4e4e;
	display: block;
	padding: 0;
	text-align: center;
	overflow: hidden;
}

/* 照片整幅显示：宽 100%、高 auto，比例恒等于原图，一个像素都不裁。
   这是刻意的：客户要的是「按屏宽等比缩放」，不是用 object-fit: cover 把两侧切掉
   （改前桌面 1440 宽下会被切掉 23.85%，手机 375 宽下切掉约 76%）。
   要改回铺满裁切，先确认客户接受丢掉两侧内容。 */
.hero__bg { position: static; width: 100%; height: auto; display: block; }

/* 首屏照片按原图亮度显示，这里刻意不留压暗层。
	原先是 `.hero__stage::after { background: rgba(40, 40, 40, .42) }`，
	它把整张上传图压到约六成亮度，客户对比原图一眼就能看出「变暗了」。
	别在这张照片上叠任何整体压暗/滤色层：一旦加上，客户拿原图一比就能看出来。
	标题压不压得住是「照片构图」和「文字颜色」的事，不是靠给整张图加滤镜解决的。 */

.hero__tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	font-family: var(--font-head);
	font-size: 11px;
	letter-spacing: .14em;
	color: #cfcfcf;
	border: 1px dashed #7d7d7d;
	border-radius: var(--radius);
	padding: 5px 10px;
}

/* 文字层浮在照片之上：铺满 stage 后用 flex 居中。
	别补 `.hero__stage > *` 这类通配规则：通配符不贡献特异性，会和 `.hero__bg` 同为
	(0,1,0) 却写在后面，把照片的定位覆盖掉，标题就被顶到照片下面去。
	也不要写 `.hero__stage > :not(.hero__bg)`——权重 (0,2,0) 会盖掉 `.hero__tag`。
	窄屏那套「照片在上、文字在下」是下面 @media (max-width: 960px) 里显式写的，
	不是这里的误伤，排查时别去回滚。
	`.hero__text` 不写高度、由 inset 撑满，是为了让下面那条 % 位移相对整个首屏换算。 */
.hero__text {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 var(--pad);
	/* 整体上移。用 16% 而不是写死 80px：首屏高度随屏宽变化
	   （1440 宽时 495px，1920 宽时 660px），只有百分比位移才能让文字在照片上的
	   相对位置在任何屏宽都保持一致。16% 在 1440 宽下 = 79px，即客户要的 80px。 */
	transform: translateY(-16%);
}
/* 标题不带阴影（按要求去掉，原先是 0 1px 3px + 0 2px 16px 双层）。 */
.hero h1 { font-size: 40px; color: #fff; max-width: 1000px; }

/* 副标题保持品牌绿 #b3be01。之前为防 22px 细笔画被阴影糊成橄榄色加过一层，现已一并去掉。 */
.hero h2 { font-size: 22px; color: var(--green); margin-top: 14px; max-width: 1000px; }
.hero__text .btn { margin-top: 30px; }

/* 车间实拍图：放在首屏下方的白色区域，4 张一排 */
.workshop {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: clamp(28px, 4vw, 46px);
}

/* ---------------- 数据带 ---------------- */
.stats { background: var(--green); color: var(--ink); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat { padding: 34px 22px; border-left: 1px solid rgba(47, 47, 47, .18); }
.stat:first-child { border-left: 0; }
.stat strong { display: block; font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1.1; }
.stat span { font-size: 13px; color: #3c4100; }

/* ---------------- 产品区 ---------------- */
.cat { padding: clamp(30px, 4vw, 46px) 0; border-top: 1px solid var(--line); }
.cat:first-of-type { border-top: 0; padding-top: 0; }

.cat__head { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 22px; }
.cat__head::before { content: ""; display: block; width: 5px; height: 100%; min-height: 40px; background: var(--green); }
.cat__head h2 { font-size: 22px; }
.cat__head h2 a:hover { color: var(--green-dark); }
.cat__head p { margin: 8px 0 0; color: #5a5a5a; max-width: 92ch; }
/* 加粗词只加粗、不铺底色（荧光绿做文字底纹会显得脏） */
.cat__head b { font-weight: 600; color: var(--ink); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .3s, box-shadow .3s;
}
.card:hover { border-color: var(--green); box-shadow: 0 8px 22px rgba(70, 70, 70, .12); }
.card__body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { font-size: 18px; letter-spacing: .04em; }
.card__body h3 a:hover { color: var(--green-dark); }
.card__meta { margin: 6px 0 16px; font-size: 13px; color: var(--gray-soft); }
.card__body .btn { margin-top: auto; align-self: flex-start; }

/* ---------------- 质保 / 部件 ---------------- */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
.band + .band { margin-top: clamp(34px, 4vw, 54px); padding-top: clamp(34px, 4vw, 54px); border-top: 1px solid #5a5a5a; }
.band h2 { font-size: 22px; }
.band p { color: #d0d0d0; margin: 12px 0 0; }

.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.checklist li { display: flex; gap: 11px; color: #d8d8d8; }
.checklist li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 8px; background: var(--green); }

/* 品牌区：文字介绍在上，四张图横排在下（整块往下加高） */
.band--stack { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.band__text { max-width: 72ch; }
.photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* ---------------- 关于 / 资质证书 ---------------- */
.about { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(26px, 4vw, 56px); align-items: center; }

/* 资质证书：一整张长图，占满容器宽度 */
.certs { margin: clamp(28px, 4vw, 44px) 0 0; }

/* ---------------- 询盘 ---------------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; }

/* 询盘区只剩表格与地图：地图铺满左列，高度跟右侧表格对齐 */
.contact__map { aspect-ratio: auto; align-self: stretch; min-height: 300px; border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------------- 产品详情页 ---------------- */
.crumb { font-size: 12.5px; color: var(--gray-soft); padding: 18px 0 0; }
.crumb a:hover { color: var(--green-dark); }
.crumb span { margin: 0 6px; }

.detail { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(26px, 4vw, 52px); padding: clamp(24px, 3vw, 40px) 0 clamp(38px, 5vw, 56px); }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }

/* 缩略图是 <button>，要清掉浏览器默认的边框与内距 */
.thumbs .media { padding: 0; cursor: pointer; font: inherit; }
.thumbs .media[aria-current="true"] { border-color: var(--green); outline: 2px solid var(--green-soft); }
.thumbs .media:focus-visible { outline: 2px solid var(--green); }

.detail__title { font-size: 30px; }
.detail__model { font-family: var(--font-head); font-size: 15px; color: var(--green-dark); letter-spacing: .1em; margin-top: 8px; }

/* ---------------- 产品照片库（主图正下方，4 格横排 1000 × 750） ---------------- */
.photo-library {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 20px;
}

/* 图格是 <button>，清掉浏览器默认的边框与内距，其余交给 .media */
.photo-library .media { padding: 0; cursor: pointer; font: inherit; }
.photo-library .media:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.photo-library .media img { transition: transform .35s; }
.photo-library .media:hover img { transform: scale(1.04); }

/* ---------------- 灯箱（照片库点击放大） ---------------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: clamp(20px, 4vw, 48px);
	background: rgba(20, 20, 20, .92);
}

/* display:grid 会盖掉 [hidden] 的默认样式，这里显式还原 */
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; }

.lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(20, 20, 20, .55);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s;
}
.lightbox__btn:hover { background: var(--green); border-color: var(--green); color: var(--ink); }
.lightbox__btn--close { top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); }
.lightbox__btn--prev { top: 50%; left: clamp(10px, 2vw, 28px); transform: translateY(-50%); }
.lightbox__btn--next { top: 50%; right: clamp(10px, 2vw, 28px); transform: translateY(-50%); }

/* ---------------- 系列参数表（多机型对比） ---------------- */
.spec-matrix { margin-top: 20px; border: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec-matrix th, .spec-matrix td { padding: 10px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; font-size: 13.5px; vertical-align: top; }
.spec-matrix tr > *:last-child { border-right: 0; }
.spec-matrix tbody tr:last-child > * { border-bottom: 0; }

.spec-matrix thead th { background: var(--gray); color: #fff; font-family: var(--font-head); font-weight: 600; white-space: nowrap; }
.spec-matrix thead th.is-current { background: var(--green); color: var(--ink); }

.spec-matrix tbody th { background: var(--paper-2); color: #4a4a4a; font-family: var(--font-head); font-weight: 600; }

/* 行标签列横向滚动时钉在左边，滚到右边还知道看的是哪一行 */
.spec-matrix tbody th[scope="row"] { position: sticky; left: 0; z-index: 2; min-width: 170px; max-width: 240px; white-space: normal; }
.spec-matrix thead th:first-child { position: sticky; left: 0; z-index: 3; }

.spec-matrix td { white-space: nowrap; }
.spec-matrix td.is-current { background: rgba(179, 190, 1, .16); }

/* 分组标题整行跨列，左侧压一条品牌色，和普通行区分开 */
.spec-matrix__group th { letter-spacing: .06em; box-shadow: inset 4px 0 0 var(--green); }

.spec-table { margin: 22px 0 26px; border: 1px solid var(--line); }
.spec-table th, .spec-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 38%; background: var(--paper-2); font-family: var(--font-head); font-weight: 600; color: #4a4a4a; }

.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.points li { display: flex; gap: 12px; color: #4a4a4a; }
.points li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 8px; background: var(--green); }

.series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 20px; }

/* ---------------- 页脚 ---------------- */
.footer { background: var(--gray); color: #cfcfcf; padding: clamp(40px, 5vw, 60px) 0 24px; font-size: 13.5px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.footer h4 { font-size: 15px; color: #fff; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--green); display: inline-block; }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.footer a:hover { color: var(--green); }
.footer .brand { margin-bottom: 14px; }
.footer__bottom {
	margin-top: 34px;
	padding-top: 18px;
	border-top: 1px solid #5c5c5c;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: #a8a8a8;
}

/* ============================================================
   以下为 WordPress 必需样式：页面/文章排版、分页、搜索、核心类。
   与上面的版面样式分开，方便日后单独调整。
   ============================================================ */

/* ---------------- 页头（内页标题带） ---------------- */
.page-head { background: var(--gray); color: #fff; padding: clamp(34px, 4vw, 54px) 0; }
.page-head h1 { font-size: 30px; color: #fff; }
.page-head p { margin: 10px 0 0; color: var(--green-soft); font-size: 15px; max-width: 92ch; }

/* ---------------- 内页正文排版 ---------------- */
.entry-content { max-width: 92ch; }
.entry-content > * + * { margin-top: 18px; }

.entry-content h2 { font-size: 22px; margin-top: 34px; }
.entry-content h3 { font-size: 18px; margin-top: 28px; }
.entry-content h4 { font-size: 16px; margin-top: 24px; }

.entry-content p { margin: 0; color: #4a4a4a; }
.entry-content a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--ink); }

.entry-content ul,
.entry-content ol { margin: 0; padding-left: 22px; color: #4a4a4a; }
.entry-content li + li { margin-top: 8px; }
.entry-content ul li::marker { color: var(--green); }

.entry-content blockquote {
	margin: 0;
	padding: 16px 20px;
	border-left: 4px solid var(--green);
	background: var(--paper-2);
	color: #4a4a4a;
	font-style: normal;
}

.entry-content img { height: auto; }
.entry-content table { border: 1px solid var(--line); margin: 0; }
.entry-content th,
.entry-content td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; }
.entry-content th { width: 38%; background: var(--paper-2); font-family: var(--font-head); font-weight: 600; color: #4a4a4a; }
.entry-content tr:last-child th,
.entry-content tr:last-child td { border-bottom: 0; }

.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }

/* ---------------- 文章列表 ---------------- */
.post-list { display: grid; gap: clamp(30px, 4vw, 46px); }

.post-item { border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 34px); }
.post-item:first-child { border-top: 0; padding-top: 0; }
.post-item__meta { font-size: 12.5px; color: var(--gray-soft); margin: 8px 0 0; }
.post-item__title { font-size: 22px; }
.post-item__title a:hover { color: var(--green-dark); }
.post-item__excerpt { margin: 12px 0 0; color: #5a5a5a; max-width: 92ch; }
.post-item__thumb { margin-bottom: 18px; }

/* ---------------- 分页 ---------------- */
.pagination { margin-top: clamp(30px, 4vw, 46px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.pagination .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 8px 12px;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-3);
	transition: background-color .25s, color .25s, border-color .25s;
}
.pagination .page-numbers:hover { border-color: var(--green); color: var(--ink); }
.pagination .page-numbers.current { background: var(--green); border-color: var(--green); color: var(--ink); }
.pagination .page-numbers.dots { border-color: transparent; }

/* ---------------- 搜索表单 ---------------- */
.search-form { display: flex; gap: 10px; max-width: 520px; }
.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper-2);
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink);
}
.search-form input[type="search"]:focus {
	outline: 2px solid var(--green-soft);
	border-color: var(--green);
	background: #fff;
}
.search-form .search-submit {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;
	padding: 12px 24px;
	border: 1px solid var(--green);
	border-radius: var(--radius);
	background: var(--green);
	color: var(--ink);
	cursor: pointer;
}
.search-form .search-submit:hover { background: #fff; border-color: var(--ink); color: #000; }

/* ---------------- 上下页导航 ---------------- */
.post-nav { margin-top: clamp(30px, 4vw, 46px); display: grid; gap: 10px; }
.post-nav a { color: var(--green-dark); font-family: var(--font-head); font-weight: 600; }
.post-nav a:hover { color: var(--ink); }

/* ---------------- 空状态 ---------------- */
.empty-state { padding: clamp(40px, 5vw, 70px) 0; text-align: center; }
.empty-state h1 { font-size: 30px; }
.empty-state p { margin: 14px auto 0; color: #5a5a5a; max-width: 62ch; }

/* ---------------- 404 ---------------- */
.error-404 { text-align: center; padding: clamp(50px, 6vw, 90px) 0; }
.error-404__code { font-family: var(--font-head); font-size: clamp(64px, 12vw, 120px); font-weight: 700; line-height: 1; color: var(--green); }
.error-404 h1 { font-size: 26px; margin-top: 10px; }
.error-404 p { margin: 14px auto 24px; color: #5a5a5a; max-width: 62ch; }

/* ---------------- WordPress 核心类 ---------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	left: 6px;
	top: 6px;
	z-index: 100000;
	display: block;
	padding: 14px 22px;
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 14px;
	text-decoration: none;
}

.alignleft { float: left; margin: 6px 24px 18px 0; }
.alignright { float: right; margin: 6px 0 18px 24px; }
.aligncenter { display: block; margin: 18px auto; }
.alignwide { margin-left: -40px; margin-right: -40px; max-width: calc(100% + 80px); }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption,
figcaption { font-size: 12.5px; color: var(--gray-soft); margin-top: 8px; }

.sticky .post-item__title::before { content: "★ "; color: var(--green); }
.bypostauthor > .comment-body .comment-author { font-weight: 600; }
.gallery-caption { font-size: 12.5px; color: var(--gray-soft); }

/* WP 默认相册短代码 */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.gallery-item { margin: 0; }
.gallery-icon img { display: block; border: 1px solid var(--line); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1280px) {
	.nav-toggle { display: block; }
	.nav {
		display: none;
		order: 4;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		margin-left: 0;
		padding: 6px 0 14px;
	}
	.nav.is-open { display: flex; }
	.header__inner { flex-wrap: wrap; padding: 12px 0; }

	/* 移动端把下拉改成常展开，避免触摸设备悬停不出来 */
	.nav__sub,
	.nav__sub .nav__sub,
	.nav .sub-menu,
	.nav .sub-menu .sub-menu {
		position: static;
		display: block;
		box-shadow: none;
		border: 0;
		border-left: 3px solid var(--green);
		padding: 0 0 0 12px;
		min-width: 0;
	}
	.nav > li > a,
	.nav__item > a { padding: 11px 0; border-bottom: 1px solid var(--line); }
	.nav__sub a,
	.nav .sub-menu a { padding: 8px 0; }
	.nav > li.menu-item-has-children > a::after { display: none; }
	.caret { display: none; }
}

/* 1101px 以下标题用 40px 会折成两行，文字块从 162px 涨到 212px；
   而首屏高度随屏宽缩小，961 宽时只剩 325px，标题距照片上沿仅 4.3px。
   降到 32px 保证 961–1100 区间标题始终单行，位移 16% 才不会把文字顶出照片。 */
@media (max-width: 1100px) {
	.hero h1 { font-size: 32px; }
}

@media (max-width: 1024px) {
	.workshop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.photo-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-3, .series { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat:nth-child(3) { border-left: 0; }
	/* 首屏不再设 min-height：高度完全由照片比例决定，见 .hero__stage 处的说明。 */
	.alignwide { margin-left: 0; margin-right: 0; max-width: 100%; }
}

/* 窄屏改成「照片在上、文字在下」。
   照片按比例缩到 375 宽只剩约 129px 高，压不住 165px 高的文字块（标题+副标题+按钮），
   硬要压在图上就必须裁照片，与「整幅显示」冲突，所以让文字落到照片下方、
   落在 .hero__stage 的深灰底 #4e4e4e 上（白字对比度 8.32:1，不需要阴影）。
   断点取 960 而不是理论值 660：660–960 之间虽然勉强放得下，但文字会顶到照片上边缘。
   要让文字重新压在照片上，正确做法是后台上传一张手机专用竖版/方版首屏图，
   再在这个断点里换图，而不是把裁切改回来。 */
@media (max-width: 960px) {
	.hero__stage { padding: 0 0 46px; }
	.hero__text {
		position: static;
		justify-content: flex-start;
		padding: 30px var(--pad) 0;
		transform: none;
	}
	.hero h1, .hero h2 { max-width: 100%; }
}

@media (max-width: 860px) {
	.band, .about, .contact, .detail { grid-template-columns: minmax(0, 1fr); }
	.contact__map { aspect-ratio: 16 / 9; align-self: auto; min-height: 0; }
	.hero h1 { font-size: 30px; }
	.hero__text .btn { margin-top: 22px; }
}

@media (max-width: 640px) {
	.grid-3, .series, .footer__grid, .photos, .workshop, .thumbs, .gallery { grid-template-columns: minmax(0, 1fr); }
	/* 照片库窄屏保留两列：一列排四张会把页面拉得过长 */
	.photo-library { gap: 12px; }
	.spec-matrix tbody th[scope="row"] { min-width: 132px; max-width: 176px; }
	.lightbox { padding: 16px; }
	.lightbox__btn { width: 38px; height: 38px; font-size: 18px; }
	.hero h1 { font-size: 26px; }
	.alignleft, .alignright { float: none; margin: 18px 0; }
	.entry-content th { width: auto; }
}