@import url("../../../../static/nav/content/bootstrap.css");

/* 英文字体 Inter-Regular */
@font-face {
  font-family: 'Inter-Regular';
  src: url('../../../../static/nav/fonts/Inter-Regular.woff2') format('woff2'), /* 优先使用 woff2，压缩率更高 */
       url('../../../../static/nav/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 让文字在字体加载完成前先用系统字体显示，以提升体验 */
}

/* 中文字体 SourceHanSansCN-Regular */
@font-face {
  font-family: 'SourceHanSansCN-Regular';
  src: url('../../../../static/fonts/SourceHanSansCN-Regular.woff') format('woff'),
       url('../../../../static/fonts/SourceHanSansCN-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --xl-main-width: 85%; /* screen-width: 1300px-1920px */
  --xl-main-max-width: 1340px;
  --md-main-width: 90%; /* screen-width: 992px-1300px */
  --md-main-max-width: 90%;
  --sm-main-width: 90%; /* screen-width: 768px-992px */
  --sm-main-max-width: 90%;
  --xs-main-width: 90%; /* screen-width: <768px */
  --xs-main-max-width: 90%;
  --max-img-height: calc(100vh - 180px);
  --appl-context-align-justify: 12px; /* .appl-block-title::before width + .appl-block-title::before margin-right */
  --appl-primary-color: #0068B6;
  --appl-pagenav-height: 40px;
  --top-highlight-content-left: 15px;
  --top-highlight-img-top: 15px;
  --top-highlight-img-hight: 45px;
}

/* 多语言字体配置 */
body:lang(en) {
  font-family: 'Inter-Regular','Helvetica Neue','San Francisco','Segoe UI',Arial,'PingFang SC','黑体','Roboto','Oppoins',sans-serif !important;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "ss01" 0;
}

body:lang(zh-CN) {
  font-family: "SourceHanSansCN-Regular","Source Han Sans","思源黑体","Noto Sans CJK SC","Noto Sans CJK TC",sans-serif !important;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "ss01" 0;
}

body {
  padding-top: 0;
  transition: padding-top 0.3s;
}

body.sticky-padding {
  padding-top: 92px;
}

img {
  border: 0;
  width: 100%;
  height: auto;
  margin: auto;
  vertical-align: middle;
}

/* 定义一个只负责宽度的工具类 */
.content-width-container {
  width: var(--xl-main-width);
  max-width: var(--xl-main-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (min-width: 992px) and (max-width: 1300px) {
  .content-width-container {
    width: var(--md-main-width);
    max-width: var(--md-main-max-width);
  }
}

@media (max-width: 991px) {
  .content-width-container {
    width: 100%;
    max-width: none;
    padding-left: var(--topnav-margin-left);
    padding-right: var(--topnav-margin-left);
  }
}

/* 
  1. 默认样式 (移动端优先)
  这是基础样式，默认应用于所有屏幕尺寸。
  它遵循移动端优先的原则，在没有特定媒体查询匹配时生效。
*/
.rst-content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* --- 实现粘性页脚 --- */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topnav-height));
}

/* 使主内容区域自动伸展以填充多余空间，保证页脚显示在页面底部 */
.rst-content .document {
  flex-grow: 1;
}

/* 
  2. 大屏幕桌面端样式
  当屏幕宽度大于等于 1301px 时，应用此样式。
  这通常对应大尺寸的桌面显示器。
*/
@media (min-width: 1301px) {
  .rst-content {
    width: var(--xl-main-width);
    /* 使用变量定义内容宽度 */
    max-width: var(--xl-main-max-width);
    /* 使用变量定义最大内容宽度 */
  }
}

/* 
  3. 中等屏幕样式 (平板或小尺寸桌面)
  当屏幕宽度在 992px 和 1300px 之间时，应用此样式。
  这通常对应平板设备（尤其是横屏）或小尺寸的桌面显示器。
*/
@media (min-width: 992px) and (max-width: 1300px) {
  .rst-content {
    width: var(--md-main-width);
    max-width: var(--md-main-max-width);
  }
}

/* 
  4. 移动端/小屏幕样式 (特定调整)
  当屏幕宽度小于等于 991px 时，为内容区域增加内边距。
  这是对移动端和小尺寸平板视图的体验优化。
*/
@media (max-width: 991px) {
  .rst-content {
    padding-left: var(--topnav-margin-left);
    padding-right: var(--topnav-margin-left);
  }
}

/* 
  下面这两个规则通常是为了覆盖主题默认的侧边栏宽度，
  让内容区能够扩展。在移动端和桌面端通常都需要，可以保留。
*/
.wy-nav-content-wrap {
  margin-left: 0 !important;
}

.wy-nav-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/*top_icnav_script*/

h1:first-of-type {
  display: none;
  /* 隐藏标题 */
}

@media (max-width: 768px) {
  .wy-nav-top {
      display: none !important;
  }
}


.top-container-noborder {
  border: none !important;
  box-shadow: none !important;
}

.top-container-nopadding {
  padding: 0 !important;
}

.top-container-nomargin {
  margin: 0 !important;
}

.top-container-nobackground {
  background-color: transparent !important;
}

/* if can not work, should add flex for it's father like this */
/* <div class="top-highlight-col top-highlight-col-421 top-container-nobackground top-container-verti-center" style="display: flex;"> */
.top-container-center {
  align-items: center !important;
  justify-content: center !important;
}
.top-container-verti-center {
  align-items: center !important;
}

.top-container-bothends-align {
  justify-content: space-between !important;
}

.top-container-add-border {
  border: 1px solid rgba(137, 175, 201, 0.4) !important;
  background-clip: padding-box !important;
}

.top-line-with-padding {
  display: inline-block;
  padding-bottom: 1%;
  padding-top: 1%;
}

.circle-empty::before {
  content: '\25CB';  /* 空心圆圈 */
}
.circle-filled::before {
  content: '\25CF'; /* 实心黑圈 */
}

.font-color-black {
  color: #333333 !important;
}

.font-color-white {
  color: #fff !important;
}

.cool-bg {
  background-color: #1a1a2e;
  background-image: 
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}