/* ==================================================================
 * Ehgoo：三级下拉导航菜单（见 includes/module-nav-menu.php 文件头）
 *
 * 分工：
 *   · 第一层（7 个 L1）排布 → assets/header-layout.css
 *   · 第二、三层下拉面板   → 本文件
 *
 * 主题的隐藏机制是 `left:-999em`（不是 display:none），
 * 所以凡是写 `left` 的规则**必须限定在 :hover / :focus-within 内**，
 * 否则会覆盖 -999em → 所有子菜单常显。
 * ================================================================== */

#navbar .main-navigation #primary-menu ul.sub-menu {
	/* 面板外观：白底 + 细边 + 阴影，比主题默认更「专业目录」感 */
	background: #fff;
	border: 1px solid #e2e2e2;
	border-top: 2px solid #1f3a68;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
	padding: 6px 0;
	margin: 0;
	list-style: none;
	z-index: 1000;

	/* ⚠️ 复位继承来的等分/居中规则（header-layout 给第一层设了 flex
	   与 text-align，这些是**可继承**的，会污染子菜单观感）。 */
	white-space: normal;
	text-align: left;
	text-align-last: left;
	display: block;
	float: none;
}

/* 第二层：挂在父项下方，与父项左缘对齐。
   ⚠️ 只在 :hover / :focus-within 内写 left，见文件头说明。 */
#navbar .main-navigation #primary-menu > li > ul.sub-menu {
	left: -999em;          /* 与主题一致的隐藏态，复位成可预测值 */
	top: 100%;
	min-width: 260px;
	max-width: 340px;
}

#navbar .main-navigation #primary-menu > li:hover > ul.sub-menu,
#navbar .main-navigation #primary-menu > li:focus-within > ul.sub-menu {
	left: 0;
}

/* 右端两项（Nahrungsergänzungsmittel / Tierwelt）改朝左展开，
   防面板溢出视口右缘。同特异性靠源码顺序覆盖上一条。 */
#navbar .main-navigation #primary-menu > li:nth-last-child(-n+2):hover > ul.sub-menu,
#navbar .main-navigation #primary-menu > li:nth-last-child(-n+2):focus-within > ul.sub-menu {
	left: auto;
	right: 0;
}

/* ── 第三层 ────────────────────────────────────────────────────────
   ⚠️🔴 关键：必须给第二层 li 显式 `position:relative`。
      header-layout 给第一层 li 设了 `position:relative`，而
      `position:absolute` 的元素会向上找**最近的已定位祖先** ——
      若第二层 li 未定位，第三层就会相对**第一层 li** 定位，
      于是叠在第二层面板上面（实测表现为「第三层出不来」）。
   ────────────────────────────────────────────────────────────────── */
#navbar .main-navigation #primary-menu > li > ul.sub-menu > li {
	position: relative;
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	white-space: normal;
}

#navbar .main-navigation #primary-menu > li > ul.sub-menu > li > ul.sub-menu {
	left: -999em;          /* 隐藏态 */
	top: -7px;             /* 让子面板顶边与父项顶边对齐（抵消 padding 6px + border 1px） */
	min-width: 240px;
	max-width: 360px;
	max-height: 70vh;
	overflow-y: auto;      /* L3 最多的 L2 有 30+ 项，加滚动防超屏 */
	overflow-x: hidden;
}

#navbar .main-navigation #primary-menu > li > ul.sub-menu > li:hover > ul.sub-menu,
#navbar .main-navigation #primary-menu > li > ul.sub-menu > li:focus-within > ul.sub-menu {
	left: 100%;            /* 相对第二节点的右缘展开 */
	right: auto;
}

/* 屏幕右半区的第二层项：第三层改朝左展开，防右缘溢出。 */
@media (min-width: 1024px) {
	#navbar .main-navigation #primary-menu > li:nth-last-child(-n+4) > ul.sub-menu > li:hover > ul.sub-menu,
	#navbar .main-navigation #primary-menu > li:nth-last-child(-n+4) > ul.sub-menu > li:focus-within > ul.sub-menu {
		left: auto;
		right: 100%;
	}
}

/* ── 菜单项文字 ───────────────────────────────────────────────────
   主题的 `.main-navigation ul ul a` 是 `width:200px` 定宽，
   会把德语长标签折行。实测子项行高 41px（单行）vs 58px（两行），
   折行后整个面板参差不齐 → 强制单行 + 省略号。
   ⚠️ 特异性必须压过 `.main-navigation ul ul a`（0,1,2），
      本选择器 2 id + 2 type + 1 type → 稳胜，无需 !important。
   ────────────────────────────────────────────────────────────────── */
#navbar .main-navigation #primary-menu ul.sub-menu li a {
	display: block;
	width: auto;
	min-width: 0;
	max-width: none;
	padding: 8px 16px;
	font-size: 14px;
	line-height: 1.35;
	color: #333;
	text-decoration: none;
	text-align: left;
	text-align-last: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: transparent;
}

#navbar .main-navigation #primary-menu ul.sub-menu li a:hover,
#navbar .main-navigation #primary-menu ul.sub-menu li a:focus {
	background: #f4f6fa;
	color: #1f3a68;
}

/* 有下一级的项：右缘加一个「›」提示可继续展开。 */
#navbar .main-navigation #primary-menu ul.sub-menu li.menu-item-has-children > a {
	padding-right: 30px;
}

#navbar .main-navigation #primary-menu ul.sub-menu li.menu-item-has-children > a::after {
	content: "\203A";      /* › */
	float: right;
	margin-right: -16px;
	color: #98a2b3;
	font-weight: 600;
}

/* 第三层的提示箭头改成向上的层级感（这里朝左展开时更自然，故用 ‹）。 */
#navbar .main-navigation #primary-menu ul.sub-menu ul.sub-menu li.menu-item-has-children > a::after {
	content: "\203A";
}

/* ── 移动端 / 平板折叠菜单 ────────────────────────────────────────
   Bootstrap 在 <992px 把 `#primary-menu` 折成纵向列表。
   此时**不能**再用 absolute + left:-999em（会全部堆在一起），
   改成静态块 + 缩进表示层级，并去掉悬停依赖。
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
	#navbar .main-navigation #primary-menu ul.sub-menu,
	#navbar .main-navigation #primary-menu > li > ul.sub-menu,
	#navbar .main-navigation #primary-menu > li > ul.sub-menu > li > ul.sub-menu {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		max-height: none !important;
		overflow: visible !important;
		box-shadow: none;
		border: 0;
		border-left: 2px solid #e2e2e2;
		background: transparent;
		padding: 0 0 0 12px;
		margin: 0;
	}

	#navbar .main-navigation #primary-menu ul.sub-menu li a {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		padding: 7px 10px;
	}

	#navbar .main-navigation #primary-menu ul.sub-menu li.menu-item-has-children > a::after {
		content: "";
		float: none;
		margin: 0;
	}
}