/*
 * BoostX Site Responsive Fix
 * 全ページ（HP・固定・ブログ・アーカイブ）× 全デバイス（モバイル・タブレット・PC）のレスポンシブ修正
 * Version: 1.0.1
 * Date: 2026-04-26
 *
 * v1.0.1 変更:
 *  - #floating-cta のモバイルフルワイド変換を撤去（テーマ本来の "fixed bottom-10 right-10" 右下丸ボタン設計を尊重）
 *  - body padding-bottom 120px を撤去（flexレイアウトを破壊する副作用）
 *  - z-index 確保とタップ領域最低保証のみ残す
 */

/* =====================================================================
 * 基礎: オーバーフロー防止（全ページ共通）
 * ===================================================================== */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre { overflow-x: auto; word-wrap: break-word; }

/* =====================================================================
 * #floating-cta（全デバイス共通）
 * テーマ本来のレイアウト（Tailwind: fixed bottom-10 right-10 rounded-full）を尊重し、
 * z-indexと最低タップ領域だけ確保する。位置・サイズ・形状はテーマ任せ。
 * ===================================================================== */
#floating-cta {
  z-index: 9999 !important;
}
#floating-cta a, #floating-cta button {
  min-height: 48px; /* WCAG 2.5.5 タップ領域最小サイズ */
  min-width: 48px;
}

/* =====================================================================
 * タブレット（〜1024px）
 * ===================================================================== */
@media (max-width: 1024px) {
  .container, .bxp-container { padding-left: 24px !important; padding-right: 24px !important; }
}

/* =====================================================================
 * モバイル（〜768px）
 * ===================================================================== */
@media (max-width: 768px) {
  /* コンテナ余白（コンテンツが画面端に貼り付かないよう） */
  .container, .bxp-container { padding-left: 16px !important; padding-right: 16px !important; }

  /* 見出しのモバイル最適化（読みやすさのため） */
  h1 { font-size: 26px !important; line-height: 1.3 !important; }
  h2 { font-size: 22px !important; line-height: 1.4 !important; }
  h3 { font-size: 18px !important; line-height: 1.4 !important; }

  /* カード・グリッドの1カラム化 */
  .card-grid, .bxp-card-grid, .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* #floating-cta はテーマの bottom-10 right-10 (=2.5rem≒40px) のままで右下丸ボタンを維持。
     念のため bottom 余白を少し縮める（モバイルではホームバー回避のため上げる） */
  #floating-cta {
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* =====================================================================
 * 小型モバイル（〜480px）
 * ===================================================================== */
@media (max-width: 480px) {
  h1 { font-size: 22px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 17px !important; }
  /* iPhone SE等の小画面では右下からの距離をさらに詰める */
  #floating-cta {
    bottom: 12px !important;
    right: 12px !important;
  }
}

/* =====================================================================
 * v1.0.5 ヘッダーロゴ モバイル崩れ修正 (2026-04-27 社長指示)
 * 元画像 1536×427 (横長) を h-10 (Tailwind 40px) で表示しているが、
 * モバイルで何らかの理由で巨大化している → 強制サイズ制限
 * ===================================================================== */
@media (max-width: 768px) {
  /* ヘッダー内ロゴ画像（複数セレクタで確実に効かせる） */
  header img[alt*="BoostX"],
  header img.h-10,
  header .h-10[class*="w-auto"],
  body.wp-custom-logo header img,
  .wp-custom-logo header img,
  header img.custom-logo {
    max-height: 32px !important;
    height: auto !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
  }

  /* ヘッダー自体のpadding縮小（モバイル省スペース化） */
  header,
  body > header,
  body.wp-custom-logo > header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ヘッダーロゴ周りのリンク・余白も詰める */
  header a[href="/"],
  header a[href*="boostx-inc.com"]:has(img) {
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* ハンバーガーメニュー（右上）はそのままでOKだが、確認のためサイズ確保 */
  header button[aria-label*="メニュー"],
  header button[aria-expanded],
  header button.menu-toggle {
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* 小型機 480px ではさらに詰める */
@media (max-width: 480px) {
  header img[alt*="BoostX"],
  header img.h-10,
  body.wp-custom-logo header img {
    max-height: 28px !important;
    max-width: 120px !important;
  }
  header,
  body > header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}