/* @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); */

:root {
	/* 主色調 */
	--primary-color: #8B9FA8;        /* 霧藍灰 */
	--primary-dark: #5A6B7C;         /* 深石板 */
	--primary-light: #B8C5CC;        /* 淺藍灰 */
	
	/* 強調色 */
	--accent-color: #E8753C;         /* 熱橘 */
	--accent-hover: #E8B08A;         /* 亮橘 */
	--accent-active: #D6683A;        /* 深橘 */
	--accent-bg: #F4A96E;            /* 淺橘背景 */
	
	/* 背景色 */
	--bg-primary: #FFFFFF;           /* 主背景 */
	--bg-secondary: #F5F7F9;         /* 次要背景 */
	--bg-dark: #192024;              /* 深色背景 */
	
	/* 文字色 */
	--text-primary: #2C3642;         /* 主文字 */
	--text-secondary: #5A6B7C;       /* 次文字 */
	--text-light: #FFFFFF;           /* 亮色文字 */
	
	/* 向後相容舊變數名稱 */
	--theme-color0: var(--primary-color);
	--theme-color1: var(--primary-color);
	--theme-color2: var(--primary-light);
	--theme-color3: var(--accent-color);
	--theme-color4: var(--accent-bg);
	--def-text-color1: var(--text-primary);
	--def-text-color2: var(--text-secondary);
	--btnsp-hover-color: var(--accent-hover);
	--btnsp-active-color: var(--accent-active);
}

/* ============================================
   🔧 Bootstrap & Theme 元件配色覆蓋
   確保所有元件都套用上方定義的配色
   ============================================ */

/* --- 按鈕覆蓋 --- */
.btn-primary,
.button.special,
input[type="submit"].special,
input[type="reset"].special,
input[type="button"].special {
	background-color: var(--accent-color) !important;
	border-color: var(--accent-color) !important;
	color: var(--text-light) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.button.special:hover,
input[type="submit"].special:hover {
	background-color: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
	color: var(--text-light) !important;
}

.btn-primary:active,
.button.special:active,
.btn-primary.active {
	background-color: var(--accent-active) !important;
	border-color: var(--accent-active) !important;
}

.btn-secondary,
.button.alt,
input[type="submit"].alt,
input[type="reset"].alt,
input[type="button"].alt {
	background-color: transparent !important;
	border: 2px solid var(--primary-color) !important;
	color: var(--text-primary) !important;
}

.btn-secondary:hover,
.button.alt:hover,
.btn-secondary:focus {
	background-color: var(--bg-secondary) !important;
	border-color: var(--primary-dark) !important;
	color: var(--text-primary) !important;
}

.btn-default {
	background-color: var(--bg-primary) !important;
	border-color: var(--primary-light) !important;
	color: var(--text-primary) !important;
}

.btn-default:hover {
	background-color: var(--bg-secondary) !important;
	border-color: var(--primary-color) !important;
}

/* --- 連結覆蓋 --- */
a {
	color: var(--primary-dark);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--accent-color);
	text-decoration: underline;
}

.btn-link {
	color: var(--primary-dark) !important;
}

.btn-link:hover {
	color: var(--accent-color) !important;
}

/* --- 導航列覆蓋 --- */
.navbar-default {
	background-color: var(--bg-primary) !important;
	border-color: var(--primary-light) !important;
}

.navbar-default .navbar-brand {
	color: var(--text-secondary) !important;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
	color: var(--primary-color) !important;
}

.navbar-default .navbar-nav > li > a {
	color: var(--text-secondary) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: var(--primary-color) !important;
	background-color: transparent !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
	color: var(--primary-dark) !important;
	background-color: var(--bg-secondary) !important;
}

/* --- 卡片覆蓋 --- */
.card,
.box,
.panel {
	background-color: var(--bg-secondary) !important;
	border-color: var(--primary-light) !important;
}

.card:hover,
.box:hover {
	border-color: var(--accent-color) !important;
}

.panel-default {
	border-color: var(--primary-light) !important;
}

.panel-default > .panel-heading {
	background-color: var(--bg-secondary) !important;
	border-color: var(--primary-light) !important;
	color: var(--text-primary) !important;
}

