/* =========================================================================
   tjc-route.css —— 航线支柱页正文（page-route.php 专用，自包含）
   -------------------------------------------------------------------------
   替代旧的 tjc-guide.css。旧文件是「在文章页正文排版上打补丁」，所以正文长什么样
   一半取决于 tjc-article.css，改一处两边都动，也说不清哪条规则在生效。
   这一版把**正文的样式全部收在本文件里**：page-route.php 的正文容器不再带
   .tjc-article-body（只保留 id="tjc-article-body" 给 tjc-toc.js 抓标题用），
   所以文章页的正文规则一条都不会落到这里。改这个文件只影响航线页。

   仍然共用的只有正文之外的三块（都已在文章页验证过，重写不划算）：
     tjc-service.css       Hero（.tjc-svc-hero 那组）
     tjc-article.css       两栏布局、侧栏卡片、目录、手机折叠目录、行内 CTA
     tjc-toc.js / tjc-sticky-sidebar.js

   ── 排版取向 ──────────────────────────────────────────────────────────
   前两版被否掉的原因记在这儿，别走回头路：
     v1 直接用服务页组件 → "太靠近服务页了"（满屏填色卡片，像落地页不像文章）
     v2 无 Hero 单栏参考手册风 → "样式太难看了"（只有字，没有层次）
   这一版的取向是**文档优先**：白底、正常行宽、结构靠字号对比和细线来分，
   只在真正需要停顿的地方才用填色面板（审阅提示 / 提示条 / 问句引导 / 定义卡 /
   流程 / 问答 / 表头）。13 个「引导句 + 列表」如果个个做成盒子，页面就又变成
   v1 那样了，所以它只有一条淡淡的左侧竖线。

   ── 内容模块从哪来 ────────────────────────────────────────────────────
   正文 HTML 由 tools/md-to-html.py 生成，它按**结构**识别内容形态并加 class
   （详见该脚本头部的对照表）。写内容的人只写普通 Markdown，不需要记 class；
   想要一个提示条就写引用块 `> …`。所以本文件里的选择器全部是显式 class，
   不靠「h2 + ol」这类位置推断 —— 226 个页面批量跑时，位置推断迟早会错位。

   ── 颜色与可读性 ──────────────────────────────────────────────────────
   品牌橙 #ff5e14 在白底上的对比度只有 3.06:1，够不上正文文字的 4.5:1。
   所以分工是：**#ff5e14 只用于填色、边框、标记点等非文字元素**（3:1 达标即可），
   凡是橙色的**文字**（分节序号、正文链接、悬停态）一律用深一档的 #c24007（5.2:1）。
   ========================================================================= */

/* 变量挂在页面外层而不是正文容器，因为 Hero（.tjc-service--route）和侧栏都要用。
   这两个是兄弟节点，所以两个都得列上。 */
.tjc-route,
.tjc-service--route {
	--rt-ink: #1a2332;        /* 正文 — 更深更权威 */
	--rt-head: #001d67;       /* 标题、强调、表头 */
	--rt-accent: #ff5e14;     /* 品牌橙：克制使用 */
	--rt-accent-t: #c24007;   /* 橙色文字用这一档，对比度 5.2:1 */
	--rt-muted: #5a6880;      /* 次要文字 */
	--rt-line: #d8dfe9;       /* 分隔线 — 更细腻 */
	--rt-line-2: #e8ecf3;
	--rt-soft: #f5f7fb;       /* 中性淡底 — 更低调 */
	--rt-tint: #fff6f1;       /* 橙色淡底 */
	--rt-amber: #e8a33d;      /* 提示条 */
	--rt-amber-bg: #fffaf0;
	--rt-amber-line: #f4e2c4;
	--rt-radius: 10px;        /* 圆角略小 — 更专业 */
	--rt-anchor-top: 100px;   /* 锚点跳转时给吸顶头部留的空间 */
}

.tjc-rt {
	counter-reset: rt-sec;
	color: var(--rt-ink);
	font-size: 17px;          /* 略大 — 更易读 */
	line-height: 1.75;        /* 略宽 — 更舒适 */
}

/* =========================================================================
   1. 基础排版
   ========================================================================= */

