/* ==========================================================================
   0. 首頁標題與開頭標語微調 (徹底消除上方白邊)
   ========================================================================== */
/* 隱藏首頁上多餘的「首頁」大字 */
.home .entry-header .entry-title {
	display: none !important;
}

/* 徹底消除原本首頁標題區塊殘留的上下空隙，讓 Banner 完美貼合選單 */
.home .entry-header {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	height: 0 !important;
	min-height: 0 !important;
}

/* 調整首頁 Banner 內的主標題 (Booker Learn) */
.home .site-hero-section h1,
.home .entry-content h1 {
	font-size: 32px !important;
/* 放大主標題 */
	letter-spacing: 1.5px !important;
/* 稍微拉開字距，提升質感 */
	font-weight: 800 !important;
	margin-bottom: 5px !important;
}

/* 調整首頁 Banner 內的開頭標語 (創客、旅遊、科技學習) */
.home .site-hero-section p,
.home .entry-content p.has-text-align-center {
	font-size: 16px !important;
/* 調整副標題大小 */
	color: #666666 !important;
/* 使用優雅的深灰色 */
	letter-spacing: 2px !important;
/* 讓中文字距變寬，更有呼吸感 */
	margin-top: 5px !important;
}

/* ==========================================================================
   1. 列表與排版優化 (清單承上與近期文章標題/行距縮小)
   ========================================================================== */
/* A. 讓整個清單「承接上一段」：第一排（含數字）整體右移 */
.diary-indent {
	margin-left: 1.5rem;
/* 👈 這就是「承上」的視覺關鍵 */
}

/* B. 清單本體設定（維持數字在外） */
.diary-indent .wp-block-list {
	padding-left: 1.75rem !important;
	list-style-position: outside !important;
	list-style-type: decimal !important;
}

/* C. 縮小首頁與列表頁的近期文章標題，並同步縮緊行距與下方間隙 */
.blog .entry-title a, 
.archive .entry-title a,
.home .entry-title a {
	font-size: 20px !important;
/* 調整標題字型大小 */
	font-weight: 600 !important;
/* 降低粗度更顯輕盈 */
	line-height: 1.25 !important;
/* 縮小行高，讓多行標題更緊湊 */
	display: block !important;
/* 確保行高能完美套用在超連結上 */
}

/* 緊縮標題與下方發佈日期、作者等資訊的間距 */
.blog .entry-header, 
.home .entry-header {
	margin-bottom: 8px !important;
/* 縮減標題區塊與下方資訊的間距 */
}

/* 調整標題本身的外距 */
.blog .entry-title,
.home .entry-title {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
/* 減少標題本身的上下外距 */
}

/* 縮短首頁文章與文章之間的過長空隙 */
.hentry {
	margin-bottom: 3.5em;
	padding-bottom: 2em;
	border-bottom: 1px solid #eaeaea;
/* 加入細分隔線，增加區隔度 */
}

/* ==========================================================================
   2. 電腦版版面配置 (維持 18% / 82% 完美比例 + 廣告自適應)
   ========================================================================== */
/* 縮小側欄 */
.widget-area {
	width: 18% !important;
	float: right !important;
	border-left: 1px solid #ddd;
/* 保持側邊框 */
}

/* 限制側欄內廣告與圖片的最大寬度，防止超出 18% 容器 */
.widget-area img,
.widget-area iframe,
.widget-area .widget {
	max-width: 100% !important;
	height: auto !important;
}

/* 擴展主內容區塊（包含文章） */
.site-main {
	width: 82% !important;
	float: left !important;
	background-color: #ffffff;
/* 保持主內容區背景色 */
	padding: 0 20px;
/* 讓左右有些間距，避免緊貼邊緣 */
	display: block !important;
}

/* 確保主內容區不會有額外邊界影響顏色 */
.site-main .entry-inner {
	background-color: transparent !important;
}

/* 保證文字顏色和版面仍然對應 */
.entry-content {
	color: #333333;
/* 保持文章文字顏色 */
}

/* 放寬留言區容器寬度，與文章內容一致 */
.comments-area,
.comments-title,
.comment-list,
.comment-respond {
	width: 100% !important;
	max-width: 100% !important;
}

/* 擴展文章主體容器的寬度，使用整個主要欄位 */
.entry-inner,
.entry-content {
	width: 100% !important;
	max-width: 100% !important;
}

/* 若佈局使用 grid/flex，強制文章容器佔據左側主欄 */
.content-area {
	width: 100% !important;
}

/* ==========================================================================
   3. 手機版 RWD 調整 (已修正選取器亂碼問題)
   ========================================================================== */
@media (max-width: 768px) {
	/* 調整內容順序，讓主內容在上方 */
	.content-area {
		display: flex !important;
		flex-direction: column !important;
	}
	
	/* 主內容區先顯示 */
	.site-main {
		width: 100% !important;
		float: none !important;
		padding: 0 10px;
	/* 更小的左右間距 */
		order: 1 !important;
	/* 確保主內容優先顯示 */
	}
	
	/* 側欄放到底部 */
	.widget-area {
		width: 100% !important;
		float: none !important;
		border-left: none;
	/* 移除側邊框 */
		border-top: 1px solid #ddd;
	/* 添加頂部分隔線 */
		padding-top: 20px;
	/* 頂部間距 */
		margin-top: 30px;
	/* 與主內容的間距 */
		order: 2 !important;
	/* 確保側欄在主內容後顯示 */
		display: block !important;
	/* 確保側欄可見 */
		visibility: visible !important;
	/* 確保側欄可見 */
	}
	
	/* 讓側欄內的小工具並排顯示（適用於廣告） */
	.widget-area .widget {
		width: 100%;
	/* 確保小工具佔滿寬度 */
		margin-bottom: 20px;
	/* 小工具之間的間距 */
		clear: both;
	/* 確保小工具不會互相干擾 */
	}
	
	/* 讓留言區適應手機 */
	.comments-area,
		.comments-title,
		.comment-list,
		.comment-respond {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 10px;
	/* 增加內邊距，避免邊緣貼緊 */
	}
	
	/* 讓文章區域充滿寬度 */
	.entry-inner,
		.entry-content {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 10px;
	/* 增加間距，避免內容過於擁擠 */
	}
}