/**
 * HIPHOPCs Core Web Vitals 最適化CSS（修正版 v2）
 *
 * 修正点：
 *   - Auto ads の挿入位置ブレに対応（セレクタ拡大）
 *   - min-height をモバイル/PC で段階式に変更
 *   - font-display の誤用を削除
 *   - より保守的・安全なアプローチに統一
 *
 * 対象：モバイル中心 / AdSense自動広告前提
 *
 * 使い方：
 *   子テーマ（Newspaper-child）の style.css の末尾に追記
 *   または Newspaper > Theme Panel > Custom CSS に貼り付け
 *
 * 設置後、必ずキャッシュクリア：
 *   1. WP Rocket > キャッシュをクリア
 *   2. Cloudflare > キャッシュ > すべてクリア
 */


/* =============================================
   1. AdSense自動広告のCLS対策（最重要）
   ============================================= */

/*
 * Auto ads はテーマの構造に関係なく様々な場所に注入される。
 * .td-post-content 内だけでなく、main 周辺やコンテナ直下にも
 * 挿入されるため、セレクタを広く取る。
 *
 * contain: layout style で広告の描画を隔離し、
 * 周囲のコンテンツへのレイアウト影響を最小限にする。
 */

/* === グローバル：サイト内のすべてのAdSense広告枠 === */
/* [2026-02-20 コメントアウト] AdSenseへの干渉リスクのため無効化
ins.adsbygoogle {
  display: block !important;
  contain: layout style;
  overflow: hidden;
}
*/

/* Google Auto ads が生成するコンテナ全般 */
/* [2026-02-20 コメントアウト] 自動広告の配置ロジックへの干渉リスクのため無効化
.google-auto-placed,
div[data-ad-client],
div[data-google-query-id] {
  contain: layout style;
  overflow: hidden;
}
*/

/* === 記事本文内の広告（最もCLSが発生する場所） === */
/* [2026-02-20 コメントアウト]
.td-post-content ins.adsbygoogle,
.td-post-content .google-auto-placed {
  margin: 20px 0;
}
*/

/* === メインコンテンツエリア全体（Auto adsの挿入位置ブレ対策） === */
/* [2026-02-20 コメントアウト]
.td-main-content-wrap ins.adsbygoogle,
.td-ss-main-content ins.adsbygoogle,
.td-container ins.adsbygoogle,
#td-outer-wrap > ins.adsbygoogle,
.td-main-content-wrap .google-auto-placed,
.td-ss-main-content .google-auto-placed,
.td-container .google-auto-placed {
  margin: 16px 0;
}
*/

/* === サイドバーの広告 === */
/* [2026-02-20 コメントアウト]
.td-sidebar ins.adsbygoogle,
.td-sidebar .google-auto-placed {
  margin: 12px 0;
}
*/

/* === min-height 削除済み (2026-02-20) === */
/*
 * 広告用の min-height を削除（自動広告に任せる）
 * 削除理由: フロント公開面での高さ確保は不要
 *
 * 注: [data-ad-status="unfilled"] の height:0 は下記で保持
 */

/* === 広告が空（unfilled）の場合：余白をゼロに === */
/* [2026-02-20 コメントアウト]
ins.adsbygoogle[data-ad-status="unfilled"] {
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
*/

/* === モバイル下部のアンカー広告対策 === */
/* [2026-02-20 コメントアウト] アンカー広告が無い場合に無駄な余白が残るため無効化
@media (max-width: 767px) {
  body {
    padding-bottom: 60px;
  }
}
*/


/* =============================================
   2. 画像のCLS対策
   ============================================= */

/*
 * aspect-ratioを指定してブラウザが画像読み込み前に
 * スペースを確保できるようにする。
 */

/* 記事サムネイル（16:9 に近いアスペクト比） */
.td-module-thumb img,
.entry-thumb,
.td-image-wrap img {
  aspect-ratio: 696 / 392;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* 記事本文内の画像 */
.td-post-content img {
  max-width: 100%;
  height: auto;
}

/* アイキャッチ画像 */
.td-post-featured-image img {
  aspect-ratio: 696 / 392;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* サイドバーのサムネイル */
.td-block-span12 .td-module-thumb img,
.td_block_trending .td-module-thumb img {
  aspect-ratio: 324 / 160;
  object-fit: cover;
}


/* =============================================
   3. Breaking News ティッカーのCLS対策
   ============================================= */

.td-breaking-news {
  min-height: 40px;
  contain: layout style;
  overflow: hidden;
}

@media (max-width: 767px) {
  .td-breaking-news {
    min-height: 36px;
  }
}


/* =============================================
   4. YouTube / iframe 埋め込みのCLS対策
   ============================================= */

.td-post-content iframe,
.td-post-content .wp-block-embed__wrapper iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.wp-block-embed,
.td-post-content .wp-block-embed {
  contain: layout;
  overflow: hidden;
}


/* =============================================
   5. ナビゲーションのCLS対策（モバイル）
   ============================================= */

@media (max-width: 767px) {
  .td-header-wrap {
    min-height: 56px;
    contain: layout;
  }

  .td-mobile-content {
    position: fixed;
    z-index: 9999;
  }
}


/* =============================================
   6. サイドバー・ウィジェットのCLS対策
   ============================================= */

.td-sidebar .td_block_wrap {
  min-height: 100px;
  contain: layout style;
}


/* =============================================
   7. LCP改善（ファーストビュー外の描画遅延）
   ============================================= */

/*
 * content-visibility: auto はフッター・関連記事・コメントのみに限定。
 * 記事本文やメインコンテンツ上部には絶対に使わないこと。
 * テーマJSとの干渉リスクがあるため、設置後に必ず動作確認。
 */

.td-footer-wrapper,
.td-sub-footer-container {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

.td-related-row {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

#comments,
.td-comments-title-wrap {
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}


/* =============================================
   [削除] font-display セクション
   ============================================= */
/*
 * font-display は @font-face 宣言内でのみ有効。
 * .td-header-wrap { font-display: swap; } のような記述は
 * CSSとして無効なので、前バージョンから削除。
 *
 * フォントのFOUT/FOITを改善したい場合は、
 * テーマが読み込むWebフォントの@font-face宣言に
 * font-display: swap を追加する必要がある。
 * → Newspaperテーマの場合はTheme Panel > Fontsの設定を確認。
 */