/**
 * Aria TOC, friends, and responsive extras
 * Restored from assets/css/style.min.css during phase 1 maintenance.
 */

.link-box {
	display: table;
	margin: 20px 0;
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box
}

.link-box a {
	display: inline-block;
	border: none !important;
	width: calc((100% - 80px)/ 4);
	margin: 10px
}

.link-item {
	width: 100%;
	background-color: #fafafa;
	border: 1.3px solid #ededed;
	border-radius: 5px;
	max-height: 300px;
	display: inline-block;
	box-shadow: 0 0 2px 0 rgba(172, 172, 172, .4);
	box-sizing: border-box;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px
}

.link-item:hover {
	transform: translateY(-8px);
	box-shadow: 0 0 8px 0 #d3d3d3
}

.link-avatar {
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: 5px 5px 0 0;
	display: block;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-ms-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0
}

.link-name {
	display: block;
	font-size: 1rem;
	margin: 5px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: keep-all;
	white-space: nowrap
}

.aria-lazy-image,
.aria-lazy-background {
	-webkit-transition: opacity .35s ease, -webkit-filter .35s ease, -webkit-transform .35s ease;
	transition: opacity .35s ease, filter .35s ease, transform .35s ease;
	will-change: opacity, filter, transform
}

.aria-lazy-pending {
	opacity: .78;
	background-color: rgba(255, 255, 255, .72);
	-webkit-filter: blur(4px) saturate(.92);
	filter: blur(4px) saturate(.92);
	-webkit-transform: translateZ(0) scale(1.01);
	transform: translateZ(0) scale(1.01)
}

.aria-lazy-image.aria-lazy-loaded,
.aria-lazy-background.aria-lazy-loaded,
.aria-lazy-image.aria-lazy-error,
.aria-lazy-background.aria-lazy-error {
	opacity: 1;
	-webkit-filter: none;
	filter: none;
	-webkit-transform: none;
	transform: none
}

@media (min-width:450px) and (max-width:768px) {
	.link-box a {
		width: calc((100% - 80px)/ 3);
		margin: 10px 13px
	}
}

@media (max-width:450px) {
	.link-box a {
		width: calc((100% - 80px)/ 2);
		margin: 10px 20px
	}
}

#toc-container {
	padding-top: 190px;
	position: absolute
}

#toc-container ul {
	list-style: none;
	margin: 0;
	padding: 0
}

#toc {
	--toc-axis-x: 4px;
	--toc-dot-size: 8px;
	padding: 15px;
	background: rgba(255, 255, 255, .9);
	border-radius: 10px;
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transform-origin: top center;
	pointer-events: none;
	will-change: opacity, transform;
	transition: none
}

#toc.aria-toc-entering,
#toc.aria-toc-ready {
	visibility: visible;
}

#toc.aria-toc-entering {
	animation: aria-toc-intro var(--aria-duration-normal) var(--aria-ease-out) both;
}

#toc.aria-toc-ready {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s
}

@keyframes aria-toc-intro {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

body.aria-style-aria-continuo #toc {
	background: transparent !important;
	border: none;
	box-shadow: none !important;
	overflow: hidden;
	padding: 15px;
	border-radius: var(--aria-radius-md);
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
	z-index: 21
}

#toc li,
#toc ul {
	margin: 8px 0;
	padding-left: 0;
	list-style: none
}

#toc>ul {
	position: relative;
	z-index: 1
}

#toc>ul::before {
	content: '';
	position: absolute;
	left: var(--toc-axis-x);
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: #ddd;
	transform: translateX(-50%)
}

#toc>ul>li>a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	margin-left: 0;
	padding-left: 14px
}

#toc>ul>li>a::before {
	content: '';
	position: absolute;
	left: var(--toc-axis-x);
	top: 50%;
	width: var(--toc-dot-size);
	height: var(--toc-dot-size);
	border-radius: 50%;
	background-color: #5c5c5c;
	transform: translate(-50%, -50%)
}

/* 提升 li 的层级，确保文字和圆点能覆盖在滑块背景上方 */
body.aria-style-aria-continuo #toc li {
	position: relative;
	z-index: 3;
}

#toc ul li a {
	position: relative
}

#toc ul li ul li a {
	margin-left: 15px;
	color: #828282
}

#toc ul li ul li ul li a {
	margin-left: 25px;
	color: #828282
}

#toc a:hover {
	color: #5c5c5c
}

/* =========================================
   TOC：平滑焦点滑块与当前项样式重构
========================================= */

/* 1. 当前项文字强调降级 */
body.aria-style-aria-continuo #toc a.toc-active {
	color: var(--aria-text-main) !important;
	transition: color 220ms var(--aria-ease-out);
}

/* 2. 新增平滑移动的高光背景块（类 macOS 侧边栏选中项） */
body.aria-style-aria-continuo #toc .toc-marker {
	position: absolute;
	top: 0;
	left: 15px; /* 与 TOC 容器 padding 对齐 */
	right: 15px;
	height: var(--toc-marker-height, 0);
	transform: translateY(var(--toc-marker-top, 0));
	background: rgba(251, 114, 153, 0.08); /* 极弱的主题粉底衬 */
	border-radius: var(--aria-radius-sm);
	z-index: 2; /* 位于轴线之上，正文与圆点之下 */
	pointer-events: none;
	opacity: 1;
	transition: transform 220ms var(--aria-ease-out), height 220ms var(--aria-ease-out), opacity 220ms var(--aria-ease-out);
}

