/*
Theme Name: Lightning Child
Template: lightning
Description: Lightning テーマのUI/UX改善カスタマイズ子テーマ
Author: toukiito
Version: 1.0.0
Text Domain: lightning-child
*/

/* ==========================================================================
   1. カラー・コントラスト改善
   ========================================================================== */

:root {
  /* プライマリカラー: #c00 → より視認性の高いマテリアルレッド */
  --vk-color-primary: #d32f2f;
  --vk-color-primary-dark: #b71c1c;

  /* リンク色: #666 → プライマリカラーで明確化 */
  --vk-color-link: #d32f2f;

  /* テキストカラー（既存維持） */
  --vk-color-text-body: #333333;
}

/* リンクをプライマリカラーに + 下線で明確化 */
.entry-body a:not(.btn):not(.wp-block-button__link):not(.nav-link) {
  color: var(--vk-color-link);
  text-decoration: underline;
  text-decoration-color: rgba(211, 47, 47, 0.3);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.entry-body a:not(.btn):not(.wp-block-button__link):not(.nav-link):hover {
  color: var(--vk-color-primary-dark);
  text-decoration-color: var(--vk-color-primary-dark);
}

/* サブメニューホバー色もプライマリに追従 */
.global-nav-list ul li a:hover {
  background-color: var(--vk-color-primary);
}

/* ==========================================================================
   2. タイポグラフィ改善（見出し階層・フォントウェイト）
   ========================================================================== */

/* h2: サイズを明確に大きく */
h2:where(:not(.wp-block-post-title)) {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* h3: h2との差を明確に */
h3:where(:not(.wp-block-post-title)) {
  font-size: 1.375rem;
  font-weight: 600;
}

/* h4: 中間ウェイト */
h4:where(:not(.wp-block-post-title)) {
  font-size: 1.125rem;
  font-weight: 600;
}

/* h5: 本文より少し大きく */
h5:where(:not(.wp-block-post-title)) {
  font-size: 1rem;
  font-weight: 600;
}

/* 本文のフォントウェイト調整（可読性向上） */
body {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 強調テキストに中間ウェイト活用 */
strong, b {
  font-weight: 700;
}

/* ==========================================================================
   3. レイアウト・余白の最適化
   ========================================================================== */

/* コンテナ幅を大画面で制限 */
@media (min-width: 1200px) {
  :root {
    --vk-width-container: 1200px;
  }
}

@media (min-width: 1400px) {
  :root {
    --vk-width-container: 1200px;
  }
}

/* メインコンテンツとサイドバーの比率改善（75:25） */
@media (min-width: 992px) {
  .layout-content-sidebar .main-section {
    width: 73%;
  }

  .layout-content-sidebar .sub-section {
    width: 24%;
  }

  .layout-sidebar-content .main-section {
    width: 73%;
  }

  .layout-sidebar-content .sub-section {
    width: 24%;
  }
}

/* セクション間の余白を適切に */
.entry-body > *:not(:last-child) {
  margin-bottom: 1.5em;
}

/* ==========================================================================
   4. ナビゲーション改善
   ========================================================================== */

/* モバイルナビのタップフィードバック */
.vk-mobile-nav-menu-btn {
  -webkit-tap-highlight-color: rgba(211, 47, 47, 0.1);
}

.vk-mobile-nav .menu-item a {
  transition: background-color 0.15s ease;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.vk-mobile-nav .menu-item a:active {
  background-color: rgba(211, 47, 47, 0.08);
}

/* パンくずリスト: 背景色で分離を明確化 */
.breadcrumb {
  background-color: #f9f9f9;
  padding: 0.6em 1em;
}

.breadcrumb li {
  font-size: 0.85rem;
}

/* ==========================================================================
   5. CTA競合解消（Chaty + WP to Top 配置調整）
   ========================================================================== */

/* WP to Top ボタンを左下に移動 */
#wp-to-top {
  left: 20px !important;
  right: auto !important;
}

/* Chaty は右下のまま（デフォルト）- 競合回避 */

/* WP to Top のスタイル改善 */
#wp-to-top,
.wp-to-top {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#wp-to-top:hover,
.wp-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   6. ボタンホバートランジション
   ========================================================================== */

.wp-block-button__link,
.btn,
.vk_button_link {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.wp-block-button__link:hover,
.btn:hover,
.vk_button_link:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.wp-block-button__link:active,
.btn:active,
.vk_button_link:active {
  transform: translateY(0);
  box-shadow: none;
}

/* アウトラインボタンのホバー */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--vk-color-primary);
  color: #fff;
}

/* ==========================================================================
   7. モバイルタップ領域拡大・最適化
   ========================================================================== */

/* フッターナビのタップ領域拡大 */
.footer-nav-list li a {
  padding: 12px 16px;
  display: block;
}

/* モバイルでのタップ領域確保（最小48px） */
@media (max-width: 767.98px) {
  .global-nav-list a,
  .footer-nav-list a,
  .vk-mobile-nav .menu-item a {
    min-height: 48px;
    padding: 12px 16px;
  }

  /* フッターウィジェットの375px対応 */
  .site-footer-widget-area {
    padding: 0 16px;
  }

  /* モバイルでサイドバーを非表示（コンテンツファースト） */
  .sub-section {
    margin-top: 2em;
  }
}

/* 小さいデバイス（375px以下）でのフッター調整 */
@media (max-width: 375px) {
  .site-footer-widget-area .widget {
    padding: 0 8px;
  }

  .footer-nav-list li a {
    padding: 14px 12px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   8. アクセシビリティ強化
   ========================================================================== */

/* フォーカスリングの可視化 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--vk-color-primary);
  outline-offset: 2px;
}

/* スキップリンクの改善 */
.skip-link:focus {
  background-color: var(--vk-color-primary);
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
}

/* ==========================================================================
   9. 細かなUX改善
   ========================================================================== */

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* 画像のちらつき防止 */
img {
  height: auto;
}

/* テーブルの見やすさ改善 */
.entry-body table {
  border-collapse: collapse;
  width: 100%;
}

.entry-body table th,
.entry-body table td {
  padding: 0.75em 1em;
}

.entry-body table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

/* 引用ブロックの改善 */
.entry-body blockquote,
.wp-block-quote {
  border-left: 4px solid var(--vk-color-primary);
  background-color: #fafafa;
  padding: 1.2em 1.5em;
  margin: 1.5em 0;
}

/* カード・ループアイテムのホバーエフェクト */
.card-post .card {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.card-post .card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}