.tjc-rt > *:first-child { margin-top: 0; }
.tjc-rt > *:last-child { margin-bottom: 0; }

.tjc-rt p { margin: 0 0 20px; }   /* 增加段落间距 */
.tjc-rt strong { color: var(--rt-head); font-weight: 650; }  /* 略轻 — 不喧宾夺主 */

/* 正文插图沿用文章详情页规格：桌面 72%，手机 84%，水平居中。 */
.tjc-rt img {
	display: block;
	max-width: 72% !important;
	height: auto;
	margin: 28px auto !important;
	border-radius: var(--rt-radius);
	border: 1px solid rgba(0, 29, 103, .1);
	box-shadow: 0 14px 30px rgba(0, 29, 103, .16), 0 3px 8px rgba(0, 29, 103, .1);
	transition: transform .25s ease, box-shadow .25s ease;
}
.tjc-rt img:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 20px 38px rgba(0, 29, 103, .22), 0 5px 12px rgba(0, 29, 103, .14);
}
.tjc-rt figure { margin: 28px 0; }
.tjc-rt figure img { margin: 0 auto !important; }
.tjc-rt figcaption {
	margin-top: 10px;
	color: var(--rt-muted);
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}
.tjc-rt img.tjc-img-full,
.tjc-rt figure.tjc-img-full img { max-width: 100% !important; }
@media (max-width: 767px) {
	.tjc-rt img { max-width: 84% !important; }
	.tjc-rt img.tjc-img-full,
	.tjc-rt figure.tjc-img-full img { max-width: 100% !important; }
}
@media (hover: none), (pointer: coarse) {
	.tjc-rt img:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tjc-rt img { transition: none; }
	.tjc-rt img:hover { transform: none; }
}

.tjc-rt a {
	color: var(--rt-head);     /* 链接用深蓝 — 更低调专业 */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2.5px;
	text-decoration-color: rgba(0, 29, 103, 0.3);
	transition: all .18s ease;
}
.tjc-rt a:hover,
.tjc-rt a:focus-visible {
	color: var(--rt-accent-t);
	text-decoration-color: var(--rt-accent-t);
	text-decoration-thickness: 2px;
}

/* -------- 分节标题：细横线 + 序号 -------- */
.tjc-rt h2 {
	counter-increment: rt-sec;
	margin: 72px 0 28px;      /* 更大气的上边距 */
	padding-top: 32px;
	border-top: 2px solid var(--rt-line);  /* 略粗 — 更清晰 */
	color: var(--rt-head);
	font-size: 32px;          /* 更大 — 层级更明确 */
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-align: center;
	text-shadow: 0 3px 7px rgba(0, 29, 103, .5);
	scroll-margin-top: var(--rt-anchor-top);
}
.tjc-rt h2::before {
	content: counter(rt-sec, decimal-leading-zero);
	display: block;
	margin-bottom: 10px;
	color: var(--rt-muted);   /* 序号用灰色 — 不抢眼 */
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-shadow: none;
}

/* 「Contents」这种不是内容分节的 H2：不占编号，也不显示序号。
   否则后面每一节的序号都会比正文目录里的序号大 1，看着像排错了。 */
.tjc-rt h2.tjc-rt-h2--plain { counter-increment: none; }
.tjc-rt h2.tjc-rt-h2--plain::before { content: none; }

