/* blog-typography.css */

@charset "UTF-8";

/* 禁用机械生成的字体样式 */
* {
	font-synthesis: none;
}

/* 配色方案 */
:root {
	--afdian-button-bg: #885fd9;
	--afdian-button-border-bottom: #5833a2;
	--patreon-button-bg: #f46454;
	--patreon-button-border-bottom: #9e271a;
	--github-button-bg: #24292e;
	--github-button-border-bottom: #121415;
}

/* 默认简体中文段落样式 */
p {
	text-indent: 2em; /* 首行缩进 */
	line-height: 1.6em; /* 行间距 */
	/* text-align: justify; 两端对齐 */
	word-break: normal; /* 断字设置 */
	hanging-punctuation: allow-end; /* 允许末尾标点悬挂 */
	overflow-wrap: break-word;
	margin-block: 0.5em;
}

/* 英文段落样式 */
.article-content:lang(en) p {
	text-indent: 0;
	line-height: 1.6em;
	max-width: 40em;
	margin-left: 1.5em;
	hyphens: auto;
	word-break: break-word;
	margin-block: 1em;
}

/* 段落首字下沉 */
.article-content > p:first-of-type::first-letter {
	float: left;
	font-size: 4.5em;
	margin-right: 8px;
	font-family: "Playfair Display", "Noto Serif SC", serif;
	padding-top: 4px;
	font-weight: bold;
	line-height: 0.86em;
	font-feature-settings: "halt";
}

/* 段落首字下沉（西文） */
.article-content > p:lang(en):first-of-type::first-letter {
	font-size: 5.3em;
	margin-right: 3px;
	font-family: "Playfair Display", serif;
	padding-top: 10px;
	line-height: 0.64em;
	font-weight: 400;
}

/* 文章第一段不启用段首缩进 */
.article-content p:first-of-type {
	text-indent: 0;
}

/* 代码块样式 */
.hljs,
.hljs-ln,
.hljs-ln td,
.hljs-ln-numbers,
.hljs-ln-code {
	font-family: "Cascadia Code", "Noto Sans SC", monospace, sans-serif !important;
	font-size: 11pt;
	line-height: 1.5;
	vertical-align: top;
}

/* 行号样式 */
.hljs-ln-numbers {
	text-align: right;
	user-select: none;
}

.hljs-ln td {
	padding: 0 1.5em 0 0 !important;
}

/* 表格样式，应用于处代码块以外的表格 */
.table-wrapper {
	overflow-x: auto;
	max-width: 100%;
	margin: 1rem 0;
	border-radius: 10px;
}