/* --- 標籤覆蓋 --- */
.badge,
.label,
.label-primary {
	background-color: var(--accent-color) !important;
	color: var(--text-light) !important;
}

.badge.secondary,
.label-default,
.label-secondary {
	background-color: var(--accent-bg) !important;
	color: var(--text-primary) !important;
}

.badge:hover,
.label:hover {
	background-color: var(--accent-hover) !important;
}

/* --- 表單元素覆蓋 --- */
.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	border-color: var(--primary-color) !important;
	box-shadow: 0 0 0 1px var(--primary-color) !important;
	outline: 0 !important;
}

.has-success .form-control {
	border-color: var(--primary-color) !important;
}

.has-success .form-control:focus {
	border-color: var(--primary-dark) !important;
	box-shadow: 0 0 6px var(--primary-color) !important;
}

/* --- 分頁覆蓋（保留原始底線效果）--- */
.pagination > li > a,
.pagination > li > span {
	border: none !important;
	border-bottom: .2em solid var(--bg-primary) !important;
	color: var(--primary-dark) !important;
	background-color: var(--bg-primary) !important;
	margin-left: 0 !important;
	margin-bottom: .3em !important;
	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-o-transition: all .25s linear;
	-ms-transition: all .25s linear;
	transition: all .25s linear;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
	color: var(--accent-color) !important;
	background-color: var(--bg-primary) !important;
	border-bottom: .2em solid var(--text-secondary) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	background-color: var(--bg-primary) !important;
	border-bottom: .2em solid var(--accent-color) !important;
	color: var(--text-secondary) !important;
}

.pagination > .active > a:hover,
.pagination > .active > span:hover {
	background-color: var(--accent-color) !important;
	border-bottom: .2em solid var(--accent-color) !important;
	color: var(--text-light) !important;
}

.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
	margin-bottom: 0 !important;
	color: #C9C9C9 !important;
	background-color: var(--bg-primary) !important;
	border-color: var(--bg-primary) !important;
	cursor: default !important;
}

/* --- Icon 主要樣式覆蓋 --- */
.icon.major {
	background: var(--primary-color) !important;
	color: var(--text-light) !important;
}

/* --- 表格覆蓋 --- */
.table > thead > tr > th {
	background-color: var(--bg-secondary) !important;
	color: var(--text-primary) !important;
	border-color: var(--primary-light) !important;
}

.table-striped > tbody > tr:nth-child(odd) {
	background-color: var(--bg-secondary) !important;
}

.table-hover > tbody > tr:hover {
	background-color: var(--bg-secondary) !important;
}

/* --- Alert 覆蓋 --- */
.alert-info {
	background-color: var(--bg-secondary) !important;
	border-color: var(--primary-light) !important;
	color: var(--text-primary) !important;
}

/* --- Bootstrap 主題色類別覆蓋 --- */
.text-primary {
	color: var(--primary-color) !important;
}

.bg-primary {
	background-color: var(--primary-color) !important;
	color: var(--text-light) !important;
}

.text-muted {
	color: var(--text-secondary) !important;
}

/* --- Learn More 按鈕清淡樣式 --- */
.button-light,
a.button-light {
	background-color: transparent !important;
	border: 1px solid var(--primary-light) !important;
	color: var(--text-secondary) !important;
	font-weight: 400 !important;
}

.button-light:hover,
a.button-light:hover {
	background-color: var(--bg-secondary) !important;
	border-color: var(--primary-color) !important;
	color: var(--text-primary) !important;
}

/* --- Footer 深色背景配合主題 --- */
.footer-bs {
	background-color: var(--primary-dark) !important;
	color: #c5c7c8 !important;
}

.footer-bs.style2 {
	background-color: var(--bg-dark) !important;
}

.footer-bs .footer-copyright {
	color: #bbb !important;
}

.footer-bs .footer-copyright li {
	color: rgba(255,255,255,1.00) !important;
	border-left-color: rgba(255,255,255,0.3) !important;
}

.footer-bs .footer-copyright a {
	color: rgba(255,255,255,1.00) !important;
}

.footer-bs .footer-copyright a:hover {
	color: var(--accent-hover) !important;
}