.tjc-rt h3 {
	margin: 42px 0 16px;      /* 增大间距 */
	color: var(--rt-head);
	font-size: 22px;          /* 略大 */
	font-weight: 650;
	line-height: 1.35;
	scroll-margin-top: var(--rt-anchor-top);
}
.tjc-rt h4 {
	margin: 26px 0 10px;
	color: var(--rt-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

/* H2 之后紧跟 H3 时，两者靠得太近像一个双行标题 —— 收掉一部分上边距 */
.tjc-rt h2 + h3 { margin-top: 24px; }


/* =========================================================================
   2. 开头三件套：审阅提示 / 导语 / 正文内目录
   ========================================================================= */

/* 时效性内容必须让人一眼看到日期，否则去年的运价会被当成今天的 */
.tjc-rt-notice {
	margin: 0 0 26px;
	padding: 14px 18px;
	border-left: 3px solid var(--rt-accent);
	border-radius: 0 10px 10px 0;
	background: var(--rt-soft);
	color: var(--rt-muted);
	font-size: 14.5px;
	line-height: 1.62;
}
.tjc-rt-notice strong { color: var(--rt-head); }

/* 「多少天、多少钱」的答案就在这两段里，放大一档 */
.tjc-rt-lead {
	margin: 0 0 20px;
	color: #1b2c4a;
	font-size: 19px;
	line-height: 1.68;
}

/* -------- Answer Summary（新增）：开头的关键问答摘要 -------- */
.tjc-rt-summary {
	margin: 36px 0 48px;
	padding: 32px 36px;
	border: 2px solid var(--rt-line);
	border-radius: var(--rt-radius);
	background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
}
.tjc-rt-summary-h {
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--rt-line);
	color: var(--rt-head);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.tjc-rt-summary dl {
	margin: 0;
	display: grid;
	gap: 20px;
}
.tjc-rt-summary dt {
	margin: 0 0 6px;
	color: var(--rt-head);
	font-size: 16.5px;
	font-weight: 650;
	line-height: 1.4;
}
.tjc-rt-summary dt::before {
	content: "Q:";
	display: inline-block;
	margin-right: 6px;
	color: var(--rt-muted);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .05em;
}
.tjc-rt-summary dd {
	margin: 0 0 0 20px;
	padding-left: 16px;
	border-left: 2px solid var(--rt-line-2);
	color: var(--rt-ink);
	font-size: 16px;
	line-height: 1.68;
}
.tjc-rt-summary dd strong {
	color: var(--rt-head);
	font-weight: 650;
}
.tjc-rt-summary dd:last-child { margin-bottom: 0; }

/* 正文内目录。桌面侧栏已有吸顶目录，这一份是给「想先看全貌」和手机端读者的，
   所以做成两栏索引卡，占的高度只有单栏的一半。 */
.tjc-rt-jump {
	margin: 0 0 30px;
	padding: 20px 24px;
	border: 1px solid var(--rt-line);
	border-radius: var(--rt-radius);
	background: var(--rt-soft);
}
.tjc-rt-jump ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rt-jump;
	columns: 2;
	column-gap: 34px;
}
.tjc-rt-jump li {
	counter-increment: rt-jump;
	position: relative;
	margin: 0 0 10px;
	padding-left: 27px;
	break-inside: avoid;
	font-size: 15.5px;
	line-height: 1.5;
}
.tjc-rt-jump li::before {
	content: counter(rt-jump, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 2px;
	color: var(--rt-accent-t);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
}
.tjc-rt-jump a {
	color: var(--rt-head);
	font-weight: 550;
	text-decoration: none;
}
.tjc-rt-jump a:hover,
.tjc-rt-jump a:focus-visible {
	color: var(--rt-accent-t);
	text-decoration: underline;
}

/* =========================================================================
   3. 两种打断型面板：提示条 / 问句引导
   图标全部用纯 CSS 画，不用 Font Awesome —— FA 走的是子集字体，
   在这里新引一个图标等于赌它在那 191 个字形里，没必要。
   ========================================================================= */

/* 提示条：运价有效期、法规变动这类「读者不看会吃亏」的话。
   来源是 Markdown 引用块 `> …`，或以「**xxx note:**」开头的段落。 */
.tjc-rt-note {
	position: relative;
	margin: 0 0 26px;
	padding: 16px 20px 16px 52px;
	border: 1px solid var(--rt-amber-line);
	border-left: 3px solid var(--rt-amber);
	border-radius: 0 10px 10px 0;
	background: var(--rt-amber-bg);
	font-size: 15.5px;
	line-height: 1.66;
}
.tjc-rt-note::before {
	content: "!";
	position: absolute;
	left: 18px;
	top: 18px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--rt-amber);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 21px;
	text-align: center;
}
.tjc-rt-note > *:last-child { margin-bottom: 0; }

/* 问句引导：「Need an accurate rate?」这种。页面上已经有 Hero、侧栏、页尾三处
   询价按钮，这里不再放第四个按钮，只把这段话托起来，让它不淹在正文里。 */
.tjc-rt-ask {
	margin: 0 0 28px;
	padding: 18px 22px;
	border: 1px solid #ffd9c4;
	border-radius: var(--rt-radius);
	background: linear-gradient(180deg, var(--rt-tint) 0%, #fffbf9 100%);
	font-size: 16px;
	line-height: 1.66;
}
.tjc-rt-ask strong {
	display: block;
	margin-bottom: 3px;
	font-size: 17px;
}

/* =========================================================================
   4. 定义卡（defs）
   源头是「一段只有一个加粗词 + 一段说明」反复出现，比如四种运输方式各自怎么计费。
   原样渲染就是「粗体行、正文、粗体行、正文」，看着像排版事故。收成卡片之后，
   它才像是有意做的一组对照。桌面两栏 —— 四项刚好 2×2，也不用滚太长。
   ========================================================================= */

.tjc-rt-defs {
	display: grid;
	gap: 14px;
	margin: 0 0 30px;
}
.tjc-rt-def {
	padding: 18px 20px;
	border: 1px solid var(--rt-line);
	border-radius: var(--rt-radius);
	background: #fff;
}
.tjc-rt-def-t {
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 3px solid var(--rt-accent);
	color: var(--rt-head);
	font-size: 16.5px;
	font-weight: 750;
	line-height: 1.32;
}
.tjc-rt-def-d { margin: 0; }
.tjc-rt-def-d > *:last-child { margin-bottom: 0; }


/* =========================================================================
   5. 带标签段落（keyed）
   源头是「**场景：** 说明」连着写好几条。做成悬挂缩进的定义表：
   标签自己一行、说明缩进并挂一条细线，扫的时候只看标签就能挑出要读哪条。
   ========================================================================= */

.tjc-rt-keyed { margin: 0 0 30px; }
.tjc-rt-keyed-k {
	margin: 0;
	color: var(--rt-head);
	font-size: 16px;
	font-weight: 750;
	line-height: 1.45;
}
.tjc-rt-keyed-k::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 9px 2px 0;
	border-radius: 2px;
	background: var(--rt-accent);
}
.tjc-rt-keyed-v {
	margin: 4px 0 18px 16px;
	padding-left: 16px;
	border-left: 1px solid var(--rt-line);
	line-height: 1.68;
}
.tjc-rt-keyed-v:last-child { margin-bottom: 0; }

/* =========================================================================
   6. 词条列表（terms）/ 编号词条（reqs）/ 公式步骤（calc）
   ========================================================================= */

/* terms：港口、机场这类「名字 + 一句说明」。名字单独一行做成小卡，
   读者找自己的港口时只扫第一行就够。桌面两栏。 */
.tjc-rt-terms {
	display: grid;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}
.tjc-rt-terms > li {
	padding: 13px 16px;
	border: 1px solid var(--rt-line);
	border-radius: 10px;
	background: var(--rt-soft);
	font-size: 15.5px;
	line-height: 1.6;
}
.tjc-rt-term {
	display: block;
	margin-bottom: 2px;
	color: var(--rt-head);
	font-weight: 750;
}
.tjc-rt-desc { color: #3c4a63; }

/* reqs：清关要准备的单证这类**有先后、要逐条核对**的列表。
   单栏 + 藏蓝编号圆点 + 分隔线，当清单用。标签在这里改成行内，因为它和说明
   连起来才是一句完整的话（"EORI number: Imports into GB normally require…"）。 */
.tjc-rt-reqs {
	counter-reset: rt-req;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}
.tjc-rt-reqs > li {
	counter-increment: rt-req;
	position: relative;
	margin: 0 0 13px;
	padding: 0 0 13px 46px;
	border-bottom: 1px solid var(--rt-line-2);
	font-size: 15.8px;
	line-height: 1.62;
}
.tjc-rt-reqs > li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.tjc-rt-reqs > li::before {
	content: counter(rt-req);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--rt-head);
	color: #fff;
	font-size: 13px;
	font-weight: 750;
	line-height: 28px;
	text-align: center;
}
.tjc-rt-reqs .tjc-rt-term {
	display: inline;
	margin: 0 5px 0 0;
}

/* calc：关税/进口 VAT 的计算逻辑。是一组「量 = 算式」，读者会照着算，
   所以整块框起来当作一个独立的推导，不要跟旁边的说明段落混在一起。 */
.tjc-rt-calc {
	counter-reset: rt-calc;
	margin: 0 0 28px;
	padding: 20px 24px;
	border: 1px solid var(--rt-line);
	border-radius: var(--rt-radius);
	background: var(--rt-soft);
	list-style: none;
}
.tjc-rt-calc > li {
	counter-increment: rt-calc;
	position: relative;
	margin: 0 0 13px;
	padding-left: 34px;
	font-size: 15.8px;
	line-height: 1.66;
}
.tjc-rt-calc > li:last-child { margin-bottom: 0; }
.tjc-rt-calc > li::before {
	content: counter(rt-calc);
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border: 1px solid var(--rt-line);
	border-radius: 6px;
	background: #fff;
	color: var(--rt-accent-t);
	font-size: 12.5px;
	font-weight: 800;
	line-height: 20px;
	text-align: center;
}


/* =========================================================================
   7. 普通要点（bullets）/ 引导句 + 列表（set）
   set 在这份内容里出现 13 次。个个做成填色盒子，页面就又变成 v1 那种
   「满屏卡片」的落地页观感了 —— 所以只用一条淡竖线把引导句和列表绑在一起。
   ========================================================================= */

.tjc-rt-bullets {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.tjc-rt-bullets > li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 26px;
	line-height: 1.66;
}
.tjc-rt-bullets > li:last-child { margin-bottom: 0; }
.tjc-rt-bullets > li::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 10px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--rt-accent);
}

