/**
 * 动画、交互补充与第三方样式适配
 *
 * @package Diqiu
 */

/* =========================================================================
   进场动画
   ========================================================================= */
/* 只有确认 JS 在跑（html 带 dq-js）才允许把内容藏起来等入场，
   否则禁用 JS / 脚本出错时页面会开天窗。 */
.dq-js .dq-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--dq-ease), transform 0.7s var(--dq-ease);
}

.dq-js .dq-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* 用户要求减少动态效果时不做入场，直接显示 */
@media (prefers-reduced-motion: reduce) {
	.dq-js .dq-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* 依次延迟，做出错落感 */
.dq-reveal--d1 { transition-delay: 0.08s; }
.dq-reveal--d2 { transition-delay: 0.16s; }
.dq-reveal--d3 { transition-delay: 0.24s; }
.dq-reveal--d4 { transition-delay: 0.32s; }
.dq-reveal--d5 { transition-delay: 0.40s; }
.dq-reveal--d6 { transition-delay: 0.48s; }

/* =========================================================================
   翻译插件（Fanyi2）语言切换器接入页头样式
   ========================================================================= */
.dq-header__lang .fanyi2-language-switcher,
.dq-header__lang .fanyi2-switcher {
	position: relative;
}

/* 页头入口保持轻量，避免插件默认的白色胶囊抢过主导航的视觉层级。 */
.dq-header__lang .fanyi2-switcher-current {
	min-height: 32px !important;
	padding: 5px 7px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.dq-header__lang .fanyi2-flag {
	display: none !important;
}

.dq-header__lang .fanyi2-lang-name,
.dq-header__lang .fanyi2-arrow {
	font-size: 13px !important;
}

/* 桌面端文案与参照站一致；移动端恢复短名称，给菜单按钮留足空间。 */
@media (min-width: 993px) {
	.dq-header__lang .fanyi2-lang-name {
		font-size: 0 !important;
	}

	.dq-header__lang .fanyi2-lang-name::after {
		content: "Language";
		font-size: 13px;
	}

	html[lang="en-US"] .dq-header__lang .fanyi2-lang-name::after,
	html[lang="en"] .dq-header__lang .fanyi2-lang-name::after {
		content: "Language (EN)";
	}

	html[lang="zh-CN"] .dq-header__lang .fanyi2-lang-name::after,
	html[lang="zh"] .dq-header__lang .fanyi2-lang-name::after {
		content: "Language (ZH)";
	}

	html[lang="zh-TW"] .dq-header__lang .fanyi2-lang-name::after {
		content: "Language (TW)";
	}

	.dq-header__lang .fanyi2-arrow {
		font-size: 9px !important;
	}
}

.dq-header__lang select {
	padding: 6px 8px;
	border: 1px solid var(--dq-line);
	background: transparent;
	border-radius: var(--dq-radius);
	cursor: pointer;
}

.dq-header__lang a {
	color: var(--dq-ink-2);
}

.dq-header__lang a:hover {
	color: var(--dq-primary);
}

/* 插件的浮动切换器在页头已有入口时隐藏，避免重复 */
.dq-header__lang ~ .fanyi2-floating-switcher {
	display: none;
}

/* 插件把胶囊背景写死成白色，深色模式下会白底白字，这里让它跟随主题 */
:root[data-theme="dark"] .dq-header__lang .fanyi2-switcher-current,
:root[data-theme="dark"] .dq-header__lang .fanyi2-switcher-dropdown {
	background: var(--dq-bg-alt) !important;
	border-color: var(--dq-line) !important;
	color: var(--dq-ink) !important;
}

:root[data-theme="dark"] .dq-header__lang .fanyi2-lang-name,
:root[data-theme="dark"] .dq-header__lang .fanyi2-lang-option,
:root[data-theme="dark"] .dq-header__lang .fanyi2-arrow {
	color: var(--dq-ink) !important;
}

:root[data-theme="dark"] .dq-header__lang .fanyi2-lang-option:hover {
	background: var(--dq-primary-soft) !important;
	color: var(--dq-primary) !important;
}

/* 导航菜单里的语言项，继承主题菜单样式即可 */
.dq-menu .fanyi2-lang-item > a {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* =========================================================================
   小工具
   ========================================================================= */
.widget {
	margin-bottom: 36px;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--dq-line);
}

.widget:last-child {
	border-bottom: 0;
}

.widget-title {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 600;
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	padding: 9px 0;
	border-bottom: 1px solid var(--dq-line-soft);
	font-size: 15px;
}

.widget li:last-child {
	border-bottom: 0;
}

.widget a:hover {
	color: var(--dq-primary);
}

.widget select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--dq-line);
}

/* 搜索小工具 */
.search-form {
	display: flex;
	gap: 8px;
}

.search-form label {
	flex: 1;
}

.search-form .search-field {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--dq-line);
	font-size: 15px;
}

.search-form .search-field:focus {
	outline: none;
	border-color: var(--dq-primary);
}

.search-form .search-submit {
	padding: 12px 22px;
	background: var(--dq-primary);
	color: #fff;
	border: 0;
	cursor: pointer;
	transition: background 0.3s var(--dq-ease);
}

.search-form .search-submit:hover {
	background: var(--dq-primary-2);
}

/* =========================================================================
   带侧栏的内页布局
   ========================================================================= */
.dq-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 60px;
	align-items: start;
}

@media (max-width: 992px) {
	.dq-with-sidebar {
		grid-template-columns: 1fr;
		gap: 50px;
	}
}

/* =========================================================================
   评论
   ========================================================================= */
