/* =============================================================================
 * components.css —— 组件层（现代样式层第 3/4 支）
 *
 * 职责：**所有宽度下**的组件外观精修 —— 圆角、阴影、hover、间距、排版。
 * 结构变化（栅格 / 抽屉 / 表格转卡片）一律不在这里，放 responsive.css。
 *
 * 力度定位：**中等** —— 重做版式组件的观感，但保留原站配色与信息架构。
 * 原站镜像 CSS 未改动，本层全部靠后加载覆盖。
 *
 * ⚠ 覆盖规则：选择器**权重必须 ≥ 原站**才能生效（同权重靠后加载胜出）。
 *   原站把列表样式放在 assets/modules/{模块}/pc/list.css，类名跨模块一致
 *   （.ArticLists 等），所以这里写一次即可覆盖全部模块。
 * ========================================================================== */


/* ---------------------------------------------------------------------------
 * 1. 主导航 .MainMenuBox .MenuList
 *
 * 原站：50px 高、横排、hover 变背景色。这里改成「绿色下划线 + 轻微上浮」，
 * 更接近现代门户导航，同时不改变 50px 的高度（桌面版式不动）。
 * ------------------------------------------------------------------------- */
.MainMenuBox .MenuList li a{
	transition:color var(--aa-dur) var(--aa-ease),
	           background-color var(--aa-dur) var(--aa-ease);
}
.MainMenuBox .MenuList li a:hover,
.MainMenuBox .MenuList li.current-menu-item > a{
	background:var(--aa-green);
	color:#fff;
	border-radius:var(--aa-r-sm);
}


/* ---------------------------------------------------------------------------
 * 2. 搜索框
 * ------------------------------------------------------------------------- */
.Logo_Search .search .keyword input{
	border-radius:var(--aa-r-sm) 0 0 var(--aa-r-sm);
	transition:border-color var(--aa-dur) var(--aa-ease),
	           box-shadow var(--aa-dur) var(--aa-ease);
}
.Logo_Search .search .keyword input:focus{
	border-color:var(--aa-green);
	box-shadow:0 0 0 3px rgba(23,167,99,.12);
	outline:none;
}
.Logo_Search .search .submit input{
	border-radius:0 var(--aa-r-sm) var(--aa-r-sm) 0;
	background:var(--aa-green);
	transition:background-color var(--aa-dur) var(--aa-ease);
}
.Logo_Search .search .submit input:hover{
	background:var(--aa-green-d);
}
.Logo_Search .search .types li{
	transition:color var(--aa-dur) var(--aa-ease),
	           border-color var(--aa-dur) var(--aa-ease);
}
.Logo_Search .search .types li:hover{
	color:var(--aa-green);
}
.Logo_Search .search .types li.ck{
	color:var(--aa-green);
	border-bottom:2px solid var(--aa-green);
}


/* ---------------------------------------------------------------------------
 * 3. 文章列表 .ArticLists（列表页 / 栏目页）
 *
 * 原站：li 靠 border-bottom 分隔，hover 整行变 #EFEFEF，标题 hover 变成
 * 蓝底白字（.ArticLists li dl dd h3 a:hover{background:#369}）—— 那套在
 * 现代观感里偏重。改成：卡片化 + 标题变绿 + 轻微右移。
 * ------------------------------------------------------------------------- */
.ArticLists li{
	border-bottom:1px solid var(--aa-line-l);
	transition:background-color var(--aa-dur) var(--aa-ease),
	           box-shadow var(--aa-dur) var(--aa-ease);
}
.ArticLists li:hover{
	background:var(--aa-bg-2);
	box-shadow:var(--aa-sh);
}
.ArticLists li dl dd h3 a{
	color:var(--aa-t1);
	transition:color var(--aa-dur) var(--aa-ease);
}
.ArticLists li dl dd h3 a:hover{
	background:none;
	color:var(--aa-green);
}
.ArticLists li dl dd p{
	color:var(--aa-t3);
}
.ArticLists li div{
	color:var(--aa-t4);
}

/* 列表缩略图：统一圆角 + 轻微描边，去掉老式硬边 */
.ArticLists li dl dt img{
	border-radius:var(--aa-r);
	transition:transform var(--aa-dur) var(--aa-ease);
}
.ArticLists li:hover dl dt img{
	transform:scale(1.03);
}


/* ---------------------------------------------------------------------------
 * 4. 侧栏 .Side .sidecont
 *
 * 原站是「一条绿色标题条 + 一个方框列表」。保留绿色标题条（品牌识别），
 * 把外框改成圆角卡片。
 * ------------------------------------------------------------------------- */
