/**
 * ライトモードとダークモードの共通カスタムスタイル
 *
 * @package OpenData_App_Showcase
 */

/* ライトモード（デフォルト）スタイル */
:root:not(.dark) {
  /* 背景色 */
  --bg-primary: #EAF7FF;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F3FBFF;
  --bg-accent: #CFEFFF;
  
  /* テキスト色 */
  --text-primary: #333333;
  --text-secondary: #555555;
  --text-tertiary: #777777;
  --text-inverse: #FFFFFF;
  
  /* アクセントカラー */
  --color-primary: #0E4F9D;
  --color-secondary: #87A2C7;
  --color-accent: #B3DBF2;
  --color-highlight: #0E4F9D;
  
  /* ボーダー色 */
  --border-color: #E0E0E0;
}

/* ダークモードスタイル */
.dark {
  /* 背景色 */
  --bg-primary: #111827;
  --bg-secondary: #1F2937;
  --bg-tertiary: #374151;
  --bg-accent: #2563EB;
  
  /* テキスト色 */
  --text-primary: #F9FAFB;
  --text-secondary: #E5E7EB;
  --text-tertiary: #9CA3AF;
  --text-inverse: #111827;
  
  /* アクセントカラー - ライトモードと同じ青を使用 */
  --color-primary: #0E4F9D;
  --color-secondary: #87A2C7;
  --color-accent: #B3DBF2;
  --color-highlight: #0E4F9D;
  
  /* ボーダー色 */
  --border-color: #4B5563;
}

/* ライトモード専用クラス */
.light-only {
  display: none !important;
}

.dark .light-only {
  display: none !important;
}

:root:not(.dark) .light-only {
  display: block !important;
}

:root:not(.dark) .light-only.inline {
  display: inline !important;
}

:root:not(.dark) .light-only.flex {
  display: flex !important;
}

/* ダークモード専用クラス */
.dark-only {
  display: none !important;
}

:root:not(.dark) .dark-only {
  display: none !important;
}

.dark .dark-only {
  display: block !important;
}

.dark .dark-only.inline {
  display: inline !important;
}

.dark .dark-only.flex {
  display: flex !important;
}

/* ライトモードのカスタムスタイル */
:root:not(.dark) .site-header {
  background-color: #0E4F9D !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid var(--border-color);
}

/* ダークモードでもヘッダーは同じ青バック白文字 */
.dark .site-header {
  background-color: #0E4F9D !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid #4B5563;
}

/* フッターはライト・ダーク問わず常にダークネイビーで固定（本家 bodik.jp に合わせる） */
.site-footer {
  background-color: #033285 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-top: none !important;
}

:root:not(.dark) .app-card {
  background-color: var(--bg-secondary);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

:root:not(.dark) .app-category a {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

:root:not(.dark) .btn-primary {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

:root:not(.dark) .btn-secondary {
  background-color: var(--color-secondary);
  color: var(--text-inverse);
}

:root:not(.dark) .filter-sidebar > div,
:root:not(.dark) .comments-area,
:root:not(.dark) .entry-content {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* アプリ紹介画面のダークモード対応 */
.dark .prose,
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6,
.dark .prose p,
.dark .prose a,
.dark .prose strong,
.dark .prose ol li::before,
.dark .prose ul li::before {
  color: #FFFFFF !important;
}

.dark .prose blockquote {
  color: #9CA3AF !important;
  border-left-color: #4B5563 !important;
}

.dark .prose hr {
  border-color: #4B5563 !important;
}

.dark .prose thead {
  color: #F9FAFB !important;
  border-bottom-color: #4B5563 !important;
}

.dark .prose tbody tr {
  border-bottom-color: #4B5563 !important;
}

.dark .prose pre {
  background-color: #1F2937 !important;
  color: #E5E7EB !important;
}

.dark .prose code {
  background-color: #374151 !important;
  color: #E5E7EB !important;
}

/* トグルスイッチアニメーション */
.dark-mode-toggle {
  transition: all 0.3s ease;
}

.dark-mode-toggle svg {
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.dark-mode-toggle:hover svg {
  transform: rotate(12deg);
}

/* ページ切り替え時のアニメーション */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.site-header,
.site-footer,
.app-card,
.filter-sidebar > div,
.comments-area,
.entry-content {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* カスタムカラーのための追加クラス */
.bg-light-background {
  background-color: #EAF7FF;
}

.text-light-primary {
  color: #0E4F9D;
}

.bg-light-primary {
  background-color: #0E4F9D;
}

.text-light-secondary {
  color: #87A2C7;
}

.bg-light-secondary {
  background-color: #87A2C7;
}

.text-light-accent {
  color: #B3DBF2;
}

.bg-light-accent {
  background-color: #CFEFFF;
}

.bg-light-tertiary {
  background-color: #F3FBFF;
}

/* BODIK特有のスタイル */
.bodik-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  background-color: #0E4F9D;
  color: #FFFFFF;
}

.bodik-btn:hover {
  background-color: #0a3d7a;
}

.bodik-link {
  color: #0E4F9D;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bodik-link:hover {
  color: #0a3d7a;
  text-decoration: underline;
}

.bodik-section {
  padding: 3rem 0;
}

.bodik-card {
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* カテゴリーカードのボタンスタイル修正 */
.category-card {
  border: 1px solid #E0E0E0;
  transition: all 0.3s ease;
}

:root:not(.dark) .category-card {
  border: 1px solid #E0E0E0;
  background-color: #eef2f8;
}

:root:not(.dark) .category-card:hover {
  background-color: #cfe9ff;
  border-color: rgba(14, 79, 157, 0.34);
}

:root:not(.dark) .category-card:hover h3,
:root:not(.dark) .category-card:hover span {
  color: #072d59;
}

/* CTAセクションのスタイル統一 */
.cta-section {
  background-color: #0E4F9D !important;
}

.dark .cta-section {
  background-color: #0E4F9D !important;
}

/* ダークモードでもbg-light-primaryクラスが統一された青を使用するように */
.dark .bg-light-primary {
  background-color: #0E4F9D !important;
}

.dark .text-light-primary {
  color: #60a5fa !important;
}

.dark .border-light-primary {
  border-color: #0E4F9D !important;
}

/* ライトモードでも明示的に指定 */
:root:not(.dark) .bg-light-primary {
  background-color: #0E4F9D !important;
}

:root:not(.dark) .text-light-primary {
  color: #0E4F9D !important;
}

:root:not(.dark) .border-light-primary {
  border-color: #0E4F9D !important;
}