/* 变量定义
------------------------------------------ */
:root {
  /* 颜色 */
  --color-primary: #2040a0;
  /* 蓝色链接 */
  --color-primary-light: #6080d0;
  /* 添加浅蓝色 */
  /* 浅蓝色边框 */
  --color-secondary: #ff0000;
  /* 红色标题 */
  --color-text: #000000;
  /* 黑色正文 */
  --color-gray: #808080;
  /* 灰色翻译 */
  --color-navy: #000080;
  /* 深蓝色 */
  --color-green: #338833;
  /* 绿色 */
  --color-light-gray: #999999;
  /* 浅灰色 */
  --color-green-light: #8bbb8b;
  /* 浅绿色边框 */
  --color-bg-light: #ffffe8;
  /* 浅黄色背景 */
  --color-bg-gray: #f9f9f9;
  /* 浅灰色背景 */
  --color-border-gray: #e2e2e2;
  /* 灰色边框 */

  /* 字体大小 */
  --font-size-base: 16pt;
  /* 基础字号 */
  --font-size-small: 14pt;
  /* 小字号 */
}

/* 全局链接样式
------------------------------------------ */
a {
  text-decoration: none;
  /* 移除下划线 */
}

/* 基础文本样式
------------------------------------------ */
.text-base {
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
}

.text-bold {
  font-weight: bold;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin: 0;
  padding: 5px;
}

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

/* 标题样式
------------------------------------------ */
/* 主标题 */
.title-main {
  text-align: center;
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* 章节标题 */
.title-chapter {
  text-align: center;
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-secondary);
}

/* 其他标题 */
.title-gray {
  text-align: center;
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-light-gray);
}

.title-gray + .title-green + .title-green {
  background-color: var(--color-bg-gray);
  margin: 0;
  padding: 10px;
  border: 2px solid var(--color-border-gray);
}

.title-green {
  text-align: center;
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-green);
}

.title-chapter + .title-green ~ :has(~ .nav-menu + .content) {
  background-color: var(--color-bg-gray);
  margin: 0;
  padding: 10px;
  border-width: 0 2px 0 2px;
  border-style: solid;
  border-color: var(--color-border-gray);
}
.title-chapter + .title-green {
  background-color: var(--color-bg-gray);
  margin: 0;
  padding: 10px;
  border-width: 2px 2px 0 2px;
  border-style: solid;
  border-color: var(--color-border-gray);
}

.title-chapter + .title-green ~ :has(+ .nav-menu + .content) {
  border-bottom: 2px solid var(--color-border-gray);
}

.title-bold {
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: bold;
  text-align: center;
  background-color: var(--color-bg-gray);
  padding: 5px;
  margin: 0;
  border: 2px solid var(--color-border-gray);
}

.title-bold {
  border-bottom: none;
}

.title-bold + .title-bold {
  border-top: none;
  border-bottom: 2px solid var(--color-border-gray);
}

.title-green-thin {
  color: var(--color-green);
  font-style: normal;
  font-weight: normal;
  line-height: 1pt;
  text-align: center;
}

.subtitle-navy {
  font-weight: bold;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-navy);
}

/* 导航样式
------------------------------------------ */
.nav-link {
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-primary);
}

.nav-menu {
  text-align: center;
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-primary);
  background-color: var(--color-bg-light);
  padding: 5px;
}

.nav-menu:last-of-type {
  padding-top: 10px;
  border-top: 2px solid var(--color-green-light);
}

.back-to-top {
  color: var(--color-primary);
  font-size: var(--font-size-small);
  font-style: italic;
  font-weight: bold;
  text-align: right;
  border-bottom: 2px solid var(--color-green-light);
  padding-bottom: 2px;
}
/* :is(.back-to-top):has(+ .nav-menu) {
  border-bottom: 2px solid var(--color-green-light);
  padding-bottom: 2px;
}

.back-to-top:last-of-type {
  border-bottom: 2px solid var(--color-green-light);
  padding-bottom: 2px;
} */
/* 内容样式
------------------------------------------ */
/* 基础内容 */
.content {
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.content-red {
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-secondary);
}

.content-blue {
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-primary);
}

.content-translation {
  font-weight: normal;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-gray);
}

/* 灰色内容 */
.content-light-gray {
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: normal;
  color: var(--color-light-gray);
}

.content-gray-center {
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: normal;
  text-align: center;
  color: var(--color-gray);
}

/* 大纲标题
------------------------------------------ */
.outline-title {
  line-height: 22pt;
  font-weight: bold;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.outline-title-blue {
  line-height: 22pt;
  font-weight: bold;
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-primary);
}

.outline-title-blue ~ .content-red {
  margin: 0;
  padding: 10px;
  background-color: var(--color-bg-gray);
  border-width: 0 2px 0 2px;
  border-style: solid;
  border-color: var(--color-border-gray);
}

.outline-title-blue ~ .content {
  margin: 0;
  padding: 10px;
  background-color: var(--color-bg-gray);
  border-width: 0 2px 0 2px;
  border-style: solid;
  border-color: var(--color-border-gray);
}

.outline-title-blue + .content-red {
  border-top: 2px solid var(--color-border-gray);
}

.outline-title-blue ~ .content ~ :has(+ .nav-menu) {
  border-bottom: 2px solid var(--color-border-gray);
}

.outline-title-gray {
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: bold;
  line-height: 22pt;
  color: var(--color-gray);
}

.nav-link-right {
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-style: italic;
  font-weight: normal;
  text-align: right;
  border-bottom: 2px solid var(--color-green-light);
  padding-bottom: 2px;
}