/* ===============================================================
   non — メニューページ固有のスタイル
   すべて .menu 配下に閉じてある。ページが増えても、li や h2 の
   見た目がメニュー用の指定に引きずられない。
   =============================================================== */

/* 目次 -----------------------------------------------------------
   単なるアンカー。JSが落ちても動く。追従（sticky）にはしない。
   画面上端は片手持ちで最も指が届きにくい位置なので、常時そこに操作要素を
   置くのは割が合わない。着地直後に一度押すだけの用途なので、
   スクロールで流れて消えてよい。 */
/* flex-wrap は安全弁。無いと折り返さずに画面外へはみ出し、ページ全体に
   横スクロールが出る。実測では 360px 幅で 1px、320px 幅で 41px はみ出していた。
   360px は日本の Android で最も多い幅なので、これは実害。

   横スクロール（overflow-x:auto）にはしない。4つしかない項目の1つを隠して
   横フリックを要求することになり、片手持ち・薄暗い店内では割に合わない。 */
.menu .catnav{display:flex;flex-wrap:wrap;gap:6px;padding:20px 0 4px}
/* 高さは padding ではなく min-height で確保する。padding で高さを作ると
   和文4語（エスプレッソ / ティー / ノンコーヒー / フード）が収まらず折り返す。
   横を詰めて縦を min-height で稼げば、1行に収めたまま指で押せる高さになる。
   実測：この値で 360px まで1行、320px では2行に折り返す（横スクロールは出ない）。 */
.menu .catnav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 9px;
  font-size:12.5px;line-height:1;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;
  color:var(--ink);text-decoration:none;
}
/* 押下フィードバック。現状はブラウザ既定のタップハイライト（iOSはグレーの角丸、
   Androidは別の色）だけで、このページで最も押されるコントロールの見た目を
   デザイン側が決めていない状態だった。

   :active は touchstart で立ち、click は touchend で発火する。指を置いてから
   離すまでの間、いまは完全に無反応。ここを埋めないと二度押しの原因になる。

   押下は 0秒、離しだけ 0.18秒 と非対称にする。押した瞬間に時間をかけて
   黒くなるのは反応ではなく遅延で、視覚フィードバックが 70ms を超えると
   ボタンの主観品質が落ちるという実験結果がある（Kaaresoja et al. 2014）。

   既定のタップハイライトは消していない。iOS には要素にタッチリスナーが無いと
   :active が発火しないという報告があり、既定を消したうえで :active が効かないと
   フィードバックが完全に消える。実機で確認するまでは両方出しておく。 */
