/* ===== HISTORY の下に Ombre Guide / Derby JKT Guide を出すナビ（2026-10-09） =====
   PC: HISTORY に触れると（キーボードは focus でも）下に2項目が開く。
   スマホ: メニューの HISTORY の下に小さく2項目を常に並べる。
   style.css は1日キャッシュされるため、新しいファイルに分けている。 */
.global-nav .nav-sub { position: relative; display: inline-flex; align-items: center; }
.global-nav .nav-sub-menu {
  position: absolute; top: 100%; left: 50%;
  display: flex; flex-direction: column; align-items: stretch;
  min-width: max-content;
  padding: 14px 0 8px;           /* 上 14px はマウスが HISTORY から下りるときの橋渡し */
  background: linear-gradient(to bottom, transparent 0 8px, rgba(244, 240, 230, 0.98) 8px);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 300;
}
.global-nav .nav-sub-menu::before {
  content: ""; position: absolute; inset: 8px 0 0;
  border: 1px solid var(--color-border, #dad3c4);
  box-shadow: 0 6px 18px rgba(44, 40, 32, 0.08);
  pointer-events: none;
}
.global-nav .nav-sub:hover .nav-sub-menu,
.global-nav .nav-sub:focus-within .nav-sub-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.global-nav .nav-sub-menu a {
  position: relative;
  display: block; padding: 8px 20px;
  font-size: 0.66rem; text-align: left;
}
.global-nav .nav-sub-menu a:hover { background: rgba(44, 40, 32, 0.04); }

/* スマホのメニュー: HISTORY の子として小さく並べる */
.mobile-nav > * { flex-shrink: 0; }                 /* 項目が増えても潰さない */
.mobile-nav a.nav-sub-item {
  font-size: 0.72rem;
  color: var(--color-text-sub, #8a8072);
  border-bottom: none;
  padding-top: 4px; padding-bottom: 4px;
  margin-top: -10px;                                /* 親（HISTORY）との間を詰める */
}
.mobile-nav a.nav-sub-item::before { content: "— "; }
.mobile-nav a:has(+ a.nav-sub-item) { border-bottom: none; }   /* HISTORY と子の間に線を引かない */
.mobile-nav a.nav-sub-item--last {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border, #dad3c4);
}
@media (hover: none) and (pointer: coarse) {
  .mobile-nav a.nav-sub-item { min-height: 36px; }
}
/* 小さい画面で項目が画面に収まらないときは、上下を切らずにスクロールさせる
   （中央寄せは auto の余白で行う＝はみ出すときは上から並ぶ） */
@media (max-width: 480px) {
  .mobile-nav { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mobile-nav > a:first-of-type { margin-top: auto; }
  .mobile-nav > :last-child { margin-bottom: auto; }
}