/* ==========================================================================
   Astra Steel Child —— 钢材外贸站样式
   工业风冷色系。主色与字体交给 Astra 的全局设置，这里只补它管不到的部分：
   规格表、询盘按钮、价格前缀、吸顶导航兜底。
   ========================================================================== */

:root {
	--steel-navy: #16324f;
	--steel-navy-dark: #0e2338;
	--steel-accent: #d9480f;
	--steel-accent-dark: #b93a0b;
	--steel-text: #1f2933;
	--steel-muted: #5c6b7a;
	--steel-border: #d8dee4;
	--steel-surface: #ffffff;
	--steel-surface-alt: #f4f6f8;
	--steel-radius: 4px;
}

/* --------------------------------------------------------------------------
   1. 吸顶导航兜底
   Astra 免费版没有吸顶页眉（Pro 才有），这里用 CSS 实现。
   若日后买了 Pro 并在自定义里开了吸顶，请删掉这一段以免冲突。
   -------------------------------------------------------------------------- */

.site-header .ast-primary-header-bar,
.ast-primary-header-bar {
	position: sticky;
	top: 0;
	z-index: 99;
}

/* WordPress 后台管理条会把吸顶导航顶下去，跟着偏移 */
body.admin-bar .ast-primary-header-bar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ast-primary-header-bar {
		top: 46px;
	}
}

/* --------------------------------------------------------------------------
   2. 兜底隐藏购物车图标
   正确做法是在「自定义 → 页眉构建器」里去掉 Cart 元素（见 docs/03）。
   这里再补一道，防止误操作或升级后重新冒出来。
   -------------------------------------------------------------------------- */

.ast-site-header-cart,
.ast-header-woo-cart,
.ast-mobile-header-wrap .ast-site-header-cart {
	display: none !important;
}

/* --------------------------------------------------------------------------
   3. 参考价
   价格不走 WooCommerce 价格字段（它只收纯数字），而是渲染 _steel_price_note
   里的完整文本，例如「US $520 - 560 / ton FOB Tianjin」。
   前缀写「Reference price:」是为了避免买家把参考价当成最终成交价。
   -------------------------------------------------------------------------- */

.steel-price {
	margin: 0 0 18px;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--steel-navy);
}

.steel-price-prefix {
	display: block;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--steel-muted);
}

.steel-price-value {
	font-size: 1.25rem;
}

/* 列表页的价格：小一号，不抢产品标题的视觉权重 */
.woocommerce ul.products li.product .steel-loop-price {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--steel-muted);
}

/* --------------------------------------------------------------------------
   4. 询盘按钮
   占据原「加入购物车」的位置，视觉上要比普通按钮更醒目 ——
   它是这个站唯一的转化入口。
   -------------------------------------------------------------------------- */

.steel-inquiry-cta {
	margin: 24px 0 8px;
}

.steel-inquiry-btn {
	display: inline-block;
	padding: 15px 34px;
	background: var(--steel-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: var(--steel-radius);
	transition: background-color 0.18s ease;
}

.steel-inquiry-btn:hover,
.steel-inquiry-btn:focus {
	background: var(--steel-accent-dark);
	color: #fff;
	text-decoration: none;
}

.steel-inquiry-hint {
	margin: 10px 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--steel-muted);
}

/* 询盘页顶部的「你正在咨询」提示 */
.steel-inquiry-context {
	margin: 0 0 20px;
	padding: 12px 16px;
	background: var(--steel-surface-alt);
	border-left: 3px solid var(--steel-accent);
	font-size: 0.95rem;
	color: var(--steel-text);
}

/* --------------------------------------------------------------------------
   5. 产品规格表
   必须渲染成真正的 HTML 表格 —— Google 与 AI 引擎靠它读取参数，
   图片或 PDF 形式的规格表读不到。
   -------------------------------------------------------------------------- */

.steel-specs {
	margin: 28px 0;
}

.steel-specs__title {
	margin: 0 0 12px;
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--steel-navy);
}

.steel-specs__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 1px solid var(--steel-border);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.steel-specs__table th,
.steel-specs__table td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--steel-border);
}

.steel-specs__table tr:last-child th,
.steel-specs__table tr:last-child td {
	border-bottom: 0;
}

