/* ==========================================================================
   AI concierge — モバイル表示調整 & お品書きページ内移動
   ========================================================================== */

/* 1. ご予約カード (.route): 320px 幅で右にはみ出す問題の修正
      左右 40px の余白と電話番号の最小幅が原因のため、
      狭い画面では余白を狭め、カード自体が縮むようにする */
@media (max-width: 560px) {
  .route {
    padding: 1.5rem 1.25rem; /* 24px / 20px */
    min-width: 0;
  }
  .route > * { min-width: 0; }
  .route .tel-big {
    font-size: clamp(1rem, 5.5vw, 1.4rem);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

/* 2. お品書きのカテゴリ移動リンク (.menu-jump) */
.menu-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-block: 1.5rem 0;
}
.menu-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--cp-line-strong);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--cp-text);
}
.menu-jump a:hover,
.menu-jump a:focus-visible {
  color: var(--cp-accent);
  border-color: var(--cp-accent);
}

/* 固定ヘッダーに移動先見出しが隠れないよう余白を確保。
   全体設定の scroll-padding-top: 96px と合わさって機能するため、
   追加分は小さめにする (合計でヘッダー高さ + 24px の空き) */
#oden, #others, #wine, #drinks { scroll-margin-top: 1.5rem; }