/*
Theme Name: SWELL CHILD (EUREKA)
Theme URI: https://feee.jp/
Description: SWELL 子テーマ for EUREKA (feee.jp)。SWELL CSS変数上書き戦略でTOP世界観に統一。
Author: Tetsu Onodera
Author URI: https://feee.jp/
Template: swell
Version: 3.0.0
Text Domain: swell-child
*/

/* ============================================================
   v3.0 戦略：SWELL CSS変数を上書き（!important最小・衝突回避）
   v2.0の反省：!important多用→子要素白背景前提と衝突 → 文字色=背景色バグ発生
   v3.0は --color_main 等の変数だけ書き換え、SWELLの内部ロジックを尊重
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* ============================================================
   段階1: SWELL CSS変数上書き
   これだけでリンク色・主役色・背景・本文が一気にネオンダーク化
   ============================================================ */
:root {
  /* SWELL公式変数を上書き（!important なし） */
  --color_main:       #00f0ff;
  --color_main_thin:  rgba(0, 240, 255, 0.08);
  --color_link:       #00f0ff;
  --color_text:       rgba(255, 255, 255, 0.85);
  --color_bg:         #0a0a0f;
  --color_deep01:     #ff2d95;
  --color_deep02:     #b347ea;
  --color_deep03:     #ffd700;
  --color_deep04:     #00f0ff;
  --color_pale01:     rgba(255, 45, 149, 0.08);
  --color_pale02:     rgba(179, 71, 234, 0.06);
  --color_pale03:     rgba(255, 215, 0, 0.06);
  --color_pale04:     rgba(0, 240, 255, 0.06);
  --color_gray:       rgba(255, 255, 255, 0.08);

  /* SWELL拡張変数（swl-プレフィックス） */
  --swl-color_text:   rgba(255, 255, 255, 0.85);
  --swl-color_main:   #00f0ff;
  --swl-color_bg:     #0a0a0f;
  --swl-color_border: rgba(255, 255, 255, 0.08);

  /* 独自パレット（v3.0専用） */
  --eureka-cyan:   #00f0ff;
  --eureka-purple: #b347ea;
  --eureka-pink:   #ff2d95;
  --eureka-gold:   #ffd700;
  --eureka-bg:     #0a0a0f;
  --eureka-bg2:    #15151f;
  --eureka-card:   rgba(15, 15, 25, 0.6);
}

/* ============================================================
   段階2: ベースの背景・本文色
   body と l-content にだけ background 指定（広範な !important回避）
   ============================================================ */
