/**
 * QD 移动端菜单修复 —— 样式
 *
 * 只在主题自己的移动端断点（≤1024px，见主题 style.css:2759）内生效，
 * 桌面端完全不受影响（桌面端仍走主题的 :hover 展开）。
 *
 * 选择器刻意比主题规则多一层类（.qd-open / .qd-sub-toggle），
 * 保证在不使用 !important 的情况下也能覆盖主题的
 *   html body .main-header .right .menu .menu-item-has-children .sub-menu { display: none; }
 */

@media (max-width: 1024px) {

	/* 菜单项：让「文字」和「展开按钮」并排，子菜单换行到下一行 */
	html body .main-header .right .menu .menu-item-has-children {
		flex-wrap: wrap;
		align-items: center;
	}

	html body .main-header .right .menu .menu-item-has-children > a {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* 展开/收起按钮（仅移动端出现） */
	html body .main-header .right .menu .menu-item-has-children > .qd-sub-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 2.6rem;
		height: 2.6rem;
		margin: 0 0 0 .4rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--theme-sub-menu-font-color);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	html body .main-header .right .menu .menu-item-has-children > .qd-sub-toggle:hover,
	html body .main-header .right .menu .menu-item-has-children > .qd-sub-toggle:active {
		background: var(--theme-color-20, rgba(0, 0, 0, .06));
	}

	/* 按钮里的箭头：用边框画一个「∨」 */
	html body .main-header .right .menu .menu-item-has-children > .qd-sub-toggle .qd-sub-toggle-icon {
		display: block;
		width: .5rem;
		height: .5rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .25s ease;
		margin-top: -.2rem;
	}

	html body .main-header .right .menu .menu-item-has-children.qd-open > .qd-sub-toggle .qd-sub-toggle-icon {
		transform: rotate(-135deg);
		margin-top: .2rem;
	}

	/* 展开后的子菜单：由主题的「绝对定位 + 隐藏」改为「块级展开」 */
	html body .main-header .right .menu .menu-item-has-children.qd-open > .sub-menu {
		display: block;
		position: static;
		visibility: visible;
		opacity: 1;
		width: 100%;
		flex: 1 1 100%;
		box-shadow: none;
		background: transparent;
		margin: .2rem 0 .2rem 0;
		padding: 0 0 0 .8rem;
		border-left: 2px solid var(--theme-color-20, rgba(0, 0, 0, .08));
		transform: none;
	}

	html body .main-header .right .menu .menu-item-has-children.qd-open > .sub-menu .menu-item {
		display: block;
		width: 100%;
		height: auto;
		padding: 0;
		border-bottom: 0;
	}

	html body .main-header .right .menu .menu-item-has-children.qd-open > .sub-menu .menu-item > a {
		display: block;
		padding: .5rem .4rem;
		font-size: .95rem;
		font-weight: lighter;
		color: var(--theme-sub-menu-font-color);
		border-bottom: 1px solid rgba(0, 0, 0, .05);
	}

	html body .main-header .right .menu .menu-item-has-children.qd-open > .sub-menu .menu-item > a:hover,
	html body .main-header .right .menu .menu-item-has-children.qd-open > .sub-menu .menu-item > a:active {
		color: var(--theme-color);
	}
}

/* 桌面端（>1024px）：不显示我们加的按钮，也不干预主题原有 hover 展开 */
@media (min-width: 1025px) {
	html body .main-header .right .menu .menu-item-has-children > .qd-sub-toggle {
		display: none;
	}
}