/* ============================================================
   override.css（整理版）
   目的：後から見返しても迷子にならないよう、機能ごとにブロック化
   変更方針：挙動は現状維持／重複・タイポ修正のみ（!important は据え置き）
   最終更新：YYYY-MM-DD
============================================================ */

/* --------------------------------------------
  00. 共通変数（色・余白・角丸）
  - ここを変えると全体のトーンを一括調整できます
--------------------------------------------- */
:root{
  --brand: var(--cocoon-key-color, #c71585); /* キーカラー（Cocoonの設定があれば優先） */
  --text: #222;                               /* 主要テキスト色 */
  --muted: #555;                              /* 補助テキスト色 */
  --line: #ddd;                               /* 仕切り線の色 */
  --line-soft: #aaa;                          /* 破線など柔らかい線 */
  --bg-card: #fff;                            /* カード背景 */
  --radii: 8px;                               /* 角丸 */
  --sp-1: .25rem;                             /* 余白スケール */
  --sp-2: .5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  /* 一覧カード見出しと揃えるための見出しサイズ（単一記事H1で使用） */
  --card-title-size: 1.125rem;
}

/* ============================================
  10. 本文パーツ（共通細部）
============================================ */
body.ovr .story{
  /* 囲みテキスト：落ち着いたトーン */
  color: var(--muted);
  font-size: 85%;
  line-height: 1.6;
  border: 1px dashed var(--line-soft);
  padding: 1em;
  margin: 1em 0;
}
body.ovr .pict{
  /* 画像左回り込み */
  float: left;
  margin: 0 10px 10px 0;
  max-width: 100%;
  height: auto;
}
body.ovr .widget_categories ul li a{
  /* カテゴリリストの行間（詰めすぎ注意） */
  line-height: 1.0;
}

/* ============================================
  20. ヘッダー周り（背景・ロゴ・余白）
============================================ */
body.ovr .header{
  /* ヘッダー帯を薄いグレーに */
  background-color: var(--cocoon-background-color, #f5f5f5);
}
body.ovr .header-in{
  /* 中央寄せボックス：基本余白（ページ別の微調整は後段で上書き） */
  background: none;
  padding: 1.5em 0;
}
body.ovr .header-in .tagline,
body.ovr .header-in .logo{
  text-align: left;
  padding-left: 10px;
}
/* サイト名行の下にキーカラーの下線 */
body.ovr .logo{
  border-bottom: 2px solid var(--brand);
  padding-bottom: .3em; /* サイト名と線の間隔 */
  margin-bottom: .5em;  /* 線とキャッチの間隔 */
}
body.ovr .tagline{ margin-top: 0; padding-top: 0; }
body.ovr .site-name-text{
  /* サイト名サイズ（少し控えめ） */
  font-size: 1.4rem;
  border: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ============================================
  30. 本文領域の背景（ページ種類ごと・最終安定版）
  - 一覧（home/archive）：左右余白＝薄グレー／中央本文(#main)も薄グレー
  - 単一記事（single）：左右余白＝薄グレー／中央本文(#main)は白
  - 固定ページ（page）：左右余白＝薄グレー／中央本文(#main)は白
============================================ */

/* 30-1) まず、対象ページの「左右余白 .content」をまとめて薄グレーに */
body.ovr :is(.home, .archive, .single, .page) .content{
  background-color: var(--cocoon-background-color, #f5f5f5) !important;
}

/* 30-2) 一覧（トップ/アーカイブ）は“本文も”薄グレーに */
body.ovr :is(.home, .archive) #main.main{
  background-color: var(--cocoon-background-color, #f5f5f5) !important;
}

/* 30-3) 単一記事・固定ページは“本文だけ”白に戻す */
body.ovr :is(.single, .page) #main.main{
  background-color: var(--cocoon-white-color, #fff) !important;
}

/* ============================================
  40. 一覧カード（枠→下仕切り線）とリンク装飾
============================================ */
/* カード：枠は使わず、下側だけ薄い仕切り線（全ページ共通の .entry-card-wrap） */
body.ovr .entry-card-wrap{
  border-bottom: 1px solid var(--line);
  border-radius: var(--radii);
  background-color: var(--bg-card);
  padding: 16px;
  margin-bottom: 24px;
}
/* 最後のカードは線を消す */
body.ovr .entry-card-wrap:last-child{ border-bottom: none; }

/* 見出しリンク：既定は下線なし、hover で下線 */
body.ovr .entry-card-title-link{ text-decoration: none; }
body.ovr .entry-card-title-link:hover,
body.ovr .read-more-link:hover{ text-decoration: underline; }

/* 一覧（トップ/アーカイブ/投稿ページ分離環境）で
   見出しリンクを「常時キーカラー／hoverはテーマ色」に */
body.ovr:is(.home, .blog, .archive)
  h2.entry-card-title.card-title.e-card-title > a.entry-card-title-link:not(:hover),
body.ovr:is(.home, .blog, .archive)
  h2.entry-card-title.card-title.e-card-title > a.entry-card-title-link:visited:not(:hover){
  color: var(--brand) !important;
}
/* 一覧の見出しを通常の太さへ（太字を解除） */
body.ovr:is(.home, .blog, .archive) h2.entry-card-title.card-title.e-card-title{
  font-weight: 400;
}
body.ovr:is(.home, .blog, .archive)
  h2.entry-card-title.card-title.e-card-title > a.entry-card-title-link{ font-weight: inherit; }
body.ovr:is(.home, .blog, .archive)
  h2.entry-card-title.card-title.e-card-title strong,
body.ovr:is(.home, .blog, .archive)
  h2.entry-card-title.card-title.e-card-title b{ font-weight: inherit; }

/* カード内タイトルの余白微調整 */
body.ovr .entry-card-title{ margin: 0 0 .6em; }
/* 「続きを読む」リンクの上マージン */
body.ovr .entry-card-readmore{ margin-top: .8em; }

/* ============================================
  50. 単一記事／固定ページのタイトル（H1）
  - テーマ装飾のリセットは共通
  - 単一記事の H1 はキーカラー＆通常太さ＆一覧見出し相当サイズ
  - 固定ページの H1 は色変更なし（本文トーン）
============================================ */
/* 共通：テーマ装飾をリセット（背景／左ボーダー等） */
body.ovr.single h1.entry-title,
body.ovr.page   h1.entry-title{
  background: none !important;
  border: 0 !important;
  box-shadow: none;
  height: auto;
  min-height: 0;
  padding: .2em 0;
  margin: 0 0 1em;
  font-size: inherit;   /* ベースは本文相当（single側で上書き） */
  line-height: 1.3;
  border-bottom: 1px dotted #999 !important; /* 下に破線だけを残す */
}
/* 単一記事：色・太さ・サイズを指定（一覧カード見出しに合わせる） */
body.ovr.single h1.entry-title{
  color: var(--brand) !important;
  font-weight: 400 !important;                 /* 通常の太さ */
  font-size: var(--card-title-size) !important;/* 一覧見出し相当のサイズ */
  line-height: 1.4;
}
/* （リンク化されている場合の色統一） */
body.ovr.single h1.entry-title a,
body.ovr.page   h1.entry-title a{
  color: var(--brand) !important;
  text-decoration: none;
}
/* 擬似要素の装飾を無効化（テーマ保険） */
body.ovr.single h1.entry-title::before,
body.ovr.single h1.entry-title::after,
body.ovr.page   h1.entry-title::before,
body.ovr.page   h1.entry-title::after{
  content: none !important;
}

/* ============================================
  60. アーカイブ見出し（H1）
  - 本文トーンに弱める + キーカラーの下線（疑似要素）
============================================ */
body.ovr.archive h1.archive-title{
  font-size: 1rem;    /* 本文と同程度（0.9〜1.0remで微調整） */
  font-weight: 400;
  line-height: 1.6;
  margin: .6em 0 1em;
  color: inherit;
  background: none !important;
  border: 0 !important; /* 既存の線を消す → 下の ::after で線を追加 */
  box-shadow: none;
  padding: 0;          /* 下線との間隔は下で指定 */
  position: relative;  /* ::after の基準 */
  display: block;
  padding-bottom: .25em; /* 文字と下線の間隔 */
}
/* キーカラーの下線（本文幅いっぱい） */
body.ovr.archive h1.archive-title::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;                 /* 太さ：1〜3px */
  background: var(--brand);
}
/* アイコン（fa）は控えめに */
body.ovr.archive h1.archive-title .fa{
  font-size: .95em;
  margin-right: .45em;
  color: var(--muted);
  vertical-align: -0.06em;
}

/* ============================================
  70. サイドバー見出し（下線で統一）
============================================ */
body.ovr .sidebar .widget .widget-title,
body.ovr #sidebar .widget .widget-title,
body.ovr .sidebar .wp-block-heading,
body.ovr #sidebar .wp-block-heading,
body.ovr .sidebar .wp-block-group > h2,
body.ovr .sidebar .wp-block-group > h3{
  background: none;
  color: inherit;
  font-weight: bold;
  font-size: .95em;
  border: 0;
  border-bottom: 2px solid var(--brand);
  padding: .3em 0;
  margin-bottom: .8em;
  box-shadow: none;
}
/* リスト内の見出しをフラットに */
body.ovr .sidebar .widget ul li .wp-block-heading{
  border: 0; padding: 0; margin: 0;
}

/* ============================================
  80. 関連・コメント見出し（左寄せ＋下線）
============================================ */
body.ovr .related-entry-card-content{ margin: 0; padding: .3em 0; }
body.ovr .related-entry-card-title{
  margin: .3em 0 0;
  font-size: 1em;
  font-weight: normal;
  line-height: 1.4;
}
body.ovr .related-entry-heading,
body.ovr .comment-title,
body.ovr #reply-title{
  background: none;
  color: #000;
  font-size: 1em;
  font-weight: bold;
  border: 0;
  border-bottom: 2px solid var(--brand);
  padding: .3em 0;
  margin-bottom: .8em;
  text-align: left;
}

/* ============================================
  90. フッター（背景・余白）
============================================ */
body.ovr .footer,
body.ovr .footer-bottom{
  background: none !important;
  border: none !important;
  padding: var(--sp-2) 0;
  margin-top: var(--sp-3);
  text-align: center;
}
body.ovr .footer-credit,
body.ovr .footer-sitename{
  color: var(--text);
  font-size: 1em;
  font-weight: normal;
}

/* ============================================
  95. 余白の微調整（一覧＋単一記事）
  - ヘッダー直下の間延び感を軽減
============================================ */
body.ovr:is(.home, .archive, .single) .header-in{
  /* 既定 1.5em → 少し詰める（0.8〜1.2emで好み調整） */
  padding: .8em 0;
}
body.ovr:is(.home, .archive, .single) .logo{
  /* 下線は維持したまま、下マージンを少し詰める */
  margin-bottom: .3em;
}

/* ============================================
  100.  投稿・固定ページの本文直前アイキャッチを非表示
============================================ */

body.ovr:is(.single, .page) :is(
  .entry-eye-catch,         /* Cocoon のアイキャッチラッパー */
  .eye-catch,               /* Cocoon バリアント */
  .post-thumbnail,          /* WP標準のサムネラッパー */
  .wp-block-post-featured-image /* ブロックテーマ系 */
){
  display: none !important;
}

/* 任意：非表示後に残る上余白を詰める（隙間が気になるときだけ有効化） */
/*
body.ovr:is(.single, .page) :is(.entry-content, .post_content, .entry){
  margin-top: 0 !important;
  padding-top: 0 !important;
}
*/

/* ============================================
  105.  固定ページ：左右は薄グレー／中央本文は白示
============================================ */

body.ovr.page .content{
  background-color: var(--cocoon-background-color, #f5f5f5) !important; /* 側の余白 */
}
body.ovr.page #main.main{
  background-color: var(--cocoon-white-color, #fff) !important;        /* 中央の本文 */
}