/* Footer 社交連結配合主題 */
.footer-bs .social-link li,
.footer-bs .info-link li {
	background-color: var(--bg-dark) !important;
}

.footer-bs .social-link li:hover,
.footer-bs .info-link li:hover {
	background-color: var(--accent-color) !important;
}

/* ============================================
   📝 原有樣式（保持不變）
   ============================================ */

html, p, label, a {
	-webkit-font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
	-moz-font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
	-ms-font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
	-o-font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
	font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
	font-size: 1.1em;
}

h1 {
	font-size: 2.1em;
	line-height: 1.5em;
}

h2 {
	font-size: 1.75em;
	line-height: 1.5em;
}

h3 {
	font-size: 1.3em;
	line-height: 1.25em;
}

h4 {
	font-size: 1.15em;
	line-height: 1.25em;
}

blockquote {
	font-size: 1.1em;
	line-height: 1em;
}

a.navbar-brand img {
	height: 1.5em; 
	margin-top: -.2em;
}

a.navbar-brand label {
	font-size: 1.15em;
	font-weight: 500;
	font-family: 'Noto Sans TC';
	color: var(--text-secondary);
	text-transform: uppercase;
	cursor: pointer;
}

a.navbar-brand label:hover, 
div.collapse ul.nav li a:hover {
	color: var(--accent-color);
}

section.wrapper {
	margin-top: -2em;
}

section.post-block {
	padding-bottom: 1.2em;
}

section.post-block, 
section.post-block li {
	font-size: 1.05em;
	font-weight: 400;
}

section.post-block h4 {
	font-weight: 600;
	font-size: 1.35em;
}

section.post-block p {
	padding-bottom: .25em;
}

section.post-block img {
	margin-top: 1em;
	aspect-ratio: 1 / 1; 
	width: 100%; 
	max-height: 10em; 
	object-fit: cover; 
	object-position: center; 
	padding: .25em 0; 
	border-radius: 1.5em;
}

section.post-cert img {
	margin-top: 1em;
	aspect-ratio: 1 / 1; 
	height: 100%; 
	max-height: 10em; 
	object-fit: contain; 
	object-position: center; 
	padding: .25em 0; 
	border-radius: 1.5em;
}

section.footer-copyright {
	text-align:center; 
	margin: 1em auto;
}

.single-meta, 
.single-meta a {
	color: inherit;
	font-size: 1.1em;
}

.single-meta a:hover {
	color: var(--text-light);
}

.about-box {
	margin-bottom: .75em;
	border-radius: 1em;
}

.navbar-default.style1, 
.wrapper.style1 {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	border-color: var(--primary-light);
}

.navbar-default.style2, 
.wrapper.style2 {
	background-color: var(--bg-dark);
	color: #c5c7c8;
	border-color: #666;
}

.badge {
	padding: .5em .75em;
	margin-bottom: .5em;
}

.inner-single {
	margin: 0 auto;
	width: 85vw;
	font-size: .8em;
}

.inner-single span.tags {
	padding: .5em;
}

.nav-cate {
	color: var(--primary-dark);
}

.nav-cate:hover {
	color: var(--accent-color);
}

.nav-tags {
	background-color: var(--accent-color);
	color: var(--text-light);
}

.nav-tags:hover {
	background-color: var(--accent-hover);
}

/* --- Footer Style --- */
.footer-bs {
	background-color: var(--bg-dark);
	color: #c5c7c8;
	padding: 1em;
	border-top-left-radius: 0;
}

.footer-bs.style2 {
	background-color: #222;
}

.footer-bs .footer-copyright {
	color: #bbb;
	text-align: center;
}

.footer-bs .footer-copyright li {
	color: rgba(255,255,255,1.00);
	border-left: solid 1px rgba(144, 144, 144, 0.25);
	display: inline-block;
	margin-left: .5em;
	padding-left: .5em;
	list-style: none;
}

.footer-bs .footer-copyright li:first-child {
	border-left: 0;
	margin-left: 0;
	padding-left: 0;
}

.footer-bs .footer-copyright a {
	color: rgba(255,255,255,1.00);
}

.footer-bs .footer-copyright a:hover {
	color: rgba(255,255,255,0.80);
}