.comment-list {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.comment-list ol.children {
	list-style: none;
	padding-left: 32px;
}

.comment-body {
	padding: 24px 0;
	border-bottom: 1px solid var(--dq-line);
}

.comment-author img {
	border-radius: 50%;
	margin-right: 12px;
}

.comment-author .fn {
	font-weight: 600;
	font-style: normal;
}

.comment-metadata {
	font-size: 13px;
	color: var(--dq-muted);
	margin-bottom: 10px;
}

.comment-reply-link {
	font-size: 14px;
	color: var(--dq-primary);
}

.comment-form {
	display: grid;
	gap: 18px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--dq-line);
	font-size: 15px;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--dq-primary);
}

.comment-form .submit {
	justify-self: start;
	padding: 14px 34px;
	background: var(--dq-primary);
	color: #fff;
	border: 0;
	cursor: pointer;
}

.comment-form .submit:hover {
	background: var(--dq-primary-2);
}

/* =========================================================================
   文章导航
   ========================================================================= */
.dq-post-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid var(--dq-line);
}

.dq-post-nav__item {
	font-size: 15px;
}

.dq-post-nav__item--next {
	text-align: right;
}

.dq-post-nav__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--dq-muted);
}

.dq-post-nav__title {
	font-weight: 500;
}

.dq-post-nav__item:hover .dq-post-nav__title {
	color: var(--dq-primary);
}

@media (max-width: 576px) {
	.dq-post-nav {
		grid-template-columns: 1fr;
	}

	.dq-post-nav__item--next {
		text-align: left;
	}
}

/* =========================================================================
   404
   ========================================================================= */
.dq-404 {
	padding: clamp(70px, 9vw, 150px) 0;
	text-align: center;
}

.dq-404__code {
	font-size: clamp(80px, 14vw, 190px);
	font-weight: 800;
	line-height: 1;
	color: var(--dq-primary);
	opacity: 0.14;
}

.dq-404__title {
	margin-top: -0.3em;
	font-size: clamp(24px, 3vw, 40px);
}

.dq-404__desc {
	margin: 16px auto 34px;
	max-width: 520px;
	color: var(--dq-ink-2);
}

/* =========================================================================
   服务与支持页
   ========================================================================= */
.dq-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 30px;
}

.dq-service-card {
	padding: 40px 32px;
	background: var(--dq-bg);
	border: 1px solid var(--dq-line);
	transition: all 0.36s var(--dq-ease);
}

.dq-service-card:hover {
	border-color: transparent;
	box-shadow: var(--dq-shadow);
	transform: translateY(-6px);
}

.dq-service-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 22px;
	background: var(--dq-primary-soft);
	color: var(--dq-primary);
}

.dq-service-card__icon svg {
	width: 28px;
	height: 28px;
}

.dq-service-card__title {
	margin: 0 0 12px;
	font-size: 20px;
}

.dq-service-card__desc {
	margin: 0;
	font-size: 15px;
	color: var(--dq-ink-2);
}

/* 下载列表 */
.dq-download-list {
	border-top: 1px solid var(--dq-line);
}

.dq-download-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--dq-line);
}

.dq-download-list__name {
	font-size: 16px;
	font-weight: 500;
}

.dq-download-list__meta {
	font-size: 14px;
	color: var(--dq-muted);
}

/* =========================================================================
   联系我们页
   ========================================================================= */
.dq-contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 60px;
	align-items: start;
}

.dq-contact-list {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.dq-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--dq-line);
}

.dq-contact-list li:last-child {
	border-bottom: 0;
}

.dq-contact-list svg {
	flex: none;
	margin-top: 4px;
	color: var(--dq-primary);
}

.dq-contact-list strong {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 600;
}

.dq-contact-list span,
.dq-contact-list a {
	font-size: 15px;
	color: var(--dq-ink-2);
	line-height: 1.7;
}

.dq-contact-list a:hover {
	color: var(--dq-primary);
}

/* 询盘插件表单接入主题样式 */
.dq-contact-layout__form {
	padding: 40px;
	background: var(--dq-bg-alt);
}

.dq-contact-layout__form input[type="text"],
.dq-contact-layout__form input[type="email"],
.dq-contact-layout__form input[type="tel"],
.dq-contact-layout__form select,
.dq-contact-layout__form textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--dq-line);
	border-radius: var(--dq-radius);
	background: var(--dq-bg);
	font-size: 15px;
}

.dq-contact-layout__form input:focus,
.dq-contact-layout__form select:focus,
.dq-contact-layout__form textarea:focus {
	outline: none;
	border-color: var(--dq-primary);
}

.dq-contact-layout__form button[type="submit"],
.dq-contact-layout__form input[type="submit"] {
	padding: 14px 40px;
	background: var(--dq-primary);
	color: #fff;
	border: 0;
	border-radius: var(--dq-radius);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.3s var(--dq-ease);
}

.dq-contact-layout__form button[type="submit"]:hover,
.dq-contact-layout__form input[type="submit"]:hover {
	background: var(--dq-primary-2);
}

@media (max-width: 992px) {
	.dq-contact-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.dq-contact-layout__form {
		padding: 28px 22px;
	}
}

/* =========================================================================
   WooCommerce 兜底（未启用插件时不生效）
   ========================================================================= */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	border: 1px solid var(--dq-line);
	padding: 0 0 20px;
	text-align: center;
}

.woocommerce ul.products li.product img {
	margin-bottom: 16px;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
	background: var(--dq-primary);
	color: #fff;
	border-radius: var(--dq-radius);
	font-weight: 500;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--dq-primary-2);
	color: #fff;
}

.woocommerce span.onsale {
	background: var(--dq-primary);
	border-radius: 0;
}

.woocommerce .star-rating span::before {
	color: var(--dq-primary);
}
