/* VSCode light 配色（亮色模式） */
:root,
[data-md-color-scheme="default"] {
  color-scheme: light;

  --md-hue: 225deg;

  --md-typeset-font-size: 17px;

  --md-default-fg-color: #1e1e1e;
  --md-default-fg-color--light: #444444;
  --md-default-fg-color--lighter: #666666;
  --md-default-fg-color--lightest: #b3b3b3;

  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: #f3f3f3;
  --md-default-bg-color--lighter: #ededed;
  --md-default-bg-color--lightest: #f6f6f6;

  --md-primary-fg-color: #1976d2;
  --md-primary-fg-color--light: #63a4ff;
  --md-primary-fg-color--dark: #004ba0;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #e3f2fd;

  --md-accent-fg-color: #007acc;
  --md-accent-fg-color--transparent: rgba(0, 122, 204, 0.08);
  --md-accent-bg-color: #e5f3ff;
  --md-accent-bg-color--light: #ebf7ff;

  --md-code-fg-color: #1e1e1e;
  --md-code-bg-color: #f5f5f5;
  --md-code-bg-color--light: #fafbfc;
  --md-code-bg-color--lighter: #f0f0f0;

  --md-code-hl-color: #eaf5ff;
  --md-code-hl-color--light: #eaf5ff80;

  --md-code-hl-number-color: #098658;
  --md-code-hl-special-color: #795e26;
  --md-code-hl-function-color: #795e26;
  --md-code-hl-constant-color: #36acaa;
  --md-code-hl-keyword-color: #af00db;
  /* 控制语句: 紫色 */
  --md-code-hl-type-color: #007acc;
  --md-code-hl-string-color: #a31515;
  --md-code-hl-name-color: #267f99;
  --md-code-hl-operator-color: #222222;
  --md-code-hl-punctuation-color: #222222;
  --md-code-hl-comment-color: #008000;
  --md-code-hl-generic-color: #c000c0;
  --md-code-hl-variable-color: #267f99;

  --md-typeset-color: var(--md-default-fg-color);
  --md-typeset-a-color: var(--md-primary-fg-color);
  --md-typeset-del-color: rgba(255, 70, 70, 0.12);
  --md-typeset-ins-color: rgba(60, 200, 100, 0.14);
  --md-typeset-kbd-color: #fff;
  --md-typeset-kbd-accent-color: #ececec;
  --md-typeset-kbd-border-color: #b3b3b3;
  --md-typeset-mark-color: rgba(244, 216, 117, 0.5);
  --md-typeset-table-color: #ececec;
  --md-typeset-table-color--light: #f3f3f3;

  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  --md-warning-fg-color: #1e1e1e;
  --md-warning-bg-color: #fff3cd;

  /* 阴影和搜索优化 */
  --md-shadow-z1: 0 4px 10px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
  --md-shadow-z2: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.25);
  --md-shadow-z3: 0 4px 10px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.35);

  --color-foreground: 30 30 30;
  --color-background: 255 255 255;
  --color-background-subtle: 245 245 245;
  --color-backdrop: 255 255 255;
}

