/* =============================================================
   layout/navigation.css — グローバルナビ（media 属性なし = all）
   -------------------------------------------------------------
   出典: 上流 components.css の Navigation ブロック（生成物）。手で編集しない。
   上流との差は position の 1 行だけ（下のコメント参照）。
   ============================================================= */

.global-nav {
  /* sticky は absolute 配置するモバイルメニューの包含ブロックも兼ねる。
     上流は relative ＋ 各ページ <style> の sticky 上書きだが、テーマでは 1 か所へ統合する。 */
  position: sticky; top: 0; z-index: 20;
  /* ロゴとメニューを 1 つの塊にして、画面の中央に寄せる（2026-09-11 確定）。
     項目の間隔はすべて --space-xl(32px) で、ロゴとメニューの間も同じ。
     apple.com の space-between は採らない —— あれは 14 項目あって初めて 20〜30px に詰まる配置で、
     4 項目で同じことをすると 1 か所 179px 空く。**項目数が違う以上、列幅を合わせても間隔は揃わない**。 */
  display: flex; align-items: center; justify-content: center; gap: var(--space-xl);
  height: var(--tap-target-min);
  /* apple.com 実測: バーは全幅だが、中身は 1024px の列に中央寄せ（左右 22px）。
     余分なラッパを増やさずに padding で中央の列を作る。
     塊は列の中央に置き、左右どちらの端にも接しないので、この幅は「塊が広がれる上限」として効く。 */
  padding: 0 max(var(--inset-chrome-inline), calc((100% - var(--content-max-nav)) / 2));
  /* apple.com 実測: 既定は「明」。ほぼ白の半透明 + backdrop blur で下のタイルが透ける。
     不透明な黒ではないし、暗テーマでもない（暗は .global-nav.is-dark） */
  background: var(--color-nav-scrim); color: var(--color-nav-link);
  backdrop-filter: var(--backdrop-frosted);
  -webkit-backdrop-filter: var(--backdrop-frosted);
}

/* 暗バリアント（ナビが暗いタイルの上に来るページでのみ付ける） */
.global-nav.is-dark { background: var(--color-nav-scrim-dark); color: var(--color-nav-link-dark); }

.global-nav.is-dark a { color: var(--color-nav-link-dark); }

.global-nav.is-dark .brand-logo-nav { filter: none; }

/* ロゴとメニューを「等間隔にひと続き」で並べるために、**.nav-links を display:contents にして
   中のリンクを .global-nav 直下の項目へ昇格させる**（2026-09-11）。
   こうすると .global-nav の gap 1 つが［ロゴ］［4 項目］すべての間隔になり、
   ロゴとメニューの間だけ違う値、という状態が起きない（マークアップは変えない）。
   <=833px では下のバンド節が display を flex（トレイ）へ戻す。 */
.global-nav .nav-links { display: contents; }

/* ハンバーガー: 既定は非表示。<=833px のバンドで、かつ JS が走ったときだけ現れる
   （.nav-collapsible は design/navigation.js が付ける。DESIGN-apple.md {component.global-nav}）。

   JS が無い環境では畳まないので、押しても何も起きないボタンを出さない。 */
.global-nav .nav-burger {
  display: none; width: var(--tap-target-min); height: var(--tap-target-min);
  margin-left: auto; flex-direction: column; justify-content: center;
  align-items: center; gap: var(--space-xxs); padding: 0; border: 0;
  background: transparent; color: inherit; cursor: pointer;
  transition: transform .1s ease;
}

.global-nav .nav-burger:active { transform: scale(0.95); }

.global-nav .nav-burger:focus-visible { outline: var(--stroke-focus) solid var(--color-primary-on-dark); }

.global-nav .nav-burger span { display: block; width: var(--space-lg); height: var(--stroke-hairline); background: currentColor; }

.global-nav a {
  color: var(--color-nav-link);
  font: var(--type-nav-link); letter-spacing: var(--tracking-nav);
}

/* apple.com は space-between で全項目を均等に散らす。右寄せ用の auto マージンは使わない */
.global-nav .spacer { margin-left: 0; }

.brand-logo { width: auto; display: block; }

/* Apple のロゴは fill:currentColor の SVG で面の明暗に追従する。ここは PNG なので、
   明るいナビの上で白ロゴが消えないよう明度を落として代用する（フッタと同じ扱い）。 */
.brand-logo-nav { height: var(--size-logo-nav); filter: grayscale(1) brightness(0.2); }

/* ヒーローのコピー（見出し＋サブヘッド）の下に置くブランドマーク。
   PNG の透過をそのまま活かし、地（板・枠・影）を一切敷かずに写真へ直接重ねる。
   ナビ・フッタは小さな刻印なので明度を落として文字列に馴染ませるが、
   **ヒーローだけは filter を掛けず元画像の色のまま出す**（2026-09-11 決定）——
   ここはロゴを「ロゴとして」見せる場所で、44px あれば元の色でも沈まない。 */
.brand-logo-hero {
  height: var(--size-logo-hero);
  margin: var(--space-lg) auto 0;
}

/* アンカーで飛んだ先が sticky なナビの下に潜らないようにする。
   逃がす量は「上に貼り付いているものの高さ」= global-nav 44px（＋ sub-nav 52px）。
   sub-nav を持つページだけ 2 段ぶん逃がす（DESIGN-apple.md {component.sub-nav-frosted}）。 */

:is(.tile-photo, .tile-utility)[id] { scroll-margin-top: var(--tap-target-min); }

body:has(.sub-nav-frosted) :is(.tile-photo, .tile-utility)[id] {
  scroll-margin-top: calc(var(--tap-target-min) + var(--size-sub-nav));
}

/* CTA は .links の外に置く。中に入れると (1) 帯のリンク色 --color-ink が青地の上まで塗られて
   コントラスト約 3.0:1 になり、(2) sp でリンク列を横スクロールにしたとき CTA まで流れてしまう。
   構造で分けておけば、どちらも規則を足さずに解決する（DESIGN-apple.md {component.sub-nav-frosted}）。 */