/* WooCommerce Mega Menu - 前端样式 */

.mmw-has-mega {
	position: relative;
}

/* 用自己的类名（mmw-has-mega）加下拉箭头，而不是借用主题的 menu-item-has-children——
   之前借用那个类导致主题自己的下拉箭头样式连带影响了其它菜单项的间距，
   所以改成完全独立、只认这一个类，不会再"连累"到别的菜单项。 */
.mmw-has-mega > a::after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 6px;
	margin-bottom: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
	vertical-align: middle;
	opacity: 0.7;
}

/* .mmw-open 是 JS 点击后加上的类，任何设备都要生效，所以放在媒体查询外面。
   :hover 单独放进 @media (hover:hover)，只让真正能"悬停"的设备（比如带鼠标的电脑）
   命中这条规则——触屏设备完全不会加载这段 CSS，也就不会被浏览器误判成
   "这是个悬停菜单，第一下点击只是预览 hover 效果，第二下才真正触发点击"，
   点一下就能立刻正常展开，不用再点两次。 */
.mmw-has-mega.mmw-open > a::after {
	transform: rotate( 225deg );
	margin-bottom: -2px;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mmw-has-mega:not(.mmw-click-mode):hover > a::after {
		transform: rotate( 225deg );
		margin-bottom: -2px;
	}
}

/* 面板宽度/位置由 frontend.js 动态计算并写成内联 style（left / width），
   这里只负责外观和显隐动画，不要再写 width:100% —— 那样只会等于菜单项自己的宽度。 */
