/* Custom CSS for the Hugo Blox Builder theme */

/* 尝试4：直接针对含有链接的卡片 唯一有用的尝试，后续基于这个操作进行修改 */
/* .blox-collection a[href*="/blog/"],
.blox-collection a[href*="/post/"] {
  display: block;
  margin-bottom: 3rem !important;
} */

/* 只给博客页面的卡片添加独立框框包裹 - 通过容器区分 */
/* 注意：只针对有 .container.max-w-[65ch] 容器的链接（即blog页面的card view），排除article结构的链接（即Recent News的date-title-summary view） */
.blox-collection .container a[href*="/blog/"],
.blox-collection .container a[href*="/post/"] {
  display: block;
  margin-bottom: 2rem !important;
  margin-top: 1rem !important;
  
  /* 添加框框样式 - 移除背景色让暗色模式可以覆盖 */
  border: 1px solid #c1b9b99d;
  /* border-color: #0659fe; */
  border-radius: 12px;
  /* 不在这里设置背景色，让暗色模式CSS能够生效 */
  box-shadow: 0 4px 6px -1px rgba(171, 169, 169, 0.83);
  transition: all 0.2s ease;
  padding: 1.5rem;
  text-decoration: none;
  /* color: inherit; */
}

/* 亮色模式的背景色
[data-theme="light"] .blox-collection .container a[href*="/blog/"],
[data-theme="light"] .blox-collection .container a[href*="/post/"] {
  border-color: #e5e7eb;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
} */

/* 悬停效果 - 只针对博客页面的卡片 */
.blox-collection .container a[href*="/blog/"]:hover,
.blox-collection .container a[href*="/post/"]:hover {
  transform: translateY(-4px);
  /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
  box-shadow: 0 4px 12px rgba(96, 169, 130, 0.922);
  border-color: #0a895d;
}

/* 暗色模式支持 - 只针对博客页面的卡片
[data-theme="dark"] .blox-collection .container a[href*="/blog/"],
[data-theme="dark"] .blox-collection .container a[href*="/post/"] {
  border-color: #7e92ae !important;
  background-color: #374151 !important;
  color: #f3f4f6 !important;
} */

/* 确保暗色模式下的所有文字都是可见的 */
/* [data-theme="dark"] .blox-collection .container a[href*="/blog/"] *,
[data-theme="dark"] .blox-collection .container a[href*="/post/"] * {
  color: #f3f4f6 !important;
} */

/* [data-theme="dark"] .blox-collection .container a[href*="/blog/"]:hover,
[data-theme="dark"] .blox-collection .container a[href*="/post/"]:hover {
  background-color: #4b5563 !important;
  border-color: #60a5fa !important;
}
 */


/* 只针对博客页面的容器 - 通过精确的class匹配 */
.blox-collection .container[class*="max-w-[65ch]"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 1rem auto !important; /* 保持居中和垂直间距 */
  /* 保留原有的宽度限制 */
  /* max-width: 65ch !important; 65ch 大约等于65个字符宽度，是一个很好的阅读宽度 */
  overflow: visible !important;
}

/* 更精确的选择器 - 只针对blog页面的特定容器 */
.blox-collection div[class*="max-w-[65ch]"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* 确保不影响其他页面的container */
.blox-collection .container:not([class*="max-w-[65ch]"]) {
  /* 不应用任何修改，让其保持原样 */
}

/* 确保链接卡片占满容器宽度 */
.blox-collection .container a[href*="/blog/"],
.blox-collection .container a[href*="/post/"] {
  width: 100%;
  box-sizing: border-box;
}




/* Friend links styles */
.friend-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.friend-links .friend-card {
  height: 8rem; /* 卡片高度 */
  display: flex;
  align-items: center;
  padding: 1rem; /* 内边距 */
  /* border: 1px solid #e5e7eb; */
  border: 1px solid #c1b9b99d;
  border-radius: 0.75rem;
  /* background-color: white; */
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 6px -1px rgba(171, 169, 169, 0.83);
}

.friend-links .friend-card:hover {
  /* box-shadow: 0 4px 12px rgba(128, 169, 219, 0.922);
  border-color: #3b82f6; */
  box-shadow: 0 4px 12px rgba(96, 169, 130, 0.922);
  border-color: #0a895d;
  transform: translateY(-2px);
}

.friend-links .friend-card .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 1rem;
  flex-shrink: 0;
  object-fit: cover;
}

.friend-links .friend-card .info {
  flex: 1;
}

.friend-links .friend-card .info .name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.15rem; /* 减少名字底部间距：0.25rem → 0.15rem */
  /* color: #323232; */
}

.friend-links .friend-card .info .description {
  font-size: 0.875rem;
  color: #9b9d9f;
  line-height: 1.2; /* 减少行高：1.3 → 1.2 */
}

/* Dark mode support for friend links */
/* [data-theme="light"] .friend-links .friend-card {
  background-color: white;
  border-color: #e5e7eb;
} */

/* Dark mode support for friend links */
/* [data-theme="dark"] .friend-links .friend-card {
  background-color: #374151;
  border-color: #4b5563;
} */

/* [data-theme="light"] .friend-links .friend-card .info .name {
  color: #323232;
}
[data-theme="dark"] .friend-links .friend-card .info .name {
  color: #f3f4f6;
} */

/* [data-theme="light"] .friend-links .friend-card .info .description {
  color: #9b9c9e;
}
[data-theme="dark"] .friend-links .friend-card .info .description {
  color: #d1d5db;
} */

/* [data-theme="light"] .friend-links .friend-card:hover {
  border-color: #60a5fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #4b5563;
}
[data-theme="dark"] .friend-links .friend-card:hover {
  border-color: #60a5fa;
  background-color: #bdc3cc;
} */

/* Responsive design for friend links */
@media (max-width: 768px) {
  .friend-links {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Overwrite inline code font stuff */
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  font-weight: 400;
  font-size: 0.8em;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

/* Inline code styling - make backtick code more visible */
/* Only target inline code, not code blocks */
p code,
li code,
td code,
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  /* background-color: rgb(250 250 250/1); */
  background-color: rgba(226, 209, 244, 0.35);
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 2px 6px;
  /* font-size: 0.9em; */
  /* font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; */
  /* color: #d63384; */
  /* font-weight: 400; */
}

/* Overwrite Code Block Background Color */
.prose .chroma, .prose pre {
  background-color: rgba(226, 209, 244, 0.35);
}
/* Overwrite Code Block Background Color in dark mode */ 
/* Dark Mode Specifying Code Copyed from F12 */
:is(.dark .prose .chroma), :is(.dark .prose pre) {
  background-color: rgb(51 65 85/1);
}

/* Remove any backticks added by CSS pseudo-elements */
p code::before,
p code::after,
li code::before,
li code::after,
td code::before,
td code::after,
h1 code::before,
h1 code::after,
h2 code::before,
h2 code::after,
h3 code::before,
h3 code::after,
h4 code::before,
h4 code::after,
h5 code::before,
h5 code::after,
h6 code::before,
h6 code::after {
  content: '' !important;
}

/* Dark mode support for inline code */
/* [data-theme="dark"] p code,
[data-theme="dark"] li code,
[data-theme="dark"] td code,
[data-theme="dark"] h1 code,
[data-theme="dark"] h2 code,
[data-theme="dark"] h3 code,
[data-theme="dark"] h4 code,
[data-theme="dark"] h5 code,
[data-theme="dark"] h6 code {
  background-color: rgb(51 65 85/1);
  border-color: #4b5563;
  color: #f472b6;
} */
:is(.dark p code),
:is(.dark li code),
:is(.dark td code),
:is(.dark h1 code),
:is(.dark h2 code),
:is(.dark h3 code),
:is(.dark h4 code),
:is(.dark h5 code),
:is(.dark h6 code) {
  background-color: rgb(51 65 85/1);
  border-color: #4b5563;
  /* color: #f472b6; */
  color: rgb(255 255 255/1);
}