/* static/css/custom.css */

/* Archive page custom styles */
.archive-page h2 {
    font-size: 24px;
    font-weight: bold;
    position: relative;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #f3ecec;
}

.archive-page h2 span {
    position: absolute;
    right: 1; /* 将小标放在右上角 */
    top: 0;
    font-size: 16px;
    margin-left: 10px;
    color: #666;
}

.archive-page h3 {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    margin-top: 20px;
    color: #e4e2e2;
}

.archive-page h3 span {
    position: absolute;
    right: 1;
    top: 0;
    font-size: 16px;
    margin-left: 10px;
    color: #666;
}

.archive-page .post {
    font-size: 19px;
    color: #666;
    margin-bottom: 10px;
    margin-top: 20px;
}

.archive-page .post a {
    text-decoration: none;
}

.archive-page .post span {
    display: block;
    font-size: 14px;
    color: #888;
    margin-top: 2px;
}


/* 为月份标题和第一个post并排显示 */
.month-posts {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    align-items: flex-start;
    margin-bottom: 20px; /* 增加月份和下方文章的距离 */
}

/* 小屏幕布局调整，使用媒体查询实现 */
@media (max-width: 768px) {
    .month-posts {
      flex-direction: column; /* 当屏幕小于768px时，月份和博客内容上下排列 */
      align-items: stretch;   /* 让每个子元素填满整个容器的宽度 */
    }
}
  
/* 小屏幕时，月份和博客内容分开显示 */
@media (max-width: 768px) {
    .month-posts h3 {
      margin-right: 0; /* 在小屏幕上移除右边距 */
      margin-bottom: 23px; /* 在月份和博客内容之间添加一些垂直间距 */
    }
}
 

.month-posts h3 {
    margin-right: 40px; /* 增加月份和文章之间的间距 */
    white-space: nowrap; /* 防止月份标题换行 */
    flex-shrink: 0; /* 固定月份标题的宽度 */
    width: 120px; /* 确保月份标题的宽度一致，这样文章会对齐 */
}

.month-posts ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1; /* 占据剩余宽度 */
}

.month-posts li {
    margin-bottom: 30px; /* 增加每篇文章之间的距离 */
    padding-left: 10px; /* 调整文章左边距，使得文章和月份标题对齐 */
}

.month-posts li.first-post {
    margin-bottom: 4.0px; /* 确保第一个 post 也有相同的间距 */
  }

.month-posts li .post {
    font-size: 1.125em; /* 调整文章标题字体大小 */
    line-height: 1.1em; /* 确保文章标题行高与月份一致 */
    vertical-align: middle; /* 垂直对齐 */
}

/* 让第一个post和月份标题并排 */
.month-posts .first-post {
    display: inline-flex;
    align-items: flex-start;
}

/* 后续post换行显示 */
.month-posts li:not(.first-post) {
    display: block;
    margin-left: 0; /* 保证换行后的左对齐 */
}

.month-posts li:last-child {
    margin-bottom: 0; /* 确保最后一个 post 没有额外的 margin */
}

.month-end {
    width: calc(100% - 0px); /* 这里的 0px 是距离右边的距离，可以根据需要调整 */
    border: none;
    border-top: 1.1px solid #ede8e8;
    margin: 10px 0;
}
  
.year-end {
    width: calc(100% - 0px); /* 这里的 0px 是距离右边的距离，可以根据需要调整 */
    border: none;
    border-top: 2px solid #ede8e8;
    margin: 10px 0;
}


.nav {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
}

.nav .logo {
    flex-grow: 1;
    text-align: left; 
}

.nav ul#menu {
    display: flex;
    margin-left: auto;
    text-align: right;
}

.nav ul#menu li {
    margin-left: 25px;
}


.hero-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    /* border-radius: 10px;  */
    /* display: inline-block; */
}

.post-meta .blog-meta-icon {
    vertical-align: middle;
    margin-right: 6px; 
    margin-top: 4px;
}

.entry-footer .blog-meta-icon {
    /* vertical-align: middle; */
    margin-right: 6px; 
    /* margin-top: 4px; */
}

a.entityLink {
    color: inherit;
    text-decoration: none !important;
}

a.entityLink:hover {
    color: #7c7878;
}
  

.post-content {
    font-size: 0.9em
}

.scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; 
    white-space: nowrap;
}

pre code {
    /* max-height: 500px;  设置最大高度，可根据需要调整 */
    overflow-y: auto;   /* 垂直方向滚动 */
    /* white-space: pre-wrap; 自动换行 */
    word-wrap: break-word; /* 单词在需要时断行 */
    overflow-x: hidden; /* 禁止水平滚动 */
}