/* 汉仪唐韵字体声明 */
@font-face {
  font-family: 'HanTang';
  src: url('/fonts/HanTang.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 全局字体设置 */
  --main-font-family: 'HanTang', sans-serif;
  /* 页面通用间距和圆角 */
  --main-padding: 8px 10%;
  /* 内容区内边距 */
  --main-radius: 10px;
  /* 内容区圆角 */

  /* 首页 hero 区域高度和间距 */
  --hero-height: 100px;
  /* hero 默认高度 */
  --hero-height-small: 100px;
  /* hero 收缩后高度 */
  --hero-margin-top-small: 6%;
  /* hero 收缩后顶部外边距 */
  /* 标题样式 */
  --title-font-size: 3.5rem;
  /* hero 主标题字号 */
  --title-margin-bottom: 20px;
  /* hero 主标题下边距 */

  /* 内容区宽度和外边距 */
  --content-width: 80%;
  /* 主内容区宽度 */
  --content-margin: 0 5% 0 5%;
  /* 主内容区左右外边距 */

  /* 左侧状态栏宽度 */
  --leftmodlue-width: 20%;
  /* 左侧模块宽度 */

  /* 疯言疯语标题区样式 */
  --nonsense-title-width: 77.1%;
  /* 疯言疯语标题区宽度 */
  --nonsense-title-padding: 20px;
  /* 疯言疯语标题区内边距 */
  --nonsense-title-radius: 20px;
  /* 疯言疯语标题区圆角 */
  --nonsense-title-margin-bottom: 50px;
  /* 疯言疯语标题区下边距 */
  --nonsense-titleconst-padding: 1.5rem;
  /* 疯言疯语标题内容区内边距 */
  --nonsenset-margin-top: 150px;
  /* 疯言疯语内容区顶部外边距 */

  /* 分页背景色 */
  --pagination-bg: aqua;
  /* 分页区背景色 */

  /* 导航栏样式 */
  --nav-padding: 15px 35px;
  /* 导航栏默认内边距 */
  --nav-padding-small: 10px 25px;
  /* 导航栏收缩后内边距 */
  --nav-bg: rgba(145, 196, 238, 0.95);
  /* 导航栏背景色 */
  --nav-bg-transparent: transparent;
  /* 导航栏透明背景 */
  --nav-bg-hide: rgba(145, 196, 238, 0);
  /* 导航栏隐藏时背景 */
  --nav-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  /* 导航栏阴影 */
  --nav-is-active: rgba(255, 0, 255, 0.75);
  /* 导航栏激活项字体颜色 */
  /* 字体颜色和菜单样式 */
  --font-color-title: #AF7AC5;
  /* 标题字体颜色 */
  --font-size-menu: 20px;
  /* 菜单字体大小 */
  --font-weight-menu: bold;
  /* 菜单字体加粗 */
  --body-background-img: url('../img/bg.jpg');
  /* 页面背景图片 */
}

/* 页面背景设置 */
body {
  font-family: var(--main-font-family);
  /* 设置全局字体 */
  background-image: var(--body-background-img);
  /* 背景图片 */
  background-size: 120% 120%;
  /* 背景图片缩放比例 */
  background-repeat: no-repeat;
  /* 背景不重复 */
  background-position: center;
  /* 背景居中 */
  background-attachment: fixed;
  /* 背景固定 */
}
/* a 标签样式 */
a {
  font-family: var(--main-font-family);
  text-decoration: none;
  color: inherit;
  cursor: default;
  display: inline-block;
}
p, li ,ul,ol,dl,dt,dd,span,strong,em,code,pre,input,textarea,select,option,label,th,td,tr,tbody,td,th,div{
  font-family: var(--main-font-family);
}
/* 标题通用样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--main-font-family);
  font-weight: 400;
  line-height: 1.5;
  color: var(--font-color-title);
}

/* 段落通用样式 */
p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
}
/* 编辑按钮样式 */
.edit-button{
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.edit-button:hover {
  color: rgb(247, 243, 2);
  background-color: rgba(231, 205, 60, 0.3);
}
/* 删除按钮样式 */
.delete-button {
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.delete-button:hover {
    color: rgb(231, 76, 60);
    background-color: rgba(231, 76, 60, 0.1);
}
/* 文章span 样式 */

/* 发布日期样式 */
.article-publish-date {
  font-weight: 500;
  color: #95a5a6;
}

/* 阅读数量样式 */
.article-views-count {
  display: flex;
  align-items: center;
  color: #95a5a6;
}

.article-views-count::before {
  content: '|';
  margin-right: 12px;
  color: #e0e0e0;
}

/* 分类标签样式 */
.article-category-badge {
  display: flex;
  align-items: center;
  padding: 2px 10px;
  background-color: rgba(52, 152, 219, 0.1);
  color: #3498db;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* 点赞数量样式 */
.article-likes-count {
  display: flex;
  align-items: center;
  color: #95a5a6;
}

.article-likes-count::before {
  content: '|';
  margin-right: 12px;
  color: #e0e0e0;
}

/* 评论数量样式 */
.article-comments-count {
  display: flex;
  align-items: center;
  color: #95a5a6;
}

.article-comments-count::before {
  content: '|';
  margin-right: 12px;
  color: #e0e0e0;
}

/* 顶部导航栏样式 */
.elrow-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: var(--nav-padding);
  z-index: 1000;
  transition: all 1s ease;
  font-size: inherit;
  justify-content: space-between;
  align-items: center;
}

/* Logo文本样式 - 清疯不颠 */
.logo-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: 'HanTang', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  background: linear-gradient(94.75deg, rgb(60, 172, 247) 0%, rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%, rgb(247, 201, 102) 83.76%, rgb(172, 143, 100) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 导航栏透明状态 */
.elrow-top.transparent {
  background-color: var(--nav-bg-transparent);
}

/* 导航栏滚动后变色状态 */
.elrow-top.solid {
  background-color: var(--nav-bg);
  padding: var(--nav-padding-small);
  box-shadow: var(--nav-shadow);
}

/* 导航栏隐藏状态 */
.elrow-top.hide {
  background-color: var(--nav-bg-hide);
  box-shadow: var(--nav-shadow);
  top: -100px;
  transition: all 0.8s ease;
}

.grid-content.ep-bg-purple-dark {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
}

/* 菜单样式 */
.el-menu--horizontal,
.el-menu-demo {
  background: transparent;
  font-weight: var(--font-weight-menu);
  font-size: var(--font-size-menu);
  /* left: 18%; */
  border-bottom: 0;
}

.el-menu-demo .el-menu-item {
  margin-left: 10px;
  font-size: inherit;
  color: rgba(255, 255, 255, .95);
}
.el-menu-demo .el-menu-item.is-active{
  color: var(--nav-is-active);
}
/* 菜单项悬停和激活状态 */
.el-menu-demo .el-menu-item:hover{
  background-color: transparent;
  color: rgba(255, 200, 255, 0.5);
  opacity: 0.85;
}
.el-menu-demo .el-menu-item.is-active {
  background-color: transparent;
  color: var(--nav-is-active);
  opacity: 0.85;
}

/* 去除菜单项悬停和激活时的背景色 */
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: transparent;
}

/* 去除导航底部线条 */
.el-menu--horizontal.el-menu {
  border-bottom: 0;
}

.el-menu {
  display: flex;
  border-right: 0;
}

/* 内容通用背景区样式 */
#allstyle {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
}

/* 内容区样式 */
#content-section {
  min-height: 100vh;
  padding: var(--main-padding);
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
  border-radius: var(--main-radius);
  display: flex;
}