.steel-specs__table th {
	width: 34%;
	background: var(--steel-surface-alt);
	font-weight: 600;
	color: var(--steel-navy);
	white-space: nowrap;
}

.steel-specs__table td {
	color: var(--steel-text);
}

/* 窄屏：表格改为上下堆叠，避免横向挤压后难以阅读 */
@media screen and (max-width: 544px) {
	.steel-specs__table,
	.steel-specs__table tbody,
	.steel-specs__table tr,
	.steel-specs__table th,
	.steel-specs__table td {
		display: block;
		width: 100%;
	}

	.steel-specs__table th {
		padding-bottom: 4px;
		border-bottom: 0;
		background: transparent;
	}

	.steel-specs__table td {
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   6. 产品列表卡片
   目录模式下没有加购按钮，卡片底部容易显得空，这里给标题一点强调。
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--steel-navy);
}

.woocommerce ul.products li.product {
	border: 1px solid var(--steel-border);
	border-radius: var(--steel-radius);
	background: var(--steel-surface);
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.woocommerce ul.products li.product:hover {
	box-shadow: 0 6px 20px rgba(22, 50, 79, 0.12);
	transform: translateY(-2px);
}

/* 目录模式下卡片的 padding 需要补回来（Astra 原本靠加购按钮撑开） */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	padding: 0 16px 16px;
}

/* --------------------------------------------------------------------------
   7. 页面内容里的表格（标准对照表、参数表等）
   导入的内容里会有大量 Markdown 表格，统一样式。
   -------------------------------------------------------------------------- */

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 0.9375rem;
}

.entry-content table th,
.entry-content table td {
	padding: 10px 13px;
	border: 1px solid var(--steel-border);
	text-align: left;
	vertical-align: top;
}

.entry-content table th {
	background: var(--steel-surface-alt);
	font-weight: 600;
	color: var(--steel-navy);
}

/* 宽表格在窄屏上允许横向滚动，而不是把整页撑破 */
.entry-content {
	overflow-wrap: break-word;
}

