/* ==========================================================================
   会報（kaiho）スタイル
   対象テンプレート：single-kaiho.php / archive-kaiho.php
   子テーマの style.css 末尾に追記してください。

   設計方針：
   - スマートフォンファースト（max-width: 600px 前後での閲覧を基準）
   - Lightning（Bootstrap ベース）のスタイルを上書きしすぎない
   - クラス名はすべて .kaiho- プレフィックスで他スタイルと衝突しない設計

   最終更新：2026年3月13日
   ========================================================================== */


/* --------------------------------------------------------------------------
   デザイントークン（CSS カスタムプロパティ）
   色・余白の基準をここで一元管理します。
   変更が必要な場合はこのブロックだけ編集すれば全体に反映されます。
   -------------------------------------------------------------------------- */
:root {
    /* ブランドカラー（商工会のサイトカラーに合わせて調整してください） */
    --kaiho-color-primary:      #1a4f8a;   /* 濃い青：見出し・バッジ背景 */
    --kaiho-color-primary-dark: #123868;   /* ホバー時など少し暗くした青 */
    --kaiho-color-accent:       #e8f0fa;   /* 薄い青：特集タイトルの背景など */

    /* テキストカラー */
    --kaiho-color-text:         #333333;
    --kaiho-color-text-muted:   #666666;

    /* ボーダー・背景 */
    --kaiho-color-border:       #dde3ea;
    --kaiho-color-bg-light:     #f7f9fc;

    /* 余白の基準単位（スマホ前提で少し広め） */
    --kaiho-space-xs:   0.5rem;   /*  8px */
    --kaiho-space-sm:   0.75rem;  /* 12px */
    --kaiho-space-md:   1.25rem;  /* 20px */
    --kaiho-space-lg:   2rem;     /* 32px */
    --kaiho-space-xl:   3rem;     /* 48px */

    /* 角丸 */
    --kaiho-radius-sm:  4px;
    --kaiho-radius-md:  8px;
    --kaiho-radius-lg:  12px;
}


/* ==========================================================================
   共通パーツ
   single / archive 両方のテンプレートで使い回すスタイルです。
   ========================================================================== */

/* 号数バッジ（例：「第42号」）
   ─────────────────────────────
   見た目のイメージ：角丸のついた紺色のタグ */
.kaiho-issue-badge {
    display:          inline-block;
    padding:          0.25em 0.8em;
    background-color: var(--kaiho-color-primary);
    color:            #fff;
    font-size:        0.8rem;
    font-weight:      700;
    letter-spacing:   0.05em;
    border-radius:    var(--kaiho-radius-sm);
    margin-bottom:    var(--kaiho-space-xs);
}

/* 一覧ページ用の小サイズバッジ（--sm モディファイア） */
.kaiho-issue-badge--sm {
    font-size:   0.72rem;
    padding:     0.2em 0.6em;
}


/* ==========================================================================
   個別記事ページ（single-kaiho.php）
   ========================================================================== */

/* ラッパー
   Lightning のコンテナ幅に合わせて、左右に適切な余白を確保します */
.kaiho-single {
    max-width:  780px;
    margin:     0 auto;
    padding:    0 var(--kaiho-space-md) var(--kaiho-space-xl);
}

/* 記事全体のラッパー */
.kaiho-article {
    color: var(--kaiho-color-text);
}


/* ── ① ヘッダーエリア ────────────────────────── */

.kaiho-header {
    padding-bottom: var(--kaiho-space-lg);
    border-bottom:  2px solid var(--kaiho-color-primary);
    margin-bottom:  var(--kaiho-space-lg);
}

/* 記事タイトル（投稿のタイトル。例：第42号 2026年3月） */
.kaiho-title {
    font-size:     1.6rem;
    font-weight:   700;
    line-height:   1.4;
    color:         var(--kaiho-color-text);
    margin-top:    var(--kaiho-space-xs);
    margin-bottom: var(--kaiho-space-sm);
}

@media (max-width: 600px) {
    .kaiho-title {
        font-size: 1.35rem;
    }
}

/* 発行日テキスト */
.kaiho-meta {
    font-size:  0.875rem;
    color:      var(--kaiho-color-text-muted);
    margin:     0 0 var(--kaiho-space-sm);
}

/* 「発行日」ラベル部分 */
.kaiho-meta__label {
    font-weight:   600;
    margin-right:  0.4em;
    color:         var(--kaiho-color-text-muted);
}

