/* 全站样式：字体、设计变量、基础、页头、页脚。所有页面都加载 */

/* ==========================================================================
   字体：本地加载（不走 Google CDN，避免欧盟访客的 GDPR 问题），SIL OFL 许可
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   设计变量
   ========================================================================== */

:root {
	--rv-bg: #1a1a1a;
	--rv-surface: #212121;
	--rv-surface-2: #262626;
	--rv-border: #333;
	--rv-text: #f5f5f5;
	--rv-muted: #999;
	--rv-accent: #e9820c;
	--rv-accent-hover: #f5972f;
	--rv-accent-soft: rgba(233, 130, 12, 0.15);
	--rv-on-accent: #1a1a1a; /* 橙色按钮上的文字：白字对比度只有 2.7:1，深色约 6.4:1，满足 WCAG AA */
	--rv-danger: #ff6b6b;
	--rv-radius: 4px;
	--rv-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rv-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--rv-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* GeneratePress 全局颜色改成深色：GP 和 WooCommerce 的页面都用这些变量 */
	--contrast: var(--rv-text);
	--contrast-2: #ccc;
	--contrast-3: var(--rv-muted);
	--base: var(--rv-border);
	--base-2: var(--rv-bg);
	--base-3: var(--rv-surface);
	--accent: var(--rv-accent);
}

/* ==========================================================================
   基础
   ========================================================================== */

body,
button,
input,
select,
textarea {
	font-family: var(--rv-font-body);
}

body {
	background-color: var(--rv-bg);
	color: var(--rv-text);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--rv-font-display);
}

a:hover,
a:focus {
	color: var(--rv-accent-hover);
}

/* 自己的组件不要下划线（GP 默认给链接加下划线，正文里的链接保留） */
.rv-site-header a,
.rv-footer a,
.rv-product a {
	text-decoration: none;
}

.rv-container {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 48px;
}

.rv-icon {
	flex: none;
}

/* GP 内容区与页头页脚同宽、两侧留同样的边距（GP 的动态 CSS 有缓存，改设置不一定生效，直接写在这里） */
.site.grid-container {
	max-width: 1440px;
	padding-inline: 48px;
}

/* GP 让 alignwide 区块（如 Woo 的购物车、结账）伸进内容框的内边距，窄屏上会贴到边缘 */
.entry-content .alignwide {
	width: auto;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
}

/* 按钮 */
.rv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px; /* 手机上手指点得准 */
	padding: 10px 20px;
	border: 1px solid var(--rv-accent);
	border-radius: var(--rv-radius);
	background: var(--rv-accent);
	color: var(--rv-on-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.rv-button:hover,
.rv-button:focus {
	border-color: var(--rv-accent-hover);
	background: var(--rv-accent-hover);
	color: var(--rv-on-accent);
}

.rv-button--lg {
	padding: 14px 28px;
	font-size: 15px;
}

.rv-button--ghost {
	border-color: var(--rv-border);
	background: rgba(0, 0, 0, 0.4);
	color: var(--rv-text);
}

.rv-button--ghost:hover,
.rv-button--ghost:focus {
	border-color: var(--rv-accent);
	background: rgba(0, 0, 0, 0.4);
	color: var(--rv-accent);
}

.rv-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--rv-accent);
	font-size: 14px;
	font-weight: 600;
}

/* 橙色小标签，如「Professional Motor Manufacturer」「Best Seller」 */
.rv-tag {
	display: inline-block;
	margin: 0 0 24px;
	padding: 4px 12px;
	border: 1px solid rgba(233, 130, 12, 0.35);
	border-radius: var(--rv-radius);
	background: var(--rv-accent-soft);
	color: var(--rv-accent);
	font-size: 13px;
	font-weight: 600;
}

@media (max-width: 768px) {
	.rv-container,
	.site.grid-container {
		padding-inline: 20px;
	}
}

/* ==========================================================================
   商品卡片：首页产品区、商品列表、相关商品共用（template-parts/product-card.php）
   ========================================================================== */

