/**
 * JINテーマ パフォーマンス改善CSS
 *
 * 対象: rin-pedia.com (wp-theme-jin / jin-child)
 * 目的:
 *   - LCP改善: animate クラスによる opacity:0 初期状態を解除し即時描画
 *   - CLS改善: ヘッダー・ピックアップ・ナビの高さ安定化で
 *              下流コンテンツへの連鎖シフトを防ぐ
 *
 * 影響範囲:
 *   - すべてのセレクターを body.wp-theme-jin でスコープしているため
 *     JINテーマ以外のページ・プラグインには一切影響しない
 */

/* ==========================================================================
   1. フォールド上部の animate クラスを即時表示（LCP / CLS 対策）
      - JINテーマは .animate 要素を opacity:0 で初期化し JS でフェードインさせる
      - ヘッダー等が opacity:0 → 1 に遷移する間、高さ計算が変動して
        以下の全コンテンツが押し下げられる（連鎖CLS の根本原因）
   ========================================================================== */

/* ヘッダー全体 */
body.wp-theme-jin #header-box.animate,
body.wp-child-theme-jin-child #header-box.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

body.wp-theme-jin #header.animate,
body.wp-child-theme-jin-child #header.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* グローバルナビ本体 */
body.wp-theme-jin #nav-container.animate,
body.wp-child-theme-jin-child #nav-container.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ドロワーナビ（.ef クラスも JIN のアニメーション対象） */
body.wp-theme-jin #drawernav.ef,
body.wp-child-theme-jin-child #drawernav.ef {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ピックアップコンテンツ */
body.wp-theme-jin .pickup-contents-box.animate,
body.wp-child-theme-jin-child .pickup-contents-box.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ピックアップリスト（ul 自体にも独立したアニメーションが適用される場合がある） */
body.wp-theme-jin ul.pickup-contents,
body.wp-child-theme-jin-child ul.pickup-contents {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* スクロールコンテンツ全体ラッパー */
body.wp-theme-jin #scroll-content.animate,
body.wp-child-theme-jin-child #scroll-content.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* メインコンテンツ（記事本文・LCP候補を含む）
   #main-contents も .animate を持ち opacity:0 で初期化されるため別途指定 */
body.wp-theme-jin #main-contents.animate,
body.wp-child-theme-jin-child #main-contents.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ==========================================================================
   2. ロゴ画像の CLS 対策
      - ロゴ <img> に width/height 属性がないため height: auto を明示
   ========================================================================== */

body.wp-theme-jin .tn-logo-size img,
body.wp-child-theme-jin-child .tn-logo-size img {
    height: auto;
    max-width: 100%;
    display: block;
}

/* ==========================================================================
   3. ピックアップ画像のアスペクト比を明示（CLS対策）
      - 画像には width="269" height="151" があるが
        レスポンシブCSSで幅変動するため aspect-ratio を補足する
   ========================================================================== */

body.wp-theme-jin .pickup-image,
body.wp-child-theme-jin-child .pickup-image {
    aspect-ratio: 269 / 151;
    overflow: hidden;
}

body.wp-theme-jin .pickup-image img,
body.wp-child-theme-jin-child .pickup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   4. アーカイブ・カテゴリページの記事カード個別アニメーションを無効化（LCP対策）
      - JINテーマはカード単位にも .animate を付与するため
        #main-contents の opacity:1 だけでは LCP 候補画像が非表示になる場合がある
      - card-large-box / card-small-box / post-list 等が対象
   ========================================================================== */

body.wp-theme-jin .card-large-box.animate,
body.wp-child-theme-jin-child .card-large-box.animate,
body.wp-theme-jin .card-small-box.animate,
body.wp-child-theme-jin-child .card-small-box.animate,
body.wp-theme-jin .post-list-mag.animate,
body.wp-child-theme-jin-child .post-list-mag.animate,
body.wp-theme-jin .post-list.animate,
body.wp-child-theme-jin-child .post-list.animate,
body.wp-theme-jin .card-articles.animate,
body.wp-child-theme-jin-child .card-articles.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ==========================================================================
   5. 記事本文（cps-post / cps-post-main）の animate 無効化（CLS 0.1467 対策）
      - article.cps-post と .cps-post-main にも独立した .animate が付与される
      - #main-contents.animate の抑制だけでは記事要素自体のシフトが残る
   ========================================================================== */

body.wp-theme-jin article.cps-post.animate,
body.wp-child-theme-jin-child article.cps-post.animate,
body.wp-theme-jin .cps-post.animate,
body.wp-child-theme-jin-child .cps-post.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

body.wp-theme-jin .cps-post-main.animate,
body.wp-child-theme-jin-child .cps-post-main.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* 記事本文内の画像 CLS 対策
   - width/height 属性がない img が多いため height:auto を補足
   - max-width:100% でレスポンシブ幅変動時もアスペクト比を維持 */
body.wp-theme-jin .cps-post-main img,
body.wp-child-theme-jin-child .cps-post-main img {
    height: auto;
    max-width: 100%;
}

/* ==========================================================================
   6. アイキャッチ画像（eyecatch）を非表示
      - .cps-eye-catch : figure 要素（JIN標準）
      - .post-eye-catch: 旧バージョン・子テーマ向けの別クラス
   ========================================================================== */

body.wp-theme-jin .cps-eye-catch,
body.wp-child-theme-jin-child .cps-eye-catch,
body.wp-theme-jin .post-eye-catch,
body.wp-child-theme-jin-child .post-eye-catch {
    display: none !important;
}

/* ==========================================================================
   7. アニメーション削減設定（prefers-reduced-motion）への配慮
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.wp-theme-jin .animate,
    body.wp-child-theme-jin-child .animate {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   8. 記事直前ウィジェットエリアのスペース予約（CLS 0.1467 対策）
      - single.php の #post-top-widget は article.cps-post の直前に出力される
      - このエリアに AdSense 広告が配置されると、広告読み込み時に
        article.cps-post が押し下げられ CLS 0.1467 が発生する
      - min-height を事前確保してシフトを防ぐ
      - #post-top-widget は wp_isset_widets() で空の場合に div 自体が
        出力されないため、min-height による余白は設定時のみ発生する
   ========================================================================== */

/* PC: 728×90 リーダーボード または 300×250 レクタングル */
body.wp-theme-jin #post-top-widget,
body.wp-child-theme-jin-child #post-top-widget {
    min-height: 100px;
}