.Side .sidecont{
	border-radius:var(--aa-r);
	box-shadow:var(--aa-sh);
	overflow:hidden;
	background:#fff;
}
.Side .sidecont .head{
	border-radius:var(--aa-r) var(--aa-r) 0 0;
}
.Side .ListSort li a,
.Side .ListHot li dl dd a{
	transition:color var(--aa-dur) var(--aa-ease),
	           padding-left var(--aa-dur) var(--aa-ease);
}
.Side .ListSort li a:hover,
.Side .ListHot li dl dd a:hover{
	color:var(--aa-green);
	padding-left:4px;
}


/* ---------------------------------------------------------------------------
 * 5. 分页 .ShowPage
 *
 * 原站：inline-block + padding 的朴素数字。改成圆形按钮。
 * ------------------------------------------------------------------------- */
.ShowPage a{
	border-radius:var(--aa-r-sm);
	min-width:30px;
	text-align:center;
	transition:background-color var(--aa-dur) var(--aa-ease),
	           color var(--aa-dur) var(--aa-ease);
}
.ShowPage a:hover{
	background:var(--aa-green);
	color:#fff;
}
.ShowPage a.ck{
	background:var(--aa-green);
	color:#fff;
	border-radius:var(--aa-r-sm);
}


/* ---------------------------------------------------------------------------
 * 6. 详情页头部 .Infotitle / .Infobase
 * ------------------------------------------------------------------------- */
.Infotitle{
	color:var(--aa-t1);
	line-height:1.4;
	letter-spacing:.2px;
}
.Infobase .infos{
	color:var(--aa-t4);
}
.Infobase .infos a{
	color:var(--aa-t4);
}
.Infobase .infos a:hover{
	color:var(--aa-green);
}

/* 正文：图片圆角 + 段落间距，长文更好读 */
.InfoContent img{
	border-radius:var(--aa-r);
}
.InfoContent p{
	margin-bottom:1em;
}

/* 正文里的表格：窄屏外允许横滑（结构在 responsive.css） */
.InfoContent table{
	border-collapse:collapse;
}


/* ---------------------------------------------------------------------------
 * 7. 表单（评论 / 发布 / 搜索）
 *
 * 现代观感的重点：统一边框、聚焦环、圆角、按钮配色。
 * ------------------------------------------------------------------------- */
.PostComment input[type="text"],
.PostComment input[type="email"],
.PostComment input[type="url"],
.PostComment textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
	border:1px solid var(--aa-line);
	border-radius:var(--aa-r-sm);
	transition:border-color var(--aa-dur) var(--aa-ease),
	           box-shadow var(--aa-dur) var(--aa-ease);
}
.PostComment input:focus,
.PostComment textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus{
	border-color:var(--aa-green);
	box-shadow:0 0 0 3px rgba(23,167,99,.12);
	outline:none;
}
.PostComment .sub input,
.PostComment #comment_submit,
.comment-form .submit input[type="submit"],
.form-submit input[type="submit"]{
	background:var(--aa-green);
	color:#fff;
	border:0;
	border-radius:var(--aa-r-sm);
	padding:0 22px;
	height:36px;
	line-height:36px;
	cursor:pointer;
	transition:background-color var(--aa-dur) var(--aa-ease);
}
.PostComment .sub input:hover,
.PostComment #comment_submit:hover,
.comment-form .submit input[type="submit"]:hover,
.form-submit input[type="submit"]:hover{
	background:var(--aa-green-d);
}


/* ---------------------------------------------------------------------------
 * 8. 页脚 .Footer
 *
 * 原站：6 列（4×P_list + Phone + Ewm）。这里只做排版精修，不改列数
 * （列数变化在 responsive.css）。
 * ------------------------------------------------------------------------- */
.Footer .PartnerBox .Partner ul.P_list li a,
.Footer .PartnerBox .Partner ul.Phone li,
.Footer .PartnerBox .Partner ul.Ewm li{
	color:var(--aa-t3);
	transition:color var(--aa-dur) var(--aa-ease);
}
.Footer .PartnerBox .Partner ul.P_list li a:hover{
	color:var(--aa-green);
}
.Footer .PartnerBox .Partner ul.P_list h4.title{
	font-weight:500;
	letter-spacing:.3px;
}
.Footer .CopyrightBox .Copyright{
	color:var(--aa-t4);
	line-height:1.9;
}
.Footer .CopyrightBox .Copyright a{
	color:var(--aa-t3);
}
.Footer .CopyrightBox .Copyright a:hover{
	color:var(--aa-green);
}


