/* ----------------------------------------------------------------- */

/* header.php表示用 */

/* --------------------------------------------------------------------- */







/* ----------------------------------------------------------------- */

/* post投稿・カスタム投稿一覧ショートコード表示用 */

/* ========== Multi Category Posts: Base ========== */

/* --------------------------------------------------------------------- */



/* 外枠：シンプルなカード風 */

.multi-posts-filter {

    margin: 0 0 16px;

    padding: 12px 16px;

}



/* セレクト本体：素直な標準UI（矢印はOS標準を使用） */

.multi-posts-cat-select {

  appearance: auto;

  /* 標準の矢印を使う */

  -webkit-appearance: auto;

  -moz-appearance: auto;

  border: 1px solid var(--line);

  border-radius: 8px;

  padding: 10px 12px;

  font-size: 0.95rem;

  line-height: 1.4;

  color: var(--fg);

  background: #fff;

  max-width: 320px;

  width: 100%;

  cursor: pointer;

}



/* フォーカス/ホバー時のアクセシビリティ */

.multi-posts-cat-select:hover {

  border-color: #d4d4d4;

}



.multi-posts-cat-select:focus {

  outline: 2px solid rgba(10, 102, 194, 0.25);

  /* var(--link)の淡い輪郭 */

  outline-offset: 2px;

}



/* スクリーンリーダー用のラベルを残しつつ視覚的には非表示 */

.screen-reader-text {

  position: absolute !important;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  border: 0;

  clip: rect(0 0 0 0);

  overflow: hidden;

}





.multi-posts-list {

  border-top: 1px solid var(--line);

}



.multi-post-item {

  margin: 0;

  padding: 12px 0;

  border-bottom: 1px solid var(--line);

  background: transparent;

}



.multi-post-time,

.multi-post-category,

.multi-post-text {

  margin: 0;

  padding: 0;

}



.multi-post-date {

  font-variant-numeric: tabular-nums;

  color: var(--muted);

  white-space: nowrap;

}



.multi-post-cats {

  display: inline-block;

  padding: 2px 10px;

  border-radius: 9999px;

  background: var(--chip-bg);

  color: var(--chip-fg);

  font-size: 0.85rem;

  line-height: 1.8;

}



.multi-post-title {

  color: var(--fg);

  text-decoration: none;

  display: inline-block;

  max-width: 100%;

  line-height: 1.5;

  /* タイトル長い場合は省略 */

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.multi-post-title:hover,

.multi-post-title:focus {

  text-decoration: underline;

  outline: none;

}



.pc-only {

  display: block;

}



.mp-only {

  display: none;

}



/* ========== Desktop (default, >1024px): 3カラム行レイアウト ========== */

.multi-post-item.pc-only {

  display: grid;

  grid-template-columns: 120px 220px 1fr;

  gap: 16px;

  align-items: center;

}



.multi-post-time.pc-only {

  text-align: left;

}



.multi-post-category.pc-only {

  text-align: left;

}



.multi-post-text.pc-only {

  text-align: left;

}



/* ========== Tablet & Mobile (<=1024px): mp-only を表示 ========== */

@media (max-width: 1024px) {

  .pc-only {

    display: none !important;

  }



  .mp-only {

    display: block;

  }



  .multi-posts-filter {

    padding: 10px 12px;

    gap: 10px;

  }



  .multi-posts-cat-select {

    max-width: 100%;

  }



  .multi-post-item.mp-only {

    display: flex;

    flex-direction: column;

    gap: 6px;

  }



  /* mp版は time の中に category が入っているHTML構造に対応 */

  .multi-post-time.mp-only {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    color: var(--muted);

    font-size: 0.95rem;

  }



  /* 日付の後ろに区切りを付けて視認性UP（必要なければ削除可） */

  .multi-post-time.mp-only .multi-post-date::after {

    content: " /";

    margin-left: 4px;

    color: var(--muted);

  }



  .multi-post-time.mp-only .multi-post-category.mp-only {

    /* time内のカテゴリをバッジ表示のまま横並びに */

    margin: 0;

  }



  .multi-post-text.mp-only .multi-post-title {

    white-space: normal;

    /* スマホで2行以上折り返し */

    overflow: visible;

    text-overflow: clip;

  }

}



/* ========== Mobile (<=767px): 余白・文字サイズ調整 ========== */

@media (max-width: 767px) {

  .multi-posts-filter {

    padding: 8px 10px;

    border-radius: 10px;

  }



  .multi-posts-cat-select {

    padding: 9px 10px;

    font-size: 0.95rem;

  }



  .multi-post-item {

    padding: 10px 0;

  }



  .multi-post-time.mp-only {

    font-size: 0.9rem;

    gap: 6px;

  }



  .multi-post-cats {

    font-size: 0.8rem;

    padding: 2px 8px;

  }



  .multi-post-title {

    font-size: 1rem;

    line-height: 1.6;

  }

}



/* ========== アクセシビリティ & 細かな配慮 ========== */

.multi-post-item:hover {

  background: rgba(0, 0, 0, 0.015);

}



.multi-post-title:focus-visible {

  outline: 2px solid var(--link);

  outline-offset: 2px;

}



@media (prefers-reduced-motion: reduce) {

  * {

    transition: none !important;

    animation: none !important;

  }

}





/* ----------------------------------------------------------------- */

/* カテゴリー一覧表示用 */

/* --------------------------------------------------------------------- */

.category-header {

    background: var(--color-background);

    padding: 20px 0;

    border-bottom: none;

}



.category .nav-previous {

    margin-top: 100px;

}