.tjc-rt-set {
	margin: 0 0 28px;
	padding-left: 18px;
	border-left: 2px solid var(--rt-line);
}
.tjc-rt-set-lead {
	margin: 0 0 11px;
	color: var(--rt-head);
	font-weight: 700;
}
.tjc-rt-set > *:last-child { margin-bottom: 0; }
.tjc-rt-set > .tjc-rt-bullets > li { padding-left: 22px; }
.tjc-rt-set > .tjc-rt-bullets > li::before { left: 2px; }

/* =========================================================================
   8. 编号流程（steps）
   门到门八个阶段。原样就是八个 H3 加八段话，读者看不出这是**一条有顺序的链**。
   做成左侧竖轴 + 编号圆点，"现在走到第几步" 一眼可见。
   竖轴用 ::before、圆点用 ::after，所以不需要往 HTML 里塞额外的空标签。
   ========================================================================= */

.tjc-rt-steps {
	counter-reset: rt-step;
	margin: 10px 0 30px;
	padding: 0;
	list-style: none;
}
.tjc-rt-step {
	counter-increment: rt-step;
	position: relative;
	padding: 0 0 26px 56px;
}
.tjc-rt-step:last-child { padding-bottom: 0; }

.tjc-rt-step::before {          /* 连接线 */
	content: "";
	position: absolute;
	left: 17px;
	top: 40px;
	bottom: 0;
	width: 2px;
	background: var(--rt-line);
}
.tjc-rt-step:last-child::before { display: none; }

