/* ====================================
 * Cuihua Theme for TBlog
 * 仿 cuixiping.com 崔话记风格
 * ==================================== */

/* LXGW WenKai font */
@import url(https://fontsapi.zeoseven.com/292/main/result.css);

/* ===== Base ===== */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: #f8f8f8;
  color: #333;
  font-family: color-emoji, LXGW WenKai, Microsoft Yahei, SimHei, Times New Roman, Source Han Sans CN, WenQuanYi Micro Hei, serif;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 320px;
}

body > header + #body { flex: 1; }

a {
  color: #333;
  text-decoration: none;
}
a:hover, a:active { color: #2196F3; }

/* ===== Color emoji font ===== */
@font-face {
  font-family: color-emoji;
  src: local(Apple Color Emoji),
       local(AndroidEmoji),
       local(Segoe UI Emoji),
       local(Segoe UI Symbol),
       local(Noto Color Emoji);
  unicode-range: U+1F000-1F644, U+203C-3299;
}

/* ===== Container ===== */
.container {
  box-sizing: border-box;
  max-width: 750px;
  min-width: 260px;
  padding: 0 16px;
  margin: 0 auto;
  position: relative;
}

/* ===== Header ===== */
header {
  padding-top: 35px;
  border-bottom: 1px solid #EEE;
  background: url(../img/sep-line-shuimo2.webp) 50% 100% repeat-x;
  text-align: center;
}

.site-logo-name {
  position: relative;
}

.site-logo {
  display: inline-block;
  width: 90px;
  height: 70px;
  vertical-align: bottom;
  background: url(../img/logo-cat.svg) no-repeat center center / cover;
  color: transparent;
  font-size: 0;
}
.site-logo:hover { color: transparent; }

.site-name {
  display: inline-block;
  vertical-align: bottom;
}

.site-name .site-title {
  color: #333;
  font-size: 2.5em;
  font-weight: 200;
  text-align: left;
  font-family: color-emoji, LXGW WenKai, Microsoft Yahei, SimHei, Times New Roman, Source Han Sans CN, WenQuanYi Micro Hei, serif;
  margin: 0;
}

.site-name .site-description {
  font-size: 0.8rem;
  margin: .2em 0 0;
  color: #999;
}

@media (max-width: 600px) {
  .site-name { display: block; }
  .site-name .site-title { text-align: unset; }
}

/* ===== Navigation ===== */
#nav-menu {
  margin: 10px 0 0;
  padding: 0;
}

#nav-menu a, #nav-menu > div {
  display: inline-block;
  margin-right: -1px;
  padding: 0 1em;
  border-bottom: none;
  height: 32px;
  line-height: 32px;
  color: #333;
}

#nav-menu a:hover, #nav-menu .current { color: #2196F3; }

@media (max-width: 400px) {
  #nav-menu a, #nav-menu > div { padding: 0 0.5em; }
}

/* ===== Archive List (首页) ===== */
.archive-list#main {
  width: 100%;
}

.archive-title {
  margin: 1em 0;
  color: #666;
  font-size: 1em;
}

.toc-items {
  font-family: color-emoji, LXGW WenKai, Microsoft Yahei, SimHei, Times New Roman, Source Han Sans CN, WenQuanYi Micro Hei, serif;
}

.toc-item {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 0.9em 0;
}

.toc-item .post-title {
  margin: 0;
  text-align: initial;
  font-size: 1.35em;
}