/* VSCode dark+ 配色（暗色模式） */
[data-md-color-scheme="slate"] {
  color-scheme: dark;

  --md-hue: 225deg;

  --md-typeset-font-size: 17px;

  --md-default-fg-color: #d4d4d4;
  --md-default-fg-color--light: #babdc2;
  --md-default-fg-color--lighter: #cccccc;
  --md-default-fg-color--lightest: #bababa;

  --md-default-bg-color: #1e1e1e;
  --md-default-bg-color--light: #232935;
  --md-default-bg-color--lighter: #2d3144;
  --md-default-bg-color--lightest: #232935;

  --md-primary-fg-color: #569cd6;
  --md-primary-fg-color--light: #62bbee;
  --md-primary-fg-color--dark: #294e80;
  --md-primary-bg-color: #1e1e1e;
  --md-primary-bg-color--light: #252526;

  --md-accent-fg-color: #3794ff;
  --md-accent-fg-color--transparent: rgba(55, 148, 255, 0.08);
  --md-accent-bg-color: #232935;
  --md-accent-bg-color--light: #232935;

  --md-code-fg-color: #d4d4d4;
  --md-code-bg-color: #1e1e1e;
  --md-code-bg-color--light: #232935;
  --md-code-bg-color--lighter: #232935;

  --md-code-hl-color: #26313c;
  --md-code-hl-color--light: rgba(38, 49, 60, 0.14);

  --md-code-hl-number-color: #b5cea8;
  --md-code-hl-special-color: #dcdcaa;
  --md-code-hl-function-color: #dcdcaa;
  --md-code-hl-constant-color: #4ec9b0;
  --md-code-hl-keyword-color: #c586c0;
  /* 控制语句：蓝 */
  --md-code-hl-type-color: #569cd6;
  /* 类型关键字：青绿 */
  --md-code-hl-string-color: #ce9178;
  --md-code-hl-name-color: #9cdcfe;
  --md-code-hl-operator-color: #d4d4d4;
  --md-code-hl-punctuation-color: #d4d4d4;
  --md-code-hl-comment-color: #6a9955;
  --md-code-hl-generic-color: #d7ba7d;
  --md-code-hl-variable-color: #9cdcfe;

  --md-typeset-color: var(--md-default-fg-color);
  --md-typeset-a-color: var(--md-primary-fg-color);
  --md-typeset-del-color: rgba(200, 20, 40, 0.14);
  --md-typeset-ins-color: rgba(35, 255, 120, 0.16);
  --md-typeset-kbd-color: #232a2d;
  --md-typeset-kbd-accent-color: #232935;
  --md-typeset-kbd-border-color: #4d4d4d;
  --md-typeset-mark-color: rgba(244, 216, 117, 0.12);
  --md-typeset-table-color: #222436;
  --md-typeset-table-color--light: #2d3144;

  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  --md-warning-fg-color: #d4d4d4;
  --md-warning-bg-color: #7e651b;

  --md-shadow-z1: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.4);
  --md-shadow-z2: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.5);
  --md-shadow-z3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.7);

  --color-foreground: 255 255 255;
  --color-background: 30 30 30;
  --color-background-subtle: 38 41 53;
  --color-backdrop: 30 30 30;
}

/* ==== 关键字类型细分着色 for MkDocs Material（Pygments/Prism样式均覆盖） ==== */
/* 控制语句 if/else/for/while/return/break... */
code .k,
.highlight .k,
.token.keyword {
  color: var(--md-code-hl-keyword-color);
}

/* 类型关键字 int, float, void, string, etc. */
code .kt,
.highlight .kt,
.token.class-name,
.token.builtin,
.token.type {
  color: var(--md-code-hl-type-color);
}

code .k,
.highlight .k,
.token.keyword {
  color: var(--md-code-hl-keyword-color);
}

/* 美化（可选） */
.md-typeset pre code {
  border-radius: 6px;
  border: 1px solid #e7e7e7;
  font-size: 15px;
}

/* ==== Hero Section 全屏封面样式 ==== */

/* 只在主页让 hero 区域突破 MkDocs 容器限制 */
body.is-homepage .md-content__inner {
  margin: 0;
  padding: 0;
}

body.is-homepage .md-main__inner {
  margin: 0;
  padding: 0;
}

body.is-homepage .md-content {
  padding: 0;
  margin: 0;
}

body.is-homepage .md-main {
  padding: 0;
  margin: 0;
}