/* 内容区可见状态 */
#content-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 主内容区样式 */
.RouterViewpage {
  width: var(--content-width);
  margin: var(--content-margin);
}

.RouterViewpage.forbidwidth {
  width: 100%;
}
/* 分页区样式 */
.Pagination {
  margin-bottom: 30px;
}
.Pagination .el-pagination {
  /* 水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 左侧状态栏样式 */
.leftmodluecontainer {
  width: var(--leftmodlue-width);
}

/* 首页 hero 区域样式 */
.hero {
  height: var(--hero-height);
  margin: var(--hero-margin);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  transition: all 0.3s ease;
  position: sticky;
  top: 0;
  z-index: 999;
}

/* hero 收缩状态 */
.hero.small-hero {
  height: var(--hero-height-small);
  margin-top: var(--hero-margin-top-small);
  /* 去除 hero 收缩状态下的position */
  position: static;
}

/* 打字机效果 */
.typewriter {
  white-space: pre;
  min-height: 2.5em;
  font-size: var(--title-font-size, 2rem);
  /* 水平居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* hero 主标题样式 */

/* hero 副标题样式 */
.hero p {
  font-size: 1.5rem;
  max-width: 700px;
  margin: 0 auto 30px;
}

/* 疯言疯语标题区样式 */
.nonsensetitle {
  text-align: center;
  position: absolute;
  top: 0;
  width: var(--nonsense-title-width);
  padding: var(--nonsense-title-padding);
  margin-bottom: var(--nonsense-title-margin-bottom);
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  border-radius: var(--nonsense-title-radius);
}

/* 疯言疯语标题内容区样式 */
.nonsensetitleconst {
  padding: var(--nonsense-titleconst-padding);
  box-sizing: border-box;
}

.nonsensetitleconst p {
  font-size: 1rem;
}

/* 疯言疯语内容区顶部外边距 */
.nonsensetmargintop {
  margin-top: var(--nonsenset-margin-top);
}

/* 移动端适配：屏幕宽度小于768px时生效 */
@media (max-width: 768px) {
  :root {
    --main-padding: 40px 5%;
    --hero-height-small: 120px;
    --title-font-size: 2rem;
    --content-width: 100%;
    --content-margin: 0;
    --leftmodlue-width: 100%;
    --nonsense-title-width: 95%;
    --nonsense-title-margin-bottom: 15px;
    --nav-padding-small: 0 8px;
    --nonsenset-margin-top: 10px;
    --body-background-img: url(../img/bg.jpg);
  }

  .elrow-top {
    padding: 10px 10px;
    flex-direction: column;
    font-size: 16px;
  }

  .el-menu--horizontal,
  .el-menu-demo {
    left: 0;
  }

  .el-menu-item {
    padding: 0;
    padding-left: 10px;
  }

  .el-row.is-justify-center {
    justify-content: left;
  }

  .el-col-14 {
    flex: 0 0 0;
    max-width: 100%;
  }

  .grid-content {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
   
  }

  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title,
  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
    padding: 0 5px;
  }

  #content-section {
    flex-direction: column;
    padding: var(--main-padding);
  }

  .RouterViewpage {
    width: 100%;
    margin-top: 11%;
  }

  .nonsensetitle {
    position: relative;
    margin-top: 10%;
    padding: 10px;
    font-size: 1rem;
  }
}
/* 移动端适配：屏幕宽度小于820px时生效 */
@media (max-width: 820px) {
  :root {
    --nav-padding: 0;
    --hero-height:300px;
  }
  .RouterViewpage {
    height: auto;
  }
  .hero {
    margin-top: 50%;
  }
  .el-col-14 {
    flex: 0 0 0;
    max-width: 100%;
  }
  .elrow-top {

  }
}