.menu .catnav a:active{background:var(--ink);border-color:var(--ink);color:#fff}

/* 反転そのものはメディアクエリの外に置き、transition だけを中に入れる。
   site.css の .lang button と同じ作りで、低モーション設定でも
   「押した見た目」は残り、補間だけが消える。 */
@media (prefers-reduced-motion:no-preference){
  .menu .catnav a{transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out}
  .menu .catnav a:active{transition-duration:0s}
}

/* 間隔の比 --------------------------------------------------------
   「セクション間 ≧ 2 × 項目間」を満たす。近接の原理では、間隔が近い
   もの同士が1つのまとまりに見える。セクション間が項目間の2倍を割ると
   「節が変わった」ではなく「少し広めの行間」に見えてしまい、
   グルーピングが消える。以前は 54px 対 31px（1.74倍）で足りておらず、
   その不足を各セクション末尾のイラスト（153〜195px）が埋めていた。

     項目間     = padding 11px × 2        = 22px
     セクション間 = 11px + padding-top 52px = 63px   （2.86倍） */
.menu section{
  padding-top:52px;
  /* 目次から飛んだときヘッダーに潜らせない。ヘッダーの高さは
     env(safe-area-inset-top) のぶん伸びる（PWAで全画面表示にしたときなど）ので、
     固定値だけにするとその環境で見出しがヘッダーの下に隠れる。 */
  scroll-margin-top:calc(72px + env(safe-area-inset-top));
}
.menu section:first-of-type{padding-top:26px}

/* セクション見出し -------------------------------------------------
   イラストを全廃したので、セクションを区切るのは見出しだけになった。
   見出しが唯一のランドマークなので、弱いと節の切れ目が見えなくなる。

   font-size を 12.5px から上げているのは、品名（15.5px）より小さいと
   見出しが本文より目立たないため。紙の原本は全体が一度に見えるので
   小さく静かな見出しで成立していたが、スクロールする画面では
   2つのセクションが同時に視界に入らないので、見出しは単独で立つ必要がある。 */
.menu h2{
  font-size:14px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  line-height:20px;          /* 言語で見出しの高さが変わらないようpx固定 */
  padding-bottom:8px;border-bottom:1px solid var(--ink);
}
.menu h2 .ja{letter-spacing:.08em}

/* 品目 ---------------------------------------------------------- */
.menu ul{list-style:none}
/* 行の高さを言語に依存させない --------------------------------------
   line-height を 1.35 のような相対値で指定すると、行箱の高さがフォントの
   ascent / descent に左右される。和文フォントと欧文フォントではこの値が
   違うので、EN / JA を切り替えるたびに1行ずつ高さが変わる。使うフォントが
   端末で違うため症状も端末依存になる（AndroidはRobotoとNoto Sans CJK JPで
   差が大きく、iOS/macOSのSFとHiraginoでは目立たない）。

   対策：行に関わる line-height をすべて px 固定にする。あわせて li の
   align-items を baseline から flex-start に変える。baseline揃えは行箱の中の
   ベースライン位置に依存し、これもフォントメトリクス次第で動くため。
   名前側と価格側に同じ line-height を与えているので flex-start でも1行目は揃う。

   罫線は引かない。20行すべてに罫線を引くと「同格の領域が20個」になり、
   セクションという上位のまとまりが消える（共通領域の原理）。区切りは
   余白に任せ、罫線は h2 の下（セクション境界）だけに使う。 */
.menu li{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 0;
}
.menu .name{flex:1;min-width:0;line-height:22px}
/* 直接の子だけを対象にする。子孫セレクタにすると .note や .star の
   中の .en / .ja まで巻き込んで、切替表示が壊れる。
   品名は実寸指定なので site.css の .ja{font-size:.94em} を上書きしてしまう。
   そのため和文側の実寸をここで別に持たせている。 */
.menu .name > .en{font-size:15.5px}
.menu .name > .ja{font-size:14.6px}
.menu .note{display:block;font-size:11px;color:var(--muted);line-height:16px;margin-top:3px}
.menu .star{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;line-height:22px;color:var(--muted);letter-spacing:.06em;
  margin-left:8px;white-space:nowrap;
}
.menu .star svg{width:11px;height:11px;flex:none}

/* 価格（原本どおり 税抜メイン + 括弧内 税込） ---------------------
   数字しか入らないので、和文を含まないスタックに固定する（EN/JAで字面が
   変わらないように）。字送りは税抜・税込で同じ値にして、原本の「5 0 0 (5 5 0)」の
   均一なリズムに揃える。 */
.menu .price{
  flex:none;display:flex;align-items:baseline;gap:8px;
  font-family:var(--font-latin);
  font-variant-numeric:tabular-nums;
  letter-spacing:.16em;
  line-height:22px;          /* 品名側と同じ値。flex-start でも1行目が揃う */
}
.menu .p-main{font-size:16px}
.menu .p-tax{font-size:12px;color:var(--muted)}

.menu .takeout{
  margin-top:30px;text-align:right;
  font-size:11px;line-height:16px;color:var(--muted);letter-spacing:.04em;
}

/* タブレット・PC：原本と同じ2カラム ------------------------------
   目次と「テイクアウトできます」は2カラムをまたぐ。
   2カラムだと各カラムの1つ目のセクションが上端に来るので、
   :first-of-type だけでは col-b の頭に52pxの余白が残る。 */
@media (min-width:760px){
  .menu{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;padding-bottom:20px}
  .menu .catnav{grid-column:1 / -1}
  .menu section{padding-top:44px}
  .menu .col-a{grid-column:1}
  .menu .col-b{grid-column:2}
  /* 2カラムでは1つ目(col-a)と2つ目(col-b)が両方とも上端の行に来る。
     :first-of-type は要素の型で数えるので col-b には効かない。 */
  .menu section:nth-of-type(-n+2){padding-top:26px}
  .menu .takeout{grid-column:1 / -1}
}

@media print{
  .menu .catnav{display:none}      /* 紙では飛べない */
}