/* ============================================================
   Site chrome: header (all pages). Cocoon's "center logo" header layout
   rendered the 512x512 logo at a customizer-set width of 150px
   with 10px top/bottom padding on .logo-image, plus the site
   tagline above it, totaling ~212px of logo-only header before any
   content — felt padded/empty, especially on mobile where it eats
   a large share of the first viewport. Shrinks the logo and tightens
   spacing without touching the Customizer (fixed-header/mobile-menu
   logic in the parent theme is untouched).
   ============================================================ */
.header .logo-image { padding: 6px 0; }
.header .site-logo-image { width: 112px !important; height: auto !important; }
/* WP site tagline ("Japan travel guides, itineraries..."), shown via
   itemprop="alternativeHeadline". Hidden — near-duplicate of the new
   hero subtitle on the homepage and too small to read anywhere else.
   Kept in the DOM (not removed from the WP setting) for its schema.org
   value. */
.header .tagline { display: none !important; }

@media (max-width: 767px) {
  .home #header,
  .home #header-in {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .header .logo-image { padding: 2px 0; }
  .header .site-logo-image { width: 76px !important; }
  .home .entry-title { display: none !important; }
  .home .entry-content .jth-home-hero { margin-top: 0; }
  .home .entry-content > .jth-home-hero:first-child { margin-top: 0; }
}

/* ============================================================
   Site chrome: mobile drawer menu (hamburger). Cocoon's
   .menu-drawer a is padding:6px on a 22.4px line-height, giving
   34px rows stacked with no gap — under the 44/48px touch target
   that iOS/Material ask for, so neighbouring items are easy to
   mis-tap. The drawer only fills ~285px of its 812px height, so
   the taller rows cost nothing.
   Selector carries .menu-content to outrank the parent theme's
   .menu-drawer a (0-1-1) on specificity rather than load order.
   min-height (not padding) keeps the target correct if an item
   ever wraps to two lines.
   ============================================================ */
.menu-content .menu-drawer a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 8px;
}

/* ============================================================
   Site chrome: PC global nav (desktop, >=1024px where Cocoon
   swaps the drawer for .menu-pc). Cocoon core gives every
   top-level item a fixed 176px box (.navi-in > ul li), sized for
   the original 7-item menu. Adding "When to Go" made 8 items need
   1408px before wrapping, so "Blog" dropped to a second row at
   realistic desktop widths (~1100-1200px) well above the 1024px
   breakpoint. Switch items to content-width with matching
   horizontal padding on the link (keeps the click target and the
   hover highlight box) so all 8 stay on one row from 1024px up,
   while staying centered with balanced margins at wide viewports.
   ============================================================ */
#navi .navi-in > ul.menu-pc > li {
  width: auto;
}
#navi .navi-in > ul.menu-pc > li > a {
  padding: 0 20px;
}
/* Cocoon core also centers the item row (.navi-in > ul { justify-content:
   center }), so the auto-width items above just clumped in the middle of
   the nav bar, wasting the wide gutters on either side at typical desktop
   widths. Spread the 8 items across the full row instead. The row's own
   width is unchanged (Cocoon's .wrap: full-bleed under 1256px, capped and
   centered at 1256px at wider viewports) — only how items fill it changes. */
#navi .navi-in > ul.menu-pc {
  justify-content: space-between;
}