/* ==== 導覽 分頁 頁籤 (通用樣式) ==== */
.nav-tabs .nav-link {
    /* 預設連結顏色 */
    color: #555;
}

.nav-item {
    /* 為每個 tab item 增加底部陰影效果 */
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.nav-tabs .nav-link.active {
    /* 作用中 tab 的背景色和文字顏色 */
    background-color: #005691;
    color: #FFFFFF;
}

.nav-tabs .nav-link:hover {
    /* 懸停時的背景色和文字顏色 */
    background-color: #E8F1F5;
    color: black;
}

.gg-menu-container {
/* 整個選單容器的上邊距 */
margin-top: 1rem;
}


/* ==================== 2. Desktop 專業 tabs bar 樣式 (Desktop Tabs Style) ==================== */

/* Desktop: 專業 tabs bar */
.gg-menu-desktop {
/* 在大螢幕上顯示 */
display: block;
}

.gg-menu-bar {
/* 底部細線分隔線 */
border-bottom: 1px solid #e0e0e0;
}

.gg-menu-tabs {
list-style: none;
margin: 0;
/* 內邊距，提供左右空間 */
padding: 0 0.25rem;
/* 使用 Flexbox 進行排版 */
display: flex;
/* 允許換行 */
flex-wrap: wrap;
/* 項目間距 */
gap: 0.25rem;
}

.gg-menu-tabs .nav-item {
margin: 0;
}

.gg-menu-tabs .nav-link {
border: none;
/* 圓角只在上方 */
border-radius: 10px 10px 0 0;
margin: 0;
/* 內部邊距調整 */
padding: 0.35rem 0.85rem 0.25rem;
background: transparent;
/* 預設文字顏色 */
color: #607d8b;
/* 使用 Flexbox 讓主標題和副標題垂直排列 */
display: flex;
flex-direction: column;
align-items: flex-start;
/* 增加過渡動畫 */
transition: all 0.15s ease-out;
/* 設置定位，方便 ::after 絕對定位 */
position: relative;
}

.gg-menu-main {
/* 主標題字體大小和粗細 #0.9 */
font-size: 1.02rem;
font-weight: 600;
}

.gg-menu-sub {
/* 副標題字體大小和顏色  0.72*/
font-size: 0.84rem;
color: #b0bec5;
}

/* 底部藍色/灰色指示線 (使用偽元素) */
.gg-menu-tabs .nav-link::after {
content: "";
/* 絕對定位在底部 */
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
border-radius: 999px;
background: transparent;
transition: all 0.15s ease-out;
}

.gg-menu-tabs .nav-link:hover {
/* 懸停時的背景色和文字顏色 */
background: #f5f5f5;
color: #1e88e5;
}

.gg-menu-tabs .nav-link:hover::after {
/* 懸停時底部指示線的顏色 */
background: rgba(30,136,229,0.4);
}

.gg-menu-tabs .nav-link.active {
/* 作用中 tab 的專屬樣式 */
background: #ffffff;
color: #1e88e5;
/* 邊框設定 */
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-top: 2px solid #1e88e5;
border-bottom: 1px solid #ffffff; /* 覆蓋 gg-menu-bar 的底線 */
}

.gg-menu-tabs .nav-link.active::after {
/* 作用中 tab 底部指示線的顏色 */
background: #1e88e5;
}

.gg-menu-tabs .nav-link.active .gg-menu-sub {
/* 作用中 tab 副標題的顏色 */
color: #64b5f6;
}

/* 桌面版 - 響應式調整 (Responsive Desktop) */
@media (max-width: 768px) {
.gg-menu-tabs {
    /* 允許在較小螢幕上水平滾動 */
    overflow-x: auto;
    white-space: nowrap;
}
.gg-menu-tabs .nav-item {
    /* 確保項目不被壓縮，保持原始寬度 */
    flex: 0 0 auto;
}
}

@media (max-width: 576px) {
.gg-menu-desktop {
    /* 在手機螢幕尺寸隱藏桌面版 */
    display: none;
}
}


/* ==================== 3. Mobile Dropdown 選單樣式 (Mobile Dropdown Style) ==================== */

/* Mobile: dropdown 卡片 */
.gg-menu-mobile {
/* 預設隱藏，只在手機尺寸顯示 */
display: none;
margin-top: 0.5rem;
/* 設置相對定位，以便下拉列表絕對定位 */
position: relative;
}

.gg-menu-dropdown-toggle {
/* 切換按鈕的樣式 */
border-radius: 12px;
padding: 0.5rem 0.75rem;
background: #f5f7fb;
border: 1px solid #d7e3fc;
/* 使用 Flexbox 讓資訊和箭頭分列兩邊 */
display: flex;
justify-content: space-between;
align-items: center;
}

.gg-menu-dropdown-info {
/* 資訊區 (LABEL/TITLE/SUB) 垂直排列 */
display: flex;
flex-direction: column;
}

.gg-menu-dropdown-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #90a4ae;
}

.gg-menu-dropdown-title {
font-size: 0.9rem;
font-weight: 600;
color: #1e88e5;
}

.gg-menu-dropdown-sub {
font-size: 0.75rem;
color: #90a4ae;
}

.gg-menu-dropdown-caret {
font-size: 1rem;
color: #90a4ae;
margin-left: 0.5rem;
}

.gg-menu-dropdown-list {
/* 下拉列表的容器樣式 */
position: absolute;
left: 0;
right: 0;
margin-top: 0.25rem;
border-radius: 12px;
background: #ffffff;
border: 1px solid #e0e0e0;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
max-height: 320px;
/* 超出高度時允許滾動 */
overflow-y: auto;
/* 確保列表在其他元素之上 */
z-index: 20;
/* 初始隱藏，由 JS 控制顯示 */
display: none;
}

.gg-menu-dropdown-item {
padding: 0.5rem 0.75rem;
/* 項目之間的底線 */
border-bottom: 1px solid #f2f2f2;
}

.gg-menu-dropdown-item:last-child {
/* 最後一項移除底線 */
border-bottom: none;
}

.gg-menu-dropdown-item-link {
text-decoration: none;
display: block;
color: #455a64;
}

.gg-menu-dropdown-item-title {
font-size: 0.88rem;
font-weight: 600;
}

.gg-menu-dropdown-item-sub {
font-size: 0.75rem;
color: #9eabb4;
}

.gg-menu-dropdown-item-active {
/* 作用中項目的背景色 */
background: #e3f2fd;
}

.gg-menu-dropdown-item-active .gg-menu-dropdown-item-title {
/* 作用中項目的標題顏色 */
color: #1e88e5;
}

/* 手機版 - 響應式調整 */
@media (max-width: 576px) {
.gg-menu-mobile {
    /* 在手機螢幕尺寸顯示手機版 */
    display: block;
}
}


/* ==================== 4. Mobile 目前所在頁面 Banner 樣式 (Mobile Current Page Banner) ==================== */

/* 下方「目前所在頁面」— 改成只在 mobile 顯示 */
.gg-menu-current-banner {
display: none;           /* 預設桌機不顯示 */
margin-top: 0.75rem;
margin-bottom: 0.25rem;
text-align: center;
}

.gg-menu-current-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #b0bec5;
margin-bottom: 0.2rem;
}

.gg-menu-current-title {
font-size: 0.95rem;
font-weight: 600;
color: #263238;
}

.gg-menu-current-sub {
font-size: 0.78rem;
color: #90a4ae;
}

/* 手機版 - 響應式調整 */
@media (max-width: 576px) {
.gg-menu-current-banner {
    display: block;        /* 只有小螢幕顯示 */
    margin-top: 0.6rem;
}
}