body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  /* 添加这一行：为固定头部留出空间 */
  padding-top: 170px;
}

/* 关键：将标题和导航一起固定 */
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 确保在最上层 */
  /* 不要设高度，让内容自动撑开 */
  background-color: white;
  /* 添加这行：允许内容溢出 */
  overflow: visible !important;
}

header {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 20px;
  margin: 0;
}

/* 设置固定的 navbar 高度 */
.navbar {
    height: 50px;
    display: flex;
    align-items: center;
}

.navbar-nav {
    margin-left: 0rem; /* 或者你想要的具体值 */
    margin-right: 1rem;
}


  /* 针对 .nav-link 在 .active 或 :focus 状态下移除默认样式 */
 .navbar .nav-link.active,
 .navbar .nav-link:focus {
     color: #004e88;
     background-color: transparent; /* 移除背景颜色 */
     box-shadow: none; /* 移除阴影 */
     border: none; /* 移除边框 */
     outline: none; /* 移除轮廓 */
     font-weight: bold; /* 文字加粗 */
 }

 .navbar .nav-link:hover {
    font-weight: bold; /* 鼠标悬停时也加粗 */
 }

.nav-dot {
    position: relative;
    padding-left: 1em;
}

.nav-dot::before {
    content: '';
    width: 0.3em;
    height: 0.3em;
    background-color: currentColor;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0.5em;
}

.nav-link {
    position: relative !important;
    padding-left: 1em !important;/* 调整这个值控制间距 */
}

.navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
}


/* 基模板的 .card-body 样式 */
.card-body-index {
    width: 100%;
    padding: 20px;
    background-color: #f8f9fa; /* 基模板的背景色 */
    border: 1px solid #ddd;
    border-radius: 20px !important; /* 使用!important强制应用 */
}

/* 子模板的 .card-body 样式 */
.card-body-article {
    width: 100%;
    padding: 20px;
    background-color: #FFFFFF; /* 子模板的背景色 */
    border: 1px solid #ddd;
}

/* 自定义卡片图片样式 */
.card-img-custom {
    width: 100%; /* 图片宽度与卡片一致 */
    height: 300px; /* 固定高度 */
    border-radius: 8px 8px 8px 8px; /* 圆角效果 */
    transition: box-shadow 0.3s ease; /* 平滑过渡效果 */
}

/* 当鼠标悬停时添加阴影 */
.card-img-custom:hover {
    box-shadow: 
        0 0 10px rgba(211, 211, 211, 0.5),    /* 近距离小光晕 */
        0 0 20px rgba(211, 211, 211, 0.3);   /* 极轻微外扩，几乎只在边缘 */
    filter: brightness(1.03);              /* 极轻微提亮 */
    transform: scale(1.005);               /* 几乎不放大，仅轻微浮动感 */
}

.card-title {
    font-family: 'Georgia', sans-serif; /* 设置字体 */
    font-size: 1.8rem; /* 设置字体大小 */
    font-weight: bold; /* 设置字体粗细 */
    margin-bottom: 10px; /* 设置标题与下方内容的间距 */
    text-align: left; /* 设置文本对齐方式（左对齐） */
    text-transform: uppercase; /* 可选：将文本转换为大写 */
    letter-spacing: 1px; /* 可选：设置字母间距 */
    line-height: 1.2; /* 可选：设置行高 */
}

.summernote-content {
    text-align: center;
}

.card {
    margin-bottom: 10px;
    border-radius: 20px !important; /* 使用!important强制应用 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
}

  .card-header,
  .card-footer {
    border: none;             /* 移除 header/footer 边框 */
    background-color: transparent;
    padding: 0;               /* 移除默认 padding */
  }

/* 单独为带 custom-card-rounded 的 card 设置圆角 */
.card.custom-card-rounded {
  border-radius: 0.1rem; /* 或你喜欢的值 */
  overflow: hidden;
}

/* 如果你想让 header 也匹配圆角 */
.card.custom-card-rounded .card-header {
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
}

/* 如果有更复杂的布局，比如嵌套的 <strong> 标签 */
.custom-card-rounded .card-header strong {
  display: block;
  padding-left: 1rem; /* 或者根据实际情况调整 */
}

.replies {
    margin-left: 2rem; /* 回复的缩进距离 */
    border-left: 2px solid #ccc; /* 左侧边框线，增强层级感 */
    padding-left: 1rem; /* 左侧内边距，避免内容紧贴边框 */
}

/* 确保品牌区域不会换行或错位 */
.navbar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 明确左对齐 */
    white-space: nowrap;
    height: 100%; /* 使高度与父容器匹配 */
}

/* 在你的 CSS 文件中 */
.form-group-spacing {
    margin-bottom: 1.5rem; /* 或者任何你想要的值 */
}

.emoji-picker {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  display: none;
  white-space: nowrap;
}

.emoji-picker .btn {
  font-size: 1.2em;
  padding: 2px 6px;
}

/* 初始状态 */
.btn-custom-interactions {
    color: #3389ca; /* 设置图标和文字的颜色 */
    background-color: transparent; /* 背景透明 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 鼠标悬停时的状态 */
.btn-custom-interactions:hover {
    color: #3389ca; /* 悬停时的文字/图标颜色 */
    background-color: #d9edf7; /* 自定义悬停时的背景颜色 */
    border-color: #d9edf7; /* 可选：悬停时的边框颜色 */
}

/* 点击时的状态 */
.btn-custom-interactions:active,
.btn-custom-interactions:focus {
    color: #3389ca; /* 点击时的文字/图标颜色 */
    background-color: transparent; /* 自定义点击时的背景颜色，比如更深一点的蓝色 */
    border-color: transparent; /* 点击时的边框颜色 */
}

/* 汉堡菜单项背景色样式 - 无间距版本 */
@media (max-width: 991.98px) {
    #navbarNav .navbar-nav {
        max-width: 150px !important; /* 限制最大宽度 */
    }
    /* 调整汉堡菜单中 nav-dot 的位置 */   
    #navbarNav .nav-dot {
        text-indent: 15px; /* 文字向右缩进15px */
    }
    #navbarNav .navbar-nav .nav-dot::before {
        left: 15px !important; /* 调整小圆点的位置 */
    }
    /* 为折叠菜单中的导航链接添加背景色 */
    #navbarNav .navbar-nav .nav-link {
        background-color: #e8f4fd !important;
        border-radius: 0 !important; /* 移除圆角 */
        margin: 0px !important; /* 添加上右下左的边距，左边距15px */
        padding: 12px 20px !important;
        border: 1px solid #d1ecf1;
        transition: all 0.3s ease;
        display: block;
        width: 100%;
    }
    
    /* 移除导航项间距 */
    #navbarNav .navbar-nav .nav-item {
        margin: 0 !important;
        width: 100%;
    }
    
    /* 移除导航列表内边距 */
    #navbarNav .navbar-nav {
        padding: 0 !important;
        width: 100%;
    }
    
    /* 悬停效果 */
    #navbarNav .navbar-nav .nav-link:hover {
        background-color: #d1ecf1 !important;
    }
    
    /* 激活状态 */
    #navbarNav .navbar-nav .nav-link.active {
        background-color: #bee5eb !important;
        font-weight: bold;
    }
}