table:not(.hljs-ln) {
	display: inline-block;
	overflow: auto;
	white-space: nowrap;
	border-spacing: 0;
	border-radius: 10px;
	border-collapse: separate;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

/* 表头 */
table:not(.hljs-ln) th {
	background-color: var(--table-th);
	color: var(--table-th-text);
	padding: 10px;
}

/* 表格，横行 table tr */
/* 奇数行 */
table:not(.hljs-ln) tr:nth-child(2n + 1) {
	background-color: var(--table-odd-line);
}
/* 偶数行 */
table:not(.hljs-ln) tr:nth-child(2n) {
	background-color: var(--table-even-line);
}
/* 鼠标悬浮 */
table:not(.hljs-ln) tr:hover {
	filter: brightness(0.9);
	transition: filter 0.1s ease;
}

/* 表格，单元格 */
table:not(.hljs-ln) td {
	padding: 5px 10px;
}
/* 每行首个单元格 */
table:not(.hljs-ln) td:nth-child(1) {
	background-color: var(--table-first-column);
}

/* 表格内无序列表 table ul */
table:not(.hljs-ln) ul {
	font-size: 11pt;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* 表格英文描述字体样式 */
table:not(.hljs-ln) td span:nth-child(2),
table:not(.hljs-ln) th span:nth-child(2) {
	font-size: 10pt;
}
table:not(.hljs-ln) td span,
table:not(.hljs-ln) th span {
	display: block;
}

/* 块引用 callout */
.callout {
	border-left: 0.25em solid #d4d4d4;
	border-radius: 10px;
	max-width: 100%;
	padding: 20px;
	margin: 20px 0 20px 0;
	transition: all 0.3s ease;
}
/* 块引用鼠标悬浮样式 */
.callout:hover {
	filter: brightness(1.2);
}
/* 块引用危险 callout-danger */
.callout-danger {
	background-color: var(--callout-danger-bg);
	border-color: var(--callout-danger);
}
/* 块引用警告 callout-warning */
.callout-warning {
	background-color: var(--callout-warning-bg);
	border-color: var(--callout-warning);
}
/* 块引用提示 callout-tip */
.callout-tip {
	background-color: var(--callout-tip-bg);
	border-color: var(--callout-tip);
}
/* 块引用注释 callout-note */
.callout-note {
	background-color: var(--callout-note-bg);
	border-color: var(--callout-note);
}
/* 块引用重要 callout-important */
.callout-important {
	background-color: var(--callout-important-bg);
	border-color: var(--callout-important);
}
/* 块引用标题样式 callout-header */
.callout-header {
	display: inline-flex;
	margin-bottom: 10px;
	letter-spacing: 0.01em;
	align-items: center;
	line-height: 1.8em;
}
/* 块引用配色 */
.callout-danger .callout-header {
	color: var(--callout-danger);
}
.callout-warning .callout-header {
	color: var(--callout-warning);
}
.callout-tip .callout-header {
	color: var(--callout-tip);
}
.callout-note .callout-header {
	color: var(--callout-note);
}
.callout-important .callout-header {
	color: var(--callout-important);
}

/* 引用，非 callout 块引用 */
.article-content > blockquote:not(.callout):not(.article-description) {
	position: relative;
	font-family: "Palatino Linotype", "Palatino", "Times New Roman", "FZKai-Z03S", serif;
	font-style: italic;
	font-size: 1.05em;
	line-height: 1.6em;
}

.article-content > blockquote:not(.callout):not(.article-description)::before {
	content: "“";
	position: absolute;
	font-size: 10em;
	z-index: 0;
	line-height: 1;
	top: -30px;
	left: -20px;
	pointer-events: none;
	font-weight: bold;
	font-style: normal;
	opacity: 0.2;
	font-family: "Playfair Display", serif;
}

.article-content > blockquote:not(.callout):not(.article-description) > p {
	text-indent: 0;
}

blockquote:not(.callout):not(.article-description) {
	margin: 10px 20px 10px 20px;
}

/* 行内引用 q */
q {
	font-family: "Palatino Linotype", "Palatino", "Times New Roman", "FZKai-Z03S", serif;
	font-size: 1.05em;
	font-style: italic;
	line-height: 1.6em;
}
q::before,
q::after {
	content: "";
}

/* 行内代码块样式 code */
code {
	font-size: 11pt;
	font-family: "Cascadia Code", "Noto Sans SC", monospace, sans-serif;
	border-radius: 3px;
	padding: 2pt 3pt;
}

/* 文章内列表样式 article-content li */
.article-content li {
	line-height: 1.6em;
}

/* 列表记号样式 */
li::marker {
	color: var(--list-marker);
}

/* 标题下的副标题（文章描述部分）样式 article-description */
.article-description {
	font-size: 10pt;
	opacity: 75%;
	margin-left: 0;
	margin-inline-start: 0;
	margin-top: -0.5em;
}

/* 文章内容图片样式 article-content img */
.article-content img {
	width: 75%;
	height: auto;
	border-radius: 10px;
}

/* 文章内超链接样式 */
a:not(.nav-item) {
	text-decoration: none;
	color: var(--link-color, #81a1c1);
	transition: 0.3s;
}
a:hover {
	filter: brightness(1.2);
}

/* RSS 订阅链接样式 rss-link */
.rss-link {
	color: #d48128 !important;
}

/* 导航栏超链接样式 nav-item a */
.nav-item a {
	color: var(--nav-link, #fff);
}

/* 存放文章插图的容器的样式 */
figure {
	text-align: center;
}

/* 插图描述文本的样式 */
figcaption {
	opacity: 75%;
	margin: 1em;
	font-size: 10pt;
}

/* 分割线样式 */
hr {
	opacity: 0.5;
	border: #bcbcbc 1px solid;
}

/* 侧边栏按钮样式 */
.sidebar-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	padding: 10pt;
	margin: 20pt auto;
	gap: 10pt;
	text-align: left;
	border: none;
	outline: none;
	cursor: pointer; /* 鼠标悬停时显示手型光标 */
	font-size: 12pt;
	font-family: inherit;
	border-radius: 10px;
	/* box-shadow: var(--btn-shadow, 0 10px 15px rgba(255, 255, 255, 0.1)); */
	transition: transform 0.2s ease-in-out, filter 0.1s linear, color 0.1s linear;
}

/* 下载按钮样式 download-button */
.download-button {
	color: var(--btn-text-color, #fff);
	background: var(--btn-bg, #3d90d9);
	border-bottom: 2px solid var(--btn-border-bottom-color, #024873);
}
/* 爱发电按钮样式 afdian-button */
.afdian-button {
	color: #fff;
	background: var(--afdian-button-bg);
	border-bottom: 2px solid var(--afdian-button-border-bottom);
}
/* Patreon 按钮样式 patreon-button */
.patreon-button {
	color: #fff;
	background: var(--patreon-button-bg);
	border-bottom: 2px solid var(--patreon-button-border-bottom);
}
/* GitHub 按钮样式 github-button */
.github-button {
	color: #fff;
	background: var(--github-button-bg);
	border-bottom: 2px solid var(--github-button-border-bottom);
}
/* 按钮悬浮样式 */
.sidebar-button:hover {
	filter: brightness(1.2);
}
/* 按钮被点击后的样式 */
.sidebar-button:active,
.sidebar-button.clicked {
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background: var(--btn-active-bg, #fff);
	color: var(--btn-active-text-color, #024873);
	transition: background 0.1s linear, color 0.1s linear;
}
/* 按钮图标样式 */
.button-icon {
	display: flex;
	align-items: center;
	font-size: 18px;
}
/* 按钮小字样式 */
.button-small-text {
	font-size: 10pt;
	opacity: 75%;
	display: block;
}

/* 手机视图 */
@media screen and (max-width: 680px) {
	.article-content:lang(en) p {
		margin-left: 0;
	}
	.article-description {
		font-size: 10pt;
	}
	.article-meta {
		padding: 10px 20pt;
	}
	.article-content {
		margin: 0 auto;
		width: auto;
		margin: 10pt 20pt;
		float: none;
	}
}