/* ==========================================================================
   頂部導覽列與選單控制專用樣式 (Navigation Bar & Menus)
   ========================================================================== */
#main-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
    background: var(--white);
    background-image: var(--brand-bg-overlay), var(--brand-bg-image);
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--slate-200);
}
.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .nav-wrapper {
        align-items: center;
        padding-bottom: 0;
    }
}

.header-left {
    display: flex;
    align-items: center;
}
.logo {
    display: flex;
    align-items: center;
}
.logo-img {
    height: 32px;
    width: auto;
    display: block;
}
@media (max-width: 1024px) {
.logo-img {
    height: 24px;
}
}

.nav-divider {
    color: var(--slate-400);
    font-weight: 300;
    font-size: 14px;
    user-select: none;
}

.left-home {
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background-color: #3b82f6 !important;
    color: var(--white);
    padding: 5px 12px;
}
.left-home:hover {
    color: var(--primary-blue);
}


/* 雙語系切換全域控制 */
html[lang="en"] .zh {
    display: none !important;
}

html[lang="zh-TW"] .en {
    display: none !important;
}

/* 語系按鈕橘色外框 */
.lang-toggle-btn-custom {
    font-weight: 900;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 4px;
    border: 3px solid #7c5a10;   /* 未選中：暗金色邊框 */
    background-color: #7b7d87;   /* 未選中：中灰藍底色 */
    color: #25ebd4;              /* 未選中：深暗藍色字 */
            display: inline-flex;
            align-items: center;
            justify-content: center;
			font-size: 10px;             /* 字體縮小 */
			width: 42px;                 /* 固定寬度縮小，確保中英文按鈕等寬 */
			padding: 2px 6px;            /* 內距縮小 */
}


@media (min-width: 1024px) {
    .lang-toggle-btn-custom {
    font-size: 14px;         /* 恢復 14px */
    /* padding: 4px 10px;     //  恢復原本內距 */
				width: 56px;             /* 恢復相當於 w-14 的寬度 */
    }
}
        /* --- 當前語系為繁中時 --- */
html[lang="zh-TW"] #lang-toggle-zh {
    opacity: 1 !important;       /* 中文按鈕完全亮起 */
    border: 3px solid #f7a70c !important;
    background-color: #ffffff !important;
    color: #2563eb !important;
}
html[lang="zh-TW"] #lang-toggle-en {
    color: #25ebd4 !important;
}

        /* --- 當前語系為英文時 --- */
html[lang="en"] #lang-toggle-en {
    opacity: 1 !important;       /* EN 按鈕完全亮起 */
    border: 3px solid #f7a70c !important;
    background-color: #ffffff !important;
    color: #2563eb !important;
}
html[lang="en"] #lang-toggle-zh {
    color: #25ebd4 !important;
}

.lang-switch-inline {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-400);
    user-select: none;
}
.lang-switch-inline span {
    cursor: pointer;
    transition: color var(--transition-speed) ease;
}
.lang-switch-inline span:hover {
    color: var(--primary-blue);
}
.lang-switch-inline span.active {
    color: var(--primary-blue);
    font-weight: 900;
}
.lang-divider-inline {
    color: var(--slate-300);
    font-weight: normal;
    cursor: default !important;
    margin: 0 1px;
}

/* 右側導覽選單連結 */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}


.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--primary-blue);
}

.nav-links li {
    position: relative;
}

.nav-links li:hover {
    display: block;
}

.nav-highlight {
    min-height: 32px;
    color: var(--dark-orange) !important;
    border: 1px solid var(--dark-orange);
    padding: 0.25rem 0.875rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-highlight:hover {
    background-color: rgba(234, 88, 12, 0.05);
    border-color: var(--primary-blue);
    color: var(--primary-blue) !important;
}

.nav-link {
            transition: all 0.3s ease;
    /* font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    white-space: nowrap;
    padding: 0.25rem 0;
    line-height: 1.2;
    text-align: center;
    cursor: pointer; */
}


.nav-link:hover .nav-underline {
    border-bottom-color: currentColor;
    /* color: var(--primary-blue); */
}

.nav-scroll-top {
    color: var(--slate-900);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, color 0.3s ease;
}
.nav-scroll-top:hover {
    color: var(--primary-blue);
    transform: translateY(-2px);
}

/* 下拉選單 */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: 220px;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
    z-index: 1100;
    border-radius: 1rem;
    border: 1px solid var(--slate-200);
    padding: 0.75rem 0;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
}
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -0.6rem;
    left: 0;
    width: 100%;
    height: 0.6rem;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-item {
    padding: 0.5rem 1.25rem;
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-600);
    transition: all 0.2s ease;
    text-align: left;
}
.dropdown-item:hover {
    background-color: var(--slate-100);
    color: var(--primary-blue);
}

/* 英文導覽列排版調整 */
html[lang="en"] .nav-links {
    gap: 1rem;
}
html[lang="en"] .nav-link {
    font-size: 13px;
    white-space: normal;
    max-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* 手機版導覽與選單 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate-100);
    z-index: 1001;
    padding: 0.5rem;
}

#mobile-nav {
    /* position: absolute;
    top: 100%;
    width: max-content;
    min-width: 180px;
    max-width: calc(100vw - 3rem);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    z-index: 900;
    display: none;
    padding: 1.25rem 1.75rem;
    border-radius: 1.5rem;
    border: 1px solid var(--slate-200);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    margin-top: 0.5rem; */
}
#mobile-nav.active {
    display: block;
}
.mobile-links {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
}

@media (min-width: 1024px) {
    .mobile-links {
    gap: 1.125rem;
    }
}
.mobile-nav-item {
    padding: 0.25rem 0;
    color: var(--slate-500);
    white-space: nowrap;
    cursor: pointer;
}

.mobile-nav-highlight {
    color: var(--dark-orange) !important;
}

.mobile-nav-overlay {
    position: fixed;
    top: 70px;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    z-index: 1050;
    display: none;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.25rem;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-width: 220px;
}

.mobile-nav-overlay.active {
    display: flex;
}

.mobile-nav-overlay a {
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    color: var(--text-main);
    text-transform: uppercase;
}


.mobile-sub-item {
    padding-left: 1.25rem;
    font-size: 0.9rem;
    color: var(--slate-400);
    border-left: 2px solid var(--slate-100);
    margin-left: 0.25rem;
}

/* 響應式控制 */
@media (max-width: 1023px) {
    .nav-links { display: none; }
    .menu-toggle { display: block; }
}

@media (max-width: 640px) {
    .header-left .nav-divider:nth-of-type(2),
    .header-left .left-home {
        display: none !important;
    }
    .lang-switch-inline {
        font-size: 13px;
    }
}