@media screen and (max-width: 768px) {
	.entry-content table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   8. 列表卡片上的询盘按钮
   商店页/分类页/相关产品卡片里的按钮（由 inc/inquiry.php 的
   woocommerce_loop_add_to_cart_link 过滤器生成）。
   视觉上比产品页主按钮轻一点，但同一色系。
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .steel-loop-inquiry {
	display: inline-block;
	margin-top: 10px;
	padding: 9px 18px;
	background: var(--steel-accent);
	border: 0;
	border-radius: var(--steel-radius);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.woocommerce ul.products li.product .steel-loop-inquiry:hover,
.woocommerce ul.products li.product .steel-loop-inquiry:focus {
	background: var(--steel-accent-dark);
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   9. 页脚的产品线品类树
   由 inc/footer-lines.php 挂在 astra_footer_before 上输出 ——
   Astra 免费版的页脚构建器放不下这个（Footer Menu 元素被 Pro 限制、
   页脚小工具区不在布局里），所以子主题自己渲染。
   -------------------------------------------------------------------------- */

.steel-footer-lines {
	padding: 44px 0 36px;
	background: var(--steel-navy);
}

.steel-footer-lines__title {
	margin: 0 0 18px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.steel-footer-lines__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.steel-footer-lines__list li {
	margin: 0;
}

.steel-footer-lines__list a {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.9375rem;
	line-height: 1.5;
	text-decoration: none;
}

.steel-footer-lines__list a:hover,
.steel-footer-lines__list a:focus {
	color: #fff;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   10. 首页版块的排版修正
   这几处是实测发现的：深色整屏里的文字沿用了正文色（深灰压深蓝，读不清）、
   按钮用了主题默认蓝而不是我们的工业橙、静态首页多显示了一个「Home」标题。
   -------------------------------------------------------------------------- */

/* 静态首页不显示页面标题 —— WordPress 默认会把「Home」当成 H1 打在首屏上方。
   body.home 是首页，body.blog 是文章列表页（那个标题要留着），所以只影响首页。 */
.home .entry-header {
	display: none;
}

/* 深色整屏（首屏、询盘引导）里的文字必须是浅色。
   区块默认继承正文色 #334155，压在 #16324f 上几乎读不出来。

   选择器为什么要写得这么长：Astra 有一条
     body .wp-block-cover:not(.has-text-color.has-link-color) p { color: var(--ast-global-color-3) }
   权重 0,3,2。只写 `.wp-block-cover ... p`（0,2,1）是压不过它的 ——
   实测副标题仍然是深灰，肉眼几乎看不见。这里带上 body 并把 :not() 一并保留，
   权重升到 0,4,2 才真正生效；保留 :not() 是为了让「作者在编辑器里显式设了文字色」
   的区块仍然优先。 */
body .wp-block-cover:not(.has-text-color.has-link-color) .wp-block-cover__inner-container p {
	color: rgba(255, 255, 255, 0.86);
}

/* 区块标题：Astra 没有针对 cover 内 h1–h6 的竞争规则，普通写法即可。 */
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container h2,
.wp-block-cover .wp-block-cover__inner-container h3 {
	color: #fff;
}

/* 区块按钮统一成工业橙，和产品卡上的询盘按钮一致。
   Astra 的 `.wp-block-button .wp-block-button__link`（0,2,0）会盖掉
   单写 `.wp-block-button__link`（0,1,0）的规则，按钮就一直显示主题默认蓝。
   前面加 body 把权重提到 0,2,1 才压得住。

   注意：这里会覆盖编辑器里给区块按钮选的调色板颜色 —— 本站只用一个主色按钮，
   属于有意为之。若以后要让作者自选按钮色，删掉这条规则即可。
   内容里若写了内联 style（生成器新版会写 background-color:#d9480f），
   内联优先级更高，仍然以内容为准。 */
body .wp-block-button .wp-block-button__link {
	background-color: var(--steel-accent);
	border-radius: var(--steel-radius);
	font-weight: 600;
	transition: background-color 0.18s ease;
}

body .wp-block-button .wp-block-button__link:hover,
body .wp-block-button .wp-block-button__link:focus {
	background-color: var(--steel-accent-dark);
	color: #fff;
}

/* --------------------------------------------------------------------------
   11. 页脚产品线改成网格
   原来用 flex-wrap，14 项会排成「9 + 5」这种参差不齐的两行，行距也偏挤。
   改成自动填充的等宽网格，每行整整齐齐。
   -------------------------------------------------------------------------- */

.steel-footer-lines__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px 28px;
}

/* --------------------------------------------------------------------------
   12. 产品图占位
   还没有真实产品图时，卡片上的图片区是一片空白，看着像坏了。
   给一个浅灰底 + 居中提示，读起来是「图待补」而不是「图挂了」。
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap:empty,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .woocommerce-loop-product__link img[src*="placeholder"] {
	background: var(--steel-surface-alt);
}

/* --------------------------------------------------------------------------
   13. 全宽深色区块的内层留白
   首屏和结尾询盘两块 cover 是 alignfull（通栏），底色铺满整屏是对的，
   但区块的内层容器默认 padding 为 0 —— 实测 1440px 视口下正文只离屏幕左边
   16px，而页眉容器有 92px 外边距，两者对不齐，文字看着像贴在屏幕边上。

   按 Astra 的容器宽度收进来：站点内容宽度 1200 + 左右各 20px 内边距 = 1240，
   与页眉容器同宽同位置，文字起点也就和页眉 Logo 对齐了。
   若以后在 Astra 里改了站点内容宽度，这里的 1240 要跟着改。
   -------------------------------------------------------------------------- */

.entry-content .wp-block-cover.alignfull > .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* --------------------------------------------------------------------------
   14. 正文末尾的询盘引导
   由 inc/content-cta.php 追加到博客文章与内容页正文之后。
   用一条上分隔线加留白和正文分开，不铺底色 —— 文章底部突然出现一个色块
   看着像广告位；按钮本身已经是橙色，视觉重心够了。
   -------------------------------------------------------------------------- */

.steel-content-cta {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--steel-border);
}

.steel-content-cta__title {
	margin: 0 0 12px;
	font-size: 1.375rem;
	line-height: 1.3;
}

.steel-content-cta__text {
	margin: 0 0 20px;
	max-width: 62ch;
	color: var(--steel-muted);
}

.steel-content-cta__action {
	margin: 0;
}