html, body { background: #0a0a0f; }

body { color: rgba(255, 255, 255, 0.85); }

/* SWELLメインエリアの背景 */
.l-content { background: transparent; }

/* セレクション色 */
::selection { background: #00f0ff; color: #0a0a0f; }

/* スクロールバー（WebKit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00f0ff, #b347ea);
  border-radius: 5px;
}

/* ============================================================
   段階3: ヘッダー・フッター（透明ダーク + ネオン区切り線）
   ============================================================ */
.l-header,
.l-fixHeader {
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
}

.c-headLogo a,
.c-headLogo__link {
  color: #00f0ff;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.15em;
}

.l-footer {
  background: #15151f;
  border-top: 1px solid rgba(0, 240, 255, 0.15);
  color: rgba(255, 255, 255, 0.55);
}
.l-footer a { color: rgba(255, 255, 255, 0.55); }
.l-footer a:hover { color: #00f0ff; }

/* ============================================================
   段階4: 記事本文ラッパー（範囲を限定 - .single の post_content だけ）
   v2.0 で .l-mainContent 全部塗ってバグった反省を踏まえ、最小範囲
   ============================================================ */
.single .l-mainContent .l-article,
.single .l-mainContent > article {
  background: rgba(15, 15, 25, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 40px clamp(20px, 5vw, 50px);
  backdrop-filter: blur(10px);
}

/* 記事タイトル */
.c-postTitle__ttl,
.p-postTitle {
  color: #fff;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  padding-bottom: 18px;
  position: relative;
}
.c-postTitle__ttl::after,
.p-postTitle::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 70px; height: 2px;
  background: linear-gradient(90deg, #00f0ff, #b347ea);
}

/* 投稿日時 */
.c-postTimes,
.c-postTitle__date {
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* ============================================================
   段階5: post_content 内の見出し（範囲最小化・SWELL尊重）
   SWELL のデフォルトh2スタイルを継承しつつ縦ネオンバーを追加
   ============================================================ */
.post_content { color: rgba(255, 255, 255, 0.85); }
.post_content > p { color: rgba(255, 255, 255, 0.85); }

.post_content h2 {
  color: #fff;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.06), transparent 60%);
  border-left: 4px solid #00f0ff;
  border-bottom: 1px solid rgba(0, 240, 255, 0.18);
  padding: 14px 0 14px 20px;
  margin: 60px 0 24px;
  border-radius: 0 8px 8px 0;
  box-shadow: -4px 0 12px rgba(0, 240, 255, 0.15);
}

.post_content h3 {
  color: #fff;
  border-bottom: 2px solid transparent;
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
                    linear-gradient(90deg, #00f0ff, #b347ea, transparent);
  background-origin: border-box;
  background-clip: content-box, border-box;
  padding-bottom: 8px;
  margin: 44px 0 18px;
}

.post_content h4 {
  color: #fff;
  padding-left: 14px;
  margin: 32px 0 14px;
  position: relative;
}
.post_content h4::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  background: #ff2d95;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(255, 45, 149, 0.6);
}

/* 本文中リンク（SWELL の --color_main 上書きで自動追従するが念のため） */
.post_content a {
  color: #00f0ff;
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  text-decoration: none;
  transition: color .25s, border-color .25s;
}
.post_content a:hover {
  color: #ff2d95;
  border-bottom-color: #ff2d95;
}

/* 引用 */
.post_content blockquote {
  background: rgba(15, 15, 25, 0.6);
  border-left: 4px solid #b347ea;
  border-radius: 8px;
  padding: 22px 26px;
  margin: 28px 0;
  color: rgba(255, 255, 255, 0.7);
}

/* リスト */
.post_content ul li, .post_content ol li {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.5em;
}
.post_content ul li::marker, .post_content ol li::marker {
  color: #00f0ff;
}

/* テーブル */
.post_content table,
.tablepress {
  background: rgba(15, 15, 25, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  border-collapse: separate;
  overflow: hidden;
}
.post_content table th, .tablepress thead th {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(179, 71, 234, 0.08));
  color: #fff;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  padding: 10px 14px;
}
.post_content table td, .tablepress tbody td {
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 14px;
}

/* コード */
.post_content code {
  background: #000;
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.post_content pre {
  background: #000;
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 6px;
  padding: 16px 20px;
}
.post_content pre code {
  background: transparent;
  border: none;
  padding: 0;
}

/* hr */
.post_content hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.4), transparent);
  margin: 40px 0;
}

/* ============================================================
   段階6: カテゴリページ・アーカイブの記事カード
   c-postList を最小限ネオン縁取り化（SWELL基本レイアウトはそのまま）
   ============================================================ */
.c-postList__item,
.p-postList__item {
  background: rgba(15, 15, 25, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.c-postList__item:hover,
.p-postList__item:hover {
  border-color: rgba(0, 240, 255, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 240, 255, 0.1);
}
.c-postList__title,
.p-postList__title {
  color: #fff;
}

/* ============================================================
   段階7: カテゴリ・タグバッジ
   ============================================================ */
.c-postThumbCat,
.c-categoryList__link,
.c-tagList__link,
.p-postList__cat {
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 50px;
  padding: 3px 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ============================================================
   段階8: パンくず・ページヘッダー
   ============================================================ */
.p-breadcrumb,
.c-breadcrumb {
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
}
.p-breadcrumb a,
.c-breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
}

.p-pageHeader,
.l-archiveHeader {
  background: linear-gradient(135deg, #0a0a0f 0%, #15101e 100%);
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
}
.p-pageTitle,
.c-pageTitle,
.c-archiveHeader__title {
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.08em;
}

/* ============================================================
   段階9: SNSシェア・ページネーション・サイドバー（軽くダーク化）
   ============================================================ */
.c-shareBtns__btn {
  background: rgba(15, 15, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}
.c-shareBtns__btn:hover {
  border-color: rgba(0, 240, 255, 0.4);
  color: #00f0ff;
}

.c-pagination a,
.c-pagination span,
.wp-pagenavi a,
.wp-pagenavi span {
  background: rgba(15, 15, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
.c-pagination .current,
.wp-pagenavi .current {
  background: linear-gradient(135deg, #00f0ff, #b347ea);
  color: #0a0a0f;
  border-color: transparent;
}

/* サイドバーウィジェット */
.p-widget,
.widget {
  background: rgba(15, 15, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
.p-widget__title,
.widget-title {
  color: #fff;
  border-bottom: 1px solid rgba(0, 240, 255, 0.18);
  padding-bottom: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

/* 固定TOPボタン */
.c-fixBtn {
  background: rgba(15, 15, 25, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  backdrop-filter: blur(10px);
}
.c-fixBtn:hover {
  background: #00f0ff;
  color: #0a0a0f;
}

/* ============================================================
   段階10: 関連記事・記事下セクション
   ============================================================ */
.l-articleBottom,
.l-articleBottom__section {
  background: transparent;
}
.l-articleBottom__title,
.c-secTitle {
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  position: relative;
  padding-bottom: 12px;
}
.l-articleBottom__title::after,
.c-secTitle::after {
  content: '';
  display: block;
  width: 50px; height: 2px;
  background: linear-gradient(90deg, #00f0ff, #b347ea);
  margin: 12px auto 0;
}

/* ============================================================
   段階11: アイキャッチ画像
   ============================================================ */
.p-eyecatch,
.c-postThumb {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 240, 255, 0.08), 0 0 0 1px rgba(0, 240, 255, 0.08);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 768px) {
  .single .l-mainContent .l-article,
  .single .l-mainContent > article {
    padding: 24px 16px;
    border-radius: 8px;
  }
  .post_content h2 {
    margin: 40px 0 18px;
    padding-left: 16px;
  }
  .post_content h3 {
    margin: 30px 0 14px;
  }
}

/* ============================================================
   緊急: TCD Classic Editor のスマホ用目次モーダルが常時表示バグ
   → is-active 以外は完全非表示
   ============================================================ */
.p-toc-modal:not(.is-active) { display: none !important; }
.p-toc-open { display: none !important; } /* 開閉ボタンも消す */