.footer-bs .footer-social {
	max-width: 90vw;
	padding: 1em 2em;
	align-items: center;
}

.footer-bs .footer-social img, 
#about-image img {
	aspect-ratio: 1 / 1; 
	width: 100%; 
	max-width: 15em;
	max-height: 15em; 
	object-fit: cover; 
	object-position: center; 
	border-radius: 1.5em;
}

.footer-bs .footer-social label#personal-title, 
.about-describe label#personal-title {
	margin-top: .5em;
	font-size: 1.05em;
}

.footer-bs .footer-social h3, 
.about-describe h3 {
	margin-top: .5em;
	font-size: 1.7em;
	line-height: .25em;
	margin-bottom: 1em;
}

.footer-bs .footer-social p, 
.about-describe p {
	font-size: 1.2em;
	padding-bottom: .5em;
}

.social-link {
	margin-left: -2em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.social-link li, 
.info-link li {
	color: inherit;
	padding: .25em .5em;
	background-color: var(--primary-dark);
	display: inline-block;
	font-size: 1.3em;
	list-style: none;
	margin-left: .5em;
	border-radius: 1em;
}

.social-link li a, 
.info-link li a {
	color: #eee;
}

.social-link li:hover, 
.info-link li:hover {
	background-color: var(--accent-color);
}

.about-describe {
	text-align: center;
	margin-top: -.5em;
	padding-bottom: .25em;
}

.about-describe p {
	text-align: left;
}

.about-describe .social-link li a, 
.info-link li a {
	color: #eee;
}

.about-describe .social-link li a:hover, 
.info-link li a:hover {
	color: var(--text-light);
}

#about-image {
	position: relative;
	height: 14em;
	max-height: 35vw;
	padding-bottom: 3em;
}

#about-image img {
	display: flex;
	margin: -7em auto;
	width: 15em;
	height: 15em;
	max-width: 35vw;
	max-height: 35vw;
}

.about-info h3 {
	font-size: 1.5em;
	margin-top: .5em;
}

.about-info .post-block img {
	margin-top: 0;
}

.about-info .info-link {
	margin-left: -1.5em;
}

.about-info .info-link li {
	font-size: 1em;
}

.about-cert {
	text-align: center;
}

.about-cert div h4 {
	margin-top: 0;
	line-height: 1em;
	height: 3em;
}

.post-time, 
a.post-category, 
a.post-tag, 
a.post-topic {
	font-weight: 400;
}

.post-title {
	color: inherit;
}

.post-title:hover {
	color: var(--accent-color);
}

/* --- Pagination Style --- */
.pagination-wrapper {
	margin-top: 1.25em;
	font-size: 1em;
	text-align: center;
}

.pagination > li > a,
.pagination > li > span {
	border: none;
	border-bottom: .2em solid var(--bg-primary);
	color: var(--text-secondary);
	margin-left: 0;
	margin-bottom: .3em;
	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-o-transition: all .25s linear;
	-ms-transition: all .25s linear;
	transition: all .25s linear;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
	color: var(--primary-color);
	background: var(--bg-primary);
	border-bottom: .2em solid var(--text-secondary);
}

.pagination > .active > a,
.pagination > .active > span {
	color: var(--text-secondary);
	background: var(--bg-primary);
	border-bottom: .2em solid var(--primary-color);
}

.pagination > .disabled > a {
	border-color: var(--bg-primary);
}

.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
	margin-bottom: 0;
	color: #C9C9C9;
	background-color: var(--bg-primary);
	cursor: default;
}

.pagination > .active > a:hover,
.pagination > .active > span:hover {
	background-color: var(--primary-color);
	border-bottom: .2em solid var(--primary-color);
	color: var(--text-light);
}

/* --- Search input and icon styles --- */
.has-search {
	position: relative;
}

.has-search .form-control-feedback {
	position: absolute;
	z-index: 2;
	display: block;
	width: 2.375rem;
	height: 2.375rem;
	line-height: 2.375rem;
	text-align: center;
	pointer-events: none;
	color: #aaa;
}

.has-search .form-control {
	padding-left: 2.375rem;
	width: 100%;
	height: 2.375rem;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.fa-magnifying-glass {
	font-size: 14px;
}