/**
 * wpForo 论坛 ↔ mytheme 设计系统对齐（推特感 · Phase1）
 *
 * 仅在 is_wpforo_page() 时入队（见 inc/enqueue.php）。
 * 不改插件本体。目标：少顶栏杂讯、分类/帖子改成现代卡片流雏形。
 *
 * Token（CONTEXT §9）：
 *   primary-500 #e03030 · primary-50 #fdf5f5 · primary-600 #c52a2a
 *   ink #222 / secondary #666 / tertiary #999
 *   line #DEDEDE · radius card 14px
 *   body 16 / subhead 15 / caption 14 / footnote 13 / page 24
 */

/* —— 壳子 —— */
#wpforo #wpforo-wrap {
  color: #222222;
  background: transparent;
  font-size: 16px;
  line-height: 1.5;
}
.mytheme-community-wrap #wpforo {
  max-width: 100%;
}

/* —— 藏经典论坛杂讯（双保险；组件开关关了仍兜底） —— */
#wpforo #wpforo-wrap #wpforo-menu,
#wpforo #wpforo-wrap .wpforo-subtop,
#wpforo #wpforo-wrap #wpforo-title,
#wpforo #wpforo-wrap #wpforo-footer,
#wpforo #wpforo-wrap #wpforo-poweredby,
#wpforo #wpforo-wrap #wpforo-stat-header,
#wpforo #wpforo-wrap #wpforo-stat-body,
#wpforo #wpforo-wrap li.wpforo-whats-new,
#wpforo #wpforo-wrap li.wpforo-recent,
#wpforo #wpforo-wrap li.wpforo-members,
#wpforo #wpforo-wrap li.wpforo-profile {
  display: none !important;
}

/* —— 链接：品牌红 —— */
#wpforo #wpforo-wrap a {
  color: #e03030;
}
#wpforo #wpforo-wrap a:hover,
#wpforo #wpforo-wrap a:hover svg {
  color: #c52a2a;
  fill: #c52a2a;
}

/* —— 分类头：去掉老气蓝条，改成现代分隔 —— */
#wpforo #wpforo-wrap .wpforo-category,
#wpforo #wpforo-wrap .wpforo-cat-panel,
#wpforo #wpforo-wrap .wpf-head-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#wpforo #wpforo-wrap .cat-title,
#wpforo #wpforo-wrap .wpf-head-title,
#wpforo #wpforo-wrap .cat-title a {
  color: #222222 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* —— 版块区：白卡片 —— */
#wpforo #wpforo-wrap .wpforo-section {
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 14px;
  padding: 8px 4px 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

/* —— Layout4 话题行 → 竖向信息流卡片 —— */
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread {
  border: none !important;
  border-bottom: 1px solid #ededed !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread:last-child {
  border-bottom: none !important;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-body {
  display: grid !important;
  grid-template-columns: 48px 1fr;
  grid-template-areas:
    "avatar main"
    "avatar meta";
  gap: 4px 12px;
  padding: 16px 16px !important;
  align-items: start;
  width: 100% !important;
  box-sizing: border-box;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-body:hover {
  background: #fafafa;
}

/* 头像 */
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-author {
  grid-area: avatar;
  width: 48px !important;
  min-width: 48px !important;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-author img,
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-users-avatars img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 9999px !important;
  object-fit: cover;
}

/* 标题区 */
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-title {
  grid-area: main;
  width: auto !important;
  max-width: none !important;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-head a,
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-head .wpf-spost-title-link,
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-head {
  color: #222222 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-author-name {
  grid-area: meta;
  color: #999999 !important;
  font-size: 13px !important;
  margin-top: 2px;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-author-name a {
  color: #666666 !important;
  font-weight: 500;
}

/* 藏经典论坛列：状态图标 / 版块圆 / 回帖数 / 浏览 / 最后回复 */
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-status,
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-forum,
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-posts,
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-views,
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-last-reply,
#wpforo #wpforo-wrap .wpfl-4 .wpf-threads-head,
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-box.wpf-thread-status {
  display: none !important;
}

/* 版块列表行（无帖时的论坛项）也做成简洁行 */
#wpforo #wpforo-wrap .wpfl-4 .wpf-forum-item,
#wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item {
  border: none !important;
  border-bottom: 1px solid #ededed !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-forum-item:hover {
  background: #fafafa;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-forum-item a {
  color: #222222 !important;
  font-size: 16px;
  font-weight: 600;
}

/* —— 发帖按钮 —— */
#wpforo #wpforo-wrap .wpf-button,
#wpforo #wpforo-wrap .wpf-add-comment-button,
#wpforo #wpforo-wrap .wpf-answer-button,
#wpforo #wpforo-wrap button.wpf-button,
#wpforo #wpforo-wrap input[type="submit"].wpf-button,
#wpforo #wpforo-wrap .wpf-add-topic-wrap a,
#wpforo #wpforo-wrap .wpf-add-topic-wrap .wpf-button {
  background: #e03030 !important;
  background-color: #e03030 !important;
  color: #ffffff !important;
  border: 1px solid #e03030 !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
#wpforo #wpforo-wrap .wpf-button:hover,
#wpforo #wpforo-wrap .wpf-add-topic-wrap a:hover,
#wpforo #wpforo-wrap button.wpf-button:hover {
  background: #c52a2a !important;
  border-color: #c52a2a !important;
  color: #ffffff !important;
}

#wpforo #wpforo-wrap .wpf-button-outlined {
  border: 1px solid #e03030 !important;
  color: #e03030 !important;
  background: #ffffff !important;
  border-radius: 9999px !important;
  font-size: 15px;
  font-weight: 500;
}
#wpforo #wpforo-wrap .wpf-button-outlined:hover {
  background: #fdf5f5 !important;
  box-shadow: none;
}

