/* ==========================================================================
   文件二：layout.css - 完整最终版 (PC搜索修复 + 移动吸顶 + 同行对齐)
   ========================================================================== */

/* ============================================================
 * 1. 全局与头部基础 (桌面端)
 * ============================================================ */
#header { padding-top: 35px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
#logo { color: var(--text-color) !important; font-size: 2.5em; font-weight: bold; text-decoration: none; }
.description { margin: .5em 0 0; color: var(--text-color); opacity: 0.6; font-style: italic; }

/* 导航菜单 */
#nav-menu { margin: 25px 0 0; padding: 0; }
#nav-menu a { 
  display: block; margin-right: -1px; padding: 0 20px; 
  border: 1px solid var(--border-color); border-bottom: none; 
  height: 32px; line-height: 32px; color: var(--text-color); 
  float: left; text-decoration: none; 
}
#nav-menu a:hover, #nav-menu .current { background: var(--card-bg); color: var(--accent-color) !important; }

/* 👇 核心修复：PC端搜索框完美排版 👇 */
#search { position: relative; margin-top: 15px; width: 100%; max-width: 260px; margin-left: auto; }
#search form { display: flex !important; position: relative; margin: 0; }
#search input { 
  flex: 1; min-width: 0; height: 34px; padding: 0 60px 0 15px !important; 
  border: 1px solid var(--border-color); border-radius: 18px; 
  background: var(--card-bg); color: var(--text-color); outline: none;
}
#search button { 
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); 
  width: 50px !important; height: 26px; padding: 0 !important; 
  background: var(--accent-color) !important; color: #fff !important; 
  border: none; border-radius: 13px; cursor: pointer; 
  font-size: 13px !important; white-space: nowrap; /* 防止“搜索”竖排换行 */
}
#search button:before { display: none !important; } /* 删掉旧的放大镜图标 */


/* ============================================================
 * 2. 移动端专属布局 (强制固定吸顶 + 隐藏搜索 + 同行对齐)
 * ============================================================ */
@media (max-width: 768px) {
  /* 头部固定吸顶 */
  #header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: var(--bg-color) !important;
    padding: 12px 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }

  /* 留出头部的高度，防止遮挡文章 */
  body { padding-top: 120px !important; }

  /* Logo 居中 */
  #header .site-name { text-align: center !important; width: 100% !important; }
  #logo { font-size: 2em !important; }
  
  /* 隐藏描述文字 */
  #header .description { display: none !important; }
  
  /* 隐藏搜索框 */
  #header .site-search, 
  #header #search, 
  .site-search, 
  #search { 
    display: none !important; 
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 👇 核心修复：把导航和按钮包裹容器变成 Flex 布局 👇 */
  #header .col-mb-12 > div {
    position: relative !important;
    display: flex !important;
    justify-content: center !important; /* 导航整体居中 */
    align-items: center !important;     /* 垂直居中 */
    margin-top: 15px !important;
  }

  /* 导航菜单 */
  #nav-menu {
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    padding: 0 40px !important; /* 右侧留出 40px 空间，防止被按钮遮挡 */
  }
  #nav-menu a {
    float: none !important;
    margin: 0 4px 5px 4px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    height: 30px !important;
    line-height: 28px !important;
    padding: 0 15px !important;
  }

  /* 👇 夜间模式按钮：绝对定位在这一行的最右侧并居中 👇 */
  #header .theme-settings-wrapper {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* 向上偏移自身一半高度，实现完美居中 */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* 辅助类控制显示隐藏 */
@media (min-width: 769px) { .kit-hidden-pc { display: none !important; } }
@media (max-width: 768px) { .kit-hidden-tb { display: none !important; } }

/* ============================================================
 * 3. 主内容区、文章、评论等基础样式
 * ============================================================ */
.post { padding: 15px 0 20px; border-bottom: 1px solid var(--border-color); }
.post-title { margin: .83em 0; font-size: 1.4em; }
.post-title a { color: var(--accent-color) !important; text-decoration: none; }
.post-meta { margin-top: -0.5em; padding: 0; color: var(--text-color); opacity: 0.6; font-size: .92857em; }
.post-meta li { display: inline-block; margin: 0 8px 0 0; padding-left: 12px; border-left: 1px solid var(--border-color); }
.post-meta li:first-child { margin-left: 0; padding-left: 0; border: none; }
.post-content { font-size: var(--font-size-base); line-height: 1.8; color: var(--text-color) !important; }
.post .tags { clear: both; }
.post-near { list-style: none; margin: 30px 0; padding: 0; color: var(--text-color); opacity: 0.6; }
.post-near li { margin: 10px 0; }
.archive-title { margin: 1em 0 -1em; padding-top: 20px; color: var(--text-color); opacity: 0.6; font-size: 1em; }
.more { text-align: center; }
.more a { border: none; }

/* 移动端文章标题、时间居中 */
@media (max-width: 768px) { .post-title, .post-meta { text-align: center !important; } }

/* 分页 */
.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: var(--card-bg); text-decoration: none; }
.page-navigator .current a { color: var(--text-color); background: var(--card-bg); }

