/* ==========================================================================
   1. 第一層主選單：強力、無條件強制扭轉為「橫向排列」
   ========================================================================== */

/* 
   排除所有帶有 .sub-menu 的列表，只抓取最外層的主選單項目。
   不論中間隔了幾層 div，只要它是最外層的 li，就強制 100% 橫向並排！
*/
#main_menu ul:not(.sub-menu) li:not(.sub-menu li) {
    position: relative;
    display: inline-block; /* 強制第一層主選項水平並排 */
    vertical-align: middle;
    padding-right: 1.5em;   /* 預留固定寬度給右手邊的無障礙按鈕 */
    margin: 0;
}

/* 第一層主選單的文字連結 */
#main_menu ul:not(.sub-menu) > li > a {
    display: block;
    padding: .3em .2em;
    white-space: nowrap; /* 防止中文字串因為空間擠壓而意外斷行 */
}

#main_menu ul li:hover > a,
#main_menu ul li a:hover {
	background: rgba(255,255,255,.1);
/*	color: #FFFF00; */
}

/* ==========================================================================
   2. 第二層及更深層（所有子選單）：100% 完全預設隱藏，且內部直向排列
   ========================================================================== */
#main_menu .sub-menu {
    position: absolute;
    z-index: 999;
    min-width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

    /* 【核心隱藏防線】平時完美隱藏，絕對不會在畫面散開或露出 */
    opacity: 0;
    visibility: hidden;
    display: block; /* 保持區塊特性才能讓絕對定位精準計算下、右座標 */
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 子選單內部的每一個選項：一律強制變回「垂直直立堆疊」 */
#main_menu .sub-menu li {
    position: relative; 
    display: block; /* 第二層以後強制由上往下直排 */
    width: 100%;
    padding-right: 1.5em; /* 同樣為內層選項右邊的按鈕留空間 */
    margin: 0;

	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: rgba(255,255,255,.3);
}

/* 子選單內部的連結 */
#main_menu .sub-menu li > a {
    display: block;
    padding: .5em;
}

/* ==========================================================================
   3. 【彈出方向精準定位】這段決定了子選單究竟要往哪裡彈
   ========================================================================== */

/* 【第一層子選單（第二層）】：對齊主選項的「正下方」 */
#main_menu ul:not(.sub-menu) > .menu-item-has-children > .sub-menu {
    top: 100%;
    left: 0;
}

/* 【第二層以後的子選單（第三層、第四層等）】：出現在當前選項的「正右側」 */
#main_menu .sub-menu .sub-menu {
    top: 0;
    left: 100%; /* 往右手邊橫向彈出延伸 */
}

/* ==========================================================================
   4. 【精準驅動顯示】
   ========================================================================== */
/* 當滑鼠 Hover 該項目，或者 JS 幫子選單加上 .is-open 時，才准現形 */
#main_menu .menu-item-has-children:hover > .sub-menu,
#main_menu .sub-menu.is-open {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   5. 無障礙按鈕與視覺焦點外框
   ========================================================================== */
/* 箭頭按鈕基本定位與外觀 */
#main_menu .menu-toggle-btn {
    position: absolute;
    right: .7em;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: .3em;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* 視覺無障礙：顯眼高對比鍵盤焦點框 */
#main_menu a:focus,
#main_menu button:focus {
    outline: 3px solid #0056b3;
    outline-offset: -3px;
    background: #fff8db !important;
	color: #111 !important;
}

/* 箭頭通用基礎設定 */
.menu-toggle-btn .arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

/* --------------------------------------------------------------------------
   【核心修改】區分「第一層」與「第二層以後」的箭頭方向
   -------------------------------------------------------------------------- */

/* ── A. 第一層主選單箭頭 ── */
/* 未展開：預設向下 (▼) 旋轉 0 度 */
#main_menu ul:not(.sub-menu) > li > .menu-toggle-btn .arrow {
    transform: rotate(0deg);
}
/* 已展開：轉 180 度變成向上 (▲) */
#main_menu ul:not(.sub-menu) > li > .menu-toggle-btn.is-active .arrow {
    transform: rotate(180deg);
}

/* ── B. 第二層及更深層的選單箭頭 ── */
/* 未展開：將原本向下的小三角形向左轉 270 度（或向右轉 -90 度），視覺上就會變成「向右 (▶)」 */
#main_menu .sub-menu .menu-toggle-btn .arrow {
    transform: rotate(-90deg);
}
/* 已展開：轉回 0 度（或轉回正下方），視覺上就會變回「向下 (▼)」 */
#main_menu .sub-menu .menu-toggle-btn.is-active .arrow {
    transform: rotate(0deg);
}

/***********************************************************/

/* 預設展開樣式：不限制高度、不產生內部捲軸，讓滑鼠滾輪直接捲動整個網頁 */
#main_menu .sub-menu.is-open {
    display: block;
    visibility: visible;
    opacity: 1;
    transition: none;
    max-width: 90vw;
}

/* 右側空間不足時自動改為靠右對齊 */
#main_menu .sub-menu.is-edge-right {
    left: auto;
    right: 0;
}

/* 第三層孫選單右側空間不足時往左側展開 */
#main_menu .sub-menu .sub-menu.is-edge-right {
    left: auto;
    right: 100%;
}