/* --- 第 1 層：橫排主導航列 --- */
.dropdown {
    display: flex;             
    background-color: #345D89;   /* 主背景色 */
    padding: 0;
    margin: 0;
    font-family: Arial, sans-serif;
}

.dropdown-content {
    display: flex !important;  
    position: static;          
    width: 100%;
}

.dropdown-content > a, 
.dropdown-content > .has-submenu {
    display: inline-block;
    border-right: 1px solid rgba(255, 255, 255, 0.2); /* 第 1 層垂直分隔線 */
}

.dropdown-content a {
    color: #F9C90E;             
    padding: 6px 15px;
    text-decoration: none;
    text-align: center;
    display: block;
}

.dropdown-content > a:hover,
.dropdown-content > .has-submenu > .submenu-toggle:hover {
    background-color: #2b6cb0; /* 第 1 層滑鼠懸停色 */
}

/* --- 子選單通用基礎設定 (第 2 層與 第 3 層) --- */
.has-submenu {
    position: relative;        /* 作為子選單絕對定位的基準點 */
}

.submenu-toggle {
    cursor: pointer;
}

.submenu-content {
    display: none;             /* 預設隱藏 */
    position: absolute;        
    background-color: #f9f9f9; 
    min-width: 180px;
    box-shadow: 2px 8px 16px rgba(0,0,0,0.2);
    z-index: 100;
}

.submenu-content a {
    color: #333 !important;   /* 子選單文字改為深色 */
    padding: 6px 15px;
    text-align: left;
    display: block;  
    border-bottom: 1px solid #e2e8f0; /* 子項目間的水平分隔線 */
}

.submenu-content a:last-child {
    border-bottom: none;       /* 移除最後一項的底線 */
}

.submenu-content a:hover {
    background-color: #edf2f7; /* 子選單項目懸停色 */
}

/* --- 第 2 層與 第 3 層的精準定位差異 --- */

/* 第 2 層：向下彈出，對齊母項目左側 */
.submenu-content.level-2 {
    top: 100%;                 
    left: 0;                   
}

/* 第 3 層：向右彈出，對齊母項目右側與頂部 */
.submenu-content.level-3 {
    top: 0;                    
    left: 100%;                
    background-color: #f0f4f8; /* 可選：讓第 3 層顏色稍微深一點點做區隔 */
}

/* --- JavaScript 切換顯示的類別 --- */
.show-menu { 
    display: block !important; 
}