/* ============================================================
   仕上げパッチ v33 ・ モバイルナビ修正（クリーン版）
   設計方針:
   ・ transform/var計算に依存しない確実な開閉
   ・ 閉時は必ず画面外、開時はドロワー内に正しく配置
   ・ 既存レイアウトには一切干渉しない（ナビ関連のみ）
   ============================================================ */
@media (max-width: 980px) {

  /* ヘッダー：モバイルは不透明で視認性確保（透け防止） */
  header.site-header {
    background: #14110f !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(243,237,225,0.12) !important;
    z-index: 1000 !important;
  }
  header.site-header .brand,
  header.site-header.scrolled .brand { color: #f3ede1 !important; }
  header.site-header .brand-en,
  header.site-header.scrolled .brand-en { color: #b8b2a6 !important; }
  header.site-header .menu-toggle,
  header.site-header.scrolled .menu-toggle { color: #f3ede1 !important; }
  header.site-header.scrolled { background: #14110f !important; }

  /* ───── ドロワー本体 ─────
     上端をヘッダー直下(74px)に固定。閉時は translateY(-150%) で完全に画面外。 */
  nav.primary {
    position: fixed !important;
    top: 74px !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 74px) !important;
    max-height: calc(100dvh - 74px) !important;
    margin: 0 !important;
    padding: 0 0 32px !important;
    background: #14110f !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 24px 48px rgba(0,0,0,0.5) !important;
    border-bottom: 1px solid rgba(243,237,225,0.12) !important;
    transform: translateY(-150%) !important;
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1) !important;
    z-index: 998 !important;
    visibility: hidden;
  }
  nav.primary.open {
    transform: translateY(0) !important;
    visibility: visible;
  }
  header.site-header.scrolled nav.primary { background: #14110f !important; }

  /* メニュー項目 */
  nav.primary a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 17px 16px !important;
    margin: 0 !important;
    font-size: 16px !important;
    color: #f3ede1 !important;
    border-bottom: 1px solid rgba(243,237,225,0.08) !important;
  }
  header.site-header.scrolled nav.primary a { color: #f3ede1 !important; }
  nav.primary a:last-child { border-bottom: none !important; }
  nav.primary a.active { color: #a83128 !important; }
  nav.primary a.active::after { display: none !important; }

  /* ───── 言語スイッチャー ─────
     閉時は display:none で完全に消す（中途半端な表示を根絶）。
     開時のみドロワー先頭に挿入表示。
     ※既存の #mobile-lang-fix 等に確実に勝つため詳細度を最大化 */
  
  /* 開時：言語バーを表示し、ドロワー本文はその分下げる */
  
  body.nav-open nav.primary {
    padding-top: 60px !important;        /* 言語バー(約58px)の逃げ */
  }

  /* トグルボタン（三 ⇔ ×） */
  .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative; z-index: 1001;
    font-size: 22px !important;
    background: none !important; border: none !important;
    cursor: pointer;
  }
  .menu-toggle .mt-close { display: none; }
  .menu-toggle[aria-expanded="true"] .mt-open { display: none; }
  .menu-toggle[aria-expanded="true"] .mt-close { display: inline; }

  /* 暗幕（メニュー外タップで閉じる） */
  .nav-scrim {
    position: fixed; inset: 0; z-index: 990;
    background: rgba(20,17,15,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.38s ease;
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  /* 展開中はFABを隠す */
  body.nav-open .kogetsu-fab-wrapper { opacity: 0 !important; pointer-events: none !important; }
}

/* デスクトップでは言語スイッチャー・ドロワーを元の挙動に戻す保険 */
@media (min-width: 981px) {
  nav.primary { transform: none !important; visibility: visible !important; }
}

/* スクロールロック（全幅共通） */
body.nav-open { overflow: hidden !important; }

/* フォーカス可視化（アクセシビリティ） */
a:focus-visible, button:focus-visible {
  outline: 2px solid #a83128; outline-offset: 3px;
}