/*
Theme Name:   Twenty Twenty-Five News
Description:  Twenty Twenty-Five の子テーマ。テキスト主体のニュースメディア風デザイン。
Template:     twentytwentyfive
Version:      1.7.0
Text Domain:  twentytwentyfive-news
*/

/* =============================================
   書体
   端末に入っているゴシック体を使い、Webフォントは読み込まない。
   以前は Noto Sans JP / Noto Serif JP を Google Fonts から読んでいたが、
   和文のWebフォントは1ページあたり約1,145KB・51リクエストに達し、
   ページ全体3,181KBの36%を占めていた（実測）。端末内蔵に変えると
   総通信量は1,583KBまで下がる。iOSのヒラギノ角ゴ・AndroidのNoto Sans CJKは
   いずれも品質が高く、小さな文字の可読性はむしろ画面向けに調整されている。
   指定順は iOS → Android → Windows の内蔵ゴシック。
============================================= */

:root {
    --font-gothic: -apple-system, BlinkMacSystemFont, 'Hiragino Sans',
        'Hiragino Kaku Gothic ProN', 'Noto Sans CJK JP', 'Noto Sans JP',
        'Yu Gothic', YuGothic, Meiryo, sans-serif;
}

/* =============================================
   サイト背景
============================================= */

html {
    -webkit-text-size-adjust: 100%;
}

body,
.wp-site-blocks {
    background-color: #f5f5f5 !important;
}

/* =============================================
   ヘッダー
============================================= */

.wp-block-template-part header,
header.wp-block-template-part {
    background: #ffffff !important;
    border-bottom: 3px solid #cc0000 !important;
    padding: 12px 20px !important;
}

