@charset "utf-8";
/*!
 * moments_wellcms — 朋友圈风格主题
 * 头部通栏移植自 typecho moments 主题；主体沿用 wellcms 默认列表/侧边栏结构。
 * 响应式：flex + grid + clamp() 流式布局，全文件无媒体查询。
 */

/* ---------- 变量：取 typecho moments 的绿 / 蓝 / 中性灰 ---------- */
:root {
	--mq-brand: #09c362;
	--mq-brand-2: #08b359;
	--mq-soft: rgba(9, 195, 98, .08);
	--mq-blue: #586c97;
	--mq-like: #576b95;
	--mq-text: #282828;
	--mq-text-2: #444;
	--mq-sub: #7a7a7a;
	--mq-meta: #9a9a9a;
	--mq-line: #ececec;
	--mq-fill: #f2f2f2;
	--mq-card: #fff;
	--mq-page: #f2f2f2;
	--mq-radius: 8px;
	--mq-radius-sm: 6px;
	--mq-maxw: min(96vw, 1760px);
	--mq-bar: clamp(54px, 4.4vw, 66px);
	--mq-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	--mq-shadow-lg: 0 10px 30px -18px rgba(0, 0, 0, .25);
	--mq-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 基础 ---------- */
html {
	font-size: clamp(12.5px, .36vw + 10.6px, 16.5px);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mq-bar) + 18px);
}

html, body { height: auto; }

body {
	min-height: 100vh;
	background: var(--mq-page);
	color: var(--mq-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
}

a { color: var(--mq-blue); }
a:hover, a:focus { color: var(--mq-brand); text-decoration: none; }

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

.text-primary { color: var(--mq-brand) !important; }
.bg-primary { background-color: var(--mq-brand) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--mq-brand-2) !important; }

hr { border-top-color: var(--mq-line); }

/* ---------- 头部通栏 ---------- */
.mq-bar {
	position: sticky;
	top: 0;
	z-index: 1035;
	width: 100%;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	backdrop-filter: saturate(160%) blur(16px);
	border-bottom: 1px solid var(--mq-line);
}

@supports not (backdrop-filter: blur(1px)) {
	.mq-bar { background: rgba(255, 255, 255, .97); }
}

.mq-bar__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(4px, .8vw, 14px);
	width: 100%;
	max-width: var(--mq-maxw);
	min-height: var(--mq-bar);
	margin: 0 auto;
	padding: 0 clamp(8px, 2vw, 26px);
}

.mq-brand {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
	flex: 0 1 auto;
	color: var(--mq-text);
	text-decoration: none;
}

.mq-brand:hover { color: var(--mq-text); }

.mq-brand__logo {
	height: clamp(20px, 1.9vw, 28px);
	width: auto;
	max-width: 7rem;
	object-fit: contain;
	flex: 0 0 auto;
}

/* 站名 */
.mq-brand__name {
	min-width: 0;
	overflow: hidden;
	font-size: clamp(1rem, 1.1vw, 1.15rem);
	font-weight: 700;
	color: var(--mq-text);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mq-nav { flex: 1 1 8rem; min-width: 0; }

.mq-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mq-nav__list::-webkit-scrollbar { display: none; }

.mq-nav__item > a {
	display: block;
	padding: .4rem clamp(7px, .9vw, 13px);
	border-radius: var(--mq-radius-sm);
	color: var(--mq-text-2);
	font-size: clamp(.9rem, 1vw, 1.02rem);
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .2s var(--mq-ease), color .2s var(--mq-ease);
}

.mq-nav__item > a:hover {
	background: var(--mq-fill);
	color: var(--mq-text);
}

.mq-nav__item.active > a {
	background: var(--mq-soft);
	color: var(--mq-brand);
	font-weight: 600;
}

.mq-tools {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	margin-left: auto;
}

.mq-search {
	display: flex;
	align-items: center;
	width: clamp(84px, 14vw, 190px);
	height: 32px;
	padding: 0 2px 0 10px;
	background: var(--mq-fill);
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background-color .2s var(--mq-ease), border-color .2s var(--mq-ease);
}

.mq-search:focus-within {
	background: var(--mq-card);
	border-color: rgba(9, 195, 98, .45);
}

.mq-search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--mq-text);
	font-size: .84rem;
}

.mq-search input::placeholder { color: var(--mq-sub); }

.mq-search button {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mq-sub);
	font-size: .9rem;
	cursor: pointer;
	transition: color .2s var(--mq-ease);
}

.mq-search button:hover { color: var(--mq-brand); }

.mq-tool {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	flex: 0 1 auto;
	min-width: 0;
	height: 32px;
	padding: 0 clamp(5px, .6vw, 9px);
	border-radius: 999px;
	color: var(--mq-sub);
	font-size: .84rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s var(--mq-ease), color .2s var(--mq-ease);
}

.mq-tool:hover { background: var(--mq-fill); color: var(--mq-brand); }

