/* 整個頁面容器 */
.blog-page-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 左側導覽欄 */
.sidebar-left {
    position: relative;
    z-index: 1000;
    width: 250px;
    max-width: 250px;
    padding: 15px;
    border-right: 1px solid #ddd;
}

/* 右側內容區 */
.content-right {
    flex: 1;
    max-width: calc(100% - 250px);
    background-color: #ffffff;
}

/* 麵包屑區 */
.breadcrumb-container {
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
}

/* 頁面標題 */
.archive-title h1 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}

.post-content {
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
}

/*====================================
  上一篇下一篇文章 CSS
======================================*/

nav[role="navigation"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.nav-previous,
.nav-next {
    flex: 1;
    position: relative; /* 讓內部 <a> 能夠覆蓋整個區塊 */
    padding: 15px 20px; /* 增加點擊範圍 */
    background-color: #f8f8f8; /* 背景顏色，讓它像按鈕 */
    transition: background 0.3s ease;
}

.nav-previous:hover,
.nav-next:hover {
    background-color: #e0e0e0; /* 滑鼠懸停時變色 */
    cursor: pointer;
}

/* 讓 <a> 直接填滿 .nav-previous 和 .nav-next，確保整個框都可點擊 */
.nav-previous a,
.nav-next a {
    display: inline-block; /* 讓 <a> 變成區塊 */
    width: 100%; /* 讓 <a> 填滿整個區塊 */
    height: 100%; /* 讓 <a> 覆蓋整個區塊 */
    text-decoration: none; /* 移除底線 */
    color: inherit; /* 讓文字顏色保持原樣 */
}

/* 確保內部文字正常顯示，不被 <a> 影響 */
.nav-previous div,
.nav-next div {
    position: relative;
    z-index: 10; /* 讓標題、標籤顯示在 <a> 之上 */
}

/* 左右對齊 */
.nav-previous {
    text-align: left;
}

.nav-next {
    text-align: right;
    border-left: 1px solid #ddd; /* 中間分隔線 */
}


.message-list .active{
background-color: #a89372;
}

.message-list .active a {color: #ffffff;}

@media (max-width: 768px) {
    /* 手機版隱藏側邊欄 */
    .sidebar-left {
      display: none;
    }
  
    /* 手機版主內容區全寬 */
    .content-right {
      max-width: 100%;
      width: 100%;
    }
  }