/* モバイル: 320×100 モバイルバナー（CLS 0.1467 ≈ 100px シフト相当） */
@media screen and (max-width: 768px) {
    body.wp-theme-jin #post-top-widget,
    body.wp-child-theme-jin-child #post-top-widget {
        min-height: 120px;
    }
}

/* ==========================================================================
   9. 記事内 ad-top 広告エリアのスペース予約（記事内コンテンツシフト対策）
      - JIN テーマの ad-top.php は cps-post-main 内の先頭に広告を出力する
      - 広告読み込み前にスペースを確保してコンテンツの押し下げを防ぐ
   ========================================================================== */

/* PC: center-rectangle (300×250) + sponsor テキスト */
body.wp-theme-jin .ad-single.ad-top,
body.wp-child-theme-jin-child .ad-single.ad-top {
    min-height: 280px;
}

/* モバイル: sp-bottom-rectangle (320×100) + sponsor テキスト */
body.wp-theme-jin .ad-single.ad-top-sp,
body.wp-child-theme-jin-child .ad-single.ad-top-sp {
    min-height: 120px;
}

/* ==========================================================================
   10. JIN テーマ共通広告コンテナのスペース予約（全テンプレート横断 CLS 対策）
       - ad-top.php / ad.php / related-entries.php のすべてで使用される
         innermost な広告ラッパーに min-height を設定する
       - center-rectangle は related-entries.php では内部に .sponsor-center
         ラベル（約25px）を含むため 275px とする
       - sp-bottom-rectangle / left-rectangle / right-rectangle は
         ラベルが外側にあるため広告サイズそのものを予約する
   ========================================================================== */

/* PC: 1列広告コンテナ（300×250 + 内部ラベル分を加算） */
body.wp-theme-jin .center-rectangle,
body.wp-child-theme-jin-child .center-rectangle {
    min-height: 275px;
    text-align: center;
}

/* PC: 2列広告コンテナ */
body.wp-theme-jin .left-rectangle,
body.wp-theme-jin .right-rectangle,
body.wp-child-theme-jin-child .left-rectangle,
body.wp-child-theme-jin-child .right-rectangle {
    min-height: 275px;
    text-align: center;
}

/* モバイル: 320×100 広告コンテナ */
@media screen and (max-width: 768px) {
    body.wp-theme-jin .sp-bottom-rectangle,
    body.wp-child-theme-jin-child .sp-bottom-rectangle {
        min-height: 100px;
        text-align: center;
    }
}

