/* サイト独自の追加スタイル（参照サイトのビルド済み CSS の後に読み込む）。
   参照 CSS（Tailwind v4 の preflight）はボタンのカーソルを既定のままにしているため、
   クリックできる要素はすべて指カーソルにする。 */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
summary,
label[for],
select,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"] {
  cursor: pointer;
}

/* よくある質問: 質問（summary）のホバー・フォーカス効果。
   枠をアクセント色にして影を深め、わずかに浮かせる。質問文と番号をアクセント色に、＋アイコンを少し拡大。
   ring / shadow は Tailwind の CSS 変数（--tw-ring-color / --tw-shadow）を差し替えて合成を保つ。
   タッチ端末ではホバーが残らないよう (hover: hover) のときだけ適用。 */
[data-cms-list="questions"] > details {
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
[data-cms-list="questions"] > details > summary .flex-1,
[data-cms-list="questions"] > details > summary .editorial-index {
  transition: color 0.3s ease;
}
[data-cms-list="questions"] > details > summary > span[aria-hidden="true"] {
  transition:
    transform 0.3s ease,
    scale 0.3s ease;
}
@media (hover: hover) {
  [data-cms-list="questions"] > details:has(> summary:hover) {
    --tw-ring-color: color-mix(in oklab, var(--accent) 45%, transparent);
    --tw-shadow: 0 10px 24px -14px color-mix(in oklab, var(--accent) 45%, transparent);
    transform: translateY(-2px);
  }
  [data-cms-list="questions"] > details > summary:hover .flex-1 {
    color: var(--accent);
  }
  [data-cms-list="questions"] > details > summary:hover .editorial-index {
    color: var(--primary);
  }
  [data-cms-list="questions"] > details > summary:hover > span[aria-hidden="true"] {
    scale: 1.15;
  }
}
/* キーボード操作時も同じ効果 */
[data-cms-list="questions"] > details:has(> summary:focus-visible) {
  --tw-ring-color: color-mix(in oklab, var(--accent) 60%, transparent);
  --tw-shadow: 0 10px 24px -14px color-mix(in oklab, var(--accent) 45%, transparent);
}
[data-cms-list="questions"] > details > summary:focus-visible {
  outline: none;
}
[data-cms-list="questions"] > details > summary:focus-visible .flex-1 {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  [data-cms-list="questions"] > details:has(> summary:hover) {
    transform: none;
  }
}