/* =====================================================================
   lisas atelier ― ナビ（nav/style.css）
   ナビ担当。上に固定の帯・メニュー（ハンバーガー）・画面下の「DM で相談する」。
   - 形は base.css のクラスを使う（.wrap・.logo・.logo-flower・.logo-accent・.shortcuts・.shortcut・
     .btn・.btn--dm・.btn--lg・.btn--block・.btn-icon・.btn-icon--outline・.link・.sr-only）。
   - ここに書くのは base.css にない形だけ。クラスの頭は nav-。値は tokens.css の変数だけ。
   - 説明は README.md。決まりは design.md「15. 固定の部分」「17. ライト／ダーク」「18. ロゴ」。
   ===================================================================== */

/* ---------- 0. 本文へ移動（キーボードで最初に出る。ふだんは見えない） ---------- */
.nav-skip {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-menu);
}
.nav-skip:not(:focus) {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ---------- 1. 上に固定の帯（高さは --nav-h：iPhone 92px＝ロゴの段48＋近道の段44／PC 64px の1段） ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: var(--color-bg);
  color: var(--color-text);
}
/* スクロールしたら出る下の線。帯の外（すぐ下）に引くので、帯の高さは変わらない */
.nav::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.nav[data-scrolled]::after { opacity: 1; }

/* 中身の並び（.wrap と同じ幅）。iPhone：1段目 ロゴ｜ライト／ダーク・メニュー、2段目 近道 */
.nav-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: calc(var(--nav-h) - var(--tap)) var(--tap);
  grid-template-areas:
    "logo actions"
    "short short";
  align-items: center;
  height: 100%;
}
/* 横向きの iPhone（切り欠き）では、切り欠きの内側に入れる */
.nav-bar,
.nav-menu-row {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* 文字のロゴ（.logo）。押せる高さを 44px 以上にする（design.md 18.）。
   中は <span>（花・LISA’S・ATELIER）と、読み上げだけの「（トップへ戻る）」。
   縦に並べるのは、日本語の名前（.logo-ja）を置くことになったとき（Q7 の答えのあと）にそのまま下に入るように */
.nav-logo {
  grid-area: logo;
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--tap);
}

.nav-shortcuts { grid-area: short; }
/* 2文字の近道（料金・流れ）も、押せる幅を 44px 以上にする（base.css の .shortcut には幅の下限がないため） */
.nav-shortcuts .shortcut { min-width: var(--tap); }

/* 右の丸いボタン（ライト／ダーク・メニュー。design.md 17.）。メニューは細い線の丸（.btn-icon--outline）。
   線の丸の右の端を、左右の余白の線より --space-2 だけ外に出す（共通ルールの見本 mock/common-rules.html の上の帯と同じ位置） */
.nav-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-right: calc(var(--space-2) * -1);
}

/* ライト／ダーク：ダークのときは ◐ の向きが変わる（色だけで伝えない） */
.nav-theme svg { transition: transform var(--dur-base) var(--ease-out); }
.nav-theme[aria-pressed="true"] svg { transform: rotate(180deg); }

/* ---------- 2. メニュー（ハンバーガー）：画面いっぱい ---------- */
.nav-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 0 calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-y: auto;
  overscroll-behavior: contain;   /* メニューの中のスクロールを後ろの画面へ伝えない */
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out);
}
.nav-menu[data-state="open"] {
  opacity: 1;
  transition-timing-function: var(--ease-out);
}
.nav-menu::backdrop { background: transparent; }  /* 画面いっぱいなので後ろは暗くしない */

/* メニューの上の段：ロゴと「閉じる」。帯の1段目と同じ高さ・同じ位置（≡ と × が同じ場所）。線は画面の幅いっぱい */
.nav-menu-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-border);
}
.nav-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  height: calc(var(--nav-h) - var(--tap));
}
.nav-menu-row .nav-logo,
.nav-menu-row .nav-actions { grid-area: auto; }

.nav-menu-body {
  padding-top: var(--space-5);
  transform: translateY(var(--space-2));
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-menu[data-state="open"] .nav-menu-body { transform: none; }

/* 項目は1行ずつ（高さ --btn-h-lg・--fs-base・区切りは --color-border の線） */
.nav-menu-list { border-top: 1px solid var(--color-border); }
.nav-menu-list > li { border-bottom: 1px solid var(--color-border); }
.nav-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--btn-h-lg);
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-btn);
  text-decoration: none;
}
.nav-menu-link svg {
  flex: none;
  width: var(--icon);
  height: var(--icon);
  color: var(--color-text-sub);
}
.nav-menu-link[aria-current="true"] { font-weight: var(--fw-bold); }
@media (hover: hover) {
  .nav-menu-link:hover { color: var(--color-accent-text); }
}

/* 外へ出るもの：Instagram の DM へ直接（.btn .btn--dm）と Instagram（.link） */
.nav-menu-out {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.nav-menu-out .link svg {
  flex: none;
  width: var(--icon);
  height: var(--icon);
}

/* メニューを開いている間、後ろの画面をスクロールさせない（<html> に付ける。帯の sticky はそのまま） */
html.nav-lock { overflow: hidden; }

/* ---------- 3. 画面下の「DM で相談する」（.btn .btn--dm .btn--lg。帯は作らず、浮いた丸いボタン1つ） ---------- */
/* .nav-cta はボタンの「いつもの場所」（動かない・押せない枠）。隠すときに動くのは中の .nav-cta-move */
.nav-cta {
  position: fixed;
  z-index: var(--z-cta);
  left: 0;
  right: 0;
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  width: -webkit-fit-content;
  width: fit-content;
  max-width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
  pointer-events: none;
}
.nav-cta-move {
  display: flex;   /* ボタンの高さ（52px）がそのまま枠の高さになる */
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s;
}
.nav-cta .btn {
  pointer-events: auto;
  box-shadow: var(--shadow-2);
}
.nav-cta[data-hidden] .nav-cta-move {
  opacity: 0;
  transform: translateY(var(--space-2));
  visibility: hidden;   /* 隠れている間は押せない・読み上げない */
  transition:
    opacity var(--dur-base) var(--ease-in-out),
    transform var(--dur-base) var(--ease-in-out),
    visibility 0s linear var(--dur-base);
}
.nav-cta[data-instant] .nav-cta-move { transition: none; }  /* 読み込んだ直後は動かさずに決める */

/* ---------- 4. PC・タブレット（768px〜）：帯は1段（64px）。下のボタンは右下 ---------- */
@media (min-width: 768px) {
  .nav-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: var(--nav-h);
    grid-template-areas: "logo short actions";
    column-gap: var(--space-4);
  }
  .nav-shortcuts { justify-self: end; }

  .nav-menu-row { height: var(--nav-h); }

  .nav-cta {
    left: auto;
    right: max(var(--gutter), env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    margin: 0;
  }
}