.post-subtitle {
  font-size: 0.8em !important;
  color: #eff !important;
  margin-top: 0.5em !important;
  font-weight: normal !important;
  text-align: center !important;
}

.post-subtitle {
  font-size: 0.8em !important;
  color: #eff !important;
  margin-top: 0.5em !important;
  font-weight: normal !important;
  text-align: center !important;
}

/* 单张图片：移动端 100%，桌面端可按类名收缩 */
.single-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 12px auto;
}

/* 桌面端断点（可按需要改 1024/992） */
@media (min-width: 1024px) {
  .lg-50 {
    width: 50% !important;
  }
  .lg-66 {
    width: 66.666% !important;
  }
  .lg-33 {
    width: 33.333% !important;
  }
}

/* 并排组件：按断点切换列数（可选增强） */
@media (min-width: 768px) {
  .group-picture.md-2 .group-picture-column {
    flex-basis: calc(50% - 6px);
  }
  .group-picture.md-3 .group-picture-column {
    flex-basis: calc(33.333% - 8px);
  }
}
@media (min-width: 1024px) {
  .group-picture.lg-2 .group-picture-column {
    flex-basis: calc(50% - 6px);
  }
  .group-picture.lg-3 .group-picture-column {
    flex-basis: calc(33.333% - 8px);
  }
  .group-picture.lg-4 .group-picture-column {
    flex-basis: calc(25% - 9px);
  }
}

/* 多图并排布局 */
.group-picture {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0; /* Adjusted margin */
  justify-content: center; /* horizontally center items in each row */
  align-items: center; /* vertically center columns to align image centers */
}

/* 2列/3列控制（可按需要加更多） */
.group-picture.cols-2 .group-picture-column {
  flex: 0 0 calc(50% - 6px);
}
.group-picture.cols-3 .group-picture-column {
  flex: 0 0 calc(33.333% - 8px);
}
.group-picture.cols-4 .group-picture-column {
  flex: 0 0 calc(25% - 9px);
}

/* 小屏改为单列 */
@media (max-width: 768px) {
  .group-picture .group-picture-column {
    flex-basis: 100%;
  }
}

/* 图片通用样式 */
.group-picture-column img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 8px;
}

/* -------------------------------------------------- */
/* Self-Hosted Fonts                                  */
/* -------------------------------------------------- */

/* Google Sans Flex - For English text */
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/google-sans-flex-v15-latin-regularwoff2/google-sans-flex-v15-latin-regular.woff2")
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* Google Sans Code - For code blocks */
@font-face {
  font-family: "Google Sans Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/google-sans-code-v14-latin-regular-woff2/google-sans-code-v14-latin-regular.woff2")
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* -------------------------------------------------- */
/* Global Font Strategy                               */
/* -------------------------------------------------- */

html,
body {
  font-family: "Google Sans Flex", "SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apple devices: prefer system UI fonts */
html.apple,
html.apple body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    "Source Han Sans SC", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif !important;
}

/* Apple devices: apply system fonts to headings and UI */
html.apple h1,
html.apple h2,
html.apple h3,
html.apple h4,
html.apple h5,
html.apple h6,
html.apple .site-name,
html.apple .nav-site-title,
html.apple .menus_item .site-page,
html.apple .card-widget,
html.apple .article-title,
html.apple .content,
html.apple .aside,
html.apple .tag-cloud,
html.apple .length-num,
html.apple .headline,
html.apple .btn,
html.apple .button {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    "Source Han Sans SC", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif !important;
}

/* Apple devices: use SF Mono for code */
html.apple pre,
html.apple code,
html.apple kbd,
html.apple samp,
html.apple tt {
  font-family: SFMono-Regular, Menlo, Monaco, "Courier New", monospace !important;
}

/* Hide global vertical scrollbar (still scrollable) */
html {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Warm light background baseline (keeps cards white for contrast) */
:root {
  --global-bg: #f7f1ec;
}

/* 强力覆盖所有分割线样式，适配深浅模式 */
html[data-theme="light"] hr,
html[data-theme="light"] hr.custom-hr {
  border: none !important;
  border-top: 1.5px solid #b3a9a0 !important;
  background: none !important;
}
html[data-theme="dark"] hr,
html[data-theme="dark"] hr.custom-hr {
  border: none !important;
  border-top: 1.5px solid #e1d5c9 !important;
  background: none !important;
}
/* Warm Morandi tint for header image overlay (light mode) */
html[data-theme="light"] {
  --mark-bg: rgba(176, 125, 106, 0.28);
}
/* Softer header base color to match Morandi palette (light mode) */
html[data-theme="light"] #page-header {
  background-color: #dccbc2 !important;
}
/* Footer: warm muted background and link hover color (light mode) */
html[data-theme="light"] #footer {
  background-color: #eadbd3 !important;
}
html[data-theme="light"] #footer a:hover {
  color: #9a5e4a !important;
}
html[data-theme="light"] #footer .footer-other {
  background-color: rgba(176, 125, 106, 0.12) !important;
}

