/* ============================================================
   冥人奇譚 攻略wiki — Component Styles
   ============================================================
   design-tokens.css で定義されたトークンを参照する。
   melta-ui の設計原則:
     - Layered: 背景→表層→テキストの3層
     - Minimal: 装飾は控えめ、余白とタイポグラフィで語る
     - Semantic: 色は用途で指定
   ============================================================ */

/* ── Typography ── */
.md-typeset {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  line-height: var(--leading-relaxed);
}

/* ── MkDocs Material テーマ変数の上書き ──
   --md-primary-fg-color : ヘッダー背景色（CSSで上書きするため実質テーマカラー用途）
   --md-primary-bg-color : ヘッダー上のアイコン・テキスト色
   ヘッダー背景を白に上書きしているので、bg-colorはダーク色にする必要がある */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--color-bg-primary);
  --md-primary-bg-color: var(--color-text-primary);
  --md-accent-fg-color: var(--color-accent);
  --md-typeset-a-color: var(--color-accent);
}

[data-md-color-scheme="slate"] {
  --md-accent-fg-color: var(--color-accent);
  --md-typeset-a-color: var(--color-accent);
}

/* ── Header bar ──
   Layered原則: ヘッダーは最上位レイヤー。
   背景を半透明にし、backdrop-filterで奥行きを表現。 */
.md-header {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-md-color-scheme="default"] .md-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--color-surface-border);
  box-shadow: none;
}

/* ライトモード: ヘッダー内の文字色・アイコン色を強制する 
   検索バー、ハンバーガーメニュー、テーマ切替などのアイコンも含む */
[data-md-color-scheme="default"] .md-header {
  --md-primary-fg-color: var(--color-bg-primary); /* background if needed */
  --md-primary-bg-color: var(--color-text-primary); /* text and icon color */
  --md-icon-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

[data-md-color-scheme="default"] .md-header .md-header__button,
[data-md-color-scheme="default"] .md-header .md-logo,
[data-md-color-scheme="default"] .md-header .md-search__icon,
[data-md-color-scheme="default"] .md-header [data-md-component="header-topic"],
[data-md-color-scheme="default"] .md-header__title {
  color: var(--color-text-primary) !important;
  transition: color var(--transition-fast);
}

/* JavaScriptで追加したタイトルへのリンクアクションを分かりやすくする */
[data-md-color-scheme="default"] .md-header__title:hover,
[data-md-color-scheme="slate"] .md-header__title:hover {
  color: var(--color-accent) !important;
}

[data-md-color-scheme="default"] .md-header svg {
  fill: var(--color-text-primary) !important;
}

[data-md-color-scheme="slate"] .md-header {
  background: rgba(15, 17, 23, 0.88);
  border-bottom: 1px solid var(--color-surface-border);
}

/* ── Hero Banner ──
   Minimal原則: アクセントは左ボーダーの1本のみ。
   グラデーションは極めて控えめに。 */
.hero-banner {
  background: var(--color-hero-bg);
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
  color: var(--color-hero-text);
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}

.hero-banner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(245, 158, 11, 0.04) 100%
  );
  pointer-events: none;
}

.hero-banner h1 {
  color: var(--color-hero-text) !important;
  font-size: var(--text-3xl);
  font-weight: 700;
  margin: 0 0 var(--space-2) !important;
  letter-spacing: -0.025em;
}

.hero-banner p {
  margin: 0;
  color: var(--color-hero-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

[data-md-color-scheme="default"] .hero-banner {
  background: var(--color-hero-bg);
}

/* ── Grid Cards ──
   Layered原則: カードは Surface レイヤー。
   ホバーは translateY(-2px) に抑え、繊細な浮遊感を表現。 */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-surface-border) !important;
  background: var(--color-surface-primary) !important;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
  border-color: var(--color-accent-border) !important;
}

/* ── Image Container ── */
.wiki-img-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface-primary);
  border: 1px solid var(--color-surface-border);
}

.wiki-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow);
}

.wiki-img-wrap:hover img {
  transform: scale(1.015);
}

/* ── Placeholder Image ── */
.wiki-img-placeholder {
  background: var(--color-bg-secondary);
  border: 1.5px dashed var(--color-surface-border);
  border-radius: var(--radius-md);
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

@supports not (aspect-ratio: 16 / 9) {
  .wiki-img-placeholder {
    min-height: 200px;
  }
}

.wiki-img-placeholder .placeholder-icon {
  font-size: 2.5rem;
  line-height: 1;
  opacity: 0.6;
}

.wiki-img-placeholder .placeholder-label {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  opacity: 0.5;
}

/* ── Admonitions ──
   Minimal原則: ボーダーラディウスと控えめシャドウのみ。 */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs);
}

/* ── Tables ──
   Layered原則: テーブルはSurfaceレイヤー。
   ヘッダーのアクセントラインで構造を伝える。 */
.md-typeset table:not([class]) {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-surface-border);
}

.md-typeset table:not([class]) thead th {
  border-bottom: 2px solid var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: var(--color-bg-secondary);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: var(--color-bg-tertiary);
}

/* ── Section Headings ──
   Semantic原則: アクセントカラーで意味を持たせたボーダー。 */
.md-typeset h2 {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-3);
  margin-left: calc(var(--space-3) * -1);
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* ── Class Badge ── */
.class-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 2px;
}

[data-md-color-scheme="slate"] .class-badge {
  background: var(--color-text-inverse);
  color: var(--color-text-primary);
}

/* ── Scroll-to-top Button ── */
.md-top {
  border-radius: var(--radius-full) !important;
  box-shadow: var(--shadow-md);
}

/* ── Links ──
   Semantic原則: アクセントカラーでリンクを識別。 */
.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-source):not(.headerlink) {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent-border);
  text-underline-offset: 3px;
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
}

.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-source):not(.headerlink):hover {
  text-decoration-color: var(--color-accent);
}

/* ── Navigation tabs ── */
.md-tabs {
  border-bottom: 1px solid var(--color-surface-border);
}

/* ライトモード: タブバーの背景とテキスト色 */
[data-md-color-scheme="default"] .md-tabs {
  background: var(--color-bg-primary);
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: var(--color-text-secondary);
}

[data-md-color-scheme="default"] .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: var(--color-text-primary);
}

/* ── Search ── */
[data-md-color-scheme="default"] .md-search__input {
  color: var(--color-text-primary);
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: var(--color-text-muted);
}

/* ── Footer ── */
.md-footer {
  border-top: 1px solid var(--color-surface-border);
}

/* ── Content separator (hr) ── */
.md-typeset hr {
  border-color: var(--color-surface-border);
}

/* ── Code blocks ──
   Layered原則: コードブロックはTertiaryレイヤー。 */
.md-typeset code {
  border-radius: var(--radius-sm);
}

.md-typeset pre {
  border-radius: var(--radius-md);
}

/* ── Sidebar navigation ──
   Minimal原則: ホバー時のフィードバックは色の変化のみ。 */
.md-nav__link:hover {
  color: var(--color-accent) !important;
}

.md-nav__link--active {
  font-weight: 600;
}