/*
xkk1 Theme core CSS
Copyright (C) 2024  [xkk1](https://github.com/xkk1)

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

:root {
  font-size: 16px;
  --title-font-size: 2.5rem;
  --h1-font-size: 2rem;
  --h2-font-size: 1.75rem;
  --h3-font-size: 1.5rem;
  --h4-font-size: 1.25rem;
  --h5-font-size: 1rem;
  --h6-font-size: 0.75rem;
  --p-font-size: 1rem;
  --broder-radius: 0.5rem;
  --code-font-size: 1rem;
  --code-font-family: 
    /* 首选：编程连字字体 */
    "Fira Code",                             /* 编程连字体，支持连字 */
    "Cascadia Code",                         /* Windows Terminal */
    "JetBrains Mono",                        /* JetBrains IDE */
    
    /* 思源等宽字体族 */
    "Noto Sans Mono",                        /* Google Noto 等宽 */
    "Noto Sans Mono CJK SC",                 /* 思源等宽中日韩简体 */
    "Source Han Mono",                       /* 思源等宽字体 */
    "Source Han Mono CN",                    /* 思源等宽简体 */
    
    /* 系统等宽字体 */
    "SF Mono", "Monaco",                     /* macOS */
    "Consolas", "Menlo",                     /* Windows & 通用 */
    "Courier New",                           /* 传统等宽 */
    
    /* 回退等宽 */
    "Monaco", "DejaVu Sans Mono",            /* 备用等宽 */
    "Liberation Mono",                       /* 开源等宽 */
    "Ubuntu Mono",                           /* Ubuntu */
    "Droid Sans Mono",                       /* Android */
    monospace;                               /* 最终回退 */
  --font-family: 
    /* 中文黑体字体栈 */
    "Resource Han Rounded CN",               /* 首选：资源汉圆黑体 */
    "Resource Han Rounded",                  /* 资源汉圆黑体通用 */
    "Source Han Sans CN",                    /* 思源黑体简体中文 */
    "Source Han Sans",                       /* 思源黑体通用 */
    "Noto Sans SC",                          /* Google 思源黑体简体 */
    "Noto Sans CJK SC",                      /* Google 思源黑体 CJK */
    
    /* 系统回退黑体 */
    "PingFang SC",                           /* macOS/iOS 苹方 */
    "Hiragino Sans GB",                      /* macOS 冬青黑体 */
    "Microsoft YaHei UI",                    /* Windows 微软雅黑 UI */
    "Microsoft YaHei",                       /* Windows 微软雅黑 */
    "Droid Sans Fallback",                   /* Android 回退 */
    
    /* 通用无衬线字体 */
    -apple-system,                           /* Apple 系统字体 */
    BlinkMacSystemFont,                      /* Chrome/Edge 系统字体 */
    "Segoe UI",                              /* Windows UI 字体 */
    Roboto,                                  /* Google Material */
    "Helvetica Neue",                        /* macOS 传统 */
    Arial,                                   /* 通用回退 */
    sans-serif;                              /* 最终回退 */
  --backdrop-filter: blur(0.125rem);
  /* --background-color-blur-white: rgba(255, 255, 255, 0.8);
    --background-color-blur-black: rgba(0, 0, 0, 0.8); */
}

/* [data-theme="dark"] 默认深色主题 */
[data-theme="dark"] {
  --color: #ccc;
  --color-grey: #3c3c3c;
  --background-color: #181818;
  --background-color-grey: #242424;
  /* --box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.25); */
  --box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);

  --background-color-blur: rgba(66, 66, 66, 0.4);
  /* --background-color-blur: rgba(255, 255, 255, 0.4); */
  --a-color: #40a6ff;
}

[data-theme="light"] {
  --color: #3b3b3b;
  --color-grey: #909090;
  --background-color: #f8f8f8;
  --background-color-grey: #e6e6e6;
  /* --box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25); */
  --box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.4);

  /* --background-color-blur: rgba(0, 0, 0, 0.4); */
  --background-color-blur: rgba(200, 200, 200, 0.4);
  --a-color: #005fb8;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  background-color: var(--background-color);
  font-family: var(--font-family);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.main {
  padding: 1rem;
  margin: 0 auto;
  max-width: 64rem;
  overflow-x: hidden;
  word-wrap: break-word;
  background-color: var(--background-color);
  border-radius: var(--broder-radius);
  /* box-shadow: var(--box-shadow); */
  font-family: var(--font-family);
  font-size: var(--p-font-size);
  color: var(--color);
}

.main .title,
.main h1,
.main h2,
.main h3,
.main h4,
.main h5,
.main h6 {
  margin: 2rem 0 1rem 0;
  padding: 0;
  /* font-family: var(--font-family); */
  font-weight: bold;
  line-height: 1;
}