.mq-tool span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mq-tool i { flex: 0 0 auto; }

/* ---------- 布局：主栏 + 侧栏（流式折行） ---------- */
#body { flex: 1 0 auto; }

#body > .container {
	width: 100%;
	max-width: var(--mq-maxw);
	padding-top: clamp(10px, 1.4vw, 20px);
	padding-right: clamp(8px, 2vw, 24px);
	padding-left: clamp(8px, 2vw, 24px);
}

#body .row {
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(clamp(6px, 1vw, 12px) * -1);
	margin-left: calc(clamp(6px, 1vw, 12px) * -1);
}

#body .row > [class*="col"] {
	min-width: 0;
	padding-right: clamp(6px, 1vw, 12px);
	padding-left: clamp(6px, 1vw, 12px);
}

#body .row > .col-lg-9 { flex: 999 1 32rem; max-width: 100%; }
#body .row > .col-lg-3 { flex: 1 1 18rem; max-width: 100%; }
#body .row > .col-lg-4 { flex: 2 1 19rem; max-width: 100%; }
#body .row > .col-lg-5 { flex: 5 1 26rem; max-width: 100%; }
#body .row > .col-lg-12 { flex: 1 1 100%; max-width: 100%; }

/* 侧栏在默认模板中带 d-none d-lg-block，这里让它参与流式折行
   （排除写文章页 #nav-show：该面板由插件 JS 在窄屏按需展开） */
#body .row > .col-lg-3.d-none.d-lg-block:not(#nav-show),
#body .row > .col-lg-4.d-none.d-lg-block {
	display: block !important;
}

.mx-auto { margin-right: auto; margin-left: auto; }

/* ---------- 卡片 ---------- */
.card,
.card-site-info {
	background: var(--mq-card);
	border: 0;
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow);
}

.card { overflow: hidden; }

.card-body { padding: clamp(12px, 1.4vw, 20px); }

.card-header { border-bottom: 1px solid var(--mq-line); }

.card-header.bg-light,
.bg-light { background: #fafafa !important; }

.shadow {
	box-shadow: var(--mq-shadow) !important;
}

.card-header.shadow,
.threadlist.shadow {
	box-shadow: none !important;
	border-radius: var(--mq-radius);
}

.card-header.shadow {
	margin-bottom: clamp(8px, 1vw, 14px);
	border-bottom: 0;
}

/* “最新 / 动态”标签行：与下方 threadlist 连成一张卡，作为列表表头 */
.card-header.shadow.mq-tabs {
	display: flex;
	align-items: center;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 1px solid var(--mq-line);
	border-radius: var(--mq-radius) var(--mq-radius) 0 0;
}

.mq-tabs .card-header-tabs { margin: 0; border-bottom: 0; }

.mq-tabs .nav-link { padding: .7rem clamp(10px, 1vw, 18px); }

.mq-tabs + .threadlist { border-radius: 0 0 var(--mq-radius) var(--mq-radius); }

#footer > .container {
	max-width: var(--mq-maxw);
	padding-right: clamp(8px, 2vw, 24px);
	padding-left: clamp(8px, 2vw, 24px);
}

/* ---------- 列表 ---------- */
.threadlist {
	margin-bottom: clamp(10px, 1.4vw, 18px);
	overflow: hidden;
	background: var(--mq-card);
}

.card-footer {
	background: #fafafa;
	border-top: 1px solid var(--mq-line);
}

.thread {
	padding: clamp(10px, 1.2vw, 16px) clamp(10px, 1.4vw, 20px);
	border-bottom: 1px solid var(--mq-line);
	transition: background-color .18s var(--mq-ease);
}

.thread:last-child { border-bottom: 0; }