/* 在滑块左侧增加一个跟随轴线移动的实体游标 */
body.aria-style-aria-continuo #toc .toc-marker::before {
	content: '';
	position: absolute;
	left: var(--toc-axis-x);
	top: 4px;
	bottom: 4px;
	width: 3px;
	background-color: #5c5c5c; /* 统一采用原本的灰色 */
	border-radius: 2px;
	transform: translateX(-50%);
}

/* 当没有激活项时，隐藏滑块 */
body.aria-style-aria-continuo #toc:not(.has-active) .toc-marker {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	#toc {
		animation: none;
		transition: none;
		transform: none;
	}
}

@media (max-width:799px) {

	#nav-right ul.nav-right-list,
	#site-avatar {
		display: none
	}

	#nav-btns #nav-menu-btn {
		display: inline-block
	}

	.post-footer.post-footer-featured,
	.post-qrcode {
		display: none
	}

	.post-footer .third {
		width: 100%
	}

	.post-footer .half {
		float: none;
		width: 100%
	}

	.post-footer.nextprev article {
		height: 150px;
		width: 100%
	}
}

ul.friends-box-ul {
	padding: 0;
	margin: 0
}

.friends-box-li {
	padding: 0 !important;
	white-space: nowrap;
	float: left;
	width: 33%;
	min-width: 202px;
	position: relative;
	border-radius: 5px;
	line-height: 1.3;
	height: 90px;
	list-style: none;
	margin-bottom: 10px;
	transition: .5s
}

.friends-box-img {
	margin: 0 auto !important;
	width: 60px;
	height: 60px !important;
	border-radius: 50% !important;
	position: absolute;
	top: 15px;
	left: 15px;
	transition: .5s ease-out
}

.friends-box-img:hover {
	transition: .5s ease-out;
	transform: rotateZ(360deg)
}

.friends-box-a {
	display: block;
	padding: 0 10px 0 90px;
	height: 90px;
	text-decoration: none !important
}

.friends-box-h4 {
	padding: 20px 0 0 !important;
	border-left: 0 !important;
	color: #333;
	font-size: 18px;
	margin: 0 0 5px !important;
	transition: .5s
}

.friends-box-h4:hover {
	/* 文字悬停颜色（h4标签） */
	color: #FF6699;
	transition: .5s
}

.friends-box-p {
	padding: 0 !important;
	font-size: 12px;
	color: #999;
	margin-top: 4px !important;
	line-height: 20px !important
}

.friends-box-li:hover {
	/* 悬停背景色块 */
	background-color: rgba(255, 252, 153, .2);
	transition: .5s
}

.friends-box-ul:after {
	content: " ";
	clear: both;
	display: block
}

@media (max-width:768px) {
	#header {
		height: 60vh
	}

	#header.header--compact-mobile {
		height: 40vh
	}

	#comment-info {
		display: block;
		width: 100%
	}

	#comment-form .comment-input {
		width: 100%
	}

	#comment-cur-avatar {
		display: none
	}
}

@media (max-width:768px) and (min-width:450px) {
	#search-box {
		background-size: 40% !important
	}

	#search-img {
		width: 32px;
		height: 32px
	}

	#search-text {
		width: 200px;
		height: 50px;
		line-height: 50px
	}

	#search-button {
		height: 55px;
		width: 55px
	}
}

@media (max-width:450px) and (min-width:425px) {
	#site-name {
		font-size: 45px
	}

	#site-description {
		font-size: 25px
	}
}

@media (max-width:700px) {
	#response p {
		padding: 0 20px
	}

	#response,
	#response i {
		font-size: 20px
	}
}

@media (max-width:450px) {
	#site-name {
		font-size: 35px
	}

	#site-description {
		font-size: 18px
	}

	.card-thumbnail {
		height: 180px
	}

	.post-meta-label i,
	.post-tags a {
		font-size: 13px
	}

	.post-tags span {
		font-size: 15px
	}

	#comment-form textarea {
		background-size: 100px 100px
	}

	#go-top {
		right: 15px
	}

	#search-box>form {
		min-width: 190px
	}

	#search-box {
		background-size: 60% !important
	}

	#search-img {
		width: 32px;
		height: 32px
	}

	#search-text {
		width: 150px;
		height: 40px;
		line-height: 40px;
		font-size: 14px
	}

	#search-button {
		height: 30px;
		width: 30px
	}

	.post-other i {
		font-size: 35px
	}

	.post-qrcode img,
	.post-reward img {
		height: 130px;
		width: 130px
	}

	.post-reward ul {
		flex-direction: column
	}

	.post-reward li {
		margin: 5px 0
	}
}

@media (max-width:355px) {
	#comment-ban-mail {
		position: initial;
		margin-top: 10px
	}

	#response p {
		padding: 0 10px
	}

	#response,
	#response i {
		font-size: 15px
	}
}

@media (max-width:280px) {
	#site-avatar {
		display: none
	}

	.ui.checkbox {
		position: relative;
		margin-top: 5px
	}
}

@media (min-width:1200px) {
	.container {
		max-width: 1250px
	}
}

@media (max-width:545px) {
	.friends-box-li {
		float: none;
		width: auto
	}
}