/*
 * 選單子項目（HUI理念 → 四大單位）。
 *
 * 刻意獨立成一支檔案而不是加進 layout.css：layout.css 是從 SCSS
 * 編譯出來的產物，直接改會在下次編譯時被蓋掉。
 *
 * 需要覆寫的三條既有規則：
 *   menu ul                  { margin-top:5em }  子選單會被推到很下面
 *   menu ul.menuBox li       { display:flex }    預設橫向排，標題與子選單會並排
 *   menu ul.menuBox li       { overflow:hidden } 這條保留，收合動畫剛好需要
 */

/* 有子選單的項目改直向排列，標題列與子選單才會上下堆疊 */
menu ul.menuBox li.hasSub,
nav ul.menuBox li.hasSub {
	flex-direction: column;
	align-items: stretch;
}

menu ul.menuBox li.hasSub > .subHead,
nav ul.menuBox li.hasSub > .subHead {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* 展開／收合鈕：只有這顆會切換狀態，主標題仍然是連到 HUI理念 的連結 */
menu ul.menuBox li.hasSub .subToggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	padding: 0;
	margin-left: .5em;
	border: 0;
	background: transparent;
	color: #4d4d4d;
	cursor: pointer;
	line-height: 1;
}

menu ul.menuBox li.hasSub .subToggle:hover,
menu ul.menuBox li.hasSub .subToggle:focus-visible {
	color: #4d4398;
}

menu ul.menuBox li.hasSub .subToggle i {
	display: block;
	transition: transform .3s ease;
}

menu ul.menuBox li.hasSub.open .subToggle i {
	transform: rotate(180deg);
}

/*
 * 收合用 max-height 而不是 display:none，才有得過渡。
 * 30em 是「一定大於實際高度」的上限值，不是實際高度 ——
 * transition 需要具體數值，auto 不能過渡。項目多到超過 30em
 * 時會被截掉，屆時把這個值調大即可。
 */
menu ul.subMenu,
nav ul.subMenu {
	margin: 0;
	padding-left: 1em;
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease;
}

menu ul.menuBox li.hasSub.open > ul.subMenu,
nav ul.menuBox li.hasSub.open > ul.subMenu {
	max-height: 30em;
}

/*
 * 刻意不覆寫 font-size：佈景本身的 h5 是 1.35em、h6 是 1.15em
 * （≤992px 時為 1.1em / 1.05em），h6 相對 h5 已經是 0.85 的級距，
 * 正好是「比母項目小一點點」。先前多寫了 font-size:.85em，那是在
 * h6 的 1.15em 之上再壓一次，結果只剩母項目的 63%，明顯過小。
 * 層級差異靠縮排、字重與透明度表現就夠了。
 */
menu ul.subMenu li h6,
nav ul.subMenu li h6 {
	margin: 0;
	font-weight: 400;
	opacity: .85;
}

menu ul.subMenu li.active h6 {
	color: #4d4398;
	font-weight: bold;
	opacity: 1;
}

/* 鍵盤操作時要看得見焦點，否則這顆鈕只能用滑鼠 */
menu ul.menuBox li.hasSub .subToggle:focus-visible {
	outline: 2px solid #4d4398;
	outline-offset: 2px;
}