/* =============================================
   Lim Modular Studio — nav.css
   固定ヘッダー・スクロール時の挙動
   ============================================= */

/* 背景を画面幅いっぱいに広げるためのラッパー */
.nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* スクロール時: 影・ボーダーを追加 */
.nav-wrapper.scrolled {
  box-shadow: 0 1px 24px rgba(62, 56, 73, 0.08);
  border-bottom: 0.5px solid var(--border-light);
}

/* navはコンテンツ幅で中央寄せ — 位置は変わらない */
.nav {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Heroセクションのtop paddingをnavの高さ分確保 */
.hero {
  padding-top: 68px;
}

/* 全セクション共通 — Heroは個別管理なので除外 */
section:not(#hero) {
  min-height: 90vh;
  scroll-margin-top: 68px;
  position: relative;
  z-index: 1;
  background: transparent; /* Heroの上に被さるために背景色必須 */
}
section:not(#hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

/* =============================================
   ハンバーガーボタン（│MENU 形式）
   ============================================= */
.nav-toggle {
  position: relative;
  display: none;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 14px;
  z-index: 110;
}

/* 縦線 │ */
.nav-toggle-bar {
  width: 2px;
  height: 58px;
  background: var(--text-primary);
  display: block;
}

/* MENU / ✕ テキスト */
.nav-toggle-text {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  min-width: 3.5em;       /* MENU↔CLOSEで幅がブレないよう固定 */
  text-align: center;
  transition: opacity 0.25s ease;
}
.nav-toggle.is-open .nav-toggle-text {
  opacity: 0;   /* 開いたらMENU文字を消す */
}

/* ✕（線2本）— 普段は隠れてる */
.nav-toggle-cross {
  position: absolute;
  top: 50%;
  right: 25px;               /* ← 右からの位置で調整 */
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  opacity: 0;            /* 普段は見えない */
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.nav-toggle-cross span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  /* background: #fff; */
  background: var(--text-primary);
  border-radius: 2px;
  transition: top 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
/* 上の線：中央より少し上に配置 */
.nav-toggle-cross span:nth-child(1) {
  top: 35%;
}
/* 下の線：中央より少し下に配置 */
.nav-toggle-cross span:nth-child(2) {
  top: 65%;
}
/* 開いた時：上の線は下へ移動しつつ回転、下の線は上へ移動しつつ回転 */
.nav-toggle.is-open .nav-toggle-cross span:nth-child(1) {
  top: 50%;                              /* 中央へ寄る */
  transform: rotate(45deg);              /* 回転 */
}
.nav-toggle.is-open .nav-toggle-cross span:nth-child(2) {
  top: 50%;                              /* 中央へ寄る */
  transform: rotate(-45deg);
}

/* 開いてる時：フワッと現れwhile回転して✕になる */
.nav-toggle.is-open .nav-toggle-cross {
  opacity: 1;
  transition: opacity 0.5s ease 0.2s;   /* 開く時だけディレイ */
}

/* =============================================
   タブレット・スマホ（1023px以下）
   ============================================= */
@media (max-width: 1023px) {
  .nav-toggle {
    display: flex;
  }
  .nav-wrapper {
    padding-top: env(safe-area-inset-top);
  }
  .nav {
    max-width: 100%;
    box-sizing: border-box;
    /* padding: 8px; */
    padding: 0;
  }
  .nav-logo {
    margin: 8px 1rem;
  }

  /* --- 全画面メニュー --- */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;               /* ← 全画面化 */
    width: 100%;
    height: 100dvh;          /* ← 全画面化 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* ← 縦中央 */
    align-items: center;     /* ← 横中央 */
    gap: 8px;
    background: var(--accent-hover);

    /* 下から せり上がる */
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease;
    overflow: visible;
    z-index: 105;            /* ボタン(110)より下、他より上 */
  }

  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* --- メニュー項目 --- */
  .nav-links li {
    width: auto;
    text-align: center;
  }

  .nav-links a {
    display: block;
    padding: 14px 0;
  }

  /* 英語表記を main-heading と同じフォント・大きめに、白抜き */
  .nav-links li span.txt-en {
    font-family: var(--font-sansEn);   /* main-headingと同じ */
    font-size: 22px;                   /* 大きめ。お好みで */
    font-weight: 580;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-transform: capitalize;
  }

  /* 日本語表記は隠す */
  .nav-links li span.txt-jp {
    display: none;
  }

  /* ホバー演出（せり上がり）は無効化 */
  .nav-links li span {
    position: static;
    transform: none;
    transition: none;
  }
  /* ホバーでメニュー文字消さない（PC確認時の誤動作防止） */
  .nav-links li:hover span.txt-en {
    opacity: 1!important;
    transform: none!important;
    color: #fff;
  }

  /* タップした瞬間だけ、軽く色変化（タッチのフィードバック） */
  .nav-links a:active span.txt-en {
    color: var(--accent);
  }
}