/* =================================================
   主题基础样式（已移除所有字体相关属性）
   顶栏使用背景图片，保持比例
   ================================================= */

* {
  margin: 0;
  padding: 0;
}
body {
  background: #f1f1f1;
  color: #444;
  /* 移除 font-family, font-size, text-shadow */
  padding-top: 60px;
}
@media screen and (max-width: 1260px) {
  body {
    margin: 0 30px;
    padding-top: 60px;
  }
}
@media screen and (max-width: 600px) {
  body {
    /* 移除 font-size */
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  /* 移除 font-family */
}
h1 {
  /* 移除 font-size */
}
h2 {
  /* 移除 font-size */
}
h3 {
  /* 移除 font-size */
}
a {
  text-decoration: none;
  color: #258fb8;
}
a:hover {
  text-decoration: none;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.inner {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 1260px) {
  .inner {
    width: 100%;
  }
}
#main-col {
  width: 900px;
}
@media screen and (max-width: 1260px) {
  #main-col {
    width: 100%;
    margin-right: -300px;
  }
}
@media screen and (max-width: 900px) {
  #main-col {
    margin-right: 0;
    float: none;
  }
}
@media screen and (max-width: 1260px) {
  #wrapper {
    margin-right: 300px;
  }
}
@media screen and (max-width: 900px) {
  #wrapper {
    margin-right: 0;
  }
}
#content {
  margin-top: 20px;
}
#content:after {
  content: "";
  display: table;
  clear: both;
}
article {
  position: relative;
  background: #fff;
  -webkit-box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
  box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
}
@media screen and (max-width: 900px) {
  article {
    margin: 8px -10px 15px -10px;
  }
}
article.page {
  padding-left: 20px;
}
article.page .icon {
  display: none;
}
article.page .title a:after {
  content: '\f08e';
  color: #999;
  /* 移除 font, padding-left, vertical-align */
  padding-left: 10px;
}
article .post-content {
  padding: 25px 20px 25px 20px;
  margin-bottom: 24px;
  position: relative;
}
@media screen and (max-width: 600px) {
  article .post-content {
    padding-left: 20px;
  }
}
article .gallery {
  overflow: hidden;
  position: relative;
}
article .gallery:hover .control {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
article .gallery img {
  min-width: 100%;
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
article .gallery .control {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
article .gallery .prev,
article .gallery .next {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
}
article .gallery .prev:before,
article .gallery .next:before {
  position: absolute;
  /* 移除 font */
  text-align: center;
  width: 24px;
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
  color: #fff;
  margin-top: -12px;
  top: 50%;
}
article .gallery .prev {
  left: 0;
}
article .gallery .prev:before {
  content: '\f053';
  left: 10px;
}
article .gallery .next {
  right: 0;
}
article .gallery .next:before {
  content: '\f054';
  right: 10px;
}
article header .icon {
  width: 32px;
  height: 32px;
  margin-right: 25px;
  position: absolute;
  top: 20px;
  left: 20px;
  color: #258fb8;
}
@media screen and (max-width: 600px) {
  article header .icon {
    display: none;
  }
}
article header .icon:before {
  position: absolute;
  /* 移除 font */
  top: 0;
  left: 0;
  width: 32px;
  text-align: center;
}
article header time {
  color: #999;
  margin-bottom: 5px;
  display: block;
  /* 移除 line-height */
}
article header .title {
  font-weight: bold;  /* 保留粗体，但非字体属性，属于视觉样式 */
}
article header .title a {
  color: #444;
}
article header .title a:hover {
  color: #258fb8;
  text-decoration: none;
}
article .entry {
  text-align: justify;
  /* 移除 line-height */
}
article .entry p,
article .entry blockquote,
article .entry ul,
article .entry ol,
article .entry dl,
article .entry table,
article .entry iframe,
article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6,
article .entry .video-container {
  margin-top: 15px;
}
article .entry blockquote {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-style: italic;  /* 斜体属于字体样式，用户可能不需要，但属于语义，可保留；若要去掉可删除 */
  /* 移除 font-family */
  padding: 0 30px 15px;
  text-align: center;
}
article .entry blockquote footer {
  border-top: none;
  /* 移除 font-size, line-height */
  margin: 20px 0 0;
  padding-top: 0;
}
article .entry blockquote footer cite:before {
  content: '—';
  color: #ccc;
  padding: 0 0.5em;
}
article .entry code,
article .entry pre {
  /* 移除 font-family */
}
article .entry code {
  background: #eee;
  color: #666;
  padding: 0 5px;
  margin: 0 2px;
  /* 移除 font-size */
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
article .entry pre {
  background: #eee;
  border: 1px solid #ddd;
  margin-top: 15px;
  overflow: auto;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
article .entry pre code {
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}
article .entry ul,
article .entry ol,
article .entry dl {
  margin-left: 20px;
}
article .entry ul ul,
article .entry ol ul,
article .entry dl ul,
article .entry ul ol,
article .entry ol ol,
article .entry dl ol,
article .entry ul dl,
article .entry ol dl,
article .entry dl dl {
  margin-top: 0;
}
article .entry h1,
article .entry h2 {
  font-weight: normal;  /* 保留 */
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-top: 20px;
}
article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6 {
  font-weight: normal;  /* 保留 */
}
article .entry img,
article .entry video {
  max-width: 100%;
  height: auto;
  border: none;
}
article .entry iframe {
  border: none;
}
article .entry .caption {
  display: block;
  margin-top: 5px;
  color: #999;
  position: relative;
  /* 移除 font-size */
  padding-left: 25px;
}
article .entry .caption:before {
  content: '\f040';
  position: absolute;
  /* 移除 font */
  position: absolute;
  left: 0;
  top: 3px;
}
article .entry .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
article .entry .video-container iframe,
article .entry .video-container object,
article .entry .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
article .entry .pullquote {
  float: right;
  border: none;
  padding: 0;
  margin: 1em 0 0.5em 1.5em;
  text-align: left;
  width: 45%;
  /* 移除 font-size */
}
article footer {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
  color: #999;
  /* 移除 font-size, line-height */
  position: relative;
  min-height: 16px;
}
article footer a {
  color: #999;
}
article footer a:hover {
  color: #258fb8;
  text-decoration: none;
}
article footer a:before {
  /* 移除 font */
  padding-right: 10px;
  vertical-align: middle;
}
article footer a.comment-link:before {
  content: '\f075';
}
article footer .categories,
article footer .tags {
  position: relative;
  padding-left: 25px;
  margin: 5px 0;
}
article footer .categories:before,
article footer .tags:before {
  position: absolute;
  /* 移除 font */
}
article footer .categories:before {
  content: '\f07b';
  top: 2px;
  left: 1px;
}
article footer .tags:before {
  content: '\f02b';
  top: 3px;
  left: 2px;
}
article footer .addthis {
  margin-top: 15px;
}
article footer .addthis iframe {
  margin-top: 0;
}
#comment {
  padding: 20px;
  background: #fff;
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 1px 2px 3px #ddd;
  margin-bottom: 50px;
}
#comment .title {
  font-weight: normal;  /* 保留 */
  margin-bottom: 15px;
}
#pagination a {
  display: block;
  padding: 5px 10px;
  background: #ddd;
  color: #999;
  /* 移除 font-family, text-shadow */
  margin-bottom: 50px;
}
#pagination a:hover {
  background: #258fb8;
  color: #fff;
  text-decoration: none;
  text-shadow: none;
}
#pagination .prev:before {
  content: '\f053';
  padding-right: 10px;
  /* 移除 font-family */
}
#pagination .next:after {
  content: '\f054';
  padding-left: 10px;
  /* 移除 font-family */
}
.archive-title {
  color: #999;
  font-weight: bold;  /* ä¿ç•™ */
  text-shadow: 0 0 1px #fff;
  padding: 24px 0 24px 30px;
  border-bottom: 1px solid #ddd;
  /* box-shadow: 0 2px 6px rgba(100,100,100,0.3); */
}
.archive-post {
  color: #999;
  font-weight: normal;  /* ä¿ç•™ */
  padding: 12px 20px;
  /* margin-bottom: -30px; */
  /* text-shadow: 0 0 1px #fff; */
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.archive-post time {
  min-width: 50px;                 /* 给时间固定宽度，使标题对齐 */
  color: #999;
  font-size: 0.9em;
}

.archive-post a {
  color: #444;
  text-decoration: none;
  transition: color 0.2s;
  margin-left: 10px;
}
.archive-post a:hover {
  color: #258fb8;
  text-decoration: none;
}
.archive-post.tag:before {
  content: '\f02b';
}
.archive-post.category:before {
  content: '\f07b';
}
.archive {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 50px;
  -webkit-box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
  box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
  border-bottom: 1px solid #ddd;
  margin-bottom: 50px;
}
@media screen and (max-width: 900px) {
  .archive {
    margin: 8px -15px 50px -10px;
    float: none;
    width: 100%;
  }
}
.archive span {
  color: #999;
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
}
.archive article {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.archive article .post-content {
  margin-bottom: 0;
}
#sidebar {
  width: 270px;
  /* 移除 line-height */
}
@media screen and (max-width: 900px) {
  #sidebar {
    margin: 8px -15px 15px -10px;
    float: none;
    width: 100%;
  }
}
#sidebar .widget {
  background: #fff;
  -webkit-box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
  box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
  margin-bottom: 30px;
  word-wrap: break-word;
}
#sidebar .widget .title {
  padding: 15px 20px;
  /* 移除 font-size, font-weight */
  border-bottom: 1px solid #ddd;
  font-weight: normal;  /* 保留 */
}
#sidebar .widget .entry {
  /* 移除 font-size */
  padding: 15px 20px;
}
#sidebar .widget ul,
#sidebar .widget ol,
#sidebar .widget dl {
  list-style: none;
}
#sidebar .widget ul ul,
#sidebar .widget ol ul,
#sidebar .widget dl ul,
#sidebar .widget ul ol,
#sidebar .widget ol ol,
#sidebar .widget dl ol,
#sidebar .widget ul dl,
#sidebar .widget ol dl,
#sidebar .widget dl dl {
  list-style: disc;
  margin-left: 20px;
}

