/*!
 * func-bar.css — PUACP 子主题 功能导航条
 * 版本: 1.0.1 (随子主题 0.5.1 发布)
 * 变更: 底部间距改为可调变量 --fb-mb，默认 22px → 14px
 * 作用域: 全部选择器限定在 .func-bar 内，不污染 B2 父主题
 * 配色取自本主题: #f45f75 / #f07d8f / #ff5c00 / #fccd00
 *
 * 结构:
 * nav.func-bar > a.func-item(.highlight) > .func-icon(svg) + .func-title + .func-go
 */

.func-bar {
  --fb-primary: #f0446b;        /* 主粉红（图标/GO 徽章） */
  --fb-primary-deep: #d62d55;   /* 深一档，hover 用 */
  --fb-soft: #fff0f3;           /* 浅粉底（图标圆底） */
  --fb-soft-2: #ffe3ea;         /* 粉边 */
  --fb-text: #2b2326;           /* 标题文字 */
  --fb-sub: #8b7b81;            /* 次级文字 */
  --fb-gold: #fccd00;           /* 点缀金 */
  --fb-card: #ffffff;
  --fb-radius: 14px;
  --fb-mb: 14px;                /* 与下方区块的间距：只想改间距就改这一个值 */
  --fb-shadow: 0 4px 14px rgba(240, 68, 107, .10);
  --fb-shadow-hover: 0 12px 26px rgba(240, 68, 107, .22);

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 var(--fb-mb);
  padding: 0;
  list-style: none;
}

/* ---------- 卡片 ---------- */
.func-bar .func-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px 12px 16px;
  box-sizing: border-box;
  background: var(--fb-card);
  border: 1px solid var(--fb-soft-2);
  border-radius: var(--fb-radius);
  box-shadow: var(--fb-shadow);
  color: var(--fb-text);
  text-decoration: none !important;
  text-align: center;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.func-bar .func-item:hover,
.func-bar .func-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--fb-shadow-hover);
  border-color: rgba(240, 68, 107, .38);
  outline: none;
}

/* ---------- 图标 ---------- */
.func-bar .func-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--fb-soft);
  color: var(--fb-primary);
  transition: background .22s ease, color .22s ease, transform .22s ease;
}

.func-bar .func-icon svg {
  width: 23px;
  height: 23px;
  display: block;
  /* 原 HTML 的 svg 只写了 viewBox/stroke-width，没有 stroke 颜色，这里补齐 */
  stroke: currentColor;
  fill: none;
}

.func-bar .func-item:hover .func-icon {
  background: var(--fb-primary);
  color: #fff;
  transform: scale(1.06);
}

/* ---------- 标题 ---------- */
.func-bar .func-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .3px;
  color: var(--fb-text);
}

/* ---------- GO 徽章 ---------- */
.func-bar .func-go {
  display: inline-block;
  padding: 1px 11px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1px;
  border-radius: 999px;
  background: var(--fb-soft);
  color: var(--fb-primary);
  transition: background .22s ease, color .22s ease;
}

.func-bar .func-item:hover .func-go {
  background: var(--fb-primary);
  color: #fff;
}

/* ---------- 高亮项（开通会员）---------- */
.func-bar .func-item.highlight {
  border-color: transparent;
  background: linear-gradient(135deg, #ff8a5b 0%, #f45f75 52%, #f07d8f 100%);
  box-shadow: 0 8px 22px rgba(244, 95, 117, .34);
}

.func-bar .func-item.highlight .func-title {
  color: #fff;
  font-weight: 700;
}

.func-bar .func-item.highlight .func-icon {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

.func-bar .func-item.highlight:hover .func-icon {
  background: #fff;
  color: var(--fb-primary);
}

.func-bar .func-item.highlight .func-go {
  background: var(--fb-gold);
  color: #7a3d00;
}

.func-bar .func-item.highlight:hover .func-go {
  background: #fff;
  color: var(--fb-primary);
}

.func-bar .func-item.highlight:hover {
  box-shadow: 0 14px 30px rgba(244, 95, 117, .46);
}

/* 高亮项右上柔光 */
.func-bar .func-item.highlight::after {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .34), transparent 68%);
  pointer-events: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .func-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .func-bar .func-item { padding: 14px 10px; }
  .func-bar .func-icon { width: 40px; height: 40px; }
  .func-bar .func-icon svg { width: 20px; height: 20px; }
  .func-bar .func-title { font-size: 14px; }
}

@media (max-width: 560px) {
  .func-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }
  .func-bar .func-item { padding: 13px 8px 11px; gap: 7px; }
  .func-bar .func-icon { width: 36px; height: 36px; }
  .func-bar .func-icon svg { width: 18px; height: 18px; }
  .func-bar .func-title { font-size: 13px; }
  .func-bar .func-go { font-size: 10px; padding: 0 9px; line-height: 16px; }

  /* 5 个卡片在 2 列下会剩 1 个落单，让最后一项整行横排，避免视觉失衡 */
  .func-bar .func-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 12px;
    padding: 11px 16px;
  }
  .func-bar .func-item:last-child:nth-child(odd) .func-icon { width: 34px; height: 34px; }
}

/* 触屏取消 hover 位移，避免点击时抖动 */
@media (hover: none) {
  .func-bar .func-item:hover {
    transform: none;
    box-shadow: var(--fb-shadow);
    border-color: var(--fb-soft-2);
  }
  .func-bar .func-item:not(.highlight):hover .func-icon {
    background: var(--fb-soft);
    color: var(--fb-primary);
    transform: none;
  }
  .func-bar .func-item:not(.highlight):hover .func-go {
    background: var(--fb-soft);
    color: var(--fb-primary);
  }
}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .func-bar .func-item,
  .func-bar .func-icon,
  .func-bar .func-go { transition: none; }
  .func-bar .func-item:hover { transform: none; }
}