/*
Theme Name: Twenty Twelve 路书地图版
Template: twentytwelve
Version: 1.8
Description: 子主题：标题组在左，导航菜单在右，菜单底部与副标题底部对齐（不再显示页眉小图）。1.5：≤768px 全站手机外衣（sticky 精简顶栏 + 汉堡右侧抽屉）。
*/

/* 继承父主题样式 */
@import url('../twentytwelve/style.css');

/* 不再显示页眉横幅小图 */
.site-header-image-small {
	display: none;
}

/* ===== 单 H1：内页站名由 <h1> 降级为 <p class="site-title">，视觉保持与父主题 h1 逐像素一致 ===== */
.site-header p.site-title {
	margin: 0 0 14px;
	margin-bottom: 1rem;
	font-size: 24px;
	font-size: 1.714285714rem;
	font-weight: bold;
	line-height: 1.285714286;
	text-align: center;
}

.site-header p.site-title a {
	color: #515151;
	display: inline-block;
	text-decoration: none;
}

.site-header p.site-title a:hover {
	color: #21759b;
}

@media screen and (min-width: 600px) {
	.site-header p.site-title {
		margin-bottom: 0;
		font-size: 26px;
		font-size: 1.857142857rem;
		line-height: 1.846153846;
		text-align: left;
	}
}

@media print {
	.site-header p.site-title {
		font-size: 21pt;
		line-height: 1;
		text-align: left;
	}

	.site-header p.site-title a {
		color: #000;
	}
}

/* ===== 头部下方加一条分隔线，把页眉和内容页区分开 ===== */
.site-header {
	border-bottom: 1px solid #d8d8d8;
}

/* ===== 桌面端（≥600px）：标题组左、导航右，底部对齐副标题 ===== */
@media screen and (min-width: 600px) {
	.site-header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between; /* 标题靠左，导航靠右 */
		align-items: flex-end;         /* 底部对齐：导航底边和副标题底边齐平 */
		padding: 12px 0 16px;          /* 底部留 16px 再画分隔线 */
	}

	hgroup {
		max-width: 45%;
	}

	/* 去掉导航的整宽横条样式，让它缩成右侧一列 */
	#site-navigation {
		margin-top: 0;
	}

	.main-navigation {
		margin-top: 0;
		text-align: right;
	}

	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		display: flex !important;   /* 覆盖父主题 inline-block + width:100% */
		flex-wrap: wrap;
		justify-content: flex-end;  /* 菜单整体靠右 */
		width: auto;
		border: 0;                  /* 去掉上下边框线 */
		text-align: right;
	}

	.main-navigation li {
		font-size: 13px;
		margin: 0 0 0 26px;         /* 菜单项间距，靠左留白分隔 */
	}

	.main-navigation li a {
		line-height: 1.7;
		padding: 0;
		white-space: nowrap;
	}
}

/* ===== 手机端（<600px）：沿用父主题堆叠 + 菜单按钮 ===== */
@media screen and (max-width: 599px) {
	.site-header {
		display: block;
		padding: 12px 0 16px;          /* 底部留 16px 再画分隔线 */
	}

	hgroup,
	.main-navigation {
		text-align: center;
	}
}

/* ===== 全站手机外衣 v1.5（≤768px；桌面 >768px 零影响） ===== */
/* 抽屉扩展区/遮罩桌面端隐藏 */
.dhm-nav-extra {
	display: none;
}

.dhm-nav-overlay {
	display: none;
}