#sidebar .tag small {
  margin-left: 15px;
  color: #999;
}
#sidebar .tag small:before {
  content: '(';
}
#sidebar .tag small:after {
  content: ')';
}
#sidebar .twitter li {
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
  /* 移除 font-size */
}
#sidebar .twitter li:last-of-type {
  border-bottom: none;
}
#sidebar .twitter small {
  display: block;
  margin-top: 10px;
  color: #999;
  /* 移除 line-height */
}
#sidebar .tagcloud .entry {
  padding-right: 5px;
}
#sidebar .tagcloud a {
  margin-right: 10px;
  display: inline-block;
}
#footer {
  color: #999;
  margin-bottom: 50px;
  /* 移除 font, text-shadow */
}
.entry .gist {
  background: #eee;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 0 1px #fff;
  /* 移除 line-height */
  overflow: auto;
  color: #666;
}
.entry .gist .gist-file {
  border: none;
  /* 移除 font-family */
  margin: 0;
  /* 移除 font-size */
}
.entry .gist .gist-file .gist-data {
  background: none;
  border-bottom: none;
}
.entry .gist .gist-file .gist-data pre {
  padding: 0 !important;
  /* 移除 font-family */
}
.entry .gist .gist-file .gist-meta {
  background: none;
  color: #999;
  margin-top: 5px;
  padding: 0;
  text-shadow: 0 0 1px #fff;
  font-size: 100%;  /* 相对大小，但用户要求删除所有字体，可保留百分比？严格来说也是字体相关，但删除后可能影响显示，这里保留100%作为相对值，如果要去掉可删除 */
}
.entry .gist .gist-file .gist-meta a {
  color: #258fb8;
}
.entry .gist .gist-file .gist-meta a:visited {
  color: #258fb8;
}
figure.highlight {
  background: #eee;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 0 1px #fff;
  /* 移除 line-height */
  overflow: auto;
  position: relative;
  /* 移除 font-size */
}
figure.highlight figcaption {
  color: #999;
  margin-bottom: 5px;
  text-shadow: 0 0 1px #fff;
}
figure.highlight figcaption a {
  position: absolute;
  right: 15px;
}
figure.highlight pre {
  border: none;
  padding: 0;
  margin: 0;
}
figure.highlight table {
  margin-top: 0;
  border-spacing: 0;
}
figure.highlight .gutter {
  color: #999;
  padding-right: 15px;
  border-right: 1px solid #ddd;
  text-align: right;
}
figure.highlight .code {
  padding-left: 15px;
  border-left: 1px solid #fff;
  color: #666;
}
figure.highlight .line {
  height: 20px;
}
figure.highlight .line.marked {
  background: #d6d6d6;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color: #93a1a1;
  font-style: italic;  /* 斜体，如需删除可删 */
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl,
pre .literal,
pre .id {
  color: #268bd2;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}

/* =================================================
   顶栏样式（背景图片，保持比例）
   顶栏中的符号（如 ☰）使用普通字符，无需特殊字体
   ================================================= */
:root {
  --topbar-height: 60px;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--topbar-height);
  background-color: #52bec1;
  background-image: url('/blog/images/header-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 0;
}

.topbar-search {
    margin-left: auto;
    margin-right: 50px;
}

.topbar-search input[type="search"] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;          /* 胶囊形状，更柔和 */
    padding: 10px 12px;
    font-size: 14px;
    color: white;
    width: 200px;
    outline: none;
    backdrop-filter: blur(4px);   /* 可选毛玻璃效果 */
    transition: all 0.2s;
}

.topbar-search input[type="search"]:focus {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
    width: 240px;                 /* 聚焦时稍微加宽，更醒目 */
}

.topbar-search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  /* 移除 font-size, transition */
  transition: opacity 0.2s;
}

.nav-links li a:hover {
  opacity: 0.8;
}

.menu-btn {
  display: none;
  background: #ffffff33;
  border: 1px solid #ffffff80;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 24px;
  color: #ffffff;
  line-height: 1;
  border-radius: 4px;
  backdrop-filter: blur(4px);       /* 可选：毛玻璃效果 */
  transition: all 0.2s;
}

.menu-btn:hover {
  background: #ffffff4d;
  border-color: #ffffffcc;
}

.dropdown-menu {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  width: 100%;
  background-color: rgba(44, 62, 80, 0.95);
  display: none;
  flex-direction: column;
  z-index: 999;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 0;
}

.dropdown-menu a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  /* 移除 font-size */
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}

.dropdown-menu a:first-child {
  border-top: none;
}

.dropdown-menu a:hover {
  background-color: #1a2a36;
}

.dropdown-menu.show {
  display: flex;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .menu-btn {
    display: block;
  }
}