/* スマートフォン幅のヘッダーをメニューボタンにする版（NAV-4）。ビルドフラグ --header-menu on（既定）のときだけ書き出され、site.css のあとに読まれる。
  根拠: NAV-4・NAV-7、依頼者の回答（2026-11-04・2026-11-05、aliz-corporate-web-spec#13）で既定。spec 本体の更新待ち。NAV-7 の「幅 360 px 以下で 3 リンクが折り返さない」は
  この作りでは当てはまらない（リンクは 2 つがメニューの中）。--header-menu off で従来の 3 リンク 2 段に戻せる。
  構造: <nav> の中が [メニューボタン][popover（できること・進め方 / について）][相談する]。「相談する」は常にヘッダーに見えたまま（NAV-2）。
  JS なし（PERF-4・TOP-6）。開閉・Esc・外側の押下で閉じる・フォーカスの戻りは popover 属性の標準の動き。
  popover 非対応のブラウザ: @supports selector(:popover-open) の外は何も変えず、リンクを今までどおり 3 つ並べる（site.css の 108 px の 2 段）。 */
:root {
  /* メニュー版のヘッダーの高さ（唯一の定義）。1 段（ロゴ・メニュー・相談する）。デスクトップの --header-h と同じ値。
    --scroll-pad-top・.wrap・.skip:focus は --header-h を参照して追従する（NAV-3）。
    文字 200% で折り返して高くなる分は --header-h に入れず、開いたパネルだけが anchor() で実際のヘッダーに追従する（TASK-54-3） */
  --header-h-menu: 64px;
  /* メニュー版の幅 360 px 以下の「相談する」の文字（唯一の定義。差し替えはこの 1 行）。site.css の --nav-fs-narrow（12 px）は 3 リンクの作り用で、
    そちらは 12.3 px までしか NAV-7 を満たさず「少し大きく」にならないため上げない。ここは下の @media＋@supports の中でだけ --nav-fs-narrow を上書きする。
    根拠: PoC-12 論点 9 の依頼者の回答（2026-11-06。「12 px より少し大きく」）、TYPE-11（検討中。決定 ID なし）、NAV-7、#1722。13 px は制作側の測定による選択【提案】で、
    361〜520 px の「相談する」・メニューボタンと同じ段（--fs-s）。測定は docs/records/task-106-inspection.md の TASK-106-10 の 9 */
  --nav-fs-narrow-menu: var(--fs-s);
}
/* 広い幅（および非対応）: ボタンは出さず、箱は無いものとして中のリンクを今までの位置に出す */
.menu-btn { display: none; }
/* popover の UA 既定（color: CanvasText の黒・枠）を打ち消し、リンクの色を基本色のままにする（SHAPE-4。check/palette.mjs が検出） */
.menu-pop { display: contents; color: inherit; border: 0; padding: 0; margin: 0; background: transparent; }

@media (max-width: 520px) {
  @supports selector(:popover-open) {
    :root { --header-h: var(--header-h-menu); --nav-fs-narrow: var(--nav-fs-narrow-menu); }
    .site-nav { width: auto; justify-content: flex-end; flex-wrap: nowrap; gap: 0 var(--u); }
    /* 押せる範囲は 44 px 四方以上（A11Y-3）。文字は幅 361〜520 px では「相談する」と同じ段。幅 360 px 以下の「相談する」は --nav-fs-narrow（上で --nav-fs-narrow-menu に上書き。TYPE-11 検討中）で、メニューボタンは幅によらずここの --fs-s */
    .menu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); min-width: var(--target-min);
      padding: 0 var(--u); font: inherit; font-size: var(--fs-s); color: var(--ink); background: transparent;
      border: 1px solid var(--sub); border-radius: var(--radius-pill); cursor: pointer; }
    /* A11Y-8: ホバーで灯る背景はフォーカスでも同じ値で灯る（輪は全体の :focus-visible。A11Y-10）。
    文字の背景は不透明な --bg のまま、灰は不透明度の層として重ねる（GLASS-2・SHAPE-4。相談ボタンの hover と同じ作り。混色の不透明な色は新しい色になる） */
    .menu-btn:hover, .menu-btn:focus-visible, .menu-btn:has(+ .menu-pop:popover-open) { background: linear-gradient(var(--glass-hover), var(--glass-hover)), var(--bg); }
    /* 開いたパネル: ヘッダーの直下・右寄せ。面は不透明な白と縁（--glass-edge）。.glass は足さない（GLASS の 4 種を増やさない。GLASS-1・GLASS-2） */
    .menu-pop { display: none; position: fixed; inset: var(--header-h) max(16px, env(safe-area-inset-right, 0px)) auto auto; margin: 0;
      width: min(18rem, calc(100vw - 32px)); padding: var(--u); border: 0; border-radius: var(--radius-m);
      background: var(--bg); color: var(--ink); box-shadow: var(--glass-edge); overflow: visible; }
    .menu-pop:popover-open { display: flex; flex-direction: column; }
    /* NAV-5・TASK-50-2: popover は top layer に出るので z-index では .skip を手前にできない。スキップリンクのフォーカス中だけ開いているパネルを隠す。
      JS で閉じない（PERF-4）ので開閉の状態は変わらず、フォーカスが離れればパネルは再表示される。NAV-4 は検討中のため、メニューの作りが変わったら見直す */
    body:has(> .skip:focus) .menu-pop:popover-open { visibility: hidden; }
    /* NAV-2・NAV-11（検討中）・TASK-54-3: 文字を 200% にするとヘッダーが折り返して --header-h（64px）より高くなり、パネルの上端がヘッダーの 2 段目に重なって
      「相談する」の中心を覆う。パネルの上端を実際のヘッダーの下端（anchor positioning）に合わせ、高さの係数・折り返しの段数に依存しないようにする。
      非対応のブラウザは上の inset のまま（重なりが残る。閉じた状態の到達には影響しない）。JS は足さない（PERF-4）。方式の選定は docs/records/task-54-inspection.md */
    @supports (top: anchor(bottom)) {
      .site-header { anchor-name: --site-header; }
      .menu-pop { top: anchor(--site-header bottom); }
    }
    .menu-pop a { display: flex; width: 100%; min-height: var(--target-min); padding: 0 var(--u); font-size: var(--fs-m); border-radius: var(--radius-s); }
  }
}