/*
 * site-grid.css —— 版面基礎樣式
 *
 * 用途：取代 Weebly 平台的 sites.css（210 KB）。
 *
 * 為何需要這個檔案：
 * 本站頁面結構使用一組 wsite-* 類別名稱（區塊包裝、多欄表格網格、
 * 圖片區塊、blog 版面），這些類別的樣式原本由 Weebly 的 sites.css 提供。
 * 實測該檔 1,998 條規則中本站只命中 60 條、約 5.3 KB，
 * 其餘 97% 屬於本站未使用的功能（購物車、會員、gallery、表單元件等）。
 *
 * 本檔以自行撰寫的方式重現那 60 條規則的效果，
 * 使本站不再需要平台的 CSS。
 *
 * 載入順序要求：必須在 main_style.css 之前。
 * main_style.css 是主題樣式，會覆寫本檔的部分宣告（例如按鈕外觀），
 * 這是預期行為；順序顛倒會導致主題樣式失效。
 *
 * 有標註 !important 的宣告是必要的 —— 頁面的 inline style 或
 * main_style.css 會覆寫這些版面基礎值，導致表格網格錯位。
 */

/* ── 區塊包裝：以 table 達成垂直居中 ───────────────────────────
   每個 .wsite-section-wrap 是一個 table，內含單一 .wsite-section
   作為 table-cell。這樣的結構讓區塊內容能垂直居中，
   且區塊高度可由內容或 inline style 指定的 height 決定。
   （現代寫法會用 flex，但此處沿用 table 以維持與既有 HTML
     結構及 inline height 宣告的相容性。） */
