:root{
  --accent:#111;
  --muted:#666;
  --bg:#f7f7f7;
  --container:1450px;
  --nav-height:170px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:#222;line-height:1.5}
header{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.06);position:sticky;top:0;z-index:30}

/*
.admin-bar header{
    top:32px;
}

@media (max-width:767px){
    .admin-bar header{
        top:46px;
    }

}
*/
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
nav{height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;position:relative}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:70px;width:auto}

/* 桌面菜单 */
.menu{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0;position:relative}
.menu li{position:relative;display:flex;align-items:center;gap:4px}
.menu li a{color:var(--accent);text-decoration:none;padding:8px 6px;font-size:18px;white-space:nowrap}

.submenu-toggle{cursor:pointer;font-size:16px;user-select:none}
.sub-menu{display:none;position:absolute;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.08);border-radius:6px;top:100%;left:0;padding: 0;list-style:none;margin:0}
.sub-menu li a{display:block;padding:8px 14px;color:var(--accent);font-size:16px;text-decoration:none}
.sub-menu li a:hover{background:#f2f2f2}
.menu li.menu-item-has-children:hover ul.sub-menu{
    display:flex;
}
.social{display:flex;gap:10px;align-items:center}
.social img{width:41px;height:41px;display:block}


footer{background:#fff;border-top:1px solid #eee;text-align:center;color:var(--muted)}

/* 移动端菜单 */
.menu-toggle{display:none;background:none;border:none;font-size:28px;cursor:pointer;color:var(--accent);z-index:100}
.mobile-overlay{
  display:none;
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.4);z-index:40;opacity:0;
  transition:opacity .3s ease;
}
.mobile-menu{
  display:flex;flex-direction:column;
  position:fixed;top:0;right:0;width:100%;height:100%;
  background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,.1);z-index:50;
  transform:translateX(100%);opacity:0;
  transition:transform .35s ease,opacity .35s ease;
  padding:60px 20px;
  align-items:center;
  
}
.mobile-menu.active{transform:translateX(0);opacity:1;}
.close-btn{align-self:flex-end;font-size:28px;color:red;cursor:pointer;margin-bottom:24px;}
.mobile-menu ul{list-style:none;margin:0;padding:0;width:100%;text-align:center;}
.mobile-menu li{opacity:0;transform:translateX(30px);transition:opacity .3s ease,transform .3s ease;padding:30px 0;border-bottom:1px solid #eee;position:relative;
    
}
.mobile-menu.active li{opacity:1;transform:translateX(0);}
.mobile-menu li a{color:#111;text-decoration:none;font-size:18px;display:inline-block;width:auto;}
.mobile-menu li.menu-item-has-children{
    position: relative;
}
.mobile-menu li.menu-item-has-children .mobile-toggle{
    position: absolute;
    margin-top: 2px;
}
.mobile-toggle{cursor:pointer;display:inline-block;margin-left:8px;font-size:18px;user-select:none;}
.mobile-submenu{display:none;flex-direction:column;padding-left:0;;align-items:center;width:100%;margin-top:6px;position: static;
    box-shadow:none;
}

.mobile-submenu li{
    border: 0;
  
}
.mobile-item.active .mobile-submenu{display:flex;}

@media (max-width:767px){
  .menu{display:none}
  .menu-toggle{display:block}
  .social{display:none}

}

.mobile-toggle {
  margin-left: 6px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  vertical-align: middle;
}

.mobile-menu li {

}

.mobile-menu li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ===== 通用内容区样式 ===== */
.content-wrap {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  border-radius: 12px;
}

/* ===== 页面模板 ===== */
.page-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
}

.page-body {
  font-size: 18px;
  line-height: 1.8;
  color: #444;
}

/* ===== 单篇文章 ===== */
.post-title {
  font-size: 30px;
  margin-bottom: 12px;
  text-align: center;
}

.post-meta {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-bottom: 30px;
}

.post-body {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  font-size: 16px;
}

.post-nav a {
  color: var(--accent);
  text-decoration: none;
}
.post-nav a:hover {
  text-decoration: underline;
}

/* ===== 归档页 ===== */
.archive-title {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.archive-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform 0.3s ease;
}
.archive-item:hover {
  transform: translateY(-5px);
}

.archive-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.archive-item-title {
  font-size: 18px;
  padding: 16px;
  margin: 0;
  text-align: center;
}

.archive-item-title a {
  color: #111;
  text-decoration: none;
}
.archive-item-title a:hover {
  color: var(--muted);
}

.archive-meta {
  text-align: center;
  color: #888;
  font-size: 14px;
  padding-bottom: 16px;
}

.pagination {
  text-align: center;
  margin-top: 40px;
}

.pagination a,
.pagination span {
  display: inline-block;
  margin: 0 6px;
  padding: 8px 14px;
  border-radius: 6px;
  background: #fff;
  color: #333;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.pagination a:hover {
  background: #f0f0f0;
}
.pagination .current {
  background: #111;
  color: #fff;
}