/* =============================
   cyber-accent.css
   既存スタイルへの追記用ファイル
   enqueue-scripts.php で読み込んでください
   例: wp_enqueue_style('cyber-accent', get_template_directory_uri() . '/assets/css/cyber-accent.css', ['biba7-style'], '1.0');
   ============================= */

/* ---------------------------------------------
   追加CSS変数（既存変数を上書きしない）
--------------------------------------------- */
:root {
  /* ベースカラー */
  --cyber-accent: #c9b8ff;
  --cyber-accent2: #e689b5;
  --mono-font: 'Courier New', 'Consolas', monospace;

  /* サイバーグロー（--cyber-accent の透過バリエーション） */
  --cyber-grid: rgba(201, 184, 255, 0.06); /* グリッド線・極薄背景 */
  --cyber-dim: rgba(201, 184, 255, 0.08); /* スクロールバー・薄い背景 */
  --cyber-faint: rgba(201, 184, 255, 0.2); /* カードボーダー */
  --cyber-soft: rgba(201, 184, 255, 0.25); /* テーブルth・ボタンホバー影 */
  --cyber-mid: rgba(
    201,
    184,
    255,
    0.3
  ); /* ページネーション・テーブルボーダー */
  --cyber-line: rgba(201, 184, 255, 0.35); /* ウィジェットボーダー */
  --cyber-glow: rgba(201, 184, 255, 0.6); /* 標準グロー */
  --cyber-glow-strong: rgba(201, 184, 255, 0.9); /* 強グロー */

  /* その他 */
  --cyber-dark: rgba(20, 16, 36, 0.06);
  --cyber-accent2-glow: rgba(230, 137, 181, 0.5); /* リンクホバーglow */
  --cyber-glass: rgba(255, 255, 255, 0.7); /* ウィジェットガラス背景 */
  --cyber-card-glass: rgba(255, 255, 255, 0.82); /* カードガラス背景 */
}

/* ---------------------------------------------
   グロー：ボタンhover
--------------------------------------------- */
button:hover,
input[type='button']:hover,
input[type='submit']:hover,
.more-link a:hover {
  box-shadow:
    0 0 10px var(--cyber-glow),
    0 0 20px var(--cyber-soft);
}

/* ---------------------------------------------
   グロー：リンク
--------------------------------------------- */
a:hover {
  text-shadow: 0 0 6px var(--cyber-accent2-glow);
}

/* ---------------------------------------------
   日付・数字にmonospaceフォント
--------------------------------------------- */
.card-date,
.posted-on,
.entry-date,
.updated,
.beaver-link-date,
.news-date,
time {
  font-family: var(--mono-font);
  font-size: 0.88em;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* ---------------------------------------------
   ウィジェットのグラスモーフィズム強化
--------------------------------------------- */
.widget-area .widget {
  background: var(--cyber-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--main-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.widget-area .widget .top {
  background-color: var(--main-color);
}

/* ---------------------------------------------
   カードのグラスモーフィズム
--------------------------------------------- */
.card {
  background: var(--cyber-card-glass);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid var(--main-color);
}

/* ---------------------------------------------
   ナビのグラスモーフィズム強化
--------------------------------------------- */
#nav.fixed {
  border-bottom: 1px solid var(--cyber-line);
  box-shadow: 0 2px 20px rgba(180, 160, 255, 0.2);
}

/* ---------------------------------------------
   ページネーションのグロー
--------------------------------------------- */
.pagination .page-numbers.current {
  box-shadow:
    0 0 10px var(--cyber-glow),
    0 0 20px var(--cyber-mid);
}

.pagination .page-numbers:hover {
  box-shadow: 0 0 8px var(--cyber-glow);
}

/* ---------------------------------------------
   タグのグロー
--------------------------------------------- */
.card-tags a:hover {
  box-shadow: 0 0 8px var(--cyber-glow);
}

.beaver-link-tag {
  border: 1px solid rgba(58, 95, 176, 0.2);
  transition: box-shadow 0.2s;
}

.beaver-link-tag:hover {
  box-shadow: 0 0 6px rgba(58, 95, 176, 0.3);
}

/* ---------------------------------------------
   テーブルのサイバーライン
--------------------------------------------- */
.beaver-table th {
  background: linear-gradient(
    135deg,
    var(--cyber-soft),
    rgba(201, 184, 255, 0.12)
  );
}

.beaver-table td,
.beaver-table th {
  border-bottom-color: var(--cyber-mid);
}

/* ---------------------------------------------
   ヘッダーのオーバーレイ（グリッド感を足す）
--------------------------------------------- */
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--cyber-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cyber-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.site-header .site-title {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------
   タブボタンのグロー
--------------------------------------------- */
.tab-button.active {
  box-shadow:
    0 0 10px var(--cyber-glow),
    inset 0 -2px 0 var(--cyber-accent2);
}

.tab-button:hover {
  box-shadow: 0 0 8px var(--cyber-glow);
}

/* ---------------------------------------------
   フォーカス時のグロー（アクセシビリティ維持）
--------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyber-accent);
  outline-offset: 2px;
  box-shadow: 0 0 8px var(--cyber-glow);
}

/* ---------------------------------------------
   おすすめ記事のランクバッジグロー
--------------------------------------------- */
.recommendation-rank {
  box-shadow: 0 0 8px var(--cyber-glow);
}

/* ---------------------------------------------
   パンくずのセパレーター
--------------------------------------------- */
.breadcrumb {
  font-family: var(--mono-font);
  font-size: 0.85em;
  opacity: 0.8;
}