/* =======================
   custom.css (再作成版)
   目的：
   - ページ背景＝薄いベージュ
   - ブログカードのタイトル帯＝ブラウンでカード端まで
   - h見出しの色を統一
   - 以前の body::before ラインを完全無効化
   ======================= */

/* 色はここだけ変えればOK */
:root{
  --page-bg: #f7f0dd;   /* ページ背景（薄いベージュ） */
  --text:    #64421a;   /* 本文の茶色 */
  --heading: #A80101;   /* h1/h2/h3 の色（赤）。要望に合わせて変更可 */
  --band:    #a98239;   /* カードの帯（ブラウン） */
  --band-t:  #ffffff;   /* 帯の文字色 */
  --card-bd: #eadfcd;   /* カード枠線 */
}

/* 以前入れてしまった青い上部ラインを完全に消す */
body::before{ content:none !important; display:none !important; height:0 !important; background:transparent !important; }

/* ベース */
html,body{ background:var(--page-bg) !important; color:var(--text) !important; }
a{ color:var(--band); }
:root{ color-scheme: light; }  /* ダークモードの自動反転を抑止 */

/* 見出し色の固定（必要なら --heading を変えてください） */
h1,h2,h3{ color:var(--heading) !important; }
h1 a,h2 a,h3 a{ color:var(--heading) !important; text-decoration:none; }

/* ============ ブログ一覧（カード） ============ */
/* あなたのHTML：.blog-list > .blog-item > .blog-item__link > .blog-item__body > .blog-item__title  */
.blog-list{
  display:grid; gap:20px; grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .blog-list{ grid-template-columns: repeat(3,1fr); }
}

.blog-item{
  background:#fff;
  border:1px solid var(--card-bd);
  border-radius:12px;
  overflow:hidden; /* 角丸と帯を一体に見せる */
}

.blog-item__link{
  display:flex; flex-direction:column; height:100%;
  color:inherit; text-decoration:none;
}

.blog-item__body{ padding:12px; }

/* ★タイトル帯（カード端まで塗る・最優先で適用） */
.blog-item .blog-item__title,
h3.blog-item__title{
  display:block;
  background:var(--band) !important;
  background-image:none !important;
  color:var(--band-t) !important;
  font-weight:700;
  margin:-12px -12px 10px !important; /* 左右端まで伸ばす */
  padding:10px 12px !important;
  line-height:1.3;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

/* メタ/抜粋の色味 */
.blog-item__meta{ color:#8c6a3c !important; font-size:.9rem; margin-bottom:6px; }
.blog-item__excerpt{ color:var(--text); }

/* 「もっと見る →」等のリンク色を帯色に合わせる（任意） */
#blog-index-foot a, #blog-index + p a{ color:var(--band); }

/* ============ 仕上げ（念のための上書き勝ち強化） ============ */
@media (prefers-color-scheme: dark){
  body{ background:var(--page-bg) !important; color:var(--text) !important; }
}


/* ===== h2.post-link を h3 帯デザインと同じに ===== */
/* 背景は h2 に付け、文字色は内側の a を白に固定 */
h2.post-link{
  display:block;
  background: var(--band) !important;      /* 帯の色（ブラウン） */
  background-image: none !important;
  color: var(--band-t) !important;          /* 帯の文字色（白） */
  font-weight:700;

  /* カード端まで伸ばす（.blog-item__body の padding を打ち消す） */
  margin: -12px -12px 10px !important;
  padding: 10px 12px !important;

  line-height:1.3;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

/* h2 内リンクの見た目を帯用に */
h2.post-link > a{
  display:block;                 /* クリック範囲を帯全体に */
  color: var(--band-t) !important;
  text-decoration: none !important;
}
h2.post-link > a:hover{
  opacity:.9;
  text-decoration: underline;    /* 好みで none に変更可 */
}

/* もし .blog-item__title の帯と混在する場合にも負けないように（任意） */
.blog-item h2.post-link{ background: var(--band) !important; }


/* 帯（カード見出し）の角を“角丸なし”にする */
h2.post-link,
.blog-item__title{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* カード自体が上だけ丸くて帯が丸く見える場合は、カードの上も角に */
.blog-item{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  /* overflow はこのままでOK（特に指定不要） */
}


/* ========= 帯の厚み（index2.php相当の“薄さ”に固定） ========= */
/* 目安：フォント16px・行間1.2・上下4px → 高さ 約27px */
:root{
  --band-font: 16px;  /* タイトル文字サイズ */
  --band-lh:   1.2;   /* 行間（細め）      */
  --band-py:   4px;   /* 上下パディング = 帯の“厚み” */
  --band-px:   12px;  /* 左右パディング               */
  --band-mb:   6px;   /* 帯の下余白                   */
}