/* ==========================================================================
 * Font Family — Innovacera V3
 * 设计基线: docs/plan/font-family/FINAL.md
 * 三栈:
 *   Outfit             → 标题 / 导航 / 按钮 / CTA
 *   Inter              → 正文 / 表单 / UI
 *   DIN Alternate Bold → 数字信号（仅用于明确标记的指标，非所有数字）
 * 多语言: 规则全局适用，CJK fallback 到苹方 / 雅黑 / 系统字
 * ========================================================================== */

@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit/Outfit-wght.woff2") format("woff2"),
		url("../fonts/outfit/Outfit-wght.woff") format("woff"),
		url("../fonts/outfit/Outfit-wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Inter — variable, Latin + Latin-ext 两个子集 */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter/inter-variable-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter/inter-variable-latin-ext.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
		U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "DIN Alternate Bold";
	src: url("../fonts/din/490a4d8d3a78b2c0ba5e434c76234790.woff2") format("woff2"),
		url("../fonts/din/490a4d8d3a78b2c0ba5e434c76234790.woff") format("woff"),
		url("../fonts/din/490a4d8d3a78b2c0ba5e434c76234790.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DIN Black";
	src: url("../fonts/din/DIN-Black.woff2") format("woff2"),
		url("../fonts/din/DIN-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* DIN Condensed Bold 已移除（FINAL.md §0.8）。装饰小标识改走 Outfit 700 + letter-spacing */

:root {
	--in-font-heading: "Outfit", "Inter", system-ui, "Helvetica Neue", Helvetica,
		Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
	--in-font-body: "Inter", system-ui, "Helvetica Neue", Helvetica, Arial,
		"PingFang SC", "Microsoft YaHei", sans-serif;
	--in-font-digital: "DIN Alternate Bold", "Outfit", "Inter", sans-serif;
}

/* ==========================================================================
 * Common Image Placeholder
 * 用于所有图片缺失但需要保持版面稳定的卡片 / 媒体容器。
 * 用法:
 *   <span class="in-img-placeholder"><span>INNOVACERA</span></span>
 *   <span class="in-img-placeholder in-img-placeholder--ratio-16x10"><span>INNOVACERA</span></span>
 * ========================================================================== */

.in-img-placeholder,
.in-cs-noimg {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	min-height: inherit;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(135deg, #eaf1f8 0%, #d7e3ee 100%);
	color: #87a5bb;
	font-family: var(--in-font-heading);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.in-img-placeholder:before,
.in-cs-noimg:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.7), transparent 26rem),
		linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.in-img-placeholder > span,
.in-cs-noimg > span {
	position: relative;
	z-index: 1;
}

.in-img-placeholder--ratio-16x10 {
	aspect-ratio: 16 / 10;
	min-height: 12rem;
}

/* ==========================================================================
 * Common Link Button
 * 站点通用双段链接按钮：文字区 + 方形箭头区。
 * 用法:
 *   echo innovacera_v3_link_button_html('/url', 'Learn More');
 * ========================================================================== */

.in-site-link-button {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	min-height: 3.75rem;
	text-decoration: none;
	color: var(--cz-primary, #0068b7);
}

.in-site-link-button .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.75rem;
	line-height: 1.2;
}

.in-site-link-button .btn-group-content {
	position: relative;
	z-index: 1;
	padding: 0.95rem 1.45rem;
	color: var(--cz-primary, #0068b7);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0;
	white-space: normal;
	text-align: left;
	transition: color 0.3s ease;
}

/* .in-site-link-button .btn-group-content {
	position: relative;
	z-index: 1;
	padding: 0.95rem 1.45rem;
	border-color: var(--cz-primary, #0068b7) !important;
	color: var(--cz-primary, #0068b7);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0;
	white-space: normal;
	text-align: left;
	transition: color 0.3s ease;
} */

/* .in-site-link-button .btn-group-content:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cz-primary, #0068b7);
	transform: translateX(100%);
	transition: transform 0.45s ease;
} */

.in-site-link-button .btn-squ-arrow {
	width: 3.75rem;
	min-width: 3.75rem;
	max-width: 3.75rem;
	border-color: var(--cz-primary, #0068b7) !important;
	background: var(--cz-primary, #0068b7) !important;
	color: #fff;
	font-size: 1.45rem;
}

.in-site-link-button .btn-squ-arrow .ci-arrow-up-right {
	display: inline-block;
	transform-origin: center;
	transition: transform 0.45s ease;
}

.in-site-link-button:hover .btn-group-content,
.in-site-link-button:focus-visible .btn-group-content {
	color: #fff;
}

.in-site-link-button:hover .btn-group-content:before,
.in-site-link-button:focus-visible .btn-group-content:before {
	transform: translateX(0);
}

.in-site-link-button:hover .btn-squ-arrow .ci-arrow-up-right,
.in-site-link-button:focus-visible .btn-squ-arrow .ci-arrow-up-right {
	transform: rotate(45deg);
}

.in-site-link-button--light .btn-group-content {
	border-color: rgba(255, 255, 255, 0.72) !important;
	color: #fff;
}

.in-site-link-button--light .btn-group-content:before {
	background: #fff;
}

.in-site-link-button--light .btn-squ-arrow {
	border-color: #fff !important;
	background: #fff !important;
	color: var(--cz-primary, #0068b7);
}

.in-site-link-button--light:hover .btn-group-content,
.in-site-link-button--light:focus-visible .btn-group-content {
	color: var(--cz-primary, #0068b7);
}

.in-site-link-button--dark-surface .btn-group-content,
.in-site-link-button--dark-surface:hover .btn-group-content,
.in-site-link-button--dark-surface:focus-visible .btn-group-content {
	color: #fff !important;
}

.in-site-link-button--solid-dark {
	color: #111827;
}

.in-site-link-button--solid-dark .btn-group-content {
	border-color: #111827 !important;
	background: #111827 !important;
	color: #fff;
}

.in-site-link-button--solid-dark .btn-group-content:before {
	background: var(--cz-primary, #0068b7);
	transform: translateX(calc(100% + 1px));
}

.in-site-link-button--solid-dark .btn-squ-arrow {
	border-color: var(--cz-primary, #0068b7) !important;
	background: var(--cz-primary, #0068b7) !important;
	color: #fff;
}

.in-site-link-button--solid-dark:hover .btn-squ-arrow,
.in-site-link-button--solid-dark:focus-visible .btn-squ-arrow {
	border-color: var(--cz-primary, #0068b7) !important;
	background: var(--cz-primary, #0068b7) !important;
}

/* ----------------------------------------------------------------------------
 * 选择器覆盖策略（详见 FINAL.md §13）:
 * saas-core /v4/front/css/main.min.css 用 body.en / html[lang=en|en-US] 前缀
 * 声明 font-family，特异性高于纯 h1/body 选择器。本主题镜像同特异性 + later cascade
 * 来夺回控制权。非英文页面（中文/德文/日文等 WPML 语言）由纯选择器接管。
 * ---------------------------------------------------------------------------- */

/* 正文 / 表单 / UI — Inter，覆盖所有 WPML 语言 */
body,
button,
input,
select,
textarea,
body.en,
body.en button,
body.en input,
body.en select,
body.en textarea,
html[lang="en"] body,
html[lang="en-US"] body,
html[lang="en"] button,
html[lang="en-US"] button,
html[lang="en"] input,
html[lang="en-US"] input,
html[lang="en"] select,
html[lang="en-US"] select,
html[lang="en"] textarea,
html[lang="en-US"] textarea {
	font-family: var(--in-font-body);
}

/* 标题 / 导航 / 按钮 / CTA — Outfit */
h1, h2, h3, h4, h5, h6,
.nav-link,
.btn,
.page-header-title,
.entry-title,
.entry-m-header,
.entry-s-header,
body.en h1, body.en h2, body.en h3, body.en h4, body.en h5, body.en h6,
body.en .nav-link,
body.en .btn,
body.en .page-header-title,
body.en .entry-title,
body.en .entry-m-header,
body.en .entry-s-header,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en-US"] h1, html[lang="en-US"] h2, html[lang="en-US"] h3,
html[lang="en-US"] h4, html[lang="en-US"] h5, html[lang="en-US"] h6,
html[lang="en"] .nav-link, html[lang="en-US"] .nav-link,
html[lang="en"] .btn, html[lang="en-US"] .btn,
html[lang="en"] .page-header-title, html[lang="en-US"] .page-header-title,
html[lang="en"] .entry-title, html[lang="en-US"] .entry-title,
html[lang="en"] .entry-m-header, html[lang="en-US"] .entry-m-header,
html[lang="en"] .entry-s-header, html[lang="en-US"] .entry-s-header {
	font-family: var(--in-font-heading);
}

/* #header 导航 — saas-core 用 #header .navbar-nav .nav-link (特异性 0,2,1)，必须同款 */
#header .navbar-nav .nav-link {
	font-family: var(--in-font-heading);
	font-weight: 500;
}

/* 数字信号 — 仅用于明确标记的指标 / 计数 / 认证编号 / 关键规格
 * 注：saas-core 已用 body.en / lang=en 前缀写过 !important 规则，会读 var(--in-font-digital)；
 * 因为本文件在 :root 覆写了该变量值（去掉 DIN Condensed），结果仍然是新值 */
.in-number-counter-wrap .nums,
.in-core-strengths .desc-tip,
.figure-number,
.stroke-text,
.num-date,
.num-advantages,
.num-devices,
.num-workshops,
.timeline-date,
.application-count {
	font-family: var(--in-font-digital) !important;
	font-variant-numeric: lining-nums tabular-nums;
}

/* 首页核心优势的单一数据指标使用 DIN Black，不影响其他数字信号。 */
body.en .in-core-strengths .in-number-counter-wrap .nums {
	font-family: "DIN Black", "DIN Alternate Bold", "Outfit", "Inter", sans-serif !important;
	/* font-weight: 900; */
}

/* 装饰小标识 (label idiom) — Outfit 700 + 字距 + 大写
 * 字距纪律: letter-spacing 只允许在此类位置使用
 * saas-core 没有为这个内层 span 写过规则，本选择器无 specificity 冲突 */
.in-core-strengths .desc-tip span {
	font-family: var(--in-font-heading);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ==========================================================================
 * Navbar & Header
 * ========================================================================== */

.navbar-brand,
.navbar-brand > img {
	width: auto !important;
	height: 2.4rem;
	max-height: 2.4rem;
	padding: 0;
}

.header-white-nav-links:not(.bg-white):not(.js-header-fix-moment) .nav-link {
	color: rgba(255, 255, 255, 1);
}

.header-section {
	transition: background-color 0.5s ease-in-out;
}

@media (min-width: 992px) {
	.header-white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment)
		.nav-link {
		color: rgba(255, 255, 255, 0.85);
	}

	.header-main .navbar-brand img {
		width: 7rem;
	}
	.js-header-fix-moment .header-main .navbar-brand img {
		width: 6rem;
	}
	#header.js-header-fix-moment .header-main .navbar-body {
		background-color: transparent !important;
	}
	.header-bg-transparent-lg:not(.js-header-fix-moment) .header-section:hover {
		background-color: rgba(0, 0, 0, 0.7);
	}
}

@media (min-width: 1200px) {
	#header .navbar-expand-lg .navbar-nav .nav-link {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* v3 主导航的 desktop 动画 CSS 统一在 includes/tpl/header/v4/layout-6.php
   的内联 <style> 里维护；此处不再重复（本文件未被任何页面加载）。 */

#header .header-main .navbar-body .btn-pill.btn-primary {
	background-color: #205aa1;
	border-color: #205aa1;
}

#header.js-header-fix-moment .header-main,
.bg-white {
	background-color: #fff !important;
}

#header.js-header-fix-moment .navbar-dark .navbar-brand,
#header.js-header-fix-moment .navbar-dark .navbar-nav .nav-link {
	color: #666;
}

.header_navbar-brand-text {
	font-weight: 100;
	font-size: 2rem;
}

.header-change-appearance-md .header_navbar-brand-text {
	color: #fff;
}

.js-header-change-moment .header_navbar-brand-text {
	color: #128ae6;
}

.page-header-title {
	text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0.4) !important;
}

.entry-s-header {
	color: rgba(47, 56, 84, 0.5) !important;
}

@media (min-width: 992px) and (min-width: 992px) {
	.header-bg-transparent-lg:not(.js-header-fix-moment) .header-section {
		background-color: rgba(0, 0, 0, 0.5);
	}
}

/* ==========================================================================
 * Social icons (RSS overridden to TikTok)
 * ========================================================================== */

.et-social-rss a.icon:before {
	opacity: 0;
}
.et-social-rss a.icon:after {
	content: "";
	display: block;
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	margin-left: -9px;
	background-image: url(/static/i/tiktok.png);
	background-size: cover;
}

/* ==========================================================================
 * WooCommerce mobile tweaks
 * ========================================================================== */

@media (max-width: 479px) {
	body.woocommerce-page ul.products li.product:nth-child(n) {
		width: 48% !important;
	}
}

/* ==========================================================================
 * CTA band: Request a sample — 产品详情页（include /v4/post-detail-6.php）
 * 单页单装饰原则：仅出现一次，作内容→询盘的转化桥
 * SVG: /static/i/common/circle-bg.svg 作为 :after 背景水印
 * 模式参照: 首页 .in-core-strengths:after
 * ========================================================================== */

.in-cta-sample-band {
	position: relative;
	overflow: hidden;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.in-cta-sample-band:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: url(/static/i/common/circle-bg.svg) no-repeat;
	/* 大小: 22rem ≈ 352px (原 native ~80-120px → 显著放大)
	 * 锚点: 右下角 + 右溢出 4rem + 下溢出 8rem
	 * 不碰右上角的关键: image_height(22) - bottom_bleed(8) = 14 < 通常带高 16，保证 image_top 在 band 顶下方 */
	background-size: 22rem auto;
	background-position: right -4rem bottom -8rem;
	opacity: 0.04;
	display: block;
	pointer-events: none;
}

.in-cta-sample-band .container {
	position: relative;
	z-index: 1;
}

.in-cta-sample-band h2,
.in-cta-sample-band p {
	color: #fff;
}

.in-cta-sample-band__lead {
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 1.05rem;
}

.in-cta-sample-band__button {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	min-height: 3.75rem;
}

.in-cta-sample-band__button .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.75rem;
	line-height: 1.2;
}

.in-cta-sample-band__button .btn-group-content {
	position: relative;
	z-index: 1;
	padding: 0.95rem 1.7rem;
	border-color: var(--cz-primary, #0068b7) !important;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0;
	transition: color 0.3s ease;
}

.in-cta-sample-band__button .btn-group-content:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cz-primary, #0068b7);
	transform: translateX(100%);
	transition: transform 0.45s ease;
}

.in-cta-sample-band__button .btn-squ-arrow {
	width: 3.75rem;
	min-width: 3.75rem;
	max-width: 3.75rem;
	border-color: var(--cz-primary, #0068b7) !important;
	background: var(--cz-primary, #0068b7) !important;
	color: #fff;
	font-size: 1.45rem;
}

.in-cta-sample-band__button .ci-arrow-up-right {
	transition: transform 0.45s ease;
}

.in-cta-sample-band__button:hover .btn-group-content,
.in-cta-sample-band__button:focus-visible .btn-group-content {
	color: #fff;
}

.in-cta-sample-band__button:hover .btn-group-content:before,
.in-cta-sample-band__button:focus-visible .btn-group-content:before {
	transform: translateX(0);
}

.in-cta-sample-band__button:hover .ci-arrow-up-right,
.in-cta-sample-band__button:focus-visible .ci-arrow-up-right {
	transform: rotate(45deg);
}

@media (max-width: 767px) {
	.in-cta-sample-band {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.in-cta-sample-band:after {
		background-size: 14rem auto;
		background-position: right -3rem bottom -5rem;
	}
	.in-cta-sample-band__lead {
		font-size: 1rem;
	}
	.in-cta-sample-band__button {
		width: 100%;
		max-width: 24rem;
	}
	.in-cta-sample-band__button .btn-group-content {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
 * 材料分类页 (.material-detail-body) 水印
 * SVG: /static/i/common/footer-bg-asset.svg (生命之花，横向几何纹理)
 * 位置: 顶部右上 + 右溢出 + 上溢出 — 进入 body 时背景"涌现"工业纹理
 * 与产品详情 (.in-cta-sample-band) 形态不同：那里是底部右下，这里是顶部右上
 * ========================================================================== */

.material-detail-body {
	position: relative;
	overflow: hidden;
}

.material-detail-body:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 104, 183, 0.028);
	-webkit-mask: url(/static/i/common/footer-bg-asset.svg) no-repeat;
	mask: url(/static/i/common/footer-bg-asset.svg) no-repeat;
	background-size: 120rem auto;
	-webkit-mask-size: 120rem auto;
	mask-size: 120rem auto;
	background-position: right -49rem top -23rem;
	-webkit-mask-position: right -49rem top -23rem;
	mask-position: right -49rem top -23rem;
	opacity: 1;
	display: block;
	pointer-events: none;
}

.material-detail-body > .container {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.material-detail-body:before {
		background-size: 78rem auto;
		-webkit-mask-size: 78rem auto;
		mask-size: 78rem auto;
		background-position: right -34rem top -15rem;
		-webkit-mask-position: right -34rem top -15rem;
		mask-position: right -34rem top -15rem;
	}
}

/* ==========================================================================
 * 公司简介 timeline 水印 (.in-timeline-content)
 * SVG: /static/i/common/footer-bg-asset.svg (生命之花)
 * 位置: 左下锚点 + 上溢出（与材料分类的右上锚点完全镜像，避免视觉重复）
 * 语义: 时间长河 + 几何织物 = 工业传承
 * ========================================================================== */

.in-timeline-content {
	overflow: hidden;
}

.in-timeline-content:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url(/static/i/common/footer-bg-asset.svg) no-repeat;
	background-size: 60rem auto;
	background-position: left -8rem bottom 0;
	opacity: 0.04;
	display: block;
	pointer-events: none;
}

.in-timeline-content > .container,
.in-timeline-content > .timeline-wrapper {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.in-timeline-content:before {
		background-size: 36rem auto;
		background-position: left -4rem bottom 0;
	}
}