.thread:hover { background: #fafafa; }

.thread .subject h2,
.thread .subject .h6 {
	font-size: clamp(.95rem, 1.05vw, 1.08rem);
	line-height: 1.55;
}

.thread .subject h2 a { color: var(--mq-text); }
.thread .subject h2 a:hover { color: var(--mq-brand); }

.thread .brief {
	color: var(--mq-sub);
	font-size: clamp(.82rem, .9vw, .9rem);
	line-height: 1.7;
}

.thread .username { color: var(--mq-meta); }

/* 标签：中性底色 + 微信蓝文字，弱化于主色 */
.thread .tag a {
	display: inline-block;
	padding: 1px 8px;
	border-radius: var(--mq-radius-sm);
	background: var(--mq-fill);
	color: var(--mq-blue);
}

.thread .tag a:hover { background: #e9edf5; color: #3f5580; }

.badge.border-secondary {
	border-color: #e5e8ee !important;
	background: #f7f8fa;
}

.badge.border-secondary a { color: var(--mq-blue) !important; }

.thread .col-4.col-md-3 img {
	border-radius: var(--mq-radius-sm);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- 按钮 / 标签 / 分页 / 表单 ---------- */
.btn { border-radius: var(--mq-radius-sm); }

.btn-primary {
	background-color: var(--mq-brand);
	border-color: var(--mq-brand);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--mq-brand-2);
	border-color: var(--mq-brand-2);
}

.btn-outline-primary { color: var(--mq-brand); border-color: var(--mq-brand); }
.btn-outline-primary:hover { background-color: var(--mq-brand); border-color: var(--mq-brand); }

.btn-secondary {
	background-color: var(--mq-fill);
	border-color: #e8e8e8;
	color: var(--mq-text-2);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: #e9e9e9;
	border-color: #e3e3e3;
	color: var(--mq-text);
}

/* 会员中心横幅：浅绿底 + 主色文字，避免大面积高饱和色块 */
.mq-adv {
	background: linear-gradient(120deg, rgba(9, 195, 98, .14), rgba(9, 195, 98, .04));
	color: var(--mq-brand);
	font-weight: 600;
}

.btn-danger {
	background-color: var(--mq-brand);
	border-color: var(--mq-brand);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
	background-color: var(--mq-brand-2);
	border-color: var(--mq-brand-2);
}

.badge { border-radius: 6px; font-weight: 600; }
.badge-primary, .badge-info { background-color: var(--mq-brand); }

.nav-tabs { border-bottom: 0; }

.nav-tabs .nav-link {
	border: 0;
	border-radius: var(--mq-radius-sm);
	color: var(--mq-sub);
}

.nav-tabs .nav-link:hover { color: var(--mq-text); background: var(--mq-fill); }

.nav-tabs .nav-link.active {
	background: var(--mq-soft);
	color: var(--mq-brand);
	font-weight: 600;
}

.nav-pills .nav-link.active { background-color: var(--mq-brand); }

.pagination { gap: 4px; }

.pagination .page-link {
	min-width: 34px;
	padding: .35rem .6rem;
	border-color: var(--mq-line);
	border-radius: var(--mq-radius-sm);
	color: var(--mq-text-2);
	text-align: center;
}

.pagination .page-item.active .page-link {
	background-color: var(--mq-brand);
	border-color: var(--mq-brand);
	color: #fff;
}

.form-control,
.custom-select {
	border-color: #e5e5e5;
	border-radius: var(--mq-radius-sm);
}

.form-control:focus,
.custom-select:focus {
	border-color: rgba(9, 195, 98, .55);
	box-shadow: 0 0 0 .15rem rgba(9, 195, 98, .14);
}

.breadcrumb {
	background: var(--mq-card);
	border-radius: var(--mq-radius);
	padding: .55rem .9rem;
	font-size: .86rem;
}

.border-left-primary { border-left: 3px solid var(--mq-brand) !important; }

/* 写文章页：折叠面板标题、面包屑与缩略图统一为品牌色 */
#accordionthread .nav-link.alert-primary {
	background: var(--mq-soft);
	color: var(--mq-brand);
	border-radius: var(--mq-radius-sm);
	font-weight: 600;
}

.breadcrumb.border-left-danger { border-left-color: var(--mq-brand) !important; }
.breadcrumb .icon-home.text-danger { color: var(--mq-brand) !important; }

.message {
	font-size: clamp(1rem, .5vw + .88rem, 1.12rem);
	line-height: 1.85;
	word-wrap: break-word;
}

.message img { max-width: 100%; height: auto; }

.modal-content { border: 0; border-radius: var(--mq-radius); }
.modal-header, .modal-footer { border-color: var(--mq-line); }

.dropdown-menu { border: 0; border-radius: 10px; box-shadow: var(--mq-shadow); }
.dropdown-item:active { background-color: var(--mq-brand); }

/* ---------- 页脚（沿用默认模板结构，白底细线，与通栏呼应） ---------- */
#footer {
	margin-top: clamp(16px, 2.4vw, 36px) !important;
	padding-right: clamp(46px, 4vw, 60px) !important;
	background: var(--mq-card) !important;
	border-top: 1px solid var(--mq-line);
	color: var(--mq-meta);
}

#footer.text-muted { color: var(--mq-meta) !important; }

#footer a { color: var(--mq-sub); }
#footer a:hover { color: var(--mq-brand); }

/* 侧栏菜单：统一主色（核心 CSS 用的是青绿 #009688） */
.list-group-item {
	border-color: var(--mq-line);
	color: var(--mq-text-2);
}

.list-group-item:hover { color: var(--mq-text); background: #fafafa; }

.list-group-item.active {
	background-color: var(--mq-brand);
	border-color: var(--mq-brand);
	color: #fff;
}

/* 侧栏在窄屏的折叠把手 */
.nav-block.bg-secondary { background-color: var(--mq-brand) !important; }

/* ---------- 回到顶部 ---------- */
.scroll-to-top,
.scroll-to-bottom {
	background-color: var(--mq-card);
	border: 1px solid var(--mq-line);
	color: var(--mq-sub);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
}

.scroll-to-top:hover,
.scroll-to-bottom:hover { background-color: var(--mq-brand); color: #fff; }