.mmw-mega-panel {
	position: absolute;
	top: 100%;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	/* 常态保持 none：这个元素横跨整个视口宽度，中间实际内容之外两侧是空白区域，
	   如果这里能响应鼠标，鼠标停在两侧的空白处也会被判定成"悬停在菜单上"，
	   导致移到面板左右两边看着已经离开菜单了，却迟迟不收起。
	   真正需要响应鼠标 hover / 点击的是下面的 .mmw-mega-inner（可见内容本身）。 */
	pointer-events: none;
	/* 「悬浮卡片」样式时，面板与导航栏之间留出的间距（贴合样式时为 0）。 */
	padding-top: var( --mmw-panel-offset, 0px );
	box-sizing: border-box;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.mmw-has-mega.mmw-open > .mmw-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media ( hover: hover ) and ( pointer: fine ) {
	/* 默认 Hover 模式；click mode 明确禁用 CSS hover 打开。 */
	.mmw-has-mega:not(.mmw-click-mode):hover > .mmw-mega-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* 每一列错落淡入，制造层次感的动画效果 */
.mmw-columns > .mmw-col {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.mmw-has-mega.mmw-open .mmw-columns > .mmw-col {
	opacity: 1;
	transform: translateY(0);
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mmw-has-mega:not(.mmw-click-mode):hover .mmw-columns > .mmw-col {
		opacity: 1;
		transform: translateY(0);
	}
}

.mmw-columns > .mmw-col:nth-child(1) { transition-delay: 0.03s; }
.mmw-columns > .mmw-col:nth-child(2) { transition-delay: 0.08s; }
.mmw-columns > .mmw-col:nth-child(3) { transition-delay: 0.13s; }
.mmw-columns > .mmw-col:nth-child(4) { transition-delay: 0.18s; }

.mmw-mega-inner {
	background: var( --mmw-panel-bg, #ffffff ) !important;
	color: var( --mmw-panel-text, #333333 ) !important;
	padding: 32px;
	position: relative;
	/* 多层柔和阴影 + 1px 发丝描边：圆角卡片在白色页面上也有清晰的轮廓，
	   比单层大阴影更"轻"、更有层次。 */
	box-shadow:
		0 1px 2px rgba( 0, 0, 0, 0.05 ),
		0 10px 28px -6px rgba( 0, 0, 0, 0.14 ),
		0 28px 64px -16px rgba( 0, 0, 0, 0.16 );
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	border-top: 3px solid var( --mmw-accent, #2271b1 );
	/* 圆角：上方两个角在「贴合导航」样式下为 0（直角贴住导航栏），
	   「悬浮卡片」样式下四个角都是圆角。数值来自「外观 → Mega Menu 设置」。 */
	border-radius: var( --mmw-radius-top, 0px ) var( --mmw-radius-top, 0px ) var( --mmw-radius, 12px ) var( --mmw-radius, 12px );
	max-width: var( --mmw-inner-maxwidth, 1200px );
	margin: 0 auto;
	box-sizing: border-box;
	/* 真正的可交互区域：面板打开后鼠标事件只在这个可见内容框内生效。 */
	pointer-events: auto;
}

/* 悬浮卡片和导航栏之间有一段间距，鼠标从菜单项往下移动经过这段空隙时
   不能被判定为"离开菜单"（否则 Hover 延迟设为 0 时面板会直接关掉）。
   这里用一条透明的"桥"把空隙补上，只覆盖卡片本身的宽度。 */
.mmw-mega-inner::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: calc( var( --mmw-panel-offset, 0px ) + 3px );
	pointer-events: auto;
}

/* 很多主题会给导航菜单里的所有 <a> 等元素强制指定颜色（比如白色），
   这里用 !important 确保 Mega Menu 面板内的文字颜色始终以插件设置为准，不被主题覆盖。 */
.mmw-mega-panel,
.mmw-mega-panel a,
.mmw-mega-panel p,
.mmw-mega-panel span,
.mmw-mega-panel li,
.mmw-mega-panel h4,
.mmw-mega-panel div {
	color: var( --mmw-panel-text, #333333 ) !important;
}

.mmw-columns {
	display: grid;
	grid-template-columns: repeat( var( --mmw-cols, 3 ), 1fr );
	gap: var( --mmw-columns-gap, 32px );
	/* 改成 stretch（而不是 start）：每一列的容器都会撑到最高那一列的高度，
	   列内容本身还是照常从顶部开始排列，肉眼看不出区别（因为 .mmw-col
	   本身没有背景色/边框）。这样做是为了让「列分隔线」（如果开启）能够
	   贯穿到最高那一列的底部，而不是各自截止在自己内容的高度处。 */
	align-items: stretch;
}

/* 列标题（每列顶部）和区块标题（每个区块自己的小标题）共用同一套样式，
   保证两者看起来是一致的；具体字号/字重/字间距/是否显示下划线可以在
   「外观 → Mega Menu 设置」里自定义，这里用 CSS 变量接住那些设置。 */
.mmw-col-title,
.mmw-block-title {
	margin: 0 0 10px;
	padding-bottom: var( --mmw-title-border-pad, 8px );
	border-bottom: var( --mmw-title-border-width, 1px ) solid rgba( 0, 0, 0, 0.08 );
	font-size: var( --mmw-title-size, 12px );
	font-weight: var( --mmw-title-weight, 700 );
	text-transform: var( --mmw-title-transform, uppercase );
	letter-spacing: var( --mmw-title-spacing, 0.06em );
	color: inherit;
	opacity: 0.9;
}

.mmw-col-title-link {
	color: inherit;
	text-decoration: none;
}

.mmw-col-title-link:focus {
	color: var( --mmw-accent, #2271b1 );
	text-decoration: underline;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mmw-col-title-link:hover {
		color: var( --mmw-accent, #2271b1 );
		text-decoration: underline;
	}
}

.mmw-block-title-link {
	color: inherit;
	text-decoration: none;
}

.mmw-block-title-link:focus {
	color: var( --mmw-accent, #2271b1 );
	text-decoration: underline;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mmw-block-title-link:hover {
		color: var( --mmw-accent, #2271b1 );
		text-decoration: underline;
	}
}

.mmw-col-text {
	font-size: 14px;
	line-height: 1.7;
}

.mmw-col-text p:first-child {
	margin-top: 0;
}

.mmw-col-text p:last-child {
	margin-bottom: 0;
}

.mmw-image-link,
.mmw-col-image {
	display: block;
	border-radius: 8px;
	overflow: hidden;
}

.mmw-image-link img,
.mmw-col-image img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	transition: transform 0.3s ease;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mmw-image-link:hover img {
		transform: scale( 1.03 );
	}
}

.mmw-cat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 16px;
}

.mmw-cat-grid li a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: inherit;
	font-size: 13px;
	font-weight: 500;
	padding: 10px;
	border-radius: 8px;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mmw-cat-grid li a:hover {
		background-color: rgba( 0, 0, 0, 0.04 );
		box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
	}
}

.mmw-cat-grid img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 8px;
}

.mmw-cat-grid span {
	display: block;
}

.mmw-links-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mmw-links-list li a {
	display: block;
	padding: 7px 0;
	text-decoration: none;
	color: inherit;
	font-size: 14px;
	border-bottom: 1px solid transparent;
	transition: color var( --mmw-hover-dur, 0.15s ) ease, border-color var( --mmw-hover-dur, 0.15s ) ease;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mmw-links-list li a:hover {
		color: var( --mmw-accent, #2271b1 ) !important;
		border-bottom-color: currentColor;
	}
}

.mmw-widget {
	margin-bottom: 18px;
}

.mmw-widget:last-child {
	margin-bottom: 0;
}

.mmw-block {
	margin-bottom: 20px;
}

.mmw-block:last-child {
	margin-bottom: 0;
}

.mmw-widget-title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	/* 跟「标题大写」这一个设置共用同一个变量，保证面板里所有标题（列标题/
	   区块标题/自定义 Widget 区域标题）大小写风格始终一致，不会出现
	   "其它标题都关掉大写了，唯独 Widget 标题还是大写"这种不统一的情况。 */
	text-transform: var( --mmw-title-transform, uppercase );
	letter-spacing: 0.08em;
}

/* 移动端（点击展开的手风琴式）样式改成由 PHP 按「移动端断点」设置动态生成，
   不再写死在这个文件里 —— 这样 CSS 的断点才能跟 JS 判断"是否移动端"用的
   同一个数值保持一致，不会出现"主菜单已经变成三条横杠了，点开面板却还是
   桌面端网格平铺"这种两边对不上的情况。具体输出见 class-mmw-frontend.php
   的 enqueue_assets()。 */

/* Mega Menu page overlay. The overlay is inserted directly under <body> by JS.
   It sits below the open Mega Menu, so the menu remains bright and readable.
   Its top edge is positioned below the visible menu/header area, which also works
   when the site's navigation becomes sticky while scrolling. */
.mmw-menu-overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 9998;
	background: rgba( 0, 0, 0, var( --mmw-overlay-opacity, 0.45 ) );
	/* 毛玻璃模糊由 class-mmw-frontend.php 按设置输出：模糊度为 0 时完全不输出 backdrop-filter，
	   避免浏览器做多余的合成计算。 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mmw-menu-overlay.mmw-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Keep the active menu item/panel above the overlay. This is intentionally scoped
   only to an opened Mega Menu item so other navigation items are untouched. */
/* Sticky/fixed navigation may form a stacking context around the Mega Menu.
   When the menu is open, lift that parent above the body-level overlay so the
   entire Mega Menu remains bright and clickable. The class is added only while
   the menu is open. */
.mmw-overlay-stack-parent {
	z-index: 100000 !important;
}

.mmw-has-mega.mmw-open {
	z-index: 100001 !important;
}

.mmw-has-mega.mmw-open > .mmw-mega-panel {
	z-index: 100002 !important;
}

@media ( max-width: 782px ) {
	.mmw-menu-overlay {
		display: none;
	}
}

/* CTA 按钮：自定义 HTML 小工具里 class="mmw-cta" 的链接，或区块小工具的「按钮」区块。
   上面那条给面板内所有 a 强制文字颜色的规则也会作用到按钮上，
   这里用更高优先级把按钮改回「强调色底 + 白字」。 */
.mmw-mega-panel a.mmw-cta,
.mmw-mega-panel .wp-block-button__link {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 20px;
	border-radius: 8px;
	background: var( --mmw-accent, #2271b1 ) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none !important;
	border: none !important;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.mmw-mega-panel a.mmw-cta:focus-visible,
.mmw-mega-panel .wp-block-button__link:focus-visible {
	outline: 2px solid var( --mmw-accent, #2271b1 );
	outline-offset: 2px;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mmw-mega-panel a.mmw-cta:hover,
	.mmw-mega-panel .wp-block-button__link:hover {
		filter: brightness( 1.1 );
		transform: translateY( -1px );
	}
}

/* 标题图标：列标题 / 区块标题前面的线条图标。
   颜色用 --mmw-icon-color（默认 = 强调色）；上面那条把面板内 span 强制成文字颜色的规则
   优先级更低，这里用 .mmw-mega-panel .mmw-title-icon 盖过它。 */
.mmw-col-title.mmw-has-icon,
.mmw-block-title.mmw-has-icon {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mmw-mega-panel .mmw-title-icon {
	display: inline-flex;
	flex: none;
	width: var( --mmw-icon-size, 20px );
	height: var( --mmw-icon-size, 20px );
	color: var( --mmw-icon-color, var( --mmw-accent, #2271b1 ) ) !important;
}

.mmw-title-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}