/* ==========================================================================
   11. トップページウィジェットエリアのスペース予約（home.php CLS 対策）
       - #home-top-widget は投稿リスト直前に配置される
         → 広告読み込み時に投稿リスト全体が押し下げられ大きな CLS が発生
       - #home-bottom-widget は投稿リスト直後
         → 広告読み込み時にフッター・サイドバーが押し下げられる
       - 各 div は wp_isset_widets() チェックにより空の場合は出力されない
         ため余白問題は発生しない
   ========================================================================== */

body.wp-theme-jin #home-top-widget,
body.wp-child-theme-jin-child #home-top-widget,
body.wp-theme-jin #home-bottom-widget,
body.wp-child-theme-jin-child #home-bottom-widget {
    min-height: 100px;
}

@media screen and (max-width: 768px) {
    body.wp-theme-jin #home-top-widget,
    body.wp-child-theme-jin-child #home-top-widget,
    body.wp-theme-jin #home-bottom-widget,
    body.wp-child-theme-jin-child #home-bottom-widget {
        min-height: 120px;
    }
}

/* ==========================================================================
   12. 記事下ウィジェットエリアのスペース予約（single.php CLS 対策）
       - #post-bottom-widget は記事直後に配置される
         → 広告読み込み時に関連記事・コメント・フッターが押し下げられる
   ========================================================================== */

body.wp-theme-jin #post-bottom-widget,
body.wp-child-theme-jin-child #post-bottom-widget {
    min-height: 100px;
}

@media screen and (max-width: 768px) {
    body.wp-theme-jin #post-bottom-widget,
    body.wp-child-theme-jin-child #post-bottom-widget {
        min-height: 120px;
    }
}

/* ==========================================================================
   13. カスタム広告ユニットエリアのスペース予約（single.php CLS 対策）
       - .related-ad-unit-area は cps-post-main 内の下部に配置される
         カスタム AdSense ユニット用エリア
       - バナーサイズが不定のため 100px を最低限として確保
   ========================================================================== */

body.wp-theme-jin .related-ad-unit-area,
body.wp-child-theme-jin-child .related-ad-unit-area {
    min-height: 100px;
}

/* ==========================================================================
   14. 開催場ページの先頭シフトと下部重量要素を追加最適化
      - Lighthouse で #nav-container.header-style3-animate.animate と
        .pickup-contents-box.animate が主要シフト元として検出された
      - exact match のセレクターで visibility / transform を明示して
        テーマ側アニメーション残りを抑止する
      - 高額配当ブロックは開催場ページでは予想一覧の後ろへ移動したため
        content-visibility で初期描画コストをさらに下げる
   ========================================================================== */

body.wp-theme-jin #nav-container.header-style3-animate.animate,
body.wp-child-theme-jin-child #nav-container.header-style3-animate.animate,
body.wp-theme-jin .pickup-contents-box.animate,
body.wp-child-theme-jin-child .pickup-contents-box.animate {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

body.keirin-ai-venue-page .keirin-high-payout-top5 {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
}

body.wp-theme-jin #post-top-widget ins.adsbygoogle,
body.wp-theme-jin #post-bottom-widget ins.adsbygoogle,
body.wp-theme-jin .ad-single ins.adsbygoogle,
body.wp-theme-jin .center-rectangle ins.adsbygoogle,
body.wp-theme-jin .left-rectangle ins.adsbygoogle,
body.wp-theme-jin .right-rectangle ins.adsbygoogle,
body.wp-theme-jin .sp-bottom-rectangle ins.adsbygoogle,
body.wp-theme-jin .related-ad-unit-area ins.adsbygoogle,
body.wp-child-theme-jin-child #post-top-widget ins.adsbygoogle,
body.wp-child-theme-jin-child #post-bottom-widget ins.adsbygoogle,
body.wp-child-theme-jin-child .ad-single ins.adsbygoogle,
body.wp-child-theme-jin-child .center-rectangle ins.adsbygoogle,
body.wp-child-theme-jin-child .left-rectangle ins.adsbygoogle,
body.wp-child-theme-jin-child .right-rectangle ins.adsbygoogle,
body.wp-child-theme-jin-child .sp-bottom-rectangle ins.adsbygoogle,
body.wp-child-theme-jin-child .related-ad-unit-area ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}