/* 特集タイトルボックス
   ─────────────────────────────
   薄い青の背景に左ボーダーをつけて、本文と区別しやすくします */
.kaiho-feature {
    background-color: var(--kaiho-color-accent);
    border-left:      4px solid var(--kaiho-color-primary);
    border-radius:    0 var(--kaiho-radius-sm) var(--kaiho-radius-sm) 0;
    padding:          var(--kaiho-space-sm) var(--kaiho-space-md);
    margin-top:       var(--kaiho-space-md);
}

/* 「今号の特集」小見出し */
.kaiho-feature__label {
    font-size:     0.75rem;
    font-weight:   700;
    letter-spacing: 0.08em;
    color:         var(--kaiho-color-primary);
    text-transform: uppercase;
    margin:        0 0 0.2em;
}

/* 特集タイトル本文 */
.kaiho-feature__title {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--kaiho-color-text);
    margin:      0;
    line-height: 1.5;
}


/* ── ② 本文エリア ────────────────────────────── */

.kaiho-content {
    line-height:   1.9;
    font-size:     1rem;
    margin-bottom: var(--kaiho-space-xl);
    /* カード間の隙間をflexで管理する */
    display:        flex;
    flex-direction: column;
    gap:            var(--kaiho-space-md);
}

/* 本文内の画像は幅いっぱいに広げる（スマホ対応） */
.kaiho-content img {
    max-width:     100%;
    height:        auto;
}


/* ── セクションカード（h2ごとのブロック） ────── */

/* 共通：角丸なしのカード */
.kaiho-section {
    border:           1px solid var(--kaiho-color-border);
    background-color: #ffffff;
    padding:          0;   /* h2が端まで広がるようpadding-topは0にする */
    overflow:         hidden;
}

@media (max-width: 600px) {
    .kaiho-section {
        padding: 0;
    }
}

/* カード内の h2：h3のborder色で塗りつぶし・白抜きテキスト
   Lightning のデフォルトスタイルを確実に上書きするため !important を使用 */
.kaiho-content .kaiho-section > h2 {
    font-size:        1.05rem !important;
    font-weight:      700 !important;
    color:            #fff !important;
    background-color: var(--kaiho-color-primary);
    margin:           0 !important;
    padding:          0.65em var(--kaiho-space-md) !important;
    border:           none !important;
    border-bottom:    none !important;
    line-height:      1.5 !important;
}

/* カード本文エリア（h2の下）にpadding */
.kaiho-section > *:not(h2) {
    margin-left:  var(--kaiho-space-md);
    margin-right: var(--kaiho-space-md);
}

.kaiho-section > *:nth-child(2) {
    margin-top: var(--kaiho-space-md);
}

.kaiho-section > *:last-child {
    margin-bottom: var(--kaiho-space-md);
}

/* カード内の h3（デフォルト） */
.kaiho-content .kaiho-section h3 {
    font-size:     0.95rem !important;
    font-weight:   700 !important;
    padding-left:  0.7em !important;
    border-left:   3px solid var(--kaiho-color-primary) !important;
    border-bottom: none !important;
    margin-top:    var(--kaiho-space-md) !important;
    margin-bottom: var(--kaiho-space-sm) !important;
    color:         var(--kaiho-color-text) !important;
    background:    none !important;
}


/* ── 過去（.is-past を h2 に付与） ── */

.kaiho-section--past {
    background-color: #f2f7fd;   /* ごく薄い青背景 */
    border-color:     #c0d4eb;
}

.kaiho-content .kaiho-section--past > h2 {
    background-color: #1a6bb5 !important;   /* h3のborder色と揃えた青 */
}

.kaiho-content .kaiho-section--past h3 {
    border-left-color: #1a6bb5 !important;
    color:             #0b3d91 !important;
}


/* ── 今後の予定（.is-future を h2 に付与） ── */

.kaiho-section--future {
    background-color: #fdf7f0;   /* ごく薄いオレンジ背景 */
    border-color:     #f0d0a8;
}

.kaiho-content .kaiho-section--future > h2 {
    background-color: #e05a00 !important;   /* h3のborder色と揃えたオレンジ */
}

.kaiho-content .kaiho-section--future h3 {
    border-left-color: #e05a00 !important;
    color:             #8a2e00 !important;
}


/* ── ③ 編集後記 ──────────────────────────────── */

