/*
Theme Name: create_craft
Theme URI: https://example.com/create_craft
Author: You
Description: タイピング学習コンテンツ用の軽量テーマ
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Text Domain: create_craft
*/

:root{
  --base-bg: #ffffff;            /* トップ白 */
  --game-bg: #0f1222;            /* ゲーム黒 */
  --content-bg: #eef0ff;         /* うすめの青紫 */
  --content-accent: #7c9cff;     /* 強調 */
  --text: #0a0a0a;
  --text-invert: #f5f7ff;
}

html,body{margin:0;padding:0;}
body{background:var(--base-bg);color:var(--text);font:16px/1.6 'Zen Kaku Gothic New', sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;}

.wrapper{max-width:1100px;margin:0 auto;padding:24px;}
.site-title a{color:inherit;text-decoration:none;}
.site-subtitle{color:#666;font-size:14px;margin-top:-8px;}

.grid{display:grid;gap:16px;} /* グリッドの基本スタイル */

/* トップページ専用グリッド */
.home-grid{
  grid-template-columns:repeat(4, 1fr); /* TOPページは1行4枚 */
  margin-bottom: 40px; /* 各カテゴリ一覧の下にマージンを追加 */
}

.card{background:var(--content-bg);border-radius:16px;padding:16px;border:1px solid var(--category-color, rgba(124,156,255,.25));display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:100px;color:#111;text-decoration:none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 影を追加 */
  transition: all 0.3s ease; /* ホバーエフェクトのためのトランジション */
  gap: 8px; /* カード内の要素間の隙間 */
}
.card:hover{
  background: var(--category-color, var(--content-accent)); /* ホバー時の背景色変更 */
  color: var(--text-invert); /* ホバー時の文字色変更 */
  transform: translateY(-3px); /* 少し上に浮き上がる */
  box-shadow: 0 6px 20px rgba(0,0,0,0.1); /* ホバー時の影を強調 */
}
.card h3{margin:0;font-size:18px;color:var(--category-color, #222);} /* カテゴリカラーを文字色に適用 */
.card:hover h3{color:var(--text-invert);} /* ホバー時のタイトル色変更 */
.card p{margin:0;font-size:16px;color:#555} /* 説明文のフォントサイズを元のサイズに */
.card:hover p{color:var(--text-invert);} /* ホバー時の説明文色変更 */

/* TOPページのカードにはアイコン、title-wrapperは不要なので削除 */
/* .card-title-wrapper, .card-icon はこのファイルから削除 */

/* カテゴリ一覧の下の説明文 */
.category-action-description{
  text-align: left; /* 左寄せに変更 */
  font-size: 14px;
  color: #666;
  margin-top: 10px; /* 見出しとの間隔を調整 */
  margin-bottom: 15px; /* 下にマージンを追加 */
}

/* カード全体リンクはTOPページでは使用しないため削除 */

/* ======================================================= */
/* カテゴリ一覧ページ専用のスタイル (taxonomy-typing_category.php) */
/* ======================================================= */

/* ======================================================= */
/* カテゴリ一覧ページ & コンテンツ一覧ページ専用のスタイル */
/* ======================================================= */

.category-grid, .archive-grid{
  grid-template-columns:repeat(3, 1fr); /* 1行3枚に */
}

.category-grid .card, .archive-grid .card{
  background: #f8faff; /* TOPページの--content-bgより少し明るい色 */
  border: 2px solid var(--category-color, var(--content-accent)); /* カスタムプロパティを使用 */
  min-height:100px !important; /* カード高さを小さく */
  align-items:center !important; /* 中央寄せに調整 */
  text-align:center !important; /* テキスト全体を中央寄せに */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.category-grid .card:hover, .archive-grid .card:hover{
  background: var(--category-color, var(--content-accent)); /* ホバー時の背景色をカテゴリカラーに */
  border-color: var(--category-color, var(--content-accent)); /* ホバー時にボーダー色を強調 */
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
  color: var(--text-invert);
}
.category-grid .card h3, .archive-grid .card h3{
  color: #333; /* TOPページより少し濃い色 */
  font-size: 20px; /* タイトルフォントサイズを調整 */
}
.category-grid .card:hover h3, .archive-grid .card:hover h3{
  color: var(--text-invert);
}
.category-grid .card p, .archive-grid .card p{
  /* 説明文は非表示になったため、スタイル調整は不要 */
  color: #666; /* TOPページより少し濃い色 */
}
.category-grid .card:hover p, .archive-grid .card:hover p{
  color: var(--text-invert);
}
.category-grid .card-link-wrapper, .archive-grid .card-link-wrapper{
  display: block;
  text-decoration: none;
  color: inherit;
}
.category-grid .card-link-wrapper:hover .card, .archive-grid .card-link-wrapper:hover .card{
  background: var(--category-color, var(--content-accent)); /* ホバー時の背景色変更 */
  color: var(--text-invert); /* ホバー時の文字色変更 */
  transform: translateY(-3px); /* 少し上に浮き上がる */
  box-shadow: 0 6px 20px rgba(0,0,0,0.1); /* ホバー時の影を強調 */
}
.category-grid .card-link-wrapper:hover .card h3, .category-grid .card-link-wrapper:hover .card p, .archive-grid .card-link-wrapper:hover .card h3, .archive-grid .card-link-wrapper:hover .card p{
  color: var(--text-invert);
}

.home-grid .card{
  background: #ffffff; /* 背景色を白に */
}

.home-grid .card h3{
  font-size: 24px; /* カテゴリ名フォントサイズを大きく */
}

.home-grid .card:hover{
  background: var(--category-color, var(--content-accent)); /* ホバー時の背景色をカテゴリカラーに */
  border-color: var(--category-color, var(--content-accent)); /* ホバー時にボーダー色を強調 */
}

/* ゲーム画面に入ったら body を黒系に */
body.is-game{background:var(--game-bg);color:var(--text-invert);}

/* カテゴリ詳細モーダル */
.category-detail-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒でオーバーレイ */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 最前面に表示 */
}

.category-detail-modal.hidden{
  display: none;
}

.category-detail-modal .modal-content{
  background: #ffffff; /* 背景色を白に */
  border: 1px solid var(--modal-category-color, var(--content-accent)); /* カテゴリカラーをボーダーに */
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 0 25px rgba(var(--modal-category-color-rgb, 124,156,255),.6); /* RGB形式のカテゴリカラーで影 */
  max-width: 600px;
  width: 90%;
  color: var(--modal-category-color, var(--text)); /* 文字色をカテゴリカラーに */
}

.category-detail-modal .modal-content h2{
  font-size: clamp(24px, 3vw, 36px);
  color: var(--modal-category-color, var(--text)); /* タイトル文字色をカテゴリカラーに */
  text-shadow: 0 0 10px rgba(var(--modal-category-color-rgb, 124,156,255),.5); /* カテゴリカラーで影 */
  margin-bottom: 20px;
}

.category-detail-modal #modal-category-description{
  font-size: 16px;
  color: var(--modal-category-color, #333); /* 説明文もカテゴリカラーに */
  margin-bottom: 30px;
  text-align: left;
  line-height: 1.7;
  max-height: 200px; /* 説明文の最大高さ */
  overflow-y: auto; /* スクロール可能に */
  padding-right: 10px;
}

.category-detail-modal .modal-actions{
  display: flex;
  justify-content: center;
  gap: 20px;
}

.category-detail-modal .actions-button{
  background: var(--modal-category-color, var(--content-accent)); /* カテゴリカラーを背景に */
  color: var(--text-invert); /* 文字色を反転色に */
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 18px; /* ボタンのフォントサイズ調整 */
  cursor: pointer;
  text-decoration: none;
  text-shadow: none; /* アイコンを削除したのでtext-shadowも削除 */
  box-shadow: 0 0 15px rgba(var(--modal-category-color-rgb, 124,156,255),.7);
  transition: all 0.3s ease;
  display: flex; /* アイコンを削除したので不要 */
  align-items: center; /* アイコンを削除したので不要 */
  gap: 0; /* アイコンを削除したので間隔も削除 */
}

.category-detail-modal .actions-button:hover{
  background: rgba(var(--modal-category-color-rgb, 124,156,255), 0.9); /* ホバー時の背景 */
  box-shadow: 0 0 20px rgba(var(--modal-category-color-rgb, 124,156,255),1); /* ホバー時の影 */
}

.category-detail-modal .actions-button .icon{
  display: none; /* アイコンを非表示 */
}

.category-detail-modal .actions-button.secondary{
  background: none;
  border: 1px solid var(--modal-category-color, var(--content-accent)); /* カテゴリカラーをボーダーに */
  color: #000000; /* 閉じるボタンの文字色を黒に */
  box-shadow: none;
}

.category-detail-modal .actions-button.secondary:hover{
  background: rgba(var(--modal-category-color-rgb, 124,156,255),.1); /* ホバー時の背景 */
  box-shadow: 0 0 10px rgba(var(--modal-category-color-rgb, 124,156,255),.5); /* ホバー時の影 */
}

/* カテゴリ別一覧ページ：カテゴリ一覧へもどるボタン */
.back-to-category-list-wrapper{
  margin-top: 30px;
  text-align: left; /* 左寄せ */
}

.back-to-category-list-wrapper .actions-button{
  /* 既存の.actions-button.secondaryのスタイルを継承 */
}

/* ======================================================= */
/* レスポンシブデザイン */
/* ======================================================= */

@media (max-width: 550px) {
  .wrapper {
    padding: 16px; /* スマートフォンでのパディングを調整 */
  }

  .home-grid {
    grid-template-columns: 1fr; /* スマートフォンでは1列表示 */
  }

  .card {
    padding: 12px; /* スマートフォンでのカードのパディングを調整 */
  }

  .card h3 {
    font-size: 20px; /* スマートフォンでのタイトルフォントサイズを調整 */
  }

  .category-grid, .archive-grid {
    grid-template-columns: 1fr; /* カテゴリ一覧、アーカイブ一覧も1列表示 */
  }

  .modal-content {
    width: 95%; /* モーダルの幅を調整 */
    padding: 20px; /* モーダルのパディングを調整 */
  }

  .options-container {
    grid-template-columns: 1fr; /* オプションも1列表示 */
  }
}