/*
	Think-Story · 前台补充样式
	--------------------------------------------------------------------
	1. 主题强调色（由后台「站点设置 → 外观」注入 --ts-accent）
	2. 本地线性扁平图标的尺寸与圆形描边
	3. 少量排版补充（小标题、署名行）
	--------------------------------------------------------------------
	加载顺序在主样式之后，因此可以覆盖 Story 模板中硬编码的强调色。
*/

/* ------------------------------------------------------------------ *
 * 1. 主题强调色
 * ------------------------------------------------------------------ */

a:hover {
	color: var(--ts-accent);
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	box-shadow: inset 0 0 0 1px var(--ts-accent);
	color: var(--ts-accent) !important;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
	background-color: rgba(0, 0, 0, 0.04);
	background-color: color-mix(in srgb, var(--ts-accent) 20%, transparent);
	box-shadow: inset 0 0 0 1px var(--ts-accent);
	color: var(--ts-accent) !important;
}

input[type="submit"].special:hover,
input[type="reset"].special:hover,
input[type="button"].special:hover,
button.special:hover,
.button.special:hover {
	background-color: var(--ts-accent);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
	border-color: var(--ts-accent);
	box-shadow: 0 0 0 1px var(--ts-accent);
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
	border-color: var(--ts-accent);
	box-shadow: 0 0 0 1px var(--ts-accent);
}

/* 键盘可达性：统一可见的焦点环 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ts-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * 2. 本地线性扁平图标
 * ------------------------------------------------------------------ */

/* 通用：图标容器不参与排版干扰 */
.ts-svg {
	text-decoration: none;
	border-bottom: none;
}

.ts-icon-svg {
	display: block;
	width: 1.5em;
	height: 1.5em;
	flex: none;
}

/* 「特色条目」里的大号圆形图标（对应原 .icon.style2.major） */
	.items .ts-svg {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
		width: 2.75em;
		height: 2.75em;
		margin: 0 auto 1rem auto;
		border-radius: 2.75em;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
		color: var(--ts-accent);
		-moz-transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
	}

	.items .ts-svg .ts-icon-svg {
		width: 1em;
		height: 1em;
	}

	.items section:hover .ts-svg {
		box-shadow: inset 0 0 0 1px var(--ts-accent);
	}

/* 页脚社交图标（对应原 a.icon.style2） */
	ul.icons a.ts-svg {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 1rem;
		width: 2.75em;
		height: 2.75em;
		border-radius: 2.75em;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
		color: inherit;
		-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
	}

	ul.icons a.ts-svg .ts-icon-svg {
		width: 1.05em;
		height: 1.05em;
	}

	ul.icons a.ts-svg:hover {
		box-shadow: inset 0 0 0 1px var(--ts-accent);
		color: var(--ts-accent);
	}

	ul.icons a.ts-svg:active {
		background-color: rgba(0, 0, 0, 0.04);
		background-color: color-mix(in srgb, var(--ts-accent) 10%, transparent);
		box-shadow: inset 0 0 0 1px var(--ts-accent);
		color: var(--ts-accent);
	}

/* 深色 / invert 区块内的图标描边 */
	#wrapper > .invert .items .ts-svg {
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	}

	#wrapper > .invert ul.icons a.ts-svg {
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	}

/* ------------------------------------------------------------------ *
 * 3. 排版补充
 * ------------------------------------------------------------------ */

/* 图文焦点的小标签 */
	p.ts-eyebrow {
		font-size: 0.8rem;
		font-weight: 400;
		letter-spacing: 0.125em;
		text-transform: uppercase;
		color: var(--ts-accent);
		margin: 0 0 0.4rem 0;
	}

/* 页脚署名行 */
	p.ts-credit {
		font-size: 0.8rem;
		opacity: 0.65;
		margin-top: 0.5rem;
	}

/* 画廊标题在触摸设备上始终可读 */
	@media screen and (max-width: 736px) {
		.gallery .caption {
			opacity: 1;
		}
	}