/*
 * Components — サイト共通の小さな UI パーツ
 *
 * 固定ページ本文の意匠は pages.css、
 * ヘッダー / フッター / ドロワーは layout.css が持つ。
 * ここに置くのは、フォールバック テンプレート (404 / index / single / page) と
 * ヘッダーで使う最小限のパーツだけ。
 */

/* ── ボタン ── */
.dra-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dra-space-2);
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--dra-radius-md);
  font-family: inherit;
  font-size: var(--dra-fs-base);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dra-transition), color var(--dra-transition);
}
.dra-btn:focus-visible { outline: 2px solid var(--dra-focus-ring); outline-offset: 2px; }
.dra-btn-primary { background: var(--dra-text-strong); color: var(--dra-text-inverse); }
.dra-btn-primary:hover { background: #000; color: var(--dra-text-inverse); }

/* ── キーボード操作用のスキップリンク ── */
.dra-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--dra-z-modal);
  padding: var(--dra-space-3) var(--dra-space-4);
  background: var(--dra-text-strong);
  color: var(--dra-text-inverse);
  text-decoration: none;
}
.dra-skip-link:focus { left: var(--dra-space-4); top: var(--dra-space-4); }

/* ── フォールバック テンプレートで使う最小のユーティリティ ── */
.dra-flex        { display: flex; }
.dra-flex-center { display: flex; align-items: center; justify-content: center; }
.dra-gap-4       { gap: var(--dra-space-4); }
.dra-mb-6        { margin-bottom: var(--dra-space-6); }
.dra-mt-7        { margin-top: var(--dra-space-7); }
.dra-text-center { text-align: center; }
.dra-text-muted  { color: var(--dra-text-muted); }
.dra-text-sm     { font-size: var(--dra-fs-sm); }

/* ═══════════════════════════════════════════════
   濃い背景のボタン — ホバー時の文字色
   ───────────────────────────────────────────────
   base.css の `a:hover { color: #5b21b6 }` は全リンクに掛かる。
   そのため、濃い背景 + 白文字のボタンを <a> で作ると、
   ホバーした瞬間に文字が紫になり背景と同化して読めなくなる。

   文字は白のまま保ち、背景を一段暗くして反応を示す。
   自前の :hover を持つもの (.dra-btn-primary / .dra-drawer-cta /
   .dra-next-btn) は既に対処済みなので、ここには含めない。
   ═══════════════════════════════════════════════ */
.dra-lnk-1:hover,
.dra-lnk-1:focus-visible,
.dra-lnk-6:hover,
.dra-lnk-6:focus-visible,
.dra-lnk--primary:hover,
.dra-lnk--primary:focus-visible,
.dra-pill--on:hover,
.dra-pill--on:focus-visible,
.dra-skip-link:hover,
.dra-skip-link:focus-visible {
  color: #fff;
  background: var(--dra-text-strong);
}
.dra-pill--on:hover,
.dra-pill--on:focus-visible { border-color: var(--dra-text-strong); }