/*
 * Component: Buttons — thai-massage (hydrogen-station からハードコピー / CLAUDE.md ルール7)
 * Spec:      DESIGN.md §8
 *
 * 3 種類:
 *   - btn-primary: メイン CTA (背景塗り)
 *   - btn-secondary: サブ CTA (枠線透過)。既定は明るい背景前提で文字/枠線を
 *       ブラウン (var(--color-primary*)) にする（フッター・BLOG・スケジュール・
 *       contact など大半が明るい背景のため / 宮田指示）。暗背景に置く場合のみ
 *       文脈側で白に上書きする（例: hero.css の .hero-cta .btn-secondary）。
 *   - btn-cta: セクション末尾の大きな CTA (中央寄せ)
 *
 * 顧客 HP 用パレット (var(--color-primary)) を使用。
 * Palsea --brand-* トークン使用禁止。
 */

.btn-primary,
.btn-secondary,
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-body);
  letter-spacing: var(--tracking-wide);
  transition:
    background var(--duration-normal) var(--easing-standard),
    color var(--duration-normal) var(--easing-standard),
    border-color var(--duration-normal) var(--easing-standard);
  border: 0;
  /* CTA（予約する / 電話する 等）の角に控えめな丸み（宮田指示）。 */
  border-radius: 6px;
  cursor: pointer;
}

.btn-primary {
  padding: 14px 32px;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-size: var(--fs-body);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-dark);
}

.btn-secondary {
  padding: 14px 32px;
  background: transparent;
  /* 既定は明るい背景向けのブラウン。文字は AA 確保のため濃いブラウン、枠線はブランド主色。 */
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary);
  font-size: var(--fs-body);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  border-color: var(--color-primary);
}

.btn-cta {
  padding: 16px 48px;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-size: var(--fs-body-lg);
  margin: var(--gap-xl) auto 0;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background: var(--color-primary-dark);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── 予約導線なし（reservation.type='none'）の制御 ──
   予約方法で「予約導線なし」を選んだ場合、「予約する」ボタン（data-reservation）と
   RESERVATION ナビ（data-reservation-nav）を全ページで非表示にする。
   電話番号表示・「電話する」＝お問い合わせ導線は別系統（business.phone）で常時表示（マスト）。 */
body[data-reservation-kind='none'] [data-reservation],
body[data-reservation-kind='none'] [data-reservation-nav] {
  display: none !important;
}