#wpforo #wpforo-wrap .wpf-button-secondary {
  background: #f8f8f8 !important;
  color: #666666 !important;
  border: 1px solid #dedede !important;
  border-radius: 9999px !important;
  font-size: 14px;
}

/* —— 输入焦点：墨色 —— */
#wpforo #wpforo-wrap input[type="text"],
#wpforo #wpforo-wrap input[type="search"],
#wpforo #wpforo-wrap input[type="email"],
#wpforo #wpforo-wrap input[type="password"],
#wpforo #wpforo-wrap textarea,
#wpforo #wpforo-wrap select {
  border-radius: 14px !important;
  border-color: #dedede !important;
  color: #222222;
  font-size: 16px;
}
#wpforo #wpforo-wrap input:focus,
#wpforo #wpforo-wrap textarea:focus,
#wpforo #wpforo-wrap select:focus {
  outline: none !important;
  border-color: #111111 !important;
  box-shadow: 0 0 0 1px #111111 !important;
}

/* —— 选区 —— */
#wpforo #wpforo-wrap *::selection {
  color: #ffffff;
  background: #e03030;
}

@media (prefers-reduced-motion: reduce) {
  #wpforo #wpforo-wrap .wpf-button,
  #wpforo #wpforo-wrap .wpf-button-outlined {
    transition: none;
  }
}

/* =============================================================================
 * Phase2 · 推特感：胶囊分类 + 发帖区 + 信息流卡片
 * ============================================================================= */

/* —— 顶栏 chrome —— */
.mytheme-wpf-feed-chrome {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}

.mytheme-wpf-capsules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mytheme-wpf-capsule {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid #dedede;
  background: #ffffff;
  color: #222222 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mytheme-wpf-capsule:hover {
  background: #fdf5f5;
  border-color: #e96e6e;
  color: #e03030 !important;
}
.mytheme-wpf-capsule.is-active {
  background: #e03030;
  border-color: #e03030;
  color: #ffffff !important;
}

/* —— 发帖区 —— */
.mytheme-wpf-composer {
  border: 1px solid #dedede;
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
}
.mytheme-wpf-composer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mytheme-wpf-composer__avatar img {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: block;
  object-fit: cover;
}
.mytheme-wpf-composer__hint {
  color: #666666;
  font-size: 15px;
}
.mytheme-wpf-composer__guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mytheme-wpf-composer__guest-text {
  margin: 0;
  color: #666666;
  font-size: 15px;
}
.mytheme-wpf-composer__login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 9999px;
  background: #e03030 !important;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
}
.mytheme-wpf-composer__login-btn:hover {
  background: #c52a2a !important;
  color: #ffffff !important;
}

/* 插件默认把发帖表单藏了；在我们的 composer 里强制展开 */
.mytheme-wpf-composer .wpf-topic-form-extra-wrap,
.mytheme-wpf-composer .wpf-topic-create,
.mytheme-wpf-composer .wpf-form-wrapper.wpf-topic-create {
  display: block !important;
}
.mytheme-wpf-composer .wpf-topic-forum-field {
  padding: 0 0 12px !important;
  margin: 0 !important;
  text-align: left !important;
  border: none !important;
}
.mytheme-wpf-composer .wpf-topic-forum-wrap {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.mytheme-wpf-composer .wpf-choose-forum {
  font-size: 13px !important;
  color: #999999;
  text-align: left;
}

/* —— 信息流 —— */
.mytheme-wpf-feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #dedede;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}
.mytheme-wpf-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #ededed;
  margin: 0;
}
.mytheme-wpf-card:last-child {
  border-bottom: none;
}
.mytheme-wpf-card:hover {
  background: #fafafa;
}
.mytheme-wpf-card__avatar img {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
}
.mytheme-wpf-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #999999;
  line-height: 1.4;
}
.mytheme-wpf-card__author a {
  color: #222222 !important;
  font-weight: 600;
  font-size: 14px;
}
.mytheme-wpf-card__forum {
  color: #e03030 !important;
  font-size: 13px;
}
.mytheme-wpf-card__dot {
  color: #cccccc;
}
.mytheme-wpf-card__title {
  display: block;
  color: #222222 !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
  text-decoration: none !important;
}
.mytheme-wpf-card__excerpt {
  display: block;
  color: #666666 !important;
  font-size: 15px;
  line-height: 1.55;
  text-decoration: none !important;
  margin-bottom: 10px;
}
.mytheme-wpf-card__media {
  display: grid;
  gap: 6px;
  border-radius: 14px;
  overflow: hidden;
}
.mytheme-wpf-card__media--1 {
  grid-template-columns: 1fr;
}
.mytheme-wpf-card__media--2,
.mytheme-wpf-card__media--4 {
  grid-template-columns: 1fr 1fr;
}
.mytheme-wpf-card__media--3 {
  grid-template-columns: 1fr 1fr;
}
.mytheme-wpf-card__img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f3f3;
}
.mytheme-wpf-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mytheme-wpf-feed__empty {
  text-align: center;
  color: #999999;
  font-size: 14px;
  padding: 40px 16px;
  border: 1px dashed #dedede;
  border-radius: 14px;
}

/* 藏 recent 老壳残留 */
.mytheme-wpf-recent .wpf-head-bar,
.mytheme-wpf-recent .wpforo-feed {
  display: none !important;
}
.mytheme-wpf-snavi {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0;
  font-size: 13px;
}
.mytheme-wpf-snavi:empty {
  display: none;
}

/* 老 table recent 兜底（若未走到覆盖模板） */
#wpforo #wpforo-wrap .wpforo-recent-content table {
  border: none !important;
}