/*
Theme Name: ZZRS
Author: zheng
Description: 企业官网响应式 WordPress 主题，首页各板块文字与图片均可在后台可视化编辑。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zzrs
Tags: business, blog, custom-logo, custom-menu, featured-images, translation-ready, two-columns
*/

/* ==========================================================================
   1. WordPress 核心必需类
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999999;
}

.skip-link:focus {
	left: 6px;
	top: 7px;
}

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	margin-left: -80px;
	margin-right: -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-block-image figcaption,
.entry-content figcaption {
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.75;
	margin-top: 10px;
}

.sticky .posted-on {
	display: none;
}

.bypostauthor > .comment-body .comment-author {
	font-weight: 600;
}

/* ==========================================================================
   2. 后台编辑器与前台内容块的最小适配
   ========================================================================== */

.entry-content > * {
	margin-bottom: 24px;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid rgba(0, 0, 0, 0.12);
	padding: 10px 12px;
}

.entry-content ul,
.entry-content ol {
	padding-left: 22px;
}

.entry-content a {
	text-decoration: underline;
}

/* ==========================================================================
   3. 主题局部修正
   ========================================================================== */

img {
	max-width: 100%;
	height: auto;
}

.post-thumbnail img {
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	margin: 0 4px;
	border-radius: 50%;
	text-decoration: none;
}

.page-numbers.current {
	font-weight: 600;
}

.hero-area .hero-content h1 {
	overflow-wrap: break-word;
}

.zzrs-empty-notice {
	padding: 30px;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	text-align: center;
}

/* ==========================================================================
   4. 斜向滚动文字横幅（Promotion Brand）
   两条整幅横条各旋转 -2deg，
   上条渐变底向左滚动、下条深色底向右滚动，各 50s 无限循环。
   ========================================================================== */

body {
	overflow-x: hidden;
}

.promotion-brand-area {
	position: relative;
	z-index: 2;
	padding: 10px 0;
	margin: -20px 0 0;
}

.promotional-brand-one {
	transform: rotate(-2deg);
	margin: 0 -20px;
}

.promotional-brand-one:nth-child(2) {
	margin-top: -20px;
}

.brand-items {
	position: relative;
	display: flex;
	align-items: center;
	padding: 30px 0;
}

.brand-content {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: zzrs-slide-left 50s linear infinite;
	will-change: transform;
}

.promotional-brand-one:nth-child(2) .brand-content {
	animation-name: zzrs-slide-right;
}

.brand-content h2 {
	margin: 0 50px;
	font-size: 50px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	/* 主题全局 h2 是深色（#1F1F1F），横幅两条底色一深一浅，统一锁白字 */
	color: #fff;
}

.brand-content .item {
	position: relative;
}

.brand-content .item::after {
	position: absolute;
	right: -15px;
	top: 50%;
	content: "";
	height: 40px;
	width: 40px;
	background: url(assets/img/icons/star.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	transform: translateY(-50%);
}

@-webkit-keyframes zzrs-slide-left {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}

	100% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

@keyframes zzrs-slide-left {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}

	100% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

@-webkit-keyframes zzrs-slide-right {
	0% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
}

@keyframes zzrs-slide-right {
	0% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
}

@media (max-width: 1399px) {
	.brand-content h2 {
		font-size: 42px;
		margin: 0 40px;
	}
}

@media (max-width: 991px) {
	.brand-content h2 {
		font-size: 32px;
		margin: 0 30px;
	}

	.brand-content .item::after {
		height: 28px;
		width: 28px;
		right: -12px;
	}

	.brand-items {
		padding: 22px 0;
	}
}

@media (max-width: 575px) {
	.brand-content h2 {
		font-size: 22px;
		margin: 0 20px;
	}

	.brand-content .item::after {
		height: 20px;
		width: 20px;
		right: -9px;
	}

	.brand-items {
		padding: 16px 0;
	}

	.promotional-brand-one:nth-child(2) {
		margin-top: -12px;
	}
}

/* 用户偏好减弱动态效果时停用滚动，改为静态展示。 */
@media (prefers-reduced-motion: reduce) {
	.brand-content {
		animation: none;
	}
}

/* ==========================================================================
   5. 联系表单辅助
   ========================================================================== */

.zzrs-form-notice {
	padding: 14px 22px;
	border-radius: 50px;
	font-size: 15px;
	line-height: 1.6;
}

.zzrs-form-notice-success {
	background-color: rgba(46, 160, 67, 0.12);
	color: #1a7f37;
}

.zzrs-form-notice-error {
	background-color: rgba(207, 34, 46, 0.1);
	color: #cf222e;
}

/* 蜜罐字段：对真人不可见，仅用于拦截机器人提交。 */
.zzrs-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 6. 点击命中修复
 * ---------------------------------------------------------------------- */

/*
 * 标题里的链接默认是 inline，折成两行后包围盒是两段行盒的并集，
 * 中心点常常落在行间空白或短行的右侧空白处，点在那儿只命中 h3、不进链接
 * （实测：两行 284×26 + 60×26，并集中心落在行间空隙）。
 * 改成块级后整个标题区域都可点，视觉不变。
 */
.blog-card h3 > a,
.product-card .product-title h3 > a {
	display: block;
}

/*
 * 卡片高光遮罩（.img-hover:before）带 z-index:2，鼠标移入后这层
 * 斜向高光会盖在图片链接之上。结果是 mousedown 命中 .blog-img / .product-img
 * 容器、mouseup 命中 <img>，浏览器把 click 事件派发到两者最近的共同祖先，
 * 也就是 <a> 的父级容器 —— 表现为「鼠标放在文章图上点一下没反应」。
 *
 * 这层高光纯属装饰，一律不接收指针事件，点击照常穿透到下方的链接。
 */
.img-hover::before,
.img-hover-wrap::after {
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * 7. 商品详情
 * ---------------------------------------------------------------------- */

.zzrs-img-full {
	display: block;
	width: 100%;
}

/* 图集缩略图：一行三张，与主图同宽。 */
.zzrs-product-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.zzrs-product-thumbs li {
	width: calc((100% - 24px) / 3);
}

.zzrs-product-thumbs a {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

.zzrs-product-thumbs img {
	display: block;
	width: 100%;
	opacity: 0.72;
	transition: var(--transition);
}

.zzrs-product-thumbs a:hover img {
	opacity: 1;
}

/* 规格参数表：浅色底纹在明暗两套主题下都不会突兀。 */
.zzrs-spec-table {
	border-collapse: collapse;
	table-layout: fixed;
}

.zzrs-spec-table th,
.zzrs-spec-table td {
	padding: 14px 22px;
	border: 1px solid rgba(99, 102, 241, 0.14);
	font-size: 15px;
	line-height: 1.7;
	vertical-align: top;
	word-break: break-word;
}

.zzrs-spec-table th {
	width: 200px;
	background-color: rgba(99, 102, 241, 0.06);
	color: var(--titleColor);
	font-weight: 500;
	text-align: left;
}

.zzrs-spec-table td {
	color: var(--paraColor);
}

@media only screen and (max-width: 575px) {
	.zzrs-product-thumbs li {
		width: calc((100% - 12px) / 2);
	}

	.zzrs-spec-table th {
		width: 120px;
		padding: 12px 14px;
	}

	.zzrs-spec-table td {
		padding: 12px 14px;
	}
}