/* --------------------------------------------- */
/* Dark mode: warm Morandi variables and surfaces */
/* --------------------------------------------- */
html[data-theme="dark"] {
  /* Warm, near-black background and surfaces */
  --global-bg: #161311;
  --card-bg: #23201e;
  --sidebar-bg: #23201e;
  --sidebar-menu-bg: #282421;
  /* Buttons and hovers with warm tints */
  --btn-bg: #2a2321;
  --btn-hover-color: #332b28;
  /* Scrollbar and subtle text background */
  --scrollbar-color: #6e554d;
  --text-bg-hover: rgba(176, 125, 106, 0.22);
  /* Blockquotes */
  --blockquote-bg: #201a18;
  --blockquote-color: rgba(255, 255, 255, 0.75);
  /* Header/footer overlay tint */
  --mark-bg: rgba(17, 14, 13, 0.55);
}

/* Header base in dark mode */
html[data-theme="dark"] #page-header {
  background-color: #6c5b4d !important;
}

/* Home title always uses Google Sans (even on Apple) */
#site-title {
  font-family: "Google Sans Flex", "SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
html.apple #site-title {
  font-family: "Google Sans Flex", "SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Footer base and hover in dark mode */
html[data-theme="dark"] #footer {
  background-color: #23201e !important;
}

/* --------------------------------------------- */
/* Dropdown (menus_item_child) contrast fixes     */
/* --------------------------------------------- */
/* Light mode: ensure dark text on light background */
html[data-theme="light"] #page-header .menus_item_child {
  background-color: rgba(134, 123, 117, 0.78) !important;
  box-shadow: 0 5px 20px -4px rgba(17, 15, 10, 0.28) !important;
}
html[data-theme="light"] #page-header .menus_item_child a {
  color: #2f2723 !important;
  text-shadow: none !important;
}
html[data-theme="light"] #page-header .menus_item_child li:hover {
  background: rgba(176, 125, 106, 0.18) !important;
}

/* Dark mode: keep warm dark background with light readable text */
html[data-theme="dark"] #page-header .menus_item_child {
  background-color: #2a2421 !important;
  box-shadow: 0 5px 20px -4px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] #page-header .menus_item_child a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] #page-header .menus_item_child li:hover {
  background: rgba(176, 125, 106, 0.22) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .post-block,
html[data-theme="dark"] .aside,
html[data-theme="dark"] .author-card,
html[data-theme="dark"] .main-inner,
html[data-theme="dark"] .content,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .tag-cloud {
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(30, 25, 22, 0.12);
}
html[data-theme="dark"] .page {
  background: #1d1917 !important;
}
html[data-theme="dark"] #footer a:hover {
  color: #d6b0a2 !important;
}
html[data-theme="dark"] #footer .footer-other {
  background-color: rgba(176, 125, 106, 0.18) !important;
}

/* --------------------------------------------- */
/* Header text contrast on top_img                */
/* Classes toggled by JS based on image luminance */
/* --------------------------------------------- */
/* Light text for dark images */
#page-header.header-text-light #site-title,
#page-header.header-text-light #site-subtitle,
#page-header.header-text-light #post-info,
#page-header.header-text-light #post-info .post-title,
#page-header.header-text-light #post-info #post-meta,
#page-header.header-text-light #post-info #post-meta a,
#page-header.header-text-light #nav a,
#page-header.header-text-light #nav span.site-page,
#page-header.header-text-light #nav .site-name,
#page-header.header-text-light #scroll-down .scroll-down-effects {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28) !important;
}
#page-header.header-text-light #nav a:hover,
#page-header.header-text-light #nav span.site-page:hover {
  color: #ffffff !important;
}

/* Dark text for bright images */
#page-header.header-text-dark #site-title,
#page-header.header-text-dark #site-subtitle,
#page-header.header-text-dark #post-info,
#page-header.header-text-dark #post-info .post-title,
#page-header.header-text-dark #post-info #post-meta,
#page-header.header-text-dark #post-info #post-meta a,
#page-header.header-text-dark #nav a,
#page-header.header-text-dark #nav span.site-page,
#page-header.header-text-dark #nav .site-name,
#page-header.header-text-dark #scroll-down .scroll-down-effects {
  color: #24201e !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.22) !important;
}
#page-header.header-text-dark #nav a:hover,
#page-header.header-text-dark #nav span.site-page:hover {
  color: #3a322d !important;
}

/* Headings: prioritize Google Sans Flex for English, SC for Chinese */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Google Sans Flex", "SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  font-weight: 600;
}

/* Code blocks use Google Sans Code */
pre,
code,
kbd,
samp,
tt {
  font-family: "Google Sans Code", SFMono-Regular, Menlo, Monaco, "Courier New",
    monospace !important;
}

/* Optional utility classes to force font */
.font-latin {
  font-family: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.font-cjk {
  font-family: "SC", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
    "Source Han Sans SC", "Microsoft YaHei", "SimHei", sans-serif !important;
}

/* Widgets inherit global font */
#rightside,
.card-widget {
  font-family: inherit;
}

/* --------------------------------------------- */
/* Author card: GitHub icon dark-mode contrast    */
/* --------------------------------------------- */
html[data-theme="dark"] .card-info-social-icons i.fab.fa-github {
  color: rgba(255, 255, 255, 0.88) !important; /* light on dark cards */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"]
  .card-info-social-icons
  a.social-icon:hover
  i.fab.fa-github {
  color: #d6b0a2 !important; /* warm Morandi accent on hover */
}