/* ============================================================
 * assets/post-footer/post-footer.css
 * 役割: 記事下「アーカイブ（カテゴリー）リンク」「タグリンク」の
 *       スタイリッシュ化。親テーマ xeory_base の .post-footer-list を
 *       CSS のみで上書きする（PHP ロジック・HTML 構造は無改変）。
 *
 * 親テーマ側の元マークアップ（single.php 由来）:
 *   <footer class="post-footer">
 *     <ul class="post-footer-list">
 *       <li class="cat"><i class="fa fa-folder"></i> <a rel="category tag">…一覧</a></li>
 *       <li class="tag"><i class="fa fa-tag"></i> <a rel="tag">…</a>, <a rel="tag">…</a>, …</li>
 *     </ul>
 *   </footer>
 *
 * 設計方針（サイトの既存デザイン言語に合わせる）:
 *   - プライマリ色 #0044cc 系、角丸ピル、控えめな影、ホバーで浮く
 *   - カテゴリー（アーカイブ入口）= 塗りつぶしの目立つピルボタン
 *   - タグ = アウトラインのチップ群（折り返し対応）
 *   - タグ間のコンマ区切りプレーンテキスト ", " は font-size:0 で潰し、
 *     アイコンとリンクのみ font-size を復活させる（HTML 改変不要のための定石）
 * ============================================================ */

/* ---- 行コンテナ（flex column）: 行間を少し広げる ---- */
.post-footer .post-footer-list {
  gap: 12px;
  margin: 6px 0 36px;
}

/* ---- 各行をブロック化（アイコン＋ピル群を横並びに） ---- */
.post-footer .post-footer-list li.cat,
.post-footer .post-footer-list li.tag {
  display: block;
  margin: 0;
  line-height: 1.9;
}

/* ---- 行頭の既存アイコン <i class="fa"> を控えめなラベルに ---- */
.post-footer .post-footer-list li.cat > i.fa,
.post-footer .post-footer-list li.tag > i.fa {
  display: inline-block;
  margin-right: 8px;
  color: #94a3b8;
  font-size: 13px;
  vertical-align: middle;
}

/* ============================================================
 * カテゴリー = アーカイブ入口：塗りつぶしピルボタン
 * ============================================================ */
.post-footer .post-footer-list li.cat a {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: linear-gradient(135deg, #0a5bef, #0040c8);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 68, 204, 0.22);
  vertical-align: middle;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.post-footer .post-footer-list li.cat a:hover,
.post-footer .post-footer-list li.cat a:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 68, 204, 0.32);
  filter: brightness(1.07);
}

/* ============================================================
 * タグ = アウトラインチップ群
 * ============================================================ */
/* コンマ区切りの素テキスト ", " を 0 幅化（アイコン・リンクは個別に復活） */
.post-footer .post-footer-list li.tag {
  font-size: 0;
}
.post-footer .post-footer-list li.tag > i.fa {
  font-size: 13px; /* 行頭タグアイコンを復活 */
}

.post-footer .post-footer-list li.tag a {
  display: inline-flex;
  align-items: center;
  margin: 0 7px 8px 0;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #0040c8;
  background: #eef3ff;
  border: 1px solid #d4e0ff;
  border-radius: 999px;
  vertical-align: middle;
  transition: color 0.15s ease, background 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.post-footer .post-footer-list li.tag a:hover,
.post-footer .post-footer-list li.tag a:focus-visible {
  text-decoration: none;
  color: #fff;
  background: #0044cc;
  border-color: #0044cc;
  box-shadow: 0 2px 8px rgba(0, 68, 204, 0.28);
  transform: translateY(-1px);
}

/* ---- スマホ：余白・サイズを詰める ---- */
@media (max-width: 600px) {
  .post-footer .post-footer-list li.cat a {
    padding: 7px 15px;
    font-size: 13px;
  }
  .post-footer .post-footer-list li.tag a {
    padding: 5px 11px;
    font-size: 12px;
  }
}