/* 评论列表 */
#comments { padding-top: 15px; }
.comment-list, .comment-list ol { list-style: none; margin: 0; padding: 0; }
.comment-list li { padding: 14px; margin-top: 10px; border: 1px solid var(--border-color); }
.comment-list li.comment-level-odd { background: var(--card-bg); }
.comment-list li.comment-level-even { background: transparent; } 
.comment-list li.comment-by-author { background: rgba(255, 235, 59, 0.1); }
.comment-list li .comment-reply { text-align: right; font-size: .92857em; }
.comment-meta a { color: var(--text-color); opacity: 0.6; font-size: .92857em; }
.comment-author { display: block; margin-bottom: 3px; color: var(--text-color); }
.comment-author .avatar { float: left; margin-right: 10px; }
.comment-author cite { font-weight: bold; font-style: normal; }
.comment-list .respond { margin-top: 15px; border-top: 1px solid var(--border-color); }
.respond .cancel-comment-reply { float: right; margin-top: 15px; font-size: .92857em; }
#comment-form label { display: block; margin-bottom: .5em; font-weight: bold; }
#comment-form .required:after { content: " *"; color: #C00; }

/* 侧栏与页脚 */
#secondary { padding-top: 15px; word-wrap: break-word; font-size: 14px !important; line-height: 1.8 !important; color: var(--text-color) !important; }
.widget { margin-bottom: 30px; }
.widget-title { font-size: 15px !important; font-weight: 600 !important; color: var(--text-color) !important; margin-bottom: 8px !important; }
.widget-list { list-style: none; padding: 0; }
.widget-list li { margin: 6px 0 !important; line-height: 1.8 !important; }
.widget-list a { color: var(--accent-color) !important; }
.widget-list a:hover { color: var(--text-color) !important; }
.widget-list li ul { margin-left: 15px; }
#footer { padding: 3em 0; line-height: 1.5; text-align: center; color: var(--text-color); opacity: 0.6; }

@media (min-width: 992px) { #secondary { border-left: 1px solid var(--border-color) !important; padding-left: 24px !important; } }

/* 内容格式 */
.post-content h2, .comment-content h2 { font-size: 1.28571em; }
.post-content img, .comment-content img, .post-content video, .comment-content video { max-width: 100%; border-radius: 6px; }
.post-content a img, .comment-content a img { background: var(--bg-color); position: relative; border-radius: 6px; bottom: -4px; }
.post-content hr, .comment-content hr { margin: 2em auto; width: 100px; border: 1px solid var(--border-color); border-width: 2px 0 0 0; }
.aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; }
.alignright { float: right; }
img.alignleft { margin: 0 15px 0 0; }
img.alignright { margin: 0 0 0 15px; }

@media (max-width: 767px) { body { font-size: var(--font-size-base); } .container { padding-left: 16px; padding-right: 16px; } }
@media (min-width: 1200px) { .container { width: 80%; max-width: 1280px; margin: 0 auto; } }

/* ============================================================
 * 4. 主题设置面板样式
 * ============================================================ */
.theme-settings-wrapper { position: relative; display: inline-block; z-index: 9999; }
.theme-settings-toggle { background: transparent; border: none; color: var(--text-color, #444); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 5px; transition: transform 0.3s, color 0.3s; }
.theme-settings-toggle:hover { transform: rotate(30deg); color: var(--accent-color, #3354AA); }
.theme-settings-panel { position: absolute; right: 0; width: 260px; background: var(--card-bg, #fff); border: 1px solid var(--border-color, #eee); border-radius: 12px; padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: none; text-align: left; z-index: 10000; }
.theme-settings-wrapper.active .theme-settings-panel { display: block; }
.setting-group { margin-bottom: 16px; }
.setting-group:last-child { margin-bottom: 0; }
.setting-title { font-size: 13px; color: var(--text-color, #333); opacity: 0.7; margin-bottom: 8px; }
.setting-options { display: flex; gap: 8px; }
.opt-btn { flex: 1; padding: 8px 0; background: transparent; border: 1px solid var(--border-color, #eee); border-radius: 20px; color: var(--text-color, #333); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; }
.opt-btn:hover { background: var(--bg-color, #f5f5f5); }
.font-btn:nth-child(1) { font-size: 12px; }
.font-btn:nth-child(2) { font-size: 14px; }
.font-btn:nth-child(3) { font-size: 16px; }
.color-options { justify-content: space-between; }
.color-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--border-color, #eee); transition: transform 0.2s; }
.color-btn:hover { transform: scale(1.1); }
.color-btn.blue { background: linear-gradient(135deg, #dcecf9, #ffffff) !important; border: 1px solid #b0cde0 !important; }
.color-btn.green { background: #7c3aed !important; }
.color-btn.orange { background: #555555 !important; }
.color-btn.purple { background: #9c4f7a !important; }
html[data-mode="dark"] .color-btn.blue { background: #60a5fa !important; border: none; }
html[data-mode="dark"] .color-btn.green { background: #a78bfa !important; }
html[data-mode="dark"] .color-btn.orange { background: #999999 !important; }
html[data-mode="dark"] .color-btn.purple { background: #c8a878 !important; }