.main :first-child {
  margin-top: 0;
}

.main :last-child {
  margin-bottom: 0;
}

.main .title {
  font-size: var(--title-font-size);
  text-align: center;
}

.main p {
  font-size: var(--p-font-size);
}

.main h1 {
  font-size: var(--h1-font-size);
}

.main h2 {
  font-size: var(--h2-font-size);
}

.main h3 {
  font-size: var(--h3-font-size);
}

.main h4 {
  font-size: var(--h4-font-size);
}

.main h5 {
  font-size: var(--h5-font-size);
}

.main h6 {
  font-size: var(--h6-font-size);
}

/* 引用 */
.main blockquote {
  margin: 1rem 0;
  padding: 1rem;
  border-left: 3px solid var(--color);
  background-color: var(--background-color-grey);
  border-radius: 0 var(--broder-radius) var(--broder-radius) 0;
}

/* 代码块 */
.main code {
  font-family: var(--code-font-family);
  font-size: var(--code-font-size);
  border-radius: var(--broder-radius);
  box-shadow: var(--box-shadow);
}

/* 图像 */
.main img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* 未解析的 Markdown */
.markdown {
  white-space: pre-wrap;
}

/* 代码 */
pre>code {
  height: 100%;
}

pre>div.tool-box {
  position: absolute;
  display: flex;
  opacity: 0;
  transition: opacity .2s;
  flex-direction: row;
  right: 0.5rem;
  top: 0.5rem;
  background-color: transparent;
  pointer-events: none;
}

pre>div.tool-box.show-tool-box {
  opacity: 1;
}

pre>div.tool-box>div {
  flex: 1;
  margin: 2px 4px;
  padding: 2px 4px;
  pointer-events: auto;
  cursor: pointer;
  font-family: var(--code-font-family);

  color: var(--color);
  backdrop-filter: var(--backdrop-filter);
  background-color: var(--background-color-blur);
  border-radius: var(--broder-radius);
}

pre>div.tool-box>div.copy-success::after {
  content: " ✔已复制";
}

pre.show-line-num {
  position: relative;
}

pre.show-line-num>code.hljs {
  padding-left: 3em;
}

pre.show-line-num>ol.line-num {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 0.5em 0 0;
  margin: 0.5em 0 0 0;
  width: 2em;
  list-style: none;
  text-align: right;
  border-right: 2px solid var(--color-grey);
  background-color: inherit;
  font-size: var(--code-font-size);
  font-family: var(--code-font-family);
  backdrop-filter: var(--backdrop-filter);
}

/* 表格 */
.main table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.main table thead {
  border-bottom: 1px solid var(--color);
  background: var(--background-color-grey);
}

.main th,
.main td {
  padding: 0.5em 1em;
  border: 1px solid var(--color);
  empty-cells: show;
}

.main th {
  font-weight: bold;
}

.main tbody tr:nth-child(2n) {
  background: var(--background-color-grey);
}

/* 链接 */
.main a {
  color: var(--a-color);
  text-decoration: none;
}

.main a:hover {
  text-decoration: underline;

}

/* 列表 */
.main ul,
.main ol {
  padding-left: 2.5em;
}

/* 按钮 */
.main button,
.main input[type="button"] {
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--color);
  border-radius: var(--broder-radius);
  background-color: var(--background-color-grey);
  color: var(--color);
  cursor: pointer;
}

/* 输入框 */
.main input[type="text"] {
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--color);
  border-radius: var(--broder-radius);
  background-color: var(--background-color);
  color: var(--color);
  cursor: text;
}

/* 左侧导航栏按钮 */
#nav-left-button {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color);
  position: fixed;
  top: 0;
  left: 0;

  backdrop-filter: var(--backdrop-filter);
  background-color: var(--background-color-blur);
  border-radius: 0 0 var(--broder-radius) 0;
  /* border-right: 2px solid var(--color-grey);
    border-bottom: 2px solid var(--color-grey); */
}

/* 右下角功能按钮 */
#nav-right-buttons {
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
}

#nav-right-buttons>div {
  width: 2rem;
  height: 2rem;
  padding: 2px;
  margin: 0 0 0.5rem 0;
  color: var(--color);
  backdrop-filter: var(--backdrop-filter);
  background-color: var(--background-color-blur);
  border-radius: 50%;
  /* border: 2px solid var(--color-grey); */
  transition: all 0.3s;
}

#nav-right-buttons>div:last-child {
  margin: 0;
}

#nav-right-buttons>div>svg {
  width: 100%;
  height: 100%;
}