@media screen and (max-width: 768px) {

	/* ---- 精简 sticky 顶栏 ---- */
	.site-header {
		position: sticky;
		top: 0;
		z-index: 1500;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 14px !important;
		background: #fff;
		box-shadow: 0 1px 10px rgba(17, 24, 39, 0.08);
	}

	hgroup {
		text-align: left !important;
		max-width: none;
		flex: 1;
		min-width: 0;
	}

	/* 提高特异性覆盖父主题 .site-header h1/h2.site-title（首页 h1 / 内页 p 同尺寸） */
	.site-header .site-title {
		margin: 0;
		font-size: 19px;
		font-weight: 700;
		line-height: 1.3;
		text-align: left;
		padding-right: 82px;            /* 给绝对定位的「三杠+菜单」胶囊留位，长标题省略号不压按钮 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.site-header h2.site-description {
		display: none;
	}

	/* ---- 导航容器：关闭态只是顶栏右侧 44px 按钮位 ---- */
	.main-navigation {
		margin: 0;
		padding: 0;
		text-align: left;
		background: transparent;
		box-shadow: none;
		overflow: visible;
		flex: none;
	}

	/* 关闭态：菜单与扩展区不占位（沿用父主题隐藏，靠 .toggled 打开） */
	#site-navigation .menu-1-container,
	#site-navigation .dhm-nav-extra {
		display: none;
	}

	/* ---- 菜单按钮（v1.6：三杠图标 +「菜单」文字胶囊，一看就知道是入口） ---- */
	.menu-toggle {
		display: block;              /* 覆盖父主题 600+ 的 display:none */
		position: absolute;
		top: 9px;
		right: 10px;
		z-index: 3;
		width: auto;
		height: 34px;
		padding: 0 13px 0 31px;     /* 左 31px 给三杠图标留位 */
		background: #fff;
		border: 1px solid rgba(31, 41, 55, 0.18);
		box-shadow: 0 1px 4px rgba(17, 24, 39, 0.12);
		border-radius: 17px;
		font-size: 14px;
		font-weight: 600;
		line-height: 32px;
		color: #1f2937;
		color-scheme: light;          /* 安卓深色模式下不把按钮染成灰块 */
		cursor: pointer;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
	}

	.menu-toggle::before,
	.menu-toggle::after {
		content: '';
		position: absolute;
		left: 10px;
		width: 15px;
		height: 2px;
		background: #1f2937;
		border-radius: 2px;
		transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease, box-shadow 0.15s ease;
	}

	.menu-toggle::before {
		top: 10px;
		box-shadow: 0 6px 0 #1f2937;   /* 中杠 */
	}

	.menu-toggle::after {
		bottom: 10px;
	}

	.menu-toggle:active {
		background: #f3f4f6;
	}

	/* 打开态：按钮变成抽屉右上角的纯图标 ✕（隐藏「菜单」文字与胶囊外壳） */
	#site-navigation.dhm-open .menu-toggle {
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
		padding: 0;
		font-size: 0;
		line-height: 1;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	#site-navigation.dhm-open .menu-toggle::before,
	#site-navigation.dhm-open .menu-toggle::after {
		left: 11px;
		right: 11px;
		width: auto;
	}

	#site-navigation.dhm-open .menu-toggle::before {
		top: 21px;
		transform: rotate(45deg);
		box-shadow: none;
	}

	#site-navigation.dhm-open .menu-toggle::after {
		bottom: 21px;
		transform: rotate(-45deg);
	}

	/* ---- 打开态：nav 变成右侧滑入抽屉（按钮相对抽屉定位成 ✕） ---- */
	#site-navigation.main-navigation.dhm-open {
		position: fixed;
		top: 0;
		left: auto;
		right: 0;
		bottom: 0;
		width: min(84vw, 320px);
		padding: 58px 0 24px;
		margin: 0;
		background: #fff;
		z-index: 2000;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: -10px 0 36px rgba(17, 24, 39, 0.22);
		transform: translateX(0);
		animation: dhm-drawer-in 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
	}

	@keyframes dhm-drawer-in {
		from { transform: translateX(102%); }
		to   { transform: translateX(0); }
	}

	/* 父主题把 toggled-on 加在 ul 上并用 inline-block 显示；这里接管成抽屉布局 */
	#site-navigation.dhm-open .menu-1-container,
	#site-navigation.dhm-open .menu-1-container ul.nav-menu {
		display: block !important;
		border: 0;
		width: 100%;
		text-align: left;
	}

	#site-navigation.dhm-open ul.nav-menu li {
		margin: 0;
		font-size: 16px;
	}

	#site-navigation.dhm-open ul.nav-menu li a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 8px 22px;
		margin: 0;
		font-size: 16px;
		line-height: 1.35;
		color: #1f2937;
		text-decoration: none;
		border-bottom: 1px solid #f0f1f3;
		white-space: normal;
		border-radius: 0;
	}

	#site-navigation.dhm-open ul.nav-menu li a:active {
		background: #f6f7f9;
	}

	#site-navigation.dhm-open ul.nav-menu .current-menu-item {
		box-shadow: inset 3px 0 0 #e64980;
	}

	#site-navigation.dhm-open ul.nav-menu .current-menu-item > a {
		color: #e64980;
		font-weight: 700;
	}

	/* ---- 抽屉底部扩展区（仅打开时出现） ---- */
	#site-navigation.dhm-open .dhm-nav-extra {
		display: block;
		padding: 22px 22px 8px;
	}

	.dhm-nav-hub {
		display: block;
		min-height: 48px;
		line-height: 48px;
		text-align: center;
		background: #e64980;
		color: #fff !important;
		border: 0 !important;
		border-radius: 999px;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}

	.dhm-nav-hub:active {
		background: #c7366a;
	}

	.dhm-nav-copy {
		margin: 16px 0 0;
		text-align: center;
		font-size: 12px;
		color: #9aa0a6;
	}

	/* 「添加到桌面」次按钮：默认隐藏，pwa-shell.js 确认非 standalone 后加 .tm-pwa-on 点亮；
	   已安装到桌面、或 JS 未加载时都不出现；桌面端 .dhm-nav-extra 整体隐藏，零影响 */
	#site-navigation.dhm-open .tm-pwa-add {
		display: none;
	}

	#site-navigation.dhm-open .tm-pwa-add.tm-pwa-on {
		display: block;
		margin-top: 10px;
		min-height: 42px;
		line-height: 40px;
		background: #fff;
		color: #e64980 !important;
		border: 1px solid #f3a6c8 !important;
		border-radius: 999px;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
	}

	#site-navigation.dhm-open .tm-pwa-add.tm-pwa-on:active {
		background: #fdf0f6;
	}

	/* ---- 遮罩 + 锁滚动（body.dhm-nav-open 由 JS 跟随 toggled 同步） ---- */
	/* 层级必须在吸顶头部(z 1500)之下：抽屉 fixed 在头部层叠上下文内，
	   若遮罩高于头部会盖住抽屉，真机上点链接全被遮罩吃掉（点一下=关抽屉） */
	body.dhm-nav-open .dhm-nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1400;
		background: rgba(0, 0, 0, 0.45);
		opacity: 1;
		animation: dhm-fade 0.25s ease;
	}

	body.dhm-nav-open {
		overflow: hidden;
	}

	@keyframes dhm-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* ---- 文章内容窄屏兜底：固定宽图片/表格/长英文不撑破版面 ---- */
	.entry-content img,
	.entry-summary img,
	.comment-content img,
	.widget img,
	.entry-content video,
	.entry-content iframe,
	.entry-content embed,
	.entry-content object,
	.wp-caption {
		max-width: 100%;
		height: auto;
	}

	.entry-content table,
	.comment-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.entry-content,
	.entry-summary {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.entry-content pre,
	.comment-content pre {
		white-space: pre-wrap;
		word-break: break-word;
	}
}