.kaiho-editors-note {
    background-color: var(--kaiho-color-bg-light);
    border:           1px solid var(--kaiho-color-border);
    border-radius:    var(--kaiho-radius-md);
    padding:          var(--kaiho-space-md) var(--kaiho-space-lg);
    margin-bottom:    var(--kaiho-space-xl);
}

@media (max-width: 600px) {
    .kaiho-editors-note {
        padding: var(--kaiho-space-md);
    }
}

.kaiho-editors-note__heading {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--kaiho-color-primary);
    margin-top:    0;
    margin-bottom: var(--kaiho-space-sm);
    /* 短い線をタイトル下に引く */
    padding-bottom: var(--kaiho-space-xs);
    border-bottom:  1px solid var(--kaiho-color-border);
}

.kaiho-editors-note__body {
    font-size:   0.95rem;
    line-height: 1.9;
    color:       var(--kaiho-color-text);
    margin:      0;
}


/* ── ④ 前後ナビゲーション ────────────────────── */

.kaiho-pagination {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;   /* 左：新しい号 / 中：一覧 / 右：古い号 */
    gap:                   var(--kaiho-space-md);
    align-items:           center;
    padding:               var(--kaiho-space-lg) 0;
    border-top:            1px solid var(--kaiho-color-border);
    margin-top:            var(--kaiho-space-lg);
}

/* スマホでは縦積みにする */
@media (max-width: 600px) {
    .kaiho-pagination {
        grid-template-columns: 1fr;
        text-align:            center;
    }
    /* 一覧リンクを中段に、前後を上下に並べる（order で順序調整） */
    .kaiho-pagination__prev    { order: 2; }
    .kaiho-pagination__archive { order: 1; }
    .kaiho-pagination__next    { order: 3; }
}

/* 「← 新しい号」エリア：左寄せ */
.kaiho-pagination__prev {
    text-align: left;
}

/* 「古い号 →」エリア：右寄せ */
.kaiho-pagination__next {
    text-align: right;
}

/* ナビゲーション方向ラベル（「← 新しい号」「古い号 →」） */
.kaiho-pagination__label {
    display:     block;
    font-size:   0.75rem;
    color:       var(--kaiho-color-text-muted);
    margin-bottom: 0.2em;
}

/* ページ遷移リンク（WordPress が自動挿入する <a> タグ） */
.kaiho-pagination__prev a,
.kaiho-pagination__next a {
    font-size:       0.9rem;
    font-weight:     600;
    color:           var(--kaiho-color-primary);
    text-decoration: none;
    transition:      color 0.2s;
}

.kaiho-pagination__prev a:hover,
.kaiho-pagination__next a:hover {
    color:           var(--kaiho-color-primary-dark);
    text-decoration: underline;
}

/* 一覧へのリンクボタン */
.kaiho-pagination__archive-link {
    display:          inline-block;
    padding:          0.5em 1.2em;
    background-color: #fff;
    border:           1.5px solid var(--kaiho-color-primary);
    color:            var(--kaiho-color-primary);
    border-radius:    var(--kaiho-radius-sm);
    font-size:        0.85rem;
    font-weight:      600;
    text-decoration:  none;
    white-space:      nowrap;
    transition:       background-color 0.2s, color 0.2s;
}

.kaiho-pagination__archive-link:hover {
    background-color: var(--kaiho-color-primary);
    color:            #fff;
}


/* ==========================================================================
   バックナンバー一覧ページ（archive-kaiho.php）
   ========================================================================== */

.kaiho-archive {
    max-width:  900px;
    margin:     0 auto;
    padding:    0 var(--kaiho-space-md) var(--kaiho-space-xl);
}


/* ── ページ見出しエリア ─────────────────────── */

.kaiho-archive__header {
    text-align:    center;
    padding:       var(--kaiho-space-lg) 0;
    border-bottom: 2px solid var(--kaiho-color-primary);
    margin-bottom: var(--kaiho-space-lg);
}

.kaiho-archive__title {
    font-size:   1.8rem;
    font-weight: 700;
    color:       var(--kaiho-color-text);
    margin:      0 0 var(--kaiho-space-xs);
}

@media (max-width: 600px) {
    .kaiho-archive__title {
        font-size: 1.4rem;
    }
}

.kaiho-archive__description {
    font-size: 0.95rem;
    color:     var(--kaiho-color-text-muted);
    margin:    0;
}


/* ── 会報カードリスト ────────────────────────── */

/* カードを縦一列で積み上げる
   PC幅があれば2列にする（任意：コメントアウトを外してください） */
.kaiho-archive__list {
    display:        flex;
    flex-direction: column;
    gap:            var(--kaiho-space-md);
}

/*
  PC で2列グリッドにしたい場合はこのブロックを有効化してください：

@media (min-width: 768px) {
    .kaiho-archive__list {
        display:               grid;
        grid-template-columns: repeat(2, 1fr);
        gap:                   var(--kaiho-space-md);
        flex-direction:        unset;
    }
}
*/


/* 個々の会報カード */
.kaiho-archive__item {
    display:          flex;
    gap:              var(--kaiho-space-md);
    background-color: #fff;
    border:           1px solid var(--kaiho-color-border);
    border-radius:    var(--kaiho-radius-md);
    overflow:         hidden;
    transition:       box-shadow 0.2s, transform 0.2s;
}

/* ホバーで少し浮き上がらせる */
.kaiho-archive__item:hover {
    box-shadow: 0 4px 16px rgba(26, 79, 138, 0.12);
    transform:  translateY(-2px);
}

/* スマホでは縦積みにする */
@media (max-width: 600px) {
    .kaiho-archive__item {
        flex-direction: column;
        gap:            0;
    }
}


/* アイキャッチ画像エリア */
.kaiho-archive__thumbnail {
    flex:       0 0 140px;   /* 幅を固定してテキストエリアを圧迫しない */
    display:    block;
    overflow:   hidden;
}

.kaiho-archive__thumbnail-img {
    width:      100%;
    height:     100%;
    object-fit: cover;      /* アスペクト比を保ちながらトリミング */
    display:    block;
    transition: transform 0.3s;
}

.kaiho-archive__item:hover .kaiho-archive__thumbnail-img {
    transform: scale(1.04);  /* ホバーで画像を少し拡大 */
}

@media (max-width: 600px) {
    .kaiho-archive__thumbnail {
        flex:   unset;
        height: 180px;      /* スマホでは横幅いっぱいの帯状に */
    }
}


/* テキストコンテンツエリア */
.kaiho-archive__body {
    flex:    1;
    padding: var(--kaiho-space-md);
    display: flex;
    flex-direction: column;
    gap:     var(--kaiho-space-xs);
}


/* 記事タイトル */
.kaiho-archive__item-title {
    font-size:   1.05rem;
    font-weight: 700;
    margin:      0;
    line-height: 1.5;
}

.kaiho-archive__item-title a {
    color:           var(--kaiho-color-text);
    text-decoration: none;
    transition:      color 0.2s;
}

.kaiho-archive__item-title a:hover {
    color: var(--kaiho-color-primary);
}


/* 発行日 */
.kaiho-archive__date {
    font-size: 0.82rem;
    color:     var(--kaiho-color-text-muted);
    margin:    0;
}


/* 特集タイトル（アーカイブカード内） */
.kaiho-archive__feature {
    font-size:   0.9rem;
    color:       var(--kaiho-color-text);
    margin:      0;
    line-height: 1.5;
}

.kaiho-archive__feature-label {
    font-weight: 700;
    color:       var(--kaiho-color-primary);
}


/* 抜粋テキスト */
.kaiho-archive__excerpt {
    font-size:   0.875rem;
    color:       var(--kaiho-color-text-muted);
    line-height: 1.7;
    margin:      0;
    /* 2行で省略して読みやすくする */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}


/* 「この号を読む →」リンク
   カード内の最下部に配置する（flex の auto マージンで押し下げ） */
.kaiho-archive__readmore {
    margin-top:      auto;          /* 上の要素とのスペースを自動調整 */
    display:         inline-block;
    font-size:       0.875rem;
    font-weight:     600;
    color:           var(--kaiho-color-primary);
    text-decoration: none;
    transition:      color 0.2s;
}

.kaiho-archive__readmore:hover {
    color:           var(--kaiho-color-primary-dark);
    text-decoration: underline;
}


/* 会報がまだ1件もない場合のメッセージ */
.kaiho-archive__empty {
    text-align:  center;
    padding:     var(--kaiho-space-xl) 0;
    color:       var(--kaiho-color-text-muted);
    font-size:   0.95rem;
    border:      1px dashed var(--kaiho-color-border);
    border-radius: var(--kaiho-radius-md);
}