/* ==========================================================================
   Japan Eat Guide — header/nav design-system skin (2026-10-18, step B)

   This file does NOT touch layout, positioning, breakpoints or any of
   jeg-nav.css's hard-won structural fixes (hamburger relocation, drawer
   scroll handling, etc.) -- see jeg-nav.css's own comments for why those
   exact mechanics matter. It only overrides colors / fonts / radius on the
   SAME existing class names, using design-system/tokens.css variables, so
   the existing (JS-driven, tested) nav looks like the new design system
   without any behavior change. Loaded after jeg-nav.css so these rules win
   on equal specificity.

   Color-coding note: the old palette used #1F3A5F (a blue) for the "Area"
   tab group. design-system/README.md explicitly bans blue ("青と灰色は
   食欲を落とすので、面にも文字にも使わない"), so Area is remapped to
   var(--info) (purple, the token the README itself earmarks for
   "言語・案内" / navigation-guidance use). Cuisine keeps its red (now
   var(--brand)) and Traveler keeps its green (now var(--accent)) --
   both already map cleanly onto existing tokens.
   ========================================================================== */

/* ---- logo (functions.php's swell_parts_head_logo filter now outputs
   design-system's native .jeg-logo classes directly -- see that filter's
   comment). The old .jeg-nav-logo-mark was a 34px circular badge that got an
   explicit smaller size inside SWELL's sticky mini-header (.l-fixHeader); the
   new .jeg-logo__kanji is plain colored text with no badge shape (per
   design-system/README.md's Logo section), so the equivalent sticky-header
   scale-down is a smaller font-size instead of smaller width/height. ---- */
.l-fixHeader .jeg-logo__kanji { font-size: 24px; }
.l-fixHeader .jeg-logo__latin { font-size: 13px; }

/* ---- gnav root row ---- */
.jeg-gnav {
	font-family: var(--font-sans);
}

