/* ============================================
   nav.css — ヘッダー・ハンバーガーメニュー
   ============================================ */

/* ── ヘッダー固定 ── */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 4vw, 60px);
  transition: background var(--transition), padding var(--transition);
}

#site-header.scrolled {
  background: rgba(245, 240, 232, 0.96);
  backdrop-filter: blur(8px);
  padding-block: 14px;
  box-shadow: 0 1px 0 rgba(139,115,85,0.15);
}

/* ── ロゴ ── */
.header-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 110;
}

.header-logo-en {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.2em;
  color: var(--c-white);
  transition: color var(--transition);
  line-height: 1;
}

.header-logo-ja {
  font-family: var(--ff-ja);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(250,247,242,0.65);
  transition: color var(--transition);
}

#site-header.scrolled .header-logo-en {
  color: var(--c-ink);
}

#site-header.scrolled .header-logo-ja {
  color: var(--c-ink-light);
}

/* メニューオープン時のロゴ色 */
body.menu-open .header-logo-en {
  color: var(--c-ink) !important;
}

body.menu-open .header-logo-ja {
  color: var(--c-ink-light) !important;
}

/* ── 右側コントロール ── */
.header-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 110;
}

/* ご予約ボタン */
.header-reserve {
  font-family: var(--ff-ja);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-white);
  border: 1px solid rgba(250,247,242,0.6);
  padding: 9px 20px;
  transition: var(--transition);
  white-space: nowrap;
}

.header-reserve:hover {
  background: rgba(250,247,242,0.15);
}

#site-header.scrolled .header-reserve {
  color: var(--c-ink);
  border-color: var(--c-gold);
}

#site-header.scrolled .header-reserve:hover {
  background: var(--c-gold);
  color: var(--c-white);
}

body.menu-open .header-reserve {
  color: var(--c-ink) !important;
  border-color: var(--c-gold) !important;
}

/* ── ハンバーガーボタン ── */
.hamburger {
  width: 36px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  position: relative;
  z-index: 110;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--c-white);
  transition: var(--transition);
  transform-origin: center;
}

.hamburger span:nth-child(2) {
  width: 70%;
  margin-left: auto;
}

#site-header.scrolled .hamburger span {
  background: var(--c-ink);
}

body.menu-open .hamburger span {
  background: var(--c-ink) !important;
}

body.menu-open .hamburger span:nth-child(1) {
  transform: translateY(11.5px) rotate(45deg);
}

body.menu-open .hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

body.menu-open .hamburger span:nth-child(3) {
  transform: translateY(-11.5px) rotate(-45deg);
}

/* ── ドロワーメニュー ── */
#nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--c-bg);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

body.menu-open #nav-drawer {
  opacity: 1;
  pointer-events: all;
}

.nav-inner {
  display: flex;
  gap: clamp(40px, 8vw, 120px);
  align-items: flex-start;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(139,115,85,0.15);
  transition: var(--transition);
}

.nav-item a:hover .nav-ja {
  color: var(--c-gold);
}

.nav-en {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-lt);
  min-width: 90px;
}

.nav-ja {
  font-family: var(--ff-ja);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: 0.12em;
  color: var(--c-ink);
  transition: color var(--transition);
}

/* ドロワー右側 装飾縦書き */
.nav-deco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  opacity: 0.25;
  padding-top: 8px;
}

.nav-deco-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--ff-ja);
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--c-ink);
}

.nav-deco-line {
  width: 1px;
  height: 80px;
  background: var(--c-gold);
  opacity: 0.5;
}

/* メニューアイテムのアニメーション */
.nav-item {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

body.menu-open .nav-item {
  opacity: 1;
  transform: none;
}

body.menu-open .nav-item:nth-child(1) { transition-delay: 0.05s; }
body.menu-open .nav-item:nth-child(2) { transition-delay: 0.10s; }
body.menu-open .nav-item:nth-child(3) { transition-delay: 0.15s; }
body.menu-open .nav-item:nth-child(4) { transition-delay: 0.20s; }
body.menu-open .nav-item:nth-child(5) { transition-delay: 0.25s; }
body.menu-open .nav-item:nth-child(6) { transition-delay: 0.30s; }
body.menu-open .nav-item:nth-child(7) { transition-delay: 0.35s; }
body.menu-open .nav-item:nth-child(8) { transition-delay: 0.40s; }
body.menu-open .nav-item:nth-child(9) { transition-delay: 0.45s; }

/* ── モバイル ── */
@media (max-width: 640px) {
  .nav-inner {
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-inline: 40px;
  }

  .nav-deco {
    display: none;
  }

  .nav-item a {
    gap: 12px;
  }
}