.rv-products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.rv-product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	background: var(--rv-surface);
	transition: border-color 0.2s;
}

.rv-product:hover {
	border-color: rgba(233, 130, 12, 0.5);
}

.rv-product__media {
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: #111;
}

.rv-product__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.rv-product:hover .rv-product__media img {
	transform: scale(1.03);
}

.rv-product__body {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px;
}

.rv-product__sku {
	margin: 0 0 4px;
	color: var(--rv-muted);
	font-family: var(--rv-font-mono);
	font-size: 13px;
}

.rv-product__name {
	margin: 0 0 16px;
	font-family: var(--rv-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.rv-product__name a {
	color: var(--rv-text);
}

.rv-product__name a:hover {
	color: var(--rv-accent);
}

.rv-specs {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
}

.rv-specs div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}

.rv-specs dt {
	color: var(--rv-muted);
	font-weight: 400;
}

.rv-specs dd {
	margin: 0;
	color: var(--rv-text);
	font-family: var(--rv-font-mono);
	text-align: right;
}

.rv-product .rv-link {
	margin-top: auto;
}

@media (max-width: 1024px) {
	.rv-products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.rv-products,
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   页头
   ========================================================================== */

.rv-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--rv-border);
	background: var(--rv-bg);
}

.admin-bar .rv-site-header {
	top: 32px;
}

.rv-header__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 70px;
}

.rv-header__logo img {
	display: block;
	width: auto;
	height: 40px;
}

.rv-nav {
	margin-left: auto;
}

.rv-nav ul {
	display: flex;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rv-nav a {
	color: var(--rv-text);
	font-size: 15px;
	font-weight: 600;
}

.rv-nav a:hover,
.rv-nav a[aria-current] {
	color: var(--rv-accent);
}

/* 下拉菜单（Applications）：鼠标悬停或键盘聚焦时展开，不依赖 JS */
.rv-nav li {
	position: relative;
}

.rv-nav li:has(.rv-nav__sub) > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	vertical-align: 3px;
	transform: rotate(45deg);
}

.rv-nav .rv-nav__sub {
	display: none;
	position: absolute;
	top: calc(100% + 24px); /* 对齐页头底边 */
	left: -20px;
	min-width: 240px;
	padding: 8px 0;
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	background: var(--rv-surface);
	box-shadow: 0 12px 32px rgb(0 0 0 / 40%);
}

/* 链接和下拉之间隔着 24px，垫一块透明区域，鼠标移过去时下拉不消失 */
.rv-nav__sub::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 24px;
}

.rv-nav li:hover > .rv-nav__sub,
.rv-nav li:focus-within > .rv-nav__sub {
	display: block;
}

.rv-nav__sub a {
	display: block;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.rv-nav__sub a:hover {
	background: var(--rv-surface-2);
}

/* 手机菜单 */
.rv-mobile-nav {
	display: none;
}

.rv-mobile-nav summary {
	display: flex;
	padding: 8px;
	color: var(--rv-text);
	cursor: pointer;
	list-style: none;
}

.rv-mobile-nav summary::-webkit-details-marker {
	display: none;
}

.rv-mobile-nav .rv-icon {
	width: 24px;
	height: 24px;
}

.rv-mobile-nav__close,
.rv-mobile-nav[open] .rv-mobile-nav__open {
	display: none;
}

.rv-mobile-nav[open] .rv-mobile-nav__close {
	display: inline;
}

.rv-mobile-nav ul {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	margin: 0;
	padding: 8px 20px 24px;
	border-bottom: 1px solid var(--rv-border);
	background: var(--rv-bg);
	list-style: none;
}

.rv-mobile-nav li a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--rv-border);
	color: var(--rv-text);
	font-weight: 600;
}

.rv-mobile-nav li a[aria-current] {
	color: var(--rv-accent);
}

