@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

/* ==========================================================================
   Japan Eat Guide - Global Navigation (2026-09-26)
   Design source: canvas NavUpdate.dc.html (Area=#1F3A5F / Cuisine=#A5342B /
   For Travelers=#2F6844 tag color-coding).
   Scope: header logo + gnav only. Does not touch SWELL's own header wrapper,
   fix_header sticky mechanics, or any other template's CSS.
   ========================================================================== */

/* ---- Logo (replaces SWELL's .c-headLogo output via swell_parts_head_logo) ---- */
.jeg-nav-logo { margin: 0; line-height: 1; }
.jeg-nav-logo-link {
	display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.jeg-nav-logo-mark {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
	background: #A5342B; color: #FFFFFF; display: flex; align-items: center;
	justify-content: center; font-family: 'Shippori Mincho', serif;
	font-weight: 700; font-size: 15px; box-sizing: border-box;
}
.jeg-nav-logo-word {
	font-family: 'Shippori Mincho', serif; font-weight: 700; font-size: 14px;
	color: #2A211C; white-space: nowrap;
}
.l-fixHeader .jeg-nav-logo-mark { width: 28px; height: 28px; font-size: 13px; }

/* ---- Root nav row (sits inside #gnav / .l-fixHeader__gnav) ----
   Renamed from .jeg-nav to .jeg-gnav (2026-10-18, design refresh step B): the
   design-system's bundle.css defines its own unrelated `.jeg-nav{display:flex;...}`
   component class, which would otherwise collide with and override this site's
   existing nav row the moment bundle.css loads. Nothing else depends on the old
   bare class name (checked jeg-nav.js: it only ever selects the more specific
   .jeg-nav-tab-btn / .jeg-nav-acc-btn / [data-jeg-hamburger] / etc.), so this
   rename is purely cosmetic and changes no behavior. */
.jeg-gnav {
	display: flex; align-items: center; width: 100%; height: 100%; min-width: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	box-sizing: border-box;
}
.jeg-nav-tabs {
	display: flex; align-items: center; gap: 26px; margin: 0 auto; padding: 0;
	list-style: none; flex: 1 1 auto; justify-content: center; min-width: 0;
}
.jeg-nav-tab { position: relative; }
.jeg-nav-tab-btn {
	display: flex; align-items: center; gap: 5px;
	font-family: inherit; font-size: 13px; font-weight: 700; color: #2A211C;
	background: none; border: 0; padding: 8px 0; cursor: pointer;
	appearance: none; -webkit-appearance: none; box-shadow: none;
	border-bottom: 2px solid transparent; line-height: 1.2;
}
.jeg-nav-tab-btn .jeg-nav-chev { transition: transform .15s ease; flex-shrink: 0; }
.jeg-nav-tab-btn[aria-expanded="true"] .jeg-nav-chev { transform: rotate(180deg); }
.jeg-nav-tab-btn.-area[aria-expanded="true"]     { color: #1F3A5F; border-bottom-color: #1F3A5F; }
.jeg-nav-tab-btn.-cuisine[aria-expanded="true"]  { color: #A5342B; border-bottom-color: #A5342B; }
.jeg-nav-tab-btn.-traveler[aria-expanded="true"] { color: #2F6844; border-bottom-color: #2F6844; }

/* ---- Desktop dropdown panel ---- */
.jeg-nav-panel {
	display: none; position: absolute; top: 100%; left: 50%;
	transform: translateX(-50%); margin-top: 18px; z-index: 210;
	width: max-content; min-width: 420px; max-width: 640px;
}
.jeg-nav-tab-btn[aria-expanded="true"] + .jeg-nav-panel { display: block; }
.jeg-nav-panel-inner {
	background: #FBF8F2; border: 1px solid #E4D9C8; border-radius: 14px;
	box-shadow: 0 18px 40px rgba(42,33,28,0.14); padding: 22px 24px;
	box-sizing: border-box;
}
.jeg-nav-grid { display: grid; gap: 10px; }
.jeg-nav-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.jeg-nav-grid-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.jeg-nav-tab.-wide .jeg-nav-panel { min-width: 620px; }
/* Anchor the two rightmost (widest) panels to the right edge of their own
   trigger instead of centering, so a 620px-wide panel can't overflow past
   the right edge of the viewport at typical desktop widths. */
.jeg-nav-tab.-wide .jeg-nav-panel { left: auto; right: 0; transform: none; }
.jeg-nav-card {
	display: flex; box-sizing: border-box; text-decoration: none;
	background: #FFFFFF; border: 1px solid #E4D9C8; border-left: 3px solid transparent;
	border-radius: 10px; padding: 11px 13px; min-width: 0;
}
.jeg-nav-card.-area {
	flex-direction: column; gap: 2px; border-left-color: #1F3A5F;
}
.jeg-nav-card.-cuisine,
.jeg-nav-card.-traveler {
	align-items: center; justify-content: center; text-align: center;
	font-size: 12.5px; font-weight: 700; color: #2A211C;
}
.jeg-nav-card.-cuisine  { border-left-color: #A5342B; }
.jeg-nav-card.-traveler { border-left-color: #2F6844; }
.jeg-nav-card-title { font-size: 13px; font-weight: 700; color: #2A211C; }
.jeg-nav-card-count { font-size: 11px; color: #8A8178; }
.jeg-nav-viewall {
	display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700;
	text-decoration: none;
}
.jeg-nav-viewall.-area     { color: #1F3A5F; }
.jeg-nav-viewall.-cuisine  { color: #A5342B; }
.jeg-nav-viewall.-traveler { color: #2F6844; }

/* ---- Hamburger ----
   Rendered via wp_body_open (outside #gnav -- see functions.php docblock:
   SWELL's own CSS unconditionally sets `.l-header__gnav{display:none}`
   below 960px, so anything placed *inside* #gnav disappears with it on
   mobile). It starts off-screen and jeg-nav.js moves it into
   `.l-header__inner` (the header's real flex row, sibling of #gnav) on
   DOMContentLoaded, at which point the more specific selector below
   restores normal flow positioning. This avoids a flash of the button
   rendering in the wrong place (top of body) before JS runs. */
.jeg-nav-hamburger {
	display: none; align-items: center; justify-content: center;
	width: 40px; height: 40px; flex-shrink: 0; margin-left: 10px;
	background: none; border: 0; padding: 0; cursor: pointer;
	appearance: none; -webkit-appearance: none; box-shadow: none;
	border-radius: 8px;
	position: absolute; left: -9999px; top: -9999px;
}
.jeg-nav-hamburger:active { background: #F0E9DC; }
.l-header__inner .jeg-nav-hamburger {
	position: static; left: auto; top: auto; margin-left: 0;
}
/* SWELL's own built-in hamburger (opens its separate, unused #sp_menu
   offcanvas) is replaced by the one above; hide it so there are never two
   menu icons in the header. Its sibling search-icon button (also inside
   sp_btns.php, a pre-existing site feature unrelated to this nav redesign)
   is left untouched. */
.l-header__menuBtn { display: none !important; }
/* Bug fix (2026-09-26 QA, mobile header balance): SWELL's own
   `header_layout_sp=center_left` customizer setting assigns CSS `order`
   values to `.l-header__inner`'s native children (order:1 native hidden
   menuBtn, order:2 logo, order:3 search button `.l-header__customBtn`).
   Our relocated `.jeg-nav-hamburger` has no explicit order (defaults to 0),
   which is what correctly keeps it visually first/left of the logo (the
   already-accepted "hamburger left of logo" layout, see ROLE.md). The bug
   was the `margin-left:auto` above: with the hamburger first in visual
   order, that auto margin absorbed ALL of the row's leftover flex space on
   the hamburger's OWN left side, shoving the entire hamburger+logo+search
   cluster to the right and leaving one large empty gap at the true left
   edge instead of a balanced row. The fix moves that auto-margin push to
   the search button instead (the first/only element of the "right side"
   group) -- that's the standard flex trick for a two-group balanced row:
   left items keep their natural (zero) margins and pack flush left, the
   auto margin on the first "right-side" item consumes all remaining space
   and pins it flush right. */
.l-header__inner .l-header__customBtn { margin-left: auto; }

/* ---- Mobile drawer ---- */
.jeg-nav-drawer {
	display: none; position: fixed; inset: 0; z-index: 9999;
}
.jeg-nav-drawer.is-open { display: block; }
.jeg-nav-drawer-overlay {
	position: absolute; inset: 0; background: rgba(42,33,28,0.45);
}
.jeg-nav-drawer-panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px;
	background: #FFFFFF; box-sizing: border-box; display: flex; flex-direction: column;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.jeg-nav-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px; border-bottom: 1px solid #E4D9C8; flex-shrink: 0;
}
.jeg-nav-drawer-head .jeg-nav-logo-link { display: flex; align-items: center; gap: 10px; }
/* Bug fix (2026-09-26, 2nd round QA): .jeg-nav-logo is the flex container that
   directly wraps the .jeg-nav-logo-mark circle (fixed 34x34) and the
   .jeg-nav-logo-word text span (no fixed height). Without an explicit
   align-items here, the default `stretch` let the word span's box stretch to
   the container's full height, pushing its text out of vertical alignment
   with the circle -- exactly the "logo looks off" bug the site owner caught
   in a real screenshot the first fix's QA pass never captured (it only
   screenshotted the drawer's scrolled body, not its header bar). */
.jeg-nav-drawer-head .jeg-nav-logo { display: flex; align-items: center; gap: 10px; }
.jeg-nav-drawer-close {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; background: none; border: 0; padding: 0;
	cursor: pointer; appearance: none; -webkit-appearance: none; flex-shrink: 0;
}
/* Bug fix (2026-09-26 QA): this must NOT be `flex:1 1 auto; min-height:0`.
   The drawer panel (.jeg-nav-drawer-panel) is the scroll container
   (overflow-y:auto) for the whole column (head+body+lang switcher). Giving
   this middle flex item `flex:1 1 auto; min-height:0` let it get squeezed
   to whatever leftover space existed in the viewport instead of growing to
   its full (possibly taller-than-viewport) content height once several
   accordions were expanded -- the accordion content then visually overflowed
   past this shrunk box (since it has no overflow of its own) and got drawn
   UNDER the language switcher that followed it in flow, instead of the
   switcher landing below all the real content. Letting this item take its
   natural content height (default flex:0 1 auto) fixes it: the switcher then
   always renders after the true bottom of all five accordions, and the
   panel's own overflow-y:auto scrolls the whole thing correctly. */
.jeg-nav-drawer-body { padding: 8px 20px 20px; }
.jeg-nav-acc { border-bottom: 1px solid #F0E9DC; padding: 14px 0; }
.jeg-nav-acc-btn {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	background: none; border: 0; padding: 11px 0; font-family: inherit; font-size: 15px;
	font-weight: 700; color: #2A211C; cursor: pointer; appearance: none;
	-webkit-appearance: none; text-align: left;
} /* 2026-10-10: padding added (was 0) -- measured boundingBox() was only 24px tall,
     below the 44px tap-target minimum, even though the button already spans the
     full row width (not just the chevron icon). */
.jeg-nav-acc-btn .jeg-nav-chev { color: #8A8178; transition: transform .15s ease; flex-shrink: 0; }
.jeg-nav-acc-btn[aria-expanded="true"] .jeg-nav-chev { transform: rotate(180deg); }
.jeg-nav-acc-btn.-area[aria-expanded="true"]     { color: #1F3A5F; }
.jeg-nav-acc-btn.-area[aria-expanded="true"] .jeg-nav-chev     { color: #1F3A5F; }
.jeg-nav-acc-btn.-cuisine[aria-expanded="true"]  { color: #A5342B; }
.jeg-nav-acc-btn.-cuisine[aria-expanded="true"] .jeg-nav-chev  { color: #A5342B; }
.jeg-nav-acc-btn.-traveler[aria-expanded="true"] { color: #2F6844; }
.jeg-nav-acc-btn.-traveler[aria-expanded="true"] .jeg-nav-chev { color: #2F6844; }
.jeg-nav-acc-panel {
	display: none; flex-direction: column; gap: 11px; margin-top: 12px; padding-left: 4px;
}
.jeg-nav-acc.is-open .jeg-nav-acc-panel { display: flex; }
.jeg-nav-acc-link {
	font-size: 13px; color: #4A423B; text-decoration: none;
}
.jeg-nav-acc-link.-viewall {
	font-weight: 700; margin-top: 2px;
}
.jeg-nav-acc-link.-area.-viewall     { color: #1F3A5F; }
.jeg-nav-acc-link.-cuisine.-viewall  { color: #A5342B; }
.jeg-nav-acc-link.-traveler.-viewall { color: #2F6844; }

body.jeg-drawer-open { overflow: hidden; }

/* ---- Breakpoint: mobile drawer takes over from the desktop tabs/panels ----
   960px matches SWELL's own real PC/SP breakpoint (confirmed by reading the
   theme's compiled CSS: `@media not all and (min-width:960px)` is where
   `.l-header__gnav`/`.l-fixHeader` themselves switch off). Using a different
   number here would open a gap where SWELL's chrome and this nav disagree
   about which mode the viewport is in. */
@media (max-width: 959px) {
	.jeg-nav-tabs,
	.jeg-seg.-desktop { display: none !important; } /* 2026-10-21 bugfix: was still .jeg-nav-langs.-desktop, the pre-step-B class name -- functions.php's jeg_nav_render_lang_switcher() now emits .jeg-seg.-desktop, so this never matched and the desktop switcher stayed visible (and overlapping) on mobile */
	.jeg-nav-hamburger { display: flex !important; }
	.jeg-gnav { justify-content: flex-end; }
}

@media (min-width: 960px) {
	.jeg-nav-drawer { display: none !important; }
}

/* ---- Hide SWELL's built-in header top bar (2026-09-29) ----
   Not part of this nav redesign. `.l-header__bar` is SWELL core's own
   "catchphrase bar" feature (parts/header/head_bar.php, gated by
   SWELL_Theme::is_use('head_bar')), rendered whenever that customizer
   toggle is on -- independent of jeg-nav.css/functions.php and untouched
   by the 2026-09-26 nav work or the 2026-09-27 language-switcher fix.
   On this site the toggle is on but no catchphrase text or SNS/search
   icon list was ever configured, so `.c-catchphrase` renders empty and
   the bar shows as a bare, full-width strip painted with
   `background:var(--color_main)` (the site's vermillion accent) sitting
   above the real header row -- the "black line + vermillion bar" artifact
   reported above the TOP page header (confirmed sitewide, not TOP-page-only,
   via live screenshots). Proper fix is the SWELL customizer "ヘッダー上部
   バーを使う" (head_bar) toggle itself, but that's a theme_mod DB option
   change outside this child-theme CSS file's scope/ownership; hiding the
   empty shell here is the safe, isolated, reversible fix that doesn't
   touch functions.php or any parent-theme file. Re-enable by deleting this
   rule if a catchphrase/SNS bar is intentionally configured later. */
.l-header__bar { display: none !important; }