/* --- Top Bar & Logo Icons Styles --- */

/* 頂部導航欄容器 */
/* 修正後的 topbar.css */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: center; 
    background: #111;
    padding: 10px 40px;
    border-bottom: 2px solid #ff4500;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
    min-height: 60px;
    
    width: 100%;       /* 使用容器百分比而非視窗寬度 */
    margin-left: 0;    /* 移除位移計算 */
    left: 0;
    box-sizing: border-box;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    
    /* 關鍵修改：使用 absolute 讓它不參與 flex 置中計算 */
    position: absolute;
    left: 40px; 
    /* 移除任何可能影響位置的 margin 或 flex 屬性 */
    flex: none; 
    text-decoration: none;   /* ❌ 去底線 */
  color: inherit;   
}

.nav-logo span {
    color: #ff4500;
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px #8b2500, 2px 2px 0px #8b2500, 3px 3px 0px rgba(0,0,0,0.5);
}

/* Logo 圖片 */
.logo-img { 
    height: 35px; 
    width: 35px; 
    object-fit: contain; 
}

/* 導航項目群組 */
.nav-group {
    display: flex;
    gap: 20px;
    margin: 0 auto; 
}

/* 導航連結樣式 */
.nav-item { 
    cursor: pointer; 
    color: #ccc; 
    font-weight: bold; 
    transition: color 0.3s; 
    text-decoration: none; /* 確保 a 標籤沒有底線 */
}

.nav-item:hover { 
    color: #fff; 
}

/* 投稿按鈕特殊顏色 */
.btn-submit { 
    color: #ff4500; 
}

/* 當前頁面標示 */
.nav-item.active { 
    border-bottom: 2px solid #ff4500; 
    padding-bottom: 5px; 
}

/* RWD 響應式處理 (針對 Top Bar) */
@media (max-width: 600px) {
    .nav-logo span { 
        display: none; 
    }
    .nav-group { 
        margin-right: 0; 
        gap: 15px; 
    }
}

@media (max-width: 1000px) {
    .top-nav {
        flex-direction: column;
        justify-content: center;
        /* 確保手機版內邊距左右對稱，移除原本電腦版可能的 40px */
        padding: 10px 0 !important; 
        min-height: auto;
    }

    .nav-logo {
        position: static; /* 務必還原為 static，否則會重疊 */
        margin: 0 auto 10px auto; /* 強制水平置中並給予下方間距 */
        justify-content: center;
        width: auto;
        left: auto;
        text-decoration: none;   /* ❌ 去底線 */
  color: inherit;   
    }

    .nav-group {
        width: 100%;
        /* 關鍵：使用 center 確保子項目在容器內絕對置中 */
        justify-content: center; 
        /* 移除可能導致偏移的 margin-left */
        margin: 0 auto; 
        gap: 12px;
        /* 增加左右內邊距，防止文字貼到螢幕邊緣 */
        padding: 5px 10px; 
        box-sizing: border-box;
        
        /* 解決部分手機文字靠右的問題：確保沒有任何剩餘空間分配不均 */
        display: flex;
        flex-wrap: nowrap; 
    }

    .nav-item {
        /* 確保文字水平置中，防止繼承自電腦版的 text-align: left */
        text-align: center;
        flex: 0 0 auto; 
    }
}