.toc-item .dotted-line {
  flex-grow: 1;
  margin: 0 4px;
  min-width: 4em;
  background: radial-gradient(circle at 6px center, #333 0%, #333 1.2px, #fff0 1.3px) right .3em / 8px 1em repeat-x;
}

.toc-item .post-date {
  margin: 0;
  min-width: max-content;
  font-style: italic;
  color: #888;
}

@media (max-width: 600px) {
  .toc-item {
    display: grid;
    grid-template-columns: 1fr max-content;
  }
  .toc-item .post-title { grid-column: 1 / 3; }
  .toc-item .dotted-line { margin-left: 2em; }
}

/* ===== Single Post ===== */
.post {
  padding: 15px 0 20px;
  margin: 0;
  border-bottom: 1px solid #EEE;
}

.post .post-title {
  margin: 0.8em 0 0.2em;
  font-size: 1.6em;
  text-align: center;
  font-family: color-emoji, LXGW WenKai, Microsoft Yahei, SimHei, Times New Roman, Source Han Sans CN, WenQuanYi Micro Hei, serif;
  font-weight: normal;
}

.post-meta {
  margin: 0.5em 0;
  padding: 0;
  color: #999;
  font-size: .9em;
  text-align: center;
  list-style: none;
}

.post-meta li {
  display: inline-block;
  margin: 0 8px 0 0;
  padding-left: 12px;
  border-left: 1px solid #EEE;
}

.post-meta li:first-child {
  margin-left: 0;
  padding-left: 0;
  border: none;
}

@media (max-width: 480px) {
  .post-meta {
    width: max-content;
    margin: 0.5em auto;
    text-align: unset;
  }
  .post-meta li { display: block; padding-left: 0; }
}

/* ===== Post Content ===== */
.post-content {
  line-height: 1.8;
  word-wrap: break-word;
  padding-left: 10px;
  font-family: color-emoji, LXGW WenKai, Microsoft Yahei, SimHei, Times New Roman, Source Han Sans CN, WenQuanYi Micro Hei, serif;
  font-size: 1.1em;
}

.post-content > p {
  line-height: 2;
}

.post-content[data-content-type=post] > p {
  text-indent: 2em;
  text-indent: 2ic;
}

.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6 {
  font-weight: 600;
  font-family: color-emoji, LXGW WenKai, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft Yahei, sans-serif;
}

.post-content h1 { text-indent: 0.9ic; font-size: 2.2em; }
.post-content h2 { text-indent: 1.5ic; font-size: 1.6em; }
.post-content h3 { text-indent: 1.7ic; font-size: 1.35em; }
.post-content h4, .post-content h5, .post-content h6 { text-indent: 2ic; font-size: 1.15em; }

.post-content a { color: #2196F3; }
.post-content a:hover { color: teal; }

.post-content img, .post-content video {
  max-width: 100%;
  border-radius: 5px;
}

.post-content blockquote {
  margin: 1em 1em 1em 2em;
  padding-left: 0.5em;
  border-left: 4px solid #eee;
  color: #666;
}

.post-content pre {
  padding: 12px;
  overflow: auto;
  background-color: #ddd8;
  border: solid 1px #bbb;
  border-radius: 5px;
}

.post-content code {
  color: #C13;
  background-color: #ddd;
  padding: 2px 6px;
  font-family: Menlo, Monaco, Consolas, Lucida Console, Courier New, monospace;
  font-size: .95em;
}

.post-content pre code {
  color: #333;
  background-color: unset;
  padding: 3px 0;
}

.post-content table {
  border: 1px solid #ddd;
  width: 100%;
}
.post-content table th,
.post-content table td {
  padding: 5px 10px;
  border: 1px solid #eee;
}
.post-content table th { background: #f3f3f3; }

.post-content hr {
  margin: 2em auto;
  width: 100px;
  border: 1px solid #E9E9E9;
  border-width: 2px 0 0 0;
}

/* ===== Post Navigation ===== */
.post-near {
  margin: 30px 0;
  color: #666;
}

.post-near > div {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px;
  margin: 10px 0;
}

.post-near a { color: #2196F3; }
.post-near a:hover { color: teal; }

/* ===== Page Navigator ===== */
.page-navigator {
  list-style: none;
  margin: 25px 0;
  padding: 0;
  text-align: center;
}

.page-navigator li {
  display: inline-block;
  margin: 0 4px;
}

.page-navigator a {
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
}

.page-navigator a:hover {
  background: #EEE;
  text-decoration: none;
}

.page-navigator .current a {
  color: #333;
  background: #EEE;
}

/* ===== Error Page ===== */
.error-page {
  margin: 100px 0;
  text-align: center;
}

/* ===== Footer ===== */
#footer {
  padding: 3em 0;
  line-height: 1.5;
  text-align: center;
  border-top: dotted 1px #ccc;
  font-size: 16px;
}

#footer a { color: #333; }
#footer a:hover { color: #2196F3; }

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .post-content { font-size: 18px; }
}

@media (min-width: 600px) {
  body { overflow-y: scroll; }
}

/* ===== Misc ===== */
h1, h2, h3 { font-weight: 400; }

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
  padding: 5px;
  border: 1px solid #E9E9E9;
  width: 100%;
  border-radius: 2px;
  box-sizing: border-box;
}

textarea { resize: vertical; }