.tjc-rt-step::after {           /* 编号圆点 */
	content: counter(rt-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--rt-head);
	color: #fff;
	font-size: 14px;
	font-weight: 750;
	line-height: 36px;
	text-align: center;
}

/* 用双 class 提高优先级，避免和上面的 .tjc-rt h3 打架，不用 !important */
.tjc-rt .tjc-rt-step-t {
	margin: 5px 0 8px;
	font-size: 18px;
	line-height: 1.35;
}
.tjc-rt-step > *:last-child { margin-bottom: 0; }

/* =========================================================================
   9. 问答（faq）
   9 条问答铺开是一屏半的字墙，收成折叠面板后读者能直接挑自己那条。
   用原生 <details>，没有 JS：不依赖脚本、禁用 JS 也能展开、搜索引擎读得到内容。
   第一条默认展开，否则整块看着像空的。加减号用两条 CSS 画的线拼，不用图标字体。
   ========================================================================= */

.tjc-rt-faq {
	margin: 4px 0 10px;
	border-top: 1px solid var(--rt-line);
}
.tjc-rt-qa {
	border-bottom: 1px solid var(--rt-line);
	scroll-margin-top: var(--rt-anchor-top);
}
.tjc-rt-qa > summary {
	position: relative;
	padding: 16px 46px 16px 0;
	cursor: pointer;
	color: var(--rt-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	list-style: none;          /* 干掉默认三角 */
	transition: color .15s ease;
}
.tjc-rt-qa > summary::-webkit-details-marker { display: none; }
.tjc-rt-qa > summary:hover { color: var(--rt-accent-t); }
.tjc-rt-qa > summary:focus-visible {
	outline: 2px solid var(--rt-accent);
	outline-offset: 2px;
}

.tjc-rt-qa > summary::after {      /* 横线，始终在 */
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 14px;
	height: 2px;
	margin-top: -1px;
	background: var(--rt-accent);
}
.tjc-rt-qa > summary::before {     /* 竖线，展开时转掉 → 变成减号 */
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 2px;
	height: 14px;
	margin-top: -7px;
	background: var(--rt-accent);
	transition: transform .2s ease, opacity .2s ease;
}
.tjc-rt-qa[open] > summary::before {
	transform: rotate(90deg);
	opacity: 0;
}

.tjc-rt-qa-a { padding: 0 0 18px; }
.tjc-rt-qa-a > *:last-child { margin-bottom: 0; }

/* =========================================================================
   10. 数据表
   这类页面本质是「查」：多少天、多少钱、要什么单证。表格是主角，不是配角。
   右对齐由 md-to-html.py 决定是否兑现（长句列不兑现，见该脚本 sane_aligns）。
   ========================================================================= */

.tjc-rt-table {
	position: relative;
	margin: 0 0 36px;
	overflow-x: auto;
	border: 1px solid var(--rt-line);
	border-radius: var(--rt-radius);
	-webkit-overflow-scrolling: touch;
}
.tjc-rt-table table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 15.5px;
	line-height: 1.6;
}
.tjc-rt-table thead th {
	padding: 16px 18px;
	background: var(--rt-head);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: left;
	text-transform: uppercase;
}
.tjc-rt-table tbody td {
	padding: 16px 18px;
	border-top: 1px solid var(--rt-line-2);
	vertical-align: top;
	text-align: left;
}
.tjc-rt-table tbody tr:first-child td { border-top: 0; }
.tjc-rt-table tbody tr:nth-child(odd) td { background: #fff; }
.tjc-rt-table tbody tr:nth-child(even) td { background: #fafbfc; }
.tjc-rt-table tbody tr:hover td { background: #f0f7ff; }
.tjc-rt-table tbody td:first-child {
	color: var(--rt-head);
	font-weight: 600;
}
.tjc-rt-table .ta-right { text-align: right; }
.tjc-rt-table .ta-center { text-align: center; }

/* =========================================================================
   11. 响应式
   两栏的模块（defs / terms / jump）在窄屏一律收成单栏 —— 半个屏宽放不下一句话。
   ========================================================================= */

@media (min-width: 992px) {
	.tjc-rt-defs,
	.tjc-rt-terms { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
	.tjc-rt { font-size: 16px; }
	.tjc-rt h2 { margin-top: 50px; padding-top: 22px; font-size: 25px; }
	.tjc-rt h3 { margin-top: 30px; font-size: 19px; }
	.tjc-rt-lead { font-size: 17.5px; }
	.tjc-rt-jump { padding: 18px 20px; }
	.tjc-rt-jump ol { columns: 1; }
}

@media (max-width: 575px) {
	.tjc-rt h2 { margin-top: 44px; padding-top: 20px; font-size: 22.5px; }
	.tjc-rt h3 { font-size: 18px; }
	.tjc-rt-lead { font-size: 17px; }

	.tjc-rt-notice,
	.tjc-rt-ask { padding: 14px 16px; }
	.tjc-rt-note { padding: 14px 16px 14px 46px; }
	.tjc-rt-note::before { left: 15px; top: 16px; }
	.tjc-rt-def,
	.tjc-rt-calc { padding: 16px 17px; }
	.tjc-rt-jump { padding: 16px 18px; }

	/* 流程：编号圆点缩小，正文往左挪，别在小屏上把行宽压得太窄 */
	.tjc-rt-step { padding: 0 0 22px 44px; }
	.tjc-rt-step::after { width: 30px; height: 30px; font-size: 13px; line-height: 30px; }
	.tjc-rt-step::before { left: 14px; top: 34px; }
	.tjc-rt .tjc-rt-step-t { font-size: 17px; }

	.tjc-rt-reqs > li { padding-left: 40px; }
	.tjc-rt-reqs > li::before { width: 26px; height: 26px; font-size: 12.5px; line-height: 26px; }

	.tjc-rt-qa > summary { padding: 14px 40px 14px 0; font-size: 16px; }
}

/* 窄屏表格横滑提示。遮罩挂在不滚动的外层，所以稳稳停在右边缘；
   top 26px = 提示文字 line-height 18px + margin 8px，别盖住那行字。 */
@media (max-width: 767px) {
	.tjc-rt-table::before {
		content: "Swipe the table sideways to see all columns \2192";
		display: block;
		margin-bottom: 8px;
		color: var(--rt-muted);
		font-size: 12.5px;
		line-height: 18px;
	}
	.tjc-rt-table::after {
		content: "";
		position: absolute;
		top: 26px;
		right: 0;
		bottom: 0;
		width: 30px;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(0, 29, 103, 0) 0%, rgba(0, 29, 103, .16) 100%);
	}
}

/* 打印：折叠的问答要全部展开，否则打出来缺一半内容 */
@media print {
	.tjc-rt-qa-a { display: block !important; }
	.tjc-rt-qa > summary::before,
	.tjc-rt-qa > summary::after { display: none; }
}


/* =========================================================================
   12. 侧栏新模块（航线页专属）
   -------------------------------------------------------------------------
   卡片外框（.tjc-widget）、标题（.tjc-widget-title）、服务列表（.tjc-routes-list）
   都复用 tjc-article.css 已有的样式，这里只补三个新模块的内部件。

   **全部选择器带 .tjc-route 前缀** —— 这个 class 只出现在 page-route.php 的外层，
   所以这一节一条规则都落不到文章页/博客列表上。
   ========================================================================= */

/* -------- This Lane：时效速览（替换搜索框） -------- */
.tjc-route .tjc-lane-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tjc-route .tjc-lane-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--rt-line);
}
.tjc-route .tjc-lane-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.tjc-route .tjc-lane-k {
	flex: 0 1 auto;
	color: var(--rt-muted);
	font-size: 13.5px;
}
.tjc-route .tjc-lane-v {
	flex: 0 0 auto;
	color: var(--rt-head);
	font-size: 15px;
	font-weight: 750;
	text-align: right;
}
.tjc-route .tjc-lane-note {
	margin: 12px 0 0;
	padding-top: 11px;
	border-top: 1px dashed var(--rt-line);
	color: var(--rt-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

/* -------- Other <Region> Routes：同地区航线（替换专家卡） --------
   两列胶囊。做成方块而不是 .tjc-routes-list 那种带下划虚线的列表，是因为这里放的是
   6 个国名（短），而不是 6 个句子长的服务名 —— 方块排两列，占的高度只有列表的一半，
   吸顶列里才装得下后面的「相关服务」。 */
.tjc-route .tjc-sib-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tjc-route .tjc-sib-list a {
	display: block;
	height: 100%;
	padding: 8px 10px;
	border: 1px solid var(--rt-line);
	border-radius: 8px;
	background: var(--rt-soft);
	color: var(--rt-head);
	font-size: 13.5px;
	font-weight: 550;
	line-height: 1.32;
	text-decoration: none;
	overflow-wrap: break-word;   /* Bosnia and Herzegovina 这种长国名要能断行 */
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tjc-route .tjc-sib-list a:hover,
.tjc-route .tjc-sib-list a:focus-visible {
	border-color: var(--rt-accent);
	background: var(--rt-tint);
	color: var(--rt-accent-t);
}

/* 「All 45 Europe routes」那一行 —— 指向地区页，把层级串起来 */
.tjc-route .tjc-widget-more {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px dashed var(--rt-line);
	color: var(--rt-accent-t);
	font-size: 13.5px;
	font-weight: 650;
	text-decoration: none;
}
.tjc-route .tjc-widget-more:hover,
.tjc-route .tjc-widget-more:focus-visible {
	color: var(--rt-accent);
	text-decoration: underline;
}
.tjc-route .tjc-widget-more i { font-size: 12px; }

/* -------- 联系方式压缩条（专家卡的替代品） -------- */
.tjc-route .tjc-lane-contact {
	margin: 2px 0 0;
	color: var(--rt-muted);
	font-size: 13px;
	line-height: 1.75;
	text-align: center;
}
.tjc-route .tjc-lane-contact a {
	color: var(--rt-head);
	font-weight: 600;
	text-decoration: none;
}
.tjc-route .tjc-lane-contact a:hover,
.tjc-route .tjc-lane-contact a:focus-visible {
	color: var(--rt-accent-t);
	text-decoration: underline;
}
.tjc-route .tjc-lane-contact-sep { margin: 0 7px; color: #b8c2d4; }

/* 窄屏侧栏在正文下方全宽显示，国名胶囊可以放三列 */
@media (max-width: 991px) and (min-width: 576px) {
	.tjc-route .tjc-sib-list { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================================
   13. Hero 的两个动作：主次分明
   -------------------------------------------------------------------------
   改之前是「实心橙按钮 + 白色描边按钮」。描边按钮在深色 Hero 上和实心按钮的视觉
   份量几乎相等，于是第一屏同时在说两句话：「来这里读指南」和「来这里询价」。
   对内容页没问题，对**商业路线页**不对 —— 这两个动作的优先级本来就不该平等。

   现在的分工：
     主动作  实心橙按钮，字号和内边距都放大一档，文案说清是哪条航线的报价
             （「Get a China to UK Shipping Quote」，由 tjc_route_quote_label()
              从页面标题推出，226 个页面不用逐页填）
     次动作  降成一条文字链 + 小箭头，不再是按钮

   写在本文件而不是 tjc-service.css，是因为 tjc-service.css 那 7 个服务页也在用
   .tjc-btn-ghost，动它会牵连服务页。这里所有选择器都带 .tjc-service--route，
   只作用于航线页。
   ========================================================================= */

.tjc-service--route .tjc-route-cta {
	align-items: center;
	gap: 12px 26px;
	margin-top: 30px;
}

/* -------- 主动作 -------- */
.tjc-service--route .tjc-route-cta-main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 460px;             /* 长国名（United Arab Emirates）换行后不要拉太宽 */
	padding: 17px 34px;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;            /* .tjc-btn 基础是 1，文案换行时会挤在一起 */
	letter-spacing: -.005em;
	text-align: center;
	white-space: normal;
	box-shadow: 0 10px 26px rgba(255, 94, 20, .34);
}
.tjc-service--route .tjc-route-cta-main:hover {
	box-shadow: 0 14px 32px rgba(255, 94, 20, .42);
}

/* -------- 次动作：文字链，不是按钮 -------- */
.tjc-service--route .tjc-route-cta-alt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, .88);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .38);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color .15s ease, text-decoration-color .15s ease;
}
.tjc-service--route .tjc-route-cta-alt:hover,
.tjc-service--route .tjc-route-cta-alt:focus-visible {
	color: #fff;
	text-decoration-color: #fff;
}
.tjc-service--route .tjc-route-cta-alt i {
	font-size: 13px;
	color: var(--rt-accent);      /* 唯一的橙色点，把它和主动作系在一起 */
}

@media (max-width: 575px) {
	/* 手机上主动作占满整行 —— 一屏只剩一个明确的动作，层级最清楚 */
	.tjc-service--route .tjc-route-cta { gap: 6px; }
	.tjc-service--route .tjc-route-cta-main {
		width: 100%;
		max-width: none;
		padding: 16px 22px;
		font-size: 16px;
	}
	/* 文字链没有 .tjc-btn，拿不到那条 44px 最小点击尺寸的规则，这里自己补 */
	.tjc-service--route .tjc-route-cta-alt {
		width: 100%;
		min-height: 44px;
		justify-content: center;
	}
}