/*
 Theme Name: lightning-child02
 Template: lightning
*/

/* ========= 基本色 ========= */
:root{
  --brand:#FF2525;        /* 点線やアクセント */
  --badge-news:#FF2525;   /* お知らせ */
  --badge-diary:#2E7D32;  /* ほうぼく日誌 */
  --text:#444;
}

/* ========= 単一記事レイアウト（左：本文／右：サイド） ========= */
.single .single-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:28px;
  align-items:start;
}
.single .single-main{ min-width:0; }
.single .single-aside{ grid-column:2; position:sticky; top:24px; }

/* 本文側に寄せる要素 */
.single .entry-header,
.single .entry-body,
.single nav.single-pager{ grid-column:1; }

/* ========= ヘッダー（カテゴリーバッジ＋日付＋タイトル） ========= */
.c-single__meta{
  display:flex;
  align-items:center;
  gap:14px;                 /* バッジと日付の間隔 */
  margin: 6px 0 6px;
}

/* バッジ（一覧と統一：小さめ＆しっかり丸み） */
.c-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.45em 1.05em;
  border-radius:9999px;
  font-weight:800;
  font-size:clamp(12px,1.2vw,16px);
  line-height:1;
  color:#fff;
  background:#6b6b6b;
  white-space:nowrap;
}
.cat-news  { background:var(--badge-news); }
.cat-diary { background:var(--badge-diary); }

/* 日付（バッジとバランスを合わせる） */
.post-date{
  font-size:clamp(13px,1.25vw,16px);
  color:#333;
}

/* タイトル（やや小さめ） */
.c-single__title{
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.28;
  margin: .35em 0 .45em;
}

/* 赤い点線 */
.c-entry__rule{
  border:0; border-top:2px dotted var(--brand);
  margin: 14px 0 18px;
}

/* ========= 右サイド（カテゴリボタンとアーカイブ） ========= */
.side-filter{ display:flex; flex-direction:column; gap:14px; margin:0 0 22px; }
.side-btn{
  display:flex; align-items:center; justify-content:center;
  min-height:56px; padding:.9em 1.2em;
  border:2px solid var(--brand); border-radius:12px;
  font-weight:700; color:var(--brand); background:#fff; text-decoration:none;
  transition: background .2s ease,color .2s ease;
}
.side-btn:hover,
.side-btn.is-active{ background:var(--brand); color:#fff; }
.archive-select select{
  width:100%; min-height:46px; padding:.55em .8em; border:1px solid #ddd; border-radius:8px;
}

/* ========= 下部ナビ（前／一覧を見る／次） ========= */
.single-pager{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin:24px 0 6px;
  padding-top:14px;
  border-top:2px dotted var(--brand);
}
.single-pager__prev{ justify-self:start; }
.single-pager__list{ justify-self:center; font-weight:700; }
.single-pager__next{ justify-self:end; }

.single-pager a{
  display:inline-flex;              /* 矢印と文字の高さを中央で揃える */
  align-items:center;
  gap:.4em;
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  transition:opacity .22s ease;     /* ← ホバー時の薄くなる効果 */
}
.single-pager a:hover{ opacity:.55; }

/* 矢印はテキストの「<」「>」を使用。色は文字と同じ */
.single-pager .arrow{
  font-size:1.6em;     /* 少し大きく */
  line-height:1;
  font-weight:400;     /* 通常の太さ */
  color:currentColor;  /* 文字色と同じ */
  display:inline-block;
  vertical-align:middle;
}

/* ========= 親テーマ側の不要要素を無効化 ========= */
.single .vk_post_navi,
.single .vk_post_navi-card,
.single .postNextPrev,
.single .postNextPrevCard,
.single [class*="post-next-prev"],
.single [class*="postNextPrev"] { display:none !important; }

/* パンくず・コメントは投稿では使わない（保険） */
#breadcrumb, .single .comments-area{ display:none !important; }

/* ========= モバイル ========= */
@media (max-width: 960px){
  .single .single-layout{ grid-template-columns:1fr; }
  .single .single-aside{ position:static; }
  .single-pager{
    grid-template-columns:1fr;
    text-align:center;
    row-gap:10px;
  }
  .single-pager__prev,
  .single-pager__next{ justify-self:center; }
}

/* ====== 追加の上書き（矢印の色/高さ・ホバー、バッジ角丸） ====== */

/* 1) 前/次ナビの矢印：文字色と同じに。既存の赤指定を打ち消す */
.single nav.single-pager .arrow{
  color: currentColor !important;   /* ← 赤にならないように強制 */
  font-size: 1.8em;                 /* 大きめ */
  line-height: 1;
  font-weight: 400;                 /* 細め */
  display: inline-block;
  vertical-align: middle;
}

/* 矢印と文字の高さを完全にセンタリング */
.single-pager a{
  display: inline-flex !important;  /* 既存の display を確実に上書き */
  align-items: center !important;
  gap: .5em;
  line-height: 1;
  color: var(--text, #444);
  text-decoration: none;
  transition: opacity .22s ease;
}

/* ホバー：薄くするだけ（色は変えない） */
.single-pager a:hover{ opacity: .55; }

/* 2) バッジの角丸をサイドボタンに近づける（ご指定：8px） */
.c-badge{
  border-radius: 8px !important;    /* ← 以前の pill(9999px) を上書き */
}

/* 念のため「前/次」行の縦位置も揃える（中央寄せ） */
.single-pager__prev,
.single-pager__next,
.single-pager__list{ align-items: center; }

/* ===== Hover と矢印・縦位置の最終調整（一番下に追加） ===== */

/* 3カラムそれぞれの中身を縦中央に */
.single nav.single-pager > *{
  display:flex;
  align-items:center;
}

/* リンク本体：矢印と文字を中央揃え。hover は薄くするだけ */
.single nav.single-pager a{
  display:inline-flex !important;     /* hover が効かない原因をつぶす */
  align-items:center !important;
  line-height:1;
  gap:.5em;
  color:#444;
  text-decoration:none;
  transition:opacity .22s ease;
}
.single nav.single-pager a:hover,
.single nav.single-pager a:focus-visible{
  opacity:.6 !important;               /* ← ここで確実に効かせる */
  color:inherit !important;
}

/* 矢印：文字色と同じ／細め／わずかに上げ下げして中央に見えるように */
.single nav.single-pager .arrow{
  color:currentColor !important;       /* 赤に戻らない */
  font-size:1.8em;
  font-weight:400;
  line-height:1;
  display:inline-block;
  transform: translateY(.02em);        /* 視覚的に中央へ微調整（必要なら .03em などに） */
}

/* バッジの角丸（ご指定の 8px） */
.c-badge{
  border-radius:8px !important;
}

/* 固定ページのページタイトル（ページヘッダー）を非表示 */
.page .page-header,
.page .entry-header,
.page .entry-title{
  display: none !important;
}