/* ---- desktop tabs ---- */
.jeg-nav-tab-btn {
	font-family: var(--font-sans);
	color: var(--ink);
}
.jeg-nav-tab-btn.-area[aria-expanded="true"]     { color: var(--info); border-bottom-color: var(--info); }
.jeg-nav-tab-btn.-cuisine[aria-expanded="true"]  { color: var(--brand-strong); border-bottom-color: var(--brand-strong); }
.jeg-nav-tab-btn.-traveler[aria-expanded="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- desktop dropdown panel ---- */
.jeg-nav-panel-inner {
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
}
.jeg-nav-card {
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-left: 3px solid transparent;
	border-radius: var(--radius-md);
}
.jeg-nav-card.-area     { border-left-color: var(--info); }
.jeg-nav-card.-cuisine  { border-left-color: var(--brand-strong); }
.jeg-nav-card.-traveler { border-left-color: var(--accent); }
.jeg-nav-card.-cuisine,
.jeg-nav-card.-traveler { color: var(--ink); font-family: var(--font-sans); }
.jeg-nav-card-title { color: var(--ink); font-family: var(--font-sans); }
.jeg-nav-card-count { color: var(--ink-muted); font-family: var(--font-sans); }
.jeg-nav-viewall { font-family: var(--font-sans); }
.jeg-nav-viewall.-area     { color: var(--info); }
.jeg-nav-viewall.-cuisine  { color: var(--brand-strong); }
.jeg-nav-viewall.-traveler { color: var(--accent); }

/* ---- desktop + drawer language switcher (design-system .jeg-seg, positioned
   to match the old .jeg-nav-langs.-desktop/-drawer placement) ---- */
.jeg-seg.-desktop { flex-shrink: 0; margin-left: 20px; }
.jeg-seg.-drawer { margin: 18px 20px 20px; width: fit-content; flex-shrink: 0; }

/* ---- hamburger (hover/active state only; position/display untouched) ---- */
.jeg-nav-hamburger:active { background: var(--surface-300); }

/* ---- breadcrumb (SWELL's own .p-breadcrumb*, see single-restaurant.php's
   docblock for the existing visibility/overflow fixes -- skinned only,
   not restructured, for the same reason as the nav/drawer above) ---- */
.p-breadcrumb__list { font-family: var(--font-sans); font-size: 13px; color: var(--ink-muted); padding: var(--space-2) 0; }
.p-breadcrumb__item a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.p-breadcrumb__item:last-child .p-breadcrumb__text { color: var(--ink-muted); }

/* ---- mobile drawer ---- */
.jeg-nav-drawer-overlay { background: rgba(46, 33, 25, 0.45); } /* derived from --ink, kept as rgba since tokens.css has no translucent overlay token */
.jeg-nav-drawer-panel { background: var(--surface-200); }
.jeg-nav-drawer-head { border-bottom: 1px solid var(--line); }
.jeg-nav-acc { border-bottom: 1px solid var(--line); }
.jeg-nav-acc-btn { font-family: var(--font-sans); color: var(--ink); }
.jeg-nav-acc-btn .jeg-nav-chev { color: var(--ink-muted); }
.jeg-nav-acc-btn.-area[aria-expanded="true"]     { color: var(--info); }
.jeg-nav-acc-btn.-area[aria-expanded="true"] .jeg-nav-chev     { color: var(--info); }
.jeg-nav-acc-btn.-cuisine[aria-expanded="true"]  { color: var(--brand-strong); }
.jeg-nav-acc-btn.-cuisine[aria-expanded="true"] .jeg-nav-chev  { color: var(--brand-strong); }
.jeg-nav-acc-btn.-traveler[aria-expanded="true"] { color: var(--accent); }
.jeg-nav-acc-btn.-traveler[aria-expanded="true"] .jeg-nav-chev { color: var(--accent); }
.jeg-nav-acc-link { font-family: var(--font-sans); color: var(--ink-muted); }
.jeg-nav-acc-link.-area.-viewall     { color: var(--info); }
.jeg-nav-acc-link.-cuisine.-viewall  { color: var(--brand-strong); }
.jeg-nav-acc-link.-traveler.-viewall { color: var(--accent); }

/* 2026-10-27（スマホ確認）: 上の .p-breadcrumb__list の padding で .l-container の左右余白が
   0になり、コンテナ幅いっぱいになる画面幅（〜1327px）ではパンくずが画面端に貼り付いていた。
   PC（1328px以上）は従来どおり。 */
@media (max-width:1327px) {
  .p-breadcrumb__list { padding-left: 16px; padding-right: 16px; }
}

/* 2026-10-28（心さん「修正してください」）: SWELL標準の投稿・カテゴリー一覧（黒門市場の記事など）に
   残っていた10〜11pxの日付・カテゴリー表示を12px以上に、押しにくい小さなリンクを押しやすくする。 */
.c-postTimes__posted, .c-postTimes__modified, .c-postThumb__cat { font-size: 12px; }
.c-categoryList__link { font-size: 13px; padding: 8px 14px; }
a.p-breadcrumb__text { min-width: 28px; justify-content: center; }

/* 2026-10-29: ヘッダーの虫眼鏡で開く検索モーダル（SWELL標準）をサイトのデザインに揃える。
   画面中央に小さく浮いていた入力欄を、上寄せ・大きめ・角丸にし、16px以上でiOSの自動ズームを防ぐ。 */
.p-searchModal .c-overlay { background: rgba(43, 36, 32, .72); }
.p-searchModal__inner, .p-searchModal.is-opened > .p-searchModal__inner { top: 12vh; transform: translateX(-50%); left: 50%; width: min(640px, calc(100vw - 32px)); max-width: none; padding: 24px; background: var(--surface-200, #fffdf8); border-radius: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.p-searchModal .c-searchForm { display: flex; gap: 8px; }
.p-searchModal .c-searchForm__s { height: 56px; padding: 0 16px; font-size: 16px; font-family: var(--font-sans); border: 1px solid var(--line-strong, #cbbfae); border-radius: 12px; background: #fff; color: var(--ink, #2e2119); }
.p-searchModal .c-searchForm__submit { position: relative; flex: none; width: 56px; height: 56px; border-radius: 12px; font-size: 20px; background: var(--brand, #b8432b) !important; }
.p-searchModal .c-modal__close { position: static; margin-top: 12px; color: var(--ink-muted, #7a7064); font-size: 14px; text-shadow: none; }

/* 2026-10-29: 通常投稿（single.php）ではSWELLがパンくず末尾の記事名を隠し「ホーム › 大阪 ›」で途切れて見えていた。ハブ記事と同じく表示する。 */
.single-post .p-breadcrumb__item:last-child, .single-post .p-breadcrumb__item:last-child > span.p-breadcrumb__text { display: inline !important; white-space: normal; }