/**
 * HDV Mobile Menu — Styles
 *
 * 两级面板滑动菜单样式
 * 设计目标：白底、极简、与 HD VALVE 品牌一致
 *
 * @package HD_Valve
 * @since   1.0.0
 */

/* ════════════════════════════════════════
   1. 容器
   ════════════════════════════════════════ */

/* 盒式布局：所有子元素统一使用 border-box */
.hdv-mm-wrap,
.hdv-mm-wrap * {
	box-sizing: border-box;
}

.hdv-mm-wrap {
	display: block;
	position: relative;
	width: 100%;
	background: #ffffff;
	/* overflow 由 JS 动态控制，以支持高度过渡动画 */
	overflow: hidden;
}

/* ════════════════════════════════════════
   2. 面板 — 基础 & 动画状态
   ════════════════════════════════════════ */

.hdv-mm-panel {
	display: block;
	width: 100%;
	/* 默认：隐藏在右侧 */
	transform: translateX(100%);
	opacity: 0;
	transition: transform 300ms ease, opacity 300ms ease;
	pointer-events: none;
	/* 绝对定位：多面板叠放，仅激活面板占据文档流 */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

/* 激活面板：回归文档流，可交互 */
.hdv-mm-panel--active {
	position: relative;
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
}

/* 主面板退场：向左推出 */
.hdv-mm-panel--slide-out {
	transform: translateX(-30%);
	opacity: 0;
	pointer-events: none;
}

/* ════════════════════════════════════════
   3. 菜单标题（"Menu"）
   ════════════════════════════════════════ */

.hdv-mm-title {
	font-size: 28px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.2;
	margin: 0 0 32px 0;
	padding: 0;
}

/* ════════════════════════════════════════
   4. 菜单列表 & 菜单项
   ════════════════════════════════════════ */

.hdv-mm-list {
	display: block;
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.hdv-mm-item {
	display: block;
	width: 100%;
	margin-bottom: 28px;
}

.hdv-mm-item:last-child {
	margin-bottom: 0;
}

/* 菜单项链接（同时用于一级和二级） */
.hdv-mm-item-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	transition: color 0.2s ease;
}

.hdv-mm-item-link:hover,
.hdv-mm-item-link:focus-visible {
	color: #CC0000;
	text-decoration: none;
	outline: none;
}

.hdv-mm-item-text {
	flex: 1;
	min-width: 0;
}

/* ════════════════════════════════════════
   5. "+" 展开图标
   ════════════════════════════════════════ */

.hdv-mm-expand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: 12px;
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	color: #999999;
	/* 不随父链接颜色变化 */
	transition: color 0.2s ease, transform 0.25s ease;
	pointer-events: none;
}

/* ════════════════════════════════════════
   6. 子菜单面板 — 返回行
   ════════════════════════════════════════ */

.hdv-mm-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 32px 0;
	cursor: pointer;
	color: #1a1a1a;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	transition: color 0.2s ease;
}

.hdv-mm-back:hover,
.hdv-mm-back:focus-visible {
	color: #CC0000;
	outline: none;
}

/* 返回箭头 SVG */
.hdv-mm-back-icon {
	flex-shrink: 0;
	/* 视觉对齐微调 */
	margin-top: -1px;
}

.hdv-mm-back-title {
	font-weight: 700;
}

/* ════════════════════════════════════════
   7. "View All" 链接
   ════════════════════════════════════════ */

.hdv-mm-view-all-wrap {
	margin-top: 16px;
}

.hdv-mm-view-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #CC0000;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.hdv-mm-view-all:hover,
.hdv-mm-view-all:focus-visible {
	color: #aa0000;
	outline: none;
}

/* ════════════════════════════════════════
   8. Elementor 编辑器内预览适配
   ════════════════════════════════════════ */

/* 编辑器内关闭 overflow hidden，方便预览所有面板 */
.elementor-editor-active .hdv-mm-wrap {
	overflow: visible;
}

/* 编辑器内所有面板同时可见（绝对定位改为相对） */
.elementor-editor-active .hdv-mm-panel {
	position: relative;
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
	border-top: 2px dashed #e0e0e0;
	padding-top: 16px;
	margin-top: 8px;
}

.elementor-editor-active .hdv-mm-panel--main {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

/* ════════════════════════════════════════
   9. Off-Canvas Header Bar
   ════════════════════════════════════════ */

/* .ct-panel-actions 改为 flex 页眉行 */
#offcanvas .ct-panel-actions {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0 16px;
	background: #ffffff !important;
	border-bottom: 1px solid #f0f0f0;
	gap: 0;
}

/* 关闭按钮：白底时图标改为深色 */
#offcanvas .ct-panel-actions .ct-toggle-close {
	order: -1;
	flex-shrink: 0;
	margin-right: 8px;
	color: #1a1a1a !important;
}

/* 关闭按钮内的 SVG 路径强制深色 */
#offcanvas .ct-panel-actions .ct-toggle-close svg,
#offcanvas .ct-panel-actions .ct-toggle-close svg path {
	fill: #1a1a1a !important;
	color: #1a1a1a !important;
}

/* 克隆的 Logo 列 — 紧跟在 × 按钮右侧 */
#offcanvas .ct-panel-actions .hdv-oc-logo {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}

#offcanvas .ct-panel-actions .hdv-oc-logo img {
	max-height: 32px;
	width: auto;
	display: block;
}

/* 克隆的右侧图标列（语言切换、搜索等）— 靠右 */
#offcanvas .ct-panel-actions .hdv-oc-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: auto;
	gap: 4px;
}