/* ============================================================================
   简约蓝 · 卡片主题  theme.css
   ----------------------------------------------------------------------------
   这一层叠加在 view/css/bootstrap.css + view/css/bootstrap-bbs.css 之上，
   用来把 Xiuno 默认外观调到 ikam.cn（可爱猫主题 jan）的样子。
   下面每一条规则后面的注释里都标了原站的实测值，方便以后核对。

   加载方式：hook/header_link_after.htm 注入（该 hook 的 hooks_rank = -999，
   在所有插件之后输出），因此与其它主题/配色插件的规则同优先级时，本文件
   后出现、优先命中。

   颜色约定：所有可变色都写成 var(--wh-*, 回退值)。
   变量由同一个 hook 里的 <style> 输出；万一变量缺失也能正常显示。
   ============================================================================ */

/* ==========================================================================
   1. 全局排版
   ========================================================================== */

/* 注意：原站和核心模板都把 html / table 定为 14px（rem 的基准），
   这里刻意【不动 html 字号】，否则所有 rem 尺寸会整体缩放、与原站不一致。
   原站只是把 body 与正文降到 13px。 */
body {
	font-size: 13px;                                   /* 原站：body{font-size:13px} */
	color: #212529;
	background-color: var(--wh-body-bg, #E7EBF0);      /* 原站：body{background:#E7EBF0} */
	/* 页面背景图不再写死在这里：后台「网站背景图」开启时，由 header 挂载点
	   输出一段独立的 <style>（含遮罩与四种显示方式），顶栏与页脚不受影响。 */
	font-family: "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei",
		"Heiti SC", "WenQuanYi Micro Hei", SimSun, sans-serif;
}

a:link, a:visited, a:hover { text-decoration: none; }
a:hover { color: var(--wh-link-hover, #6293d4); }      /* 原站：a:hover{color:#6293d4} */

/* 次要文字 */
.text-grey, .text-gray { color: #748594 !important; }  /* 原站值 */
.username.text-grey.mr-1 a { color: #748594; }

/* 正文段落与标题 */
.message p { margin: 0.2rem 0; line-height: 1.7; }     /* 原站：比核心更紧凑 */
.message { font-size: 15px; }    /* 用户 2026-10-12 指定：帖子内容默认 15px */
.card-body .message h5 {
	font-size: 13px;
	border-left: 4px solid var(--wh-link-hover, #6293d4);   /* 原站：正文小标题左侧蓝条 */
	text-indent: 16px;
	font-weight: bold;
	padding: 2px 0;
	margin: 8px 0;
}
.message img { max-width: 100%; height: auto !important; border: 1px solid #dee2e6; margin-bottom: 0.5rem; }

/* 楼层信息条「楼主 / 沙发」 */
.ratc {
	padding: 0 0 0.6rem 2px;
	border-bottom: 1px dashed #CCC;
	font-size: 13px;
}
p.ratc { margin-top: -0.4rem; }

/* 引用块 */
.blockquote {
	font-size: 0.8rem;
	background-color: #e9ecef;
	padding: 0.5rem 1rem 0.2rem 1rem !important;
	border-radius: 2px 0 0 2px;
}

/* 回帖数小药丸（原站：灰蓝底白字圆角） */
.comment-o {
	background: #aab0c6;
	color: #fff;
	padding: 2px 10px 2px 10px;
	border-radius: 12px;
}

/* 头像尺寸：参照站把列表里的头像定为 2.5rem（略大于核心的 2.4rem） */
.avatar-3 { width: 2.5rem; height: 2.5rem; }

/* ==========================================================================
   2. 主色（按钮 / 分页 / 列表组 / 表单焦点）
   ========================================================================== */

.btn-primary {
	background-color: var(--wh-primary, #5f8ece);
	border-color: var(--wh-primary, #5f8ece);
	box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	background-color: var(--wh-primary-hover, #699fea);
	border-color: var(--wh-primary-hover, #699fea);
}
.btn-primary:focus,
.btn-primary.focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--wh-primary-rgb, 95, 142, 206), .4);
}

.list-group-item.active {
	background-color: var(--wh-primary, #5f8ece);
	border-color: var(--wh-primary, #5f8ece);
}

/* 分页：原站去掉了描边、只留一层淡投影，当前页用主色 */
.page-link { border: 0 solid #dee2e6; box-shadow: 0 1px 3px rgba(26, 26, 26, .1); }
.page-item.active .page-link {
	background-color: var(--wh-primary, #5f8ece);
	border-color: var(--wh-primary, #5f8ece);
}

/* 表单焦点圈跟着主色走 */
.form-control:focus,
.custom-select:focus {
	border-color: var(--wh-primary, #5f8ece);
	box-shadow: 0 0 0 0.2rem rgba(var(--wh-primary-rgb, 95, 142, 206), .25);
}

/* 面包屑：半透明白 + 淡投影，鼠标移上去变纯白（原站行为） */
.breadcrumb {
	background-color: rgba(248, 249, 250, 0.8) !important;
	border: 1px solid #dee2e6;
	box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
}
.breadcrumb:hover { background-color: #fff !important; }
.breadcrumb .breadcrumb-item { display: inline-flex; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb .breadcrumb-item a { max-width: 400px; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   3. 卡片（原站：无描边、2px 圆角、一层淡投影、标题浅灰底）
   ========================================================================== */

.card {
	background-color: #fff;
	border: 0;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
}
.card > .card-header {
	color: #454d55;
	font-size: 13px;
	background-image: none;
	background-color: #f6f6f6;
	border-bottom: 1px solid #e9ecef;
	position: relative;      /* 标题下划线动效的定位基准 */
}
.card-footer { background-color: #f6f6f6; }

/* 标题下划线动效：一条 2.8rem 的短线，鼠标悬停时拉长到 5rem。
   ★ 用 top 绝对定位、基准是 .card（Bootstrap 4 的 .card 自带 position:relative），
     所以这个数值是按「标题正好在卡片顶部」算的（标题高约 2.7rem）。
     若某个插件的卡片把标题放在别处，位置会偏 —— 用 .wh-no-bar 关掉即可。 */
.card-header:after {
	content: "";
	background-color: #282828;
	left: 1.25rem;
	width: 2.8rem;
	height: 1px;
	top: 2.85rem;
	position: absolute;
	transition: 0.5s;
}
.card-header:hover::after { width: 70px; }   /* 参照站实测：悬停拉长到 70px */
.card-header-tabs { margin-top: -.3rem; }

/* 切换栏（nav-tabs，含卡片头部的 card-header-tabs）：选中态不换背景色。
   用户 2026-10-12 指定：选中 = 文字变主色 + 底部一条居中的短横线，
   与 ikam.cn 的列表页 / 侧栏卡 tabs 一致。 */
.nav-tabs > .nav-item > .nav-link {
	background: transparent;
	border: 0;
	border-radius: 0;
	position: relative;
	color: #495057;
}
.nav-tabs > .nav-item > .nav-link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) scaleX(0);
	width: 55%;
	height: 2px;
	background: var(--wh-primary, #5f8ece);
	transition: transform 0.2s ease;
}
.nav-tabs > .nav-item > .nav-link:hover,
.nav-tabs > .nav-item > .nav-link:focus { color: var(--wh-primary, #5f8ece); background: transparent; }
.nav-tabs > .nav-item > .nav-link:hover::after,
.nav-tabs > .nav-item > .nav-link.active::after { transform: translateX(-50%) scaleX(1); }
.nav-tabs > .nav-item > .nav-link.active {
	background: transparent !important;
	border: 0;
	color: var(--wh-primary, #5f8ece);
}

/* 关闭动效（后台开关会往 <html> 上加 .wh-no-bar） */
html.wh-no-bar .card-header:after,
html.wh-no-bar .card-header:hover::after { display: none; }

/* 以下位置原站刻意不要那条下划线 */
.card-threadlist .card-header:after,
#user_main .card-header:after,
#my_main .card-header:after { width: 0; }

/* 帖子列表卡：正文区上下留白，底部用一条白条盖住圆角过渡 */
.card.card-threadlist .card-body { padding: 0.7rem 0; }
.card.card-threadlist:after {
	content: "";
	width: 100%;
	height: 0.8rem;
	position: absolute;
	left: 0;
	bottom: 0.6rem;
	background-color: #fff;
}
/* 搜索页卡片标题更高，下划线跟着下移 */
.card.search .card-header:after { top: 3.05rem; }

/* ==========================================================================
   4. 帖子列表行
   ========================================================================== */

.thread {
	padding: 0.5rem 1.25rem;   /* 参照站实测：行内边距 0.5rem，列表更紧凑 */
	/* 保留核心的 1px 底部分割线（参照站的 .thread 声明是 border-width:1，无效值，
	   实际效果就是沿用核心那条 #e9ecef 细线 —— 这里不再清除它） */
}
.thread:hover { background-color: #F1F1F1; border-left: 3px #aab0c6 solid; margin-left: -3px; }
.thread .badge { font-weight: normal; }
.threadlist > .thread:last-child, .postlist > .post:last-child { border-bottom: 0; }
.subject { font-size: 1rem; }
.threadlist > .thread .subject { margin: 0; }   /* 参照站实测：标题上下距为 0，行高靠 flex 撑 */
.d-flex.justify-content-between.small.mt-1 { letter-spacing: .2px; }
.nav-link { padding: 0.6rem 1rem; }

/* 列表行内上下分布（标题在上、元信息在下），与参照站一致 */
.threadlist > .thread { display: flex; align-items: stretch; }
.threadlist > .thread .media-body { display: flex; flex-direction: column; justify-content: space-between; }

/* ==========================================================================
   5. 帖子页
   ========================================================================== */

/* 首帖卡：原站的头图条。
   背景（内置渐变或站长自定义图）由 hook/header_link_after.htm 按设置注入，
   见 ws_hifi_theme_banner_css()。 */
.card-thread .media {
	padding: 1.2rem 1.2rem 1rem 1.2rem;
	border-radius: 0.25rem 0.25rem 0 0;
}
.card-threadlist .card-body, .card-thread .card-body { padding: 0 0 1.25rem 0; border-radius: 0.25rem; }
.card-thread .card-body .message { padding: 0.75rem 1.25rem; }
.jan.card.card-thread h4.break-all { font-size: 1.1rem; }

/* 相关主题 / 最新主题（侧栏卡片里的紧凑列表） */
.wh-re-list { list-style: none; margin: 0; padding: 0; }
.wh-re-list li { display: flex; align-items: flex-start; padding: 0.45rem 0; font-size: 13px; }
.wh-re-list li + li { border-top: 1px dashed #e9ecef; }
.wh-re-list li .wh-re-idx {
	flex: 0 0 auto; width: 1.35rem; height: 1.35rem; line-height: 1.35rem;
	margin-right: 0.5rem; text-align: center; border-radius: 2px;
	background: #f1f3f6; color: #748594; font-size: 11px;
}
.wh-re-list li .wh-re-body { flex: 1 1 auto; min-width: 0; }
.wh-re-list li .wh-re-body a {
	display: block; color: #212529; line-height: 1.45;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wh-re-list li .wh-re-body a:hover { color: var(--wh-link-hover, #6293d4); }
.wh-re-list li .wh-re-meta { color: #748594; font-size: 12px; margin-top: 2px; }
.wh-re-list li:first-child .wh-re-idx { background: var(--wh-primary, #5f8ece); color: #fff; }

/* 帖子页左列「相关推荐」卡（用户 2026-10-12 指定：参照站样式 ——
   标题带短下划线，两列，每条 ▶ 小三角图标 + 单行标题 + 右侧日期）。 */
.wh-relate-main .card-title { margin-bottom: 0.3rem; }
.wh-relate-main .card-title b { font-size: 15px; color: #2f3a4a; }
.wh-relate-main .card-title:after {
	content: "";
	display: block;
	width: 42px;
	height: 2px;
	background: #3a4356;
	margin-top: 5px;
}
.wh-relate-main .wh-relate-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
}
.wh-relate-main .wh-relate-grid li {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0.5rem 0;
	border-bottom: 1px dashed #e9ecef;
}
.wh-relate-main .wh-relate-grid li:nth-last-child(-n+2) { border-bottom: 0; }
.wh-relate-main .wh-relate-grid li:before {
	content: "\25B6";   /* ▶ */
	flex: 0 0 auto;
	font-size: 9px;
	color: #9aa5b1;
	margin-right: 7px;
	line-height: 1;
}
.wh-relate-main .wh-relate-grid a {
	flex: 1 1 auto;
	min-width: 0;
	color: #34495e;
	font-size: 13px;
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wh-relate-main .wh-relate-grid a:hover { color: var(--wh-link-hover, #6293d4); }
.wh-relate-main .wh-relate-date { flex: 0 0 auto; color: #98a3ad; font-size: 12px; margin-left: 8px; }
@media (max-width: 767px) {
	.wh-relate-main .wh-relate-grid { grid-template-columns: 1fr; }
	.wh-relate-main .wh-relate-grid li:nth-last-child(-n+2) { border-bottom: 1px dashed #e9ecef; }
	.wh-relate-main .wh-relate-grid li:last-child { border-bottom: 0; }
}

/* 主贴下方的点赞 / 收藏按钮缩小（用户 2026-10-12 指定） */
.haya-post-like .btn-group > .btn,
.haya-favoriter .btn-group > .btn {
	padding: 0.1rem 0.55rem;
	font-size: 12px;
	line-height: 1.5;
}
.haya-post-like .btn-group > .btn .icon,
.haya-favoriter .btn-group > .btn .icon { font-size: 12px; }

/* 侧栏作者卡：不做悬浮固定（用户 2026-10-12 指定，跟随页面正常滚动） */

/* ==========================================================================
   6. 首页顶部全宽搜索卡（参照站首页版式，HTML 由 index_main_start 挂载点注入）
   卡片背景（内置主色淡渐变 / 站长自定义图）由 header 挂载点按设置输出。
   ========================================================================== */

.wh-search-card { background-color: #fff; }
.wh-search-card .card-body { padding: 1.1rem 1.25rem; }
.wh-search-card .form-control { box-shadow: 0 1px 3px rgba(26, 26, 26, .08); }
.wh-search-card .input-group-append .btn { box-shadow: 0 1px 3px rgba(26, 26, 26, .1); }

/* ==========================================================================
   7. 侧栏搜索框（原站：搜索按钮平时窄、悬停变宽）
   ========================================================================== */

#wh_search_form .form-control:focus { border-color: transparent; box-shadow: none; }
#wh_search_form button.btn.btn-primary { transition: width .3s; width: 51px; }
#wh_search_form:hover .input-group-append .btn.btn-primary { width: 70px; }

/* ==========================================================================
   8. 页脚
   核心模板里页脚是 <footer class="... bg-dark" id="footer">（深灰）。
   这里让它与顶栏导航条【同一个颜色】（--wh-nav-bg，亮色 #343a40 / 暗色 #111418），
   Bootstrap 的 .bg-dark 带 !important，所以必须用「#footer.bg-dark」这种
   更高优先级 + !important 才压得住，也幸好不改模板。
   背景图开启时也不会透到页脚上（背景样式块里有同色的兜底规则）。
   ========================================================================== */

#footer.bg-dark {
	background-color: var(--wh-nav-bg, #343a40) !important;
	color: rgba(255, 255, 255, .62);
	font-size: 13px;
}
#footer a, #footer a.text-muted { color: rgba(255, 255, 255, .62); }
#footer a:hover, #footer a.text-muted:hover { color: #fff; }
#footer .text-muted { color: rgba(255, 255, 255, .62) !important; }

/* ==========================================================================
   8b. 图文卡片列表（1:1 移植自「图片模板」）
   卡片放在核心的 <ul class="list-unstyled threadlist mb-0"> 里 —— 不改外层模板，
   用 float + 父级 clearfix 排成三列；文字列表模式下这些规则不命中任何元素。
   ========================================================================== */

/* 父级 clearfix：卡片是浮动的，撑不起父级高度，这里补上（对文字列表无影响） */
.card.card-threadlist .card-body > ul.threadlist::after,
#my_main ul.wh-cont::after {
	content: "";
	display: block;
	clear: both;
}

li.wh-card {
	float: left;
	width: calc(33.333% - 6px);
	margin: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
	box-sizing: border-box;
	overflow: hidden;
	list-style: none;
}
li.wh-card:hover { box-shadow: 1px 1px 8px 3px #adb9c5; }
li.wh-card > a { display: block; text-decoration: none; }

/* 封面容器：padding-bottom 由 header 挂载点按后台「图片比例」输出 */
.wh-card-img { background: #f1f3f6; }
.wh-card-img img { display: block; }

.wh-card-title {
	width: 100%;
	word-break: keep-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 6px 0 0 0;
	padding: 0 8px;
	font-size: 12px;
	line-height: 1.7;
	text-indent: 2px;
	font-weight: bold;
	color: #284a6c;          /* 原站值 */
}
.wh-card-meta {
	width: 100%;
	word-break: keep-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 4px 0 0 0;
	padding: 0 8px 8px 8px;
	font-size: 12px;
	line-height: 1.7;
	text-indent: 2px;
	font-weight: bold;
	color: #284a6c;
}
.wh-card-meta .username { color: #284a6c !important; }
.wh-card-meta .date { font-weight: normal; color: #748594; }
.wh-card-num { float: right; font-weight: normal; }

/* 个人中心（我的帖子 / 收藏 / 点赞）的图文卡片容器 */
#my_main ul.wh-cont, ul.wh-cont {
	display: block;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* 平板：每行 3 个（与原插件一致） */
@media (max-width: 991px) {
	li.wh-card { width: calc(33.333% - 6px); }
}
/* 手机：每行 2 个 */
@media (max-width: 768px) {
	li.wh-card { width: calc(50% - 6px); }
	.wh-card-title, .wh-card-meta { padding: 0 6px; }
}

/* ==========================================================================
   9. 顶栏
   ========================================================================== */

.navbar-brand { font-size: 1.05rem; }
#header.navbar-dark.bg-dark { background-color: var(--wh-nav-bg, #343a40) !important; }
#header .nav-link { color: rgba(255, 255, 255, .82); }
#header .nav-link:hover, #header .nav-link:focus, #header .nav-item.active .nav-link { color: #fff; }

/* 顶栏的主题切换按钮：跟普通 nav-link 一样，但去掉按钮原生外观 */
.theme-toggle {
	color: rgba(255, 255, 255, .82);
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: inherit;
}
.theme-toggle:hover, .theme-toggle:focus { color: #fff; outline: 0; }
.theme-toggle:focus { outline: 1px dotted currentColor; outline-offset: -2px; }

/* ==========================================================================
   10. 回到顶部 / 全屏阅读
   ========================================================================== */

.wh-back-top {
	position: fixed; right: 1rem; bottom: 1.5rem; z-index: 1030;
	width: 2.4rem; height: 2.4rem; line-height: 2.4rem; text-align: center;
	border-radius: 2px; color: #fff; background: rgba(0, 0, 0, .32);
	box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
	opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.wh-back-top.wh-show { opacity: 1; visibility: visible; }
.wh-back-top:hover { color: #fff; background: var(--wh-primary, #5f8ece); }

/* 首帖右上角的「全屏阅读」 */
.read_full_screen { color: #748594; cursor: pointer; user-select: none; }
.read_full_screen:hover { color: var(--wh-link-hover, #6293d4); }

/* 全屏阅读：把首帖卡撑满视口 */
.card.card-thread.wh-fullscreen {
	position: fixed; left: 0; top: 0; right: 0; bottom: 0; margin: 0;
	border-radius: 0; box-shadow: none; overflow-y: auto; z-index: 1050;
}
body.wh-fullscreen-lock { overflow: hidden; }

/* ==========================================================================
   11. 移动端
   ========================================================================== */

@media (max-width: 991px) {
	/* 侧栏在窄屏是隐藏的（核心用 d-none d-lg-block 控制），这里只收一下间距 */
	.card.card-threadlist .card-body { padding: 0.4rem 0; }
	.thread { padding: 0.6rem 0.9rem; }
	.read_full_screen { display: none !important; }   /* 原站手机上不显示全屏阅读 */
}
@media (max-width: 576px) {
	.card > .card-header { background-color: #ffffff; }   /* 原站：窄屏标题改纯白 */
	.card-header:after { display: none; }
	.wh-back-top { right: 0.6rem; bottom: 1rem; }
}

/* 9. 文字列表行首的版块小方块（参考 hifiti：彩色小方块 + 版块名） */
.wh-sq-wrap { display: inline-flex; align-items: center; margin-right: 6px; white-space: nowrap; vertical-align: baseline; }
.wh-sq { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: 0 0 auto; }
.wh-sq-name { color: #748594; font-size: 12px; margin-left: 5px; }
.wh-sq-name:hover { color: var(--wh-link-hover, #6293d4); text-decoration: none; }