/* Applications 下面的各个应用，缩进显示 */
.rv-mobile-nav .rv-mobile-nav__sub a {
	padding-left: 16px;
	color: var(--rv-muted);
	font-size: 15px;
	font-weight: 500;
}

.rv-mobile-nav li a.rv-button {
	display: flex;
	margin-top: 20px;
	padding: 14px;
	border-bottom: 1px solid var(--rv-accent);
	color: var(--rv-on-accent);
}

@media (max-width: 1024px) {
	.rv-nav,
	.rv-header__cta {
		display: none;
	}

	.rv-mobile-nav {
		display: block;
		margin-left: auto;
	}
}

@media (max-width: 782px) {
	.admin-bar .rv-site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	/* 小屏上 WP 管理栏不固定，页头贴顶 */
	.admin-bar .rv-site-header {
		top: 0;
	}
}

/* ==========================================================================
   页脚
   ========================================================================== */

.rv-footer {
	border-top: 1px solid var(--rv-border);
	background: #141414;
	color: var(--rv-muted);
	font-size: 14px;
}

.rv-footer a {
	color: var(--rv-muted);
}

.rv-footer a:hover {
	color: var(--rv-text);
}

.rv-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 48px;
	padding-block: 64px;
}

.rv-footer__brand img {
	width: auto;
	height: 40px;
	margin-bottom: 20px;
}

.rv-footer__brand p {
	max-width: 340px;
	margin: 0 0 20px;
	line-height: 1.7;
}

.rv-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rv-badges li {
	padding: 4px 10px;
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	font-family: var(--rv-font-mono);
	font-size: 12px;
}

.rv-footer__title {
	margin: 0 0 20px;
	color: var(--rv-accent);
	font-family: var(--rv-font-body);
	font-size: 14px;
	font-weight: 700;
}

.rv-footer__links,
.rv-footer__contact {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rv-footer__contact {
	gap: 16px;
	margin-bottom: 24px;
}

.rv-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.rv-footer__contact .rv-icon {
	margin-top: 3px;
	color: var(--rv-accent);
}

.rv-footer .rv-footer__contact a {
	color: var(--rv-text);
	font-weight: 500;
}

.rv-footer__contact small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
}

.rv-footer .rv-button {
	color: var(--rv-on-accent);
}

.rv-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 20px;
	border-top: 1px solid var(--rv-border);
	font-size: 13px;
}

.rv-footer__bottom p {
	margin: 0;
}

.rv-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

@media (max-width: 1024px) {
	.rv-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.rv-footer__grid {
		grid-template-columns: 1fr;
	}

	.rv-footer__bottom {
		flex-direction: column;
	}
}

/* ==========================================================================
   统计同意提示（rotavon-core 的 analytics.php 输出，欧洲等地区的访客首次访问时显示）
   ========================================================================== */

.rv-consent {
	position: fixed;
	z-index: 10000;
	right: 16px;
	bottom: 16px;
	left: 16px;
	max-width: 720px;
	margin-inline: auto;
	padding: 18px 20px;
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	background: var(--rv-surface);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
	font-size: 14px;
}

.rv-consent[hidden] {
	display: none;
}

.rv-consent p {
	margin: 0 0 12px;
	line-height: 1.5;
}

.rv-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* 两个按钮一样大、一样醒目：拒绝和同意要同样容易点 */
.rv-consent button {
	min-height: 44px;
	padding: 8px 20px;
	border: 1px solid var(--rv-accent);
	border-radius: var(--rv-radius);
	background: transparent;
	color: var(--rv-text);
	font-weight: 600;
	cursor: pointer;
}

.rv-consent button[data-consent="accept"] {
	background: var(--rv-accent);
	color: var(--rv-on-accent);
}

/* 页脚的「Cookie settings」长得和旁边的政策链接一样 */
.rv-footer__policies button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--rv-muted);
	font: inherit;
	cursor: pointer;
}

.rv-footer__policies button:hover {
	color: var(--rv-text);
}