/* ===== 行程攻略单页：去掉侧栏，文章内容占满全宽 =====
 * 触发的 body class：.dhx-itinerary-single（functions.php 里给行程攻略分类树下
 * is_singular 文章加的，含 G228/G331/G219/青甘环线 等子分类）。
 * 子主题 single.php 已对这些文章不调 get_sidebar()，所以这里只需把
 * .site-content 从父主题的 65.1% 撑到 100%。文章正文内的 .wrap 仍由攻略 CSS 的
 * max-width:900px 居中，不会撑破版面。
 */
.dhx-itinerary-single .site-content {
	float: none;
	width: 100%;
	margin-right: 0;
}

/* 攻略自带 CSS 里有一条全局 *{box-sizing:border-box}（随 wp_head 注入，作用于整页），
 * 会把主题外衣 #page（max-width:960px + 左右各 40px padding）从 content-box 的总宽
 * 1040px 压成 border-box 的 960px，导致攻略页比景点页/普通页左右各窄 40px。
 * 这里把主题外壳恢复为 content-box；.entry-content 子树（攻略卡片布局）保留 border-box。
 */
.dhx-itinerary-single #page,
.dhx-itinerary-single #page * {
	box-sizing: content-box;
}
.dhx-itinerary-single #page .entry-content,
.dhx-itinerary-single #page .entry-content * {
	box-sizing: border-box;
}

@media screen and (max-width: 599px) {
	/* 移动端父主题默认就是 100%，这里仅防御一下重置 */
	.dhx-itinerary-single .site-content {
		width: 100%;
	}
}

/* ===== 行程攻略分类页：线路导航条（category.php 行程攻略分支输出） =====
 * 「全部」+ 各线路子分类胶囊；当前栏目填充专属色（PHP 内联 style），
 * 未选中白底描边红点。父分类页与各线路子分类页均显示。
 */
.dhx-line-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 18px;
}

.dhx-line-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 18px;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 999px;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.4;
	color: #1f2937 !important;
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}

.dhx-line-pill:hover {
	border-color: #94a3b8;
	transform: translateY(-1px);
	color: #0f172a !important;
	text-decoration: none;
}

.dhx-line-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ef4444;
	flex: none;
}

/* 当前栏目：填充色由 PHP 内联输出（「全部」为深灰蓝） */
.dhx-line-pill.is-current {
	color: #fff !important;
}

.dhx-line-pill.is-current .dhx-line-dot {
	background: #fff;
}

@media screen and (max-width: 768px) {
	.dhx-line-nav {
		gap: 8px;
		margin: 10px 0 14px;
	}

	.dhx-line-pill {
		padding: 6px 14px;
		font-size: 13px !important;
	}
}