body.is-homepage .md-grid {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 0;
  /* 背景图片铺满整个页面 */
  background-image: url('../images/hero-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 半透明遮罩层，让文字更清晰 */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* 底部渐变遮罩 */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #ffffff;
  padding: 2rem;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: #FFF8DC;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  animation: fadeInDown 1s ease-out;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  margin: 0 0 2rem 0;
  opacity: 0.9;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-scroll-button {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  animation: fadeIn 1s ease-out 1s both;
  cursor: pointer;
  text-decoration: none;
  padding: 20px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.hero-scroll-button:hover {
  color: rgba(255, 255, 255, 1);
  transform: translateX(-50%) scale(1.1);
}

.hero-scroll-button:hover .scroll-arrow {
  border-color: rgba(255, 255, 255, 1);
}

.scroll-arrow {
  width: 30px;
  height: 30px;
  border-right: 3px solid rgba(255, 255, 255, 0.7);
  border-bottom: 3px solid rgba(255, 255, 255, 0.7);
  transform: rotate(45deg);
  animation: bounce 2s infinite;
}

.content-section {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 动画 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: rotate(45deg) translateY(0);
  }
  40% {
    transform: rotate(45deg) translateY(-10px);
  }
  60% {
    transform: rotate(45deg) translateY(-5px);
  }
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .hero-section {
    min-height: 400px;
  }
}

@media screen and (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
}

/* 只在主页隐藏底部导航按钮 */
body.is-homepage .md-footer,
body.is-homepage .md-footer-nav,
body.is-homepage .md-footer__link,
body.is-homepage footer.md-footer {
  display: none !important;
}

/* 只在主页隐藏底部的白色区域 */
body.is-homepage .md-content__inner {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body.is-homepage .content-section {
  display: none !important;
}

/* 确保 hero 区域占满整个视口 */
.hero-section.is-homepage {
  min-height: 100vh !important;
  height: 100vh !important;
}

/* 加粗文本样式 - 醒目但不喧宾夺主 */
:root,
[data-md-color-scheme="default"] {
  --md-strong-color: #004d99;
  font-size: 1.3em;
}

[data-md-color-scheme="slate"] {
  --md-strong-color: #29b6f6;
  font-size: 1.3em;
}

.md-typeset strong,
.md-typeset b {
  color: var(--md-strong-color);
  font-weight: 600;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
  cursor: zoom-out;
}

.lightbox-overlay.lightbox-active {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.lightbox-active .lightbox-img {
  transform: scale(1);
  opacity: 1;
}

/* ==== 引用块（blockquote）样式 ==== */
:root,
[data-md-color-scheme="default"] {
  --md-blockquote-border-color: #2b96ee !important;
}

[data-md-color-scheme="slate"] {
  --md-blockquote-border-color: #4a8bc2 !important;
}

.md-typeset blockquote {
  border-left-color: var(--md-blockquote-border-color) !important;
}

/* ========== 图片优化样式 ========== */

/* 图片懒加载占位符 */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded,
img[loading="lazy"].is-loaded {
  opacity: 1;
}

/* 响应式图片容器 */
.md-typeset img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.md-typeset img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Hero 背景图优化 - 使用 WebP */
.hero-section {
  background-image: url('../images/hero-bg.webp');
}

/* Fallback for browsers that don't support WebP */
@supports not (background-image: url('data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==')) {
  .hero-section {
    background-image: url('../images/hero-bg.png');
  }
}

/* 图片加载失败时的样式 */
img.error {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-default-bg-color--lighter);
  color: var(--md-default-fg-color--lighter);
  min-height: 200px;
}

img.error::before {
  content: "图片加载失败";
  font-size: 14px;
}

/* 响应式图片断点 */
@media screen and (max-width: 480px) {
  .md-typeset img {
    max-width: 100%;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .md-typeset img {
    max-width: 90%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .md-typeset img {
    max-width: 85%;
  }
}

@media screen and (min-width: 1025px) {
  .md-typeset img {
    max-width: 80%;
  }
}

/* 预加载关键图片（Hero 背景） */
.hero-section {
  background-attachment: fixed;
  will-change: transform;
}

/* 优化 favicon 加载 */
.md-typeset :link > img,
.md-typeset :visited > img {
  border: none;
}