/*
Theme Name: AFFINGER Temp Child
Template: affinger-temp
Description: カテゴリーページ 2 カラム（左ナビ＋右ランキング）美観改良 v3 – heading fix
Version: 20240604
*/

/* ================================================================
   基本レイアウト
   --------------------------------------------------------------- */
.category-page{
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1rem;
}
.category-header{margin-bottom:2rem;text-align:center;}
.category-title{font-size:2rem;margin-bottom:.5rem;}
.category-description{font-size:.95rem;color:#555;}

.category-body{display:flex;gap:2rem;}

/* ================================================================
   見出し  ── 左「Category List」／右「Contents List」
   --------------------------------------------------------------- */
.sidebar-heading,
.content-heading{
  /* 💡“ズレの犯人”＝親テーマ側の h2 マージンを完全に打ち消す */
  margin:0 0 1.5rem !important;   /* ← 上 0 / 下だけ余白 */
  padding:1rem 1.25rem;
  border-top:2px solid #333;
  background:#f7f7f7;
  font-size:1.35rem;
  font-weight:700;
  line-height:1.3;
  box-sizing:border-box;
}

/* 念のためコンテナ自体にも余計な上マージンが無いことを保証 */
.category-sidebar,
.category-content{
  margin-top:0 !important;
}

/* ================================================================
   左カラム：カテゴリ一覧
   --------------------------------------------------------------- */
.category-sidebar{flex:0 0 260px;}
.category-list{list-style:none;padding:0;margin:0;}
.category-list li{margin-bottom:.5rem;}
.category-list li.current-cat a{font-weight:700;}
.category-list a{color:#333;text-decoration:none;}
.category-list a:hover{text-decoration:underline;}
/* ---------- トグル付きカテゴリーリスト ---------- */
.category-list    { list-style:none; margin:0; padding:0; }
.category-list li { position:relative; margin-bottom:.5rem; }

.cat-toggle{
  margin-left:.25rem;
  background:none;
  border:none;
  font-weight:700;
  cursor:pointer;
  line-height:1;
}

.cat-sub{ margin:.5rem 0 .5rem 1rem; padding:0; list-style:none; }
.cat-sub.hidden{ display:none; }

.cat-sub li{ margin-bottom:.35rem; }

/* ================================================================
   右カラム：記事カード
   --------------------------------------------------------------- */
.category-content{flex:1 1 auto;}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem;}

.category-post{
  background:#fff;
  border:1px solid #eee;
  border-radius:6px;
  padding:1rem;
  transition:box-shadow .2s;
}
.category-post:hover{box-shadow:0 4px 10px rgba(0,0,0,.07);}
.post-thumbnail img{width:100%;height:auto;border-radius:4px;}
.post-title{font-size:1rem;margin-top:.75rem;}

/* ================================================================
   ページネーション
   --------------------------------------------------------------- */
.pagination{margin-top:2rem;text-align:center;}
.pagination .page-numbers{
  display:inline-block;
  margin:0 .25rem;
  padding:.5rem .75rem;
  border:1px solid #ddd;
  border-radius:4px;
}
.pagination .current,
.pagination .page-numbers:hover{
  background:#333;
  color:#fff;
  border-color:#333;
}

/* ================================================================
   レスポンシブ
   --------------------------------------------------------------- */
@media (max-width:768px){
  .category-body{flex-direction:column;}
  .category-sidebar{flex:none;}
}

/************************************************************
 *  空きメディアクエリ
 ************************************************************/
@media only screen and (min-width:600px) and (max-width:959px){
  /* タブレット専用カスタムをここに */
}
@media only screen and (min-width:960px){
  /* PC でさらに調整したい場合はこちら */
}



/* =========================  Category 見出し完全同期パッチ  ========================= */
.category-page{
  /* flex 子要素（sidebar & content）の “頭” を必ず揃える */
  --cat-heading-size:1.35rem;             /* 可変させたい場合はここだけ */
}

.category-page h2{
  /* 親テーマのでかい余白を一発で消す */
  margin-block:0 1.5rem !important;
  padding:1rem 1.25rem;
  border-top:2px solid #333;
  background:#f7f7f7;
  font:700 var(--cat-heading-size)/1.3 "inherit";
  box-sizing:border-box;
}

/* 片方の箱だけに残っている余白をリセット */
.category-page .category-sidebar,
.category-page .category-content{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Flex の交差軸を “先頭で合わせる” に固定 */
.category-page .category-body{align-items:flex-start;}

/* ---------- 投稿リスト（孫カテゴリ内） ---------- */
.cat-posts{
  list-style:none;
  margin: .5rem 0 .5rem 1.75rem;   /* カテゴリより少し奥へ */
  padding:0;
  font-size:.92rem;
}
.cat-posts li{ margin-bottom:.4rem; }
.cat-posts.hidden{ display:none; }  /* 既存の .hidden と同じでも可 */

.all-contents-wrap{text-align:center;margin:40px 0;}
.all-contents-btn{padding:.9em 2.5em;font-weight:700;}

/* ───────────── 画像を暗くするフィルターを無効化 ───────────── */
.posts-grid .category-post .post-thumbnail img {
  filter: none !important;      /* 黒フィルターを解除             */
  opacity: 1 !important;        /* 透過を戻す（0.6 → 1.0 など）   */
}

/* AFFINGER の黒オーバーレイ（::before 疑似要素）を消す */
.posts-grid .category-post .post-thumbnail::before {
  display: none !important;
}

/* ───────────── タイトル帯の黒背景を透明に ───────────── */
.posts-grid .category-post .post-title {
  background: transparent !important;   /* 黒い帯を消す */
  color: #333 !important;               /* 文字色はお好みで */
  padding: .5em 0 !important;           /* 上下余白を少し付けたい場合 */
}

/* ───────────── ホバー時も暗くしない ───────────── */
.posts-grid .category-post:hover .post-thumbnail img {
  filter: none !important;
  opacity: 1 !important;
}

/* （任意）ホバー時のズームを無効にしたい場合は下も追加
.posts-grid .category-post .post-thumbnail img {
  transform: none !important;
}
*/