/* ---------------------------------------------------------------------------
 * 9. 回到顶部 .topUpCont
 *
 * ⚠ 刻意**不做**观感改造。它是 foot.css（页脚内联输出、排在全部样式之后）
 *   里的一个 60×180 固定位精灵图浮标，`position:fixed; right:0; display:none`。
 *   foot.css 加载顺序在我们的层之后，同权重我们赢不了；
 *   要靠更高权重硬压又容易把它那套 :before/:after 精灵定位搞坏。
 *   所以这里只保留 base-modern.css 里那条「安全区避让」（用 body 提升权重）。
 * ------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
 * 10. 二维码浮层（桌面 hover 出现，移动端由 responsive.css 隐藏）
 *
 * `.aa-open` 是本次新增的「开合类」，替代原来 jQuery 的 `.show()/.hide()`。
 * 原因：手机上 hover 根本不存在，得改成点击切换；两种触发方式共用一个类
 * 才不会互相打架（`.show()` 写的是行内 `display:block`，会把类选择器压死）。
 *
 * ⚠ 桌面这条 (0,2,0) 只压得过原站的 `.m-mobleLook{display:none}` (0,1,0)；
 *   移动端 responsive.css 里那条 `.Logo_Search .CodeWxin{display:none}` 是
 *   (0,2,0) 且**后加载**，所以手机上的放行必须另写更高权重的规则（见该文件）。
 * ------------------------------------------------------------------------- */
.m-mobleLook{
	border-radius:var(--aa-r);
	box-shadow:var(--aa-sh-h);
	overflow:hidden;
}
.CodeWxin.aa-open{
	display:block;
}

/* ★ 键盘可达（**只在桌面档**）：焦点落在「公众号」按钮上就把浮层放出来。
   · 浮层在 DOM 里**位于** `.MoreAct` **之前**（见 header.php 的 `<p class="m-mobleLook CodeWxin">`），
     所以用不了 `~` 兄弟选择器，只能从共同祖先 `.Logo_Search` 上用 `:has()` 回看。
   · 第二条是「焦点已经进到浮层内部」的情况（比如那个「关闭」链接）——
     否则一 Tab 进去，条件立刻不成立、浮层就在脚下消失了。
   · `:has()` 不被支持时**整条规则被丢弃** → 退化成现状（只 hover），不会半截生效（约定 27）。
   · 手机上走「点击开合」，所以这里用 `min-width` 把规则关在桌面档之外，
     免得焦点规则跟点击切换互相打架。 */
@media (min-width:992px){
	.Logo_Search:has(.MoreAct .wx a:focus) .CodeWxin,
	.Logo_Search:has(.CodeWxin :focus) .CodeWxin{
		display:block;
	}
}


/* ---------------------------------------------------------------------------
 * 11. 细滚动条（桌面）
 * ------------------------------------------------------------------------- */
@media (min-width:992px){
	.aa-scroll,
	.Side .ListHot{
		scrollbar-width:thin;
		scrollbar-color:var(--aa-t5) transparent;
	}
	.aa-scroll::-webkit-scrollbar,
	.Side .ListHot::-webkit-scrollbar{
		width:6px;
		height:6px;
	}
	.aa-scroll::-webkit-scrollbar-thumb,
	.Side .ListHot::-webkit-scrollbar-thumb{
		background:var(--aa-t5);
		border-radius:3px;
	}
	.aa-scroll::-webkit-scrollbar-track,
	.Side .ListHot::-webkit-scrollbar-track{
		background:transparent;
	}
}


/* ---------------------------------------------------------------------------
 * 12. 顶栏「发布信息 / 公众号」图标：位图 PNG → 矢量 SVG
 *
 * 原站用的是 40×40 的 post.png / wx1.png（`style7.0/global.css:230,236`）。
 * 问题：移动端把图标缩到 26px 显示时，位图重采样后明显发虚 ——
 * 而这两个按钮在手机上**只显示图标、不显示文字**（见 responsive.css），
 * 图标发虚就直接等于「按钮看不清」。
 *
 * 新图标（`assets/images/style7.0/icon_{post,wx}.svg`）按原图重绘：
 *   · 底色实测原 PNG 角点 —— post `#22BDF0`、wx `#22C770`，
 *     且 alpha 全为 255（**直角方块，原图没有任何圆角**），故 SVG 也不加 rx；
 *   · 图形沿用原图语义：post = 圆角方框 + 斜铅笔；wx = 大小两个对话气泡 + 圆点眼睛。
 *
 * ⚠ 选择器与原站那条**逐字相同**（特异性同为 (0,3,3)），
 *   靠「我们的样式层加载在 style7.0/global.css 之后」取胜 ——
 *   原站镜像 CSS 按约定一行不改，回滚只需删掉这一节。
 * ⚠ 必须把 `background-size` 一起写回来：原站用的是 `background` 简写
 *   （`background:url(post.png) center center no-repeat`），简写会把
 *   `background-size` 重置为 `auto`，而它那条 (0,3,3) 压得过 responsive.css
 *   里 `.MoreAct li a:before` 的 `contain`(0,2,3) —— 不补这一行，
 *   手机上 40px 的图会溢在 30px 的盒子里。桌面 40×40 下两者等价。
 * ------------------------------------------------------------------------- */
.Logo_Search .MoreAct li.post a:before{
	background-image:url(../images/style7.0/icon_post.svg);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
.Logo_Search .MoreAct li.wx a:before{
	background-image:url(../images/style7.0/icon_wx.svg);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}