.wsite-section-wrap {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.wsite-section {
	display: table-cell;
	width: 100%;
	height: 230px;
}

.wsite-section-wrap .wsite-section {
	vertical-align: middle;
}

/* 頁面只有單一區塊時（例如純內容頁），內容應靠上對齊而非居中，
   並給一個較大的最小高度避免頁面過矮 */
.wsite-section-wrap:only-child .wsite-body-section {
	height: 400px;
	vertical-align: top;
}

.wsite-header-section {
	text-align: center;
}

.wsite-not-footer {
	text-align: left;
}

.wsite-footer {
	clear: both;
}

/* ── 多欄網格：table 實作 ──────────────────────────────────────
   HTML 以 table/tr/td 表達多欄版面，欄寬由 td 的 inline style
   以百分比指定。table-layout: fixed 讓那些百分比生效
   （auto 模式會依內容重新分配寬度，導致欄寬跑掉）。
   border-collapse: collapse 消除 separate 模式預設的
   2px border-spacing，避免欄間出現額外間隙。 */
.wsite-multicol {
	position: relative;
	direction: ltr;
}

.wsite-multicol-table {
	position: relative;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.wsite-multicol-col {
	vertical-align: top;
	padding: 0;
	margin: 0 !important;
	border: 0 !important;
}

/* ── 文字換行 ─────────────────────────────────────────────────
   標題與段落可能含長網址或無空格的長字串，
   不換行會撐破欄寬 */
h2,
.wsite-content-title,
.paragraph {
	overflow-wrap: break-word;
}

/* ── 圖片區塊 ─────────────────────────────────────────────────
   .wsite-image 需要 position: relative 作為圖說等絕對定位子元素的
   定位基準。.imgPusher 是浮動圖片的清除容器。 */
.wsite-image {
	position: relative;
}

.imgPusher {
	display: block;
	overflow: hidden;
}

/* 圖片邊框：四種粗細共用同一個 1px 細邊框樣式。
   邊框顏色使用低透明度黑，可同時適應淺色與深色背景。 */
body .wsite-image-border-hairline a img,
body .wsite-image-border-thin a img,
body .wsite-image-border-medium a img,
body .wsite-image-border-thick a img {
	border: 1px solid rgba(0, 0, 0, 0.13);
}

.wsite-image-border-none a img {
	border-width: 0 !important;
}

/* medium 邊框額外撐開左右內距，並以負 margin 抵銷，
   使圖片視覺寬度不因邊框而改變 */
.wsite-image-border-medium {
	padding-left: 4px !important;
	padding-right: 4px !important;
}

.wsite-image-border-medium img {
	padding: 3px !important;
	margin-left: -4px !important;
	margin-right: -4px !important;
}

/* 相簿圖片外框 */
html body .galleryImageBorder,
html body a .galleryImageBorder {
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.13);
	background-color: rgba(206, 208, 210, 0.1);
}

/* 圖片本身是連結時不加底色，避免與連結樣式衝突 */
html body a .galleryImageBorder {
	background-color: transparent;
}

/* ── Logo ─────────────────────────────────────────────────────
   logo 與相鄰的站名文字需頂端對齊，
   預設的 baseline 對齊會使圖片下方多出空隙 */
.wsite-logo {
	display: inline-block;
	vertical-align: top;
}

.wsite-logo img,
.wsite-logo span {
	vertical-align: top !important;
}

.wsite-logo a img {
	border: 0;
}

@media screen and (max-width: 767px) {
	.wsite-logo img {
		max-width: 200px;
	}
}

/* ── 分隔線 ───────────────────────────────────────────────────
   以 1px 高的區塊搭配背景色實作，而非 border。
   這樣在各瀏覽器的呈現一致（hr 的預設 inset 邊框樣式差異大）。 */
hr.styled-hr {
	height: 1px;
	margin: 0 auto;
	border: 0;
	background-color: rgba(0, 0, 0, 0.13);
	color: rgba(0, 0, 0, 0.13);
	text-align: center;
}

/* ── 按鈕 ─────────────────────────────────────────────────────
   按鈕的外觀（顏色、邊框、內距）由 main_style.css 定義，
   本檔只保留其未涵蓋、但影響版面的宣告：
   inner 元素需浮動並禁止換行，否則長標籤會折行破壞按鈕高度。 */
.wsite-button {
	cursor: pointer;
	text-decoration: none !important;
	font-weight: normal !important;
	font-size: 14px !important;
}

.wsite-button-inner {
	float: left;
	white-space: nowrap;
}

.wsite-button-highlight {
	color: #ffffff !important;
}

.wsite-button-large {
	font-size: 18px !important;
}

/* ── Blog（最新消息）版面 ─────────────────────────────────────
   文章區與側欄以浮動並排：主體靠左佔滿，側欄靠右固定寬度。 */
.blog-body {
	float: left;
	width: 100%;
}

.blog-sidebar {
	width: 215px;
}

.blog-sidebar-separator {
	padding: 0 10px;
}

.column-blog {
	float: right;
	width: 200px;
	margin: 0;
	padding: 0;
}

.columnlist-blog {
	margin: 0;
	padding: 0;
	overflow-wrap: break-word;
}

.blog-post {
	position: relative;
}

/* 文章標頭需清除 Weebly 元素預設的內距與邊框，
   否則標題與日期會被推開 */
.blog-post .blog-header {
	width: 100%;
	overflow: hidden;
}

.blog-post .blog-header,
.blog-post .blog-header h2.blog-title,
.blog-post .blog-header div a {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 1.5 !important;
}

/* 日期靠左、留言數靠右，同一行呈現 */
.blog-post .blog-date {
	float: left;
	line-height: 1;
	font-size: 13px;
	margin: 0 !important;
	padding: 0 !important;
}

.blog-post .blog-date .date-text {
	float: left;
	cursor: pointer;
	margin: 0 8px 0 0;
	padding: 0 0 4px;
}

.blog-post .blog-comments {
	float: right;
	line-height: 1;
	margin: 0 !important;
	padding: 0 0 4px !important;
}

.blog-post .blog-comments,
.blog-post .blog-comments-bottom {
	font-size: 13px;
}

/* 內文需清除上方的浮動，否則會與日期同行 */
.blog-post .blog-content {
	clear: both;
	margin-bottom: 15px;
	text-align: justify;
}

/* 文章間的細分隔線。font-size 與 height 同步壓到 2px，
   避免行高在區塊內產生額外空間。 */
.blog-post .blog-separator {
	clear: both;
	height: 2px;
	font-size: 2px;
	padding-top: 2px;
	margin-top: 0;
	margin-bottom: 5px;
	border-bottom: 1px solid #dddddd;
}

.blog-page-nav-previous {
	float: left;
}

.blog-body .blog-comments-bottom,
#weebly_page_content_container .blog-comments-bottom,
#wsite-content .blog-comments-bottom {
	margin: 0 0 40px;
}