/* ヘッダーロゴ画像 */
.wp-block-site-logo {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.wp-block-site-logo img {
    max-height: 56px !important;
    width: auto !important;
    display: block !important;
}

@media (max-width: 640px) {
    .wp-block-site-logo img {
        max-height: 40px !important;
    }
}

/* フォールバック: ロゴ未設定時のサイトタイトルテキスト */
.wp-block-site-title a {
    font-family: var(--font-gothic) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-decoration: none !important;
}

.wp-block-site-tagline {
    font-family: var(--font-gothic) !important;
    font-size: 12px !important;
    color: #888888 !important;
}

/* =============================================
   記事一覧ラッパー
============================================= */

.wp-block-post-template {
    display: block !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================
   記事アイテム（テンプレート直接指定クラス）
============================================= */

article.news-article,
.news-article {
    background: #ffffff !important;
    border-bottom: 1px solid #dddddd !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    display: block !important;
}

.wp-block-post:first-child article.news-article,
.news-article:first-of-type {
    border-top: 1px solid #dddddd !important;
}

article.news-article:hover,
.news-article:hover {
    background: #fafafa !important;
}

/* アイキャッチ非表示 */
.wp-block-post-featured-image {
    display: none !important;
}

/* =============================================
   カテゴリバッジ
============================================= */

.news-cat,
.wp-block-post-terms {
    display: block !important;
    margin-bottom: 4px !important;
}

.news-cat a,
.wp-block-post-terms a {
    background-color: #cc0000 !important;
    color: #ffffff !important;
    font-family: var(--font-gothic) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    text-decoration: none !important;
    display: inline-block !important;
    letter-spacing: 0.03em !important;
}

.news-cat a:hover,
.wp-block-post-terms a:hover {
    background-color: #aa0000 !important;
}

/* =============================================
   記事タイトル（一覧）
============================================= */

.news-title,
h2.wp-block-post-title {
    font-family: var(--font-gothic) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 4px 0 6px !important;
}

.news-title a,
.wp-block-post-title a {
    color: #111111 !important;
    text-decoration: none !important;
}

.news-title a:hover,
.wp-block-post-title a:hover {
    color: #cc0000 !important;
}

/* =============================================
   記事要約（一覧）
============================================= */

.news-excerpt {
    font-family: var(--font-gothic) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: #555555 !important;
    margin: 0 0 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* =============================================
   日付・相対時刻
============================================= */

.news-date,
.wp-block-post-date {
    font-family: var(--font-gothic) !important;
    font-size: 12px !important;
    color: #888888 !important;
    display: block !important;
    margin-top: 2px !important;
    letter-spacing: 0.02em !important;
}

/* =============================================
   個別記事ページ
============================================= */

.wp-block-post-content {
    background: #ffffff !important;
    padding: 24px 20px !important;
    border-top: 3px solid #cc0000 !important;
}

.entry-title,
h1.wp-block-post-title {
    font-family: var(--font-gothic) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #111111 !important;
}

.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
    font-family: var(--font-gothic) !important;
    font-weight: 700 !important;
    border-left: 4px solid #cc0000 !important;
    padding-left: 10px !important;
    margin-top: 28px !important;
}

.wp-block-post-content p {
    font-family: var(--font-gothic) !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    color: #222222 !important;
}

/* 本文は両端揃えにする（和文は文字幅が揃っているので両端揃えが自然）。
   text-wrap の解除が必須。親テーマが p 全体に text-wrap: pretty を当てているが、
   これは英文のウィドウ・オーファン対策の指定で、和文では逆効果になる。和文はどの
   文字間でも折り返せるため、pretty は行長を揃えようとして各行を2文字ぶんほど短く
   詰めてしまう（行末に平均38px・最大83pxの余りが出る）。その状態で両端揃えにすると
   余りを字間に配って埋めるため、字間が14.7%広がり行ごとにばらついて読みにくくなる。
   pretty を解除すると行が幅いっぱいまで埋まり、字間の広がりは2.5%に収まる。 */
.wp-block-post-content p,
.wp-block-post-content li {
    text-wrap: wrap !important;
    text-align: justify !important;
}

.wp-block-post-content a {
    color: #cc0000 !important;
}

/* 記事末尾の出典表記（publish.py が本文の最後に付与する） */
.wp-block-post-content .article-source {
    font-family: var(--font-gothic) !important;
    font-size: 12px !important;
    color: #888888 !important;
    text-align: right !important;
    margin: 28px 0 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid #eeeeee !important;
}

/* =============================================
   ページネーション
============================================= */

.wp-block-query-pagination {
    background: #ffffff !important;
    padding: 16px !important;
    text-align: center !important;
    border-top: 1px solid #dddddd !important;
    margin-top: 0 !important;
}

.wp-block-query-pagination a,
.wp-block-query-pagination-numbers .page-numbers {
    font-family: var(--font-gothic) !important;
    font-size: 13px !important;
    color: #111111 !important;
    padding: 6px 10px !important;
    border: 1px solid #dddddd !important;
    text-decoration: none !important;
    margin: 0 2px !important;
    display: inline-block !important;
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers:hover {
    background: #cc0000 !important;
    color: #ffffff !important;
    border-color: #cc0000 !important;
}

/* =============================================
   フッター
============================================= */

.wp-block-template-part footer,
footer.wp-block-template-part {
    background: #111111 !important;
    color: #cccccc !important;
    padding: 20px !important;
    text-align: center !important;
    font-family: var(--font-gothic) !important;
    font-size: 12px !important;
}

.wp-block-template-part footer a,
footer.wp-block-template-part a {
    color: #aaaaaa !important;
    text-decoration: none !important;
}

/* =============================================
   ページタイトルのサイズ・余白調整
   h1 に限定する。裸の .wp-block-post-title を指定すると
   一覧の h2.news-title まで巻き込み、一覧タイトルが
   32px と 14px の間で二重管理になる
============================================= */

.page .wp-block-post-title,
h1.wp-block-post-title {
    font-size: clamp(24px, 4vw, 32px) !important;
    line-height: 1.3 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* =============================================
   ナビゲーションリンク（直接表示）
============================================= */

.wp-block-navigation .wp-block-navigation-item__content {
    font-family: var(--font-gothic) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border: 1px solid #111111 !important;
    transition: background 0.2s, color 0.2s !important;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
    background: #111111 !important;
    color: #ffffff !important;
}

/* =============================================
   ハンバーガーメニュー（モバイルオーバーレイ）
============================================= */

/* ハンバーガーアイコン（開くボタン） */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-open svg {
    color: #111111 !important;
    fill: #111111 !important;
}

/* オーバーレイ全体（開いた状態） */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #111111 !important;
    padding: 32px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* オーバーレイ内コンテンツ */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
    padding-top: 24px !important;
}

/* メニュー項目リンク */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
    color: #ffffff !important;
    font-family: var(--font-gothic) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #333333 !important;
    display: block !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover {
    color: #cc0000 !important;
}

/* 閉じる（×）ボタン */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* =============================================
   投稿ページ メタ情報：カテゴリ→執筆者に並び替え＋右寄せ
   構造: p(執筆者:) / 著者名 / p(カテゴリ:) / カテゴリ値
============================================= */

/* コンテナを右寄せ */
.single-post .wp-block-group.has-small-font-size {
    justify-content: flex-end !important;
    gap: 0.3em !important;
    flex-wrap: wrap !important;
}

/* カテゴリラベル（3番目のp）→ 先頭 */
.single-post .wp-block-group.has-small-font-size > p:nth-child(3) {
    order: 1 !important;
}

/* カテゴリ値 → 2番目（右側に余白を空けて区切り） */
.single-post .wp-block-group.has-small-font-size > .wp-block-post-terms {
    order: 2 !important;
    margin-right: 1.2rem !important;
}

/* 執筆者ラベル（1番目のp）→ 3番目 */
.single-post .wp-block-group.has-small-font-size > p:nth-child(1) {
    order: 3 !important;
}

/* 著者名 → 最後 */
.single-post .wp-block-group.has-small-font-size > .wp-block-post-author-name {
    order: 4 !important;
}

/* =============================================
   投稿ページのタイトルを中央揃え
============================================= */

.single-post .wp-block-post-title,
.single-post h1.wp-block-post-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =============================================
   固定ページ ABOUT の余白を徹底的に潰す
============================================= */

.page-slug-about .entry-content,
.page-id-30 .wp-block-group,
.page-id-30 main {
    padding-top: 0px !important;
    margin-top: 0px !important;
}

.page-id-30 .wp-block-post-title,
.page-slug-about h1 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.page-id-30 .entry-content > * {
    margin-top: 0.5rem !important;
}

/* =============================================
   配信枠ラベル（[6:00更新] など）
============================================= */

.wp-block-post-date time {
    font-style: normal !important;
    color: #777777 !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}

/* =============================================
   個別記事 上部バッジ行（カテゴリ + 更新時間）
============================================= */

.single-meta-row {
    gap: 10px !important;
    margin-top: 16px !important;
    margin-bottom: 10px !important;
}

.single-update-badge,
.single-update-badge .wp-block-post-date {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.single-update-badge time {
    background: #f0f0f0 !important;
    color: #555555 !important;
    font-family: var(--font-gothic) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    border: 1px solid #dddddd !important;
    letter-spacing: 0.03em !important;
    font-style: normal !important;
}

/* NEW バッジ（本日投稿）の強調スタイル */
.single-update-badge time[data-badge-new="1"] {
    background: #fff3f3 !important;
    color: #cc0000 !important;
    border-color: #cc0000 !important;
}

/* =============================================
   個別記事 下部ナビゲーションバー
   配置: [◀ 前の記事：タイトル] [🏠] [タイトル：次の記事 ▶]
============================================= */

.post-nav-bar {
    background: #ffffff !important;
    border-top: 2px solid #eeeeee !important;
    border-bottom: 2px solid #eeeeee !important;
    padding: 14px 16px !important;
    margin-top: 40px !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.post-nav-bar .wp-block-post-navigation-link {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 42% !important;
}

.post-nav-bar .wp-block-post-navigation-link a {
    font-family: var(--font-gothic) !important;
    font-size: 13px !important;
    color: #111111 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    display: flex !important;
    flex-direction: column !important;
}

.post-nav-bar .wp-block-post-navigation-link a:hover {
    color: #cc0000 !important;
}

/* WordPress 7.0 で __label / __title のクラス名から wp-block- 接頭辞が外れた。
   部分一致セレクタで旧名（〜6.x）と新名（7.0〜）の両方を拾う */

.post-nav-bar [class*="post-navigation-link__label"] {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #888888 !important;
    display: block !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
}

.post-nav-bar [class*="post-navigation-link__title"] {
    font-size: 13px !important;
    color: #111111 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.post-nav-bar .wp-block-post-navigation-link a:hover [class*="post-navigation-link__title"] {
    color: #cc0000 !important;
}

.nav-prev a,
.nav-prev [class*="post-navigation-link__label"],
.nav-prev [class*="post-navigation-link__title"] {
    text-align: left !important;
}

.nav-next a,
.nav-next [class*="post-navigation-link__label"],
.nav-next [class*="post-navigation-link__title"] {
    text-align: right !important;
}

/* 中央トップメニューボタン */
.nav-home {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.nav-home a {
    font-family: var(--font-gothic) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    border: 1.5px solid #cccccc !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transition: background 0.2s, color 0.2s !important;
}

.nav-home a:hover {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}

@media (max-width: 640px) {
    /* ナビバーは絶対に1行維持 */
    .post-nav-bar {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 10px 8px !important;
        align-items: center !important;
    }

    /* 前後ナビ: 均等分割・はみ出し禁止 */
    .post-nav-bar .wp-block-post-navigation-link {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 40% !important;
        width: auto !important;
    }

    .post-nav-bar .wp-block-post-navigation-link a {
        font-size: 11px !important;
    }

    .post-nav-bar [class*="post-navigation-link__label"] {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    /* タイトルは1行で省略（PHP側の文字数制限のフォールバック） */
    .post-nav-bar [class*="post-navigation-link__title"] {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }

    /* トップボタン: 幅固定・縮まない */
    .nav-home {
        flex: 0 0 auto !important;
        width: auto !important;
        order: 0 !important;
    }

    .nav-home a {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
}

/* =============================================
   コメント欄の完全非表示
============================================= */

.wp-block-comments,
.wp-block-comments-query-loop,
#comments,
.comment-respond,
.comments-area,
.comments-title {
    display: none !important;
}


/* =============================================
   モバイル対応
============================================= */

@media screen and (max-width: 782px) {
    /* ABOUTページの余白リセット（スマホ強制適用） */
    .page-id-30 main,
    .page-id-30 .wp-block-group,
    .page-slug-about .entry-content {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }

    .page-id-30 .wp-block-post-title,
    .page-slug-about h1 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .page-id-30 .entry-content > * {
        margin-top: 0.5rem !important;
    }
}

@media (max-width: 640px) {
    article.news-article,
    .news-article {
        padding: 12px !important;
    }

    .news-title,
    h2.wp-block-post-title {
        font-size: 16px !important;
    }

    .wp-block-post-content {
        padding: 16px 12px !important;
    }

    .wp-block-post-content h2 {
        font-size: 18px !important;
    }

    .wp-block-post-content h3 {
        font-size: 16px !important;
    }

    .wp-block-post-content h4 {
        font-size: 15px !important;
    }

    .wp-block-post-content p {
        font-size: 16px !important;
    }
}