/* ===== Custom styles ===== */
@font-face {
  font-family: "hmnsc";
  src: url("/wp-content/uploads/hmnsc.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "hmnsc";
}


/* ===== Apple-style traffic light dots for posts-item ===== */

/* 所有 posts-item 需要 position:relative 支撑绝对定位圆点 */
.posts-item {
  position: relative;
}

/* 三色圆点：::before 画红圆，box-shadow 延伸黄和绿 */
.posts-item::before {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    18px 0 0 #febc2e,
    36px 0 0 #28c840;
  z-index: 10;
  pointer-events: none;
}

/* list 模式：顶部留出 32px 空间，圆点在文字内容上方 */
.posts-item.list:not(.no_margin) {
  padding-top: 32px;
}

/* card 模式：顶部留出 32px 空间，圆点在缩略图上方 */
.posts-item.card:not(.no_margin) {
  padding-top: 32px;
}

/* no_margin 模式（评论列表等）不显示圆点 */
.posts-item.no_margin::before {
  display: none;
}

/* posts-mini（文章内嵌小卡片）不显示圆点 */
.posts-mini.posts-item::before {
  display: none;
}

/* ===== END Apple-style traffic light dots ===== */

/* posts-item 标题悬浮下划线动画
   下划线从左到右展开（left → right）
   使用 background 渐变模拟，transition 控制宽度 */
.posts-item .item-heading > a {
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size 0.3s ease;
}

.posts-item .item-heading > a:hover {
  background-size: 100% 1.5px;
}

/* ===== posts-item card 列数响应式：5→4→3→2 ===== */

/* ≥1240px：5 列 */
@media (min-width: 1240px) {
  .posts-item.card {
    width: calc(20% - 16px);
  }
}

/* 992px ~ 1239px：4 列 */
@media (min-width: 992px) and (max-width: 1239px) {
  .posts-item.card {
    width: calc(25% - 16px);
  }
}

/* 768px ~ 991px：3 列 */
@media (min-width: 768px) and (max-width: 991px) {
  .posts-item.card {
    width: calc(33.333% - 16px);
  }
}

/* ≤767px：2 列 */
@media (max-width: 767px) {
  .posts-item.card {
    width: calc(50% - 10px);
    margin: 5px;
  }
}

/* ===== END posts-item card 列数响应式 ===== */