/*
Theme Name: Cocoon Child - Japan Travel Hub
Template: cocoon-master
Version: 0.2.0
*/

:root {
  /* Color */
  --jth-accent: #0f766e;
  --jth-accent-dark: #0b5c56;
  --jth-accent-soft: #e1f5ee;
  --jth-accent-ink: #0f6e56;
  --jth-ink: #1f2937;
  --jth-ink-strong: #0f172a;
  --jth-muted: #6b7280;
  --jth-border: #d1d5db;
  --jth-border-soft: #e5e9ef;
  --jth-bg: #ffffff;
  --jth-bg-subtle: #f9fafb;
  --jth-bg-panel: #f8fafc;
  --jth-photo-placeholder: #dbe5ef;

  /* Spacing scale */
  --jth-space-1: 8px;
  --jth-space-2: 16px;
  --jth-space-3: 24px;
  --jth-space-4: 32px;
  --jth-space-5: 48px;

  /* Typography scale */
  --jth-text-sm: 0.9rem;
  --jth-text-base: 1rem;
  --jth-text-lg: 1.25rem;
  --jth-text-xl: 1.75rem;
  --jth-text-2xl: 2.25rem;
  --jth-text-3xl: 2.75rem;

  /* Shape */
  --jth-radius: 8px;
  --jth-radius-lg: 12px;
  --jth-radius-xl: 16px;

  /* Elevation + motion */
  --jth-shadow-card: 0 6px 20px rgba(15, 23, 42, .06);
  --jth-shadow-hover: 0 14px 32px rgba(15, 23, 42, .10);
  --jth-transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Layout sections */

.jth-section {
  margin: var(--jth-space-4) 0;
}

.jth-section h2 {
  font-size: var(--jth-text-xl);
  color: var(--jth-ink);
  line-height: 1.3;
  margin-bottom: var(--jth-space-1);
}

.jth-section h3 {
  font-size: var(--jth-text-lg);
  color: var(--jth-ink);
  line-height: 1.3;
}

.jth-section p {
  font-size: var(--jth-text-base);
  color: var(--jth-muted);
  line-height: 1.7;
}

/* Hero */

.jth-hero {
  padding: var(--jth-space-5) var(--jth-space-3);
  background: var(--jth-bg-subtle);
  border-radius: var(--jth-radius);
  text-align: center;
}

.jth-hero h1 {
  font-size: var(--jth-text-2xl);
  color: var(--jth-ink);
  margin-bottom: var(--jth-space-1);
}

.jth-hero p {
  font-size: var(--jth-text-lg);
  color: var(--jth-muted);
  max-width: 640px;
  margin: 0 auto var(--jth-space-2);
}

/* Card grid */

.jth-grid {
  display: grid;
  gap: var(--jth-space-2);
}

.jth-grid article {
  border: 1px solid var(--jth-border);
  border-radius: var(--jth-radius);
  padding: var(--jth-space-2);
  background: var(--jth-bg);
}

@media (min-width: 768px) {
  .jth-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Call-to-action button */

.jth-button {
  display: inline-block;
  padding: var(--jth-space-1) var(--jth-space-2);
  border-radius: var(--jth-radius);
  background: var(--jth-accent);
  color: #ffffff;
  font-size: var(--jth-text-base);
  font-weight: 600;
  text-decoration: none;
}

.jth-button:hover,
.jth-button:focus {
  background: var(--jth-accent-dark);
}

/* Contextual nav (sidebar / related links) */

.jth-related-nav {
  border-top: 1px solid var(--jth-border);
  padding-top: var(--jth-space-2);
  margin-top: var(--jth-space-3);
}

.jth-related-nav a {
  display: inline-block;
  margin-right: var(--jth-space-2);
  color: var(--jth-accent);
}

/* Footer */

.jth-footer nav a {
  margin-right: var(--jth-space-2);
  color: var(--jth-muted);
}

/* Affiliate disclosure (used by jth_affiliate_disclosure shortcode) */

.jth-affiliate-disclosure {
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
  border-top: 1px solid var(--jth-border);
  padding-top: var(--jth-space-1);
  margin-top: var(--jth-space-3);
}

/* Top Attractions (.pref-grid) layout: 2x2 card grid (1 column on mobile). */
.pref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--jth-space-2);
  margin-bottom: var(--jth-space-3);
}

.pref-grid .pref-card {
  display: block;
  border: 1px solid var(--jth-border);
  border-radius: var(--jth-radius);
  padding: var(--jth-space-1);
}

.pref-grid .pref-card h3 {
  margin: 0;
  padding: var(--jth-space-1) 0 0;
}

@media (max-width: 600px) {
  .pref-grid {
    grid-template-columns: 1fr;
  }
}

/* Top Attractions (.pref-grid) card images.
   Intentionally hidden site-wide -- consolidates 8 competing client-side
   scripts that used to fight over showing/hiding these (some swapped in
   Wikipedia-sourced images, a later one always won by hiding them). Kept
   hidden per owner decision pending the Priority 5 image-license audit. */
.pref-grid .pref-card img,
.pref-grid .pref-card picture,
.pref-grid .pref-card figure {
  display: none;
}

/* Exception: license-verified images (Wikipedia Commons, swapped in by
   jth_prefecture_verified_images()) are shown. Only ~16 prefectures have
   verified image data; the rest stay hidden pending the Priority 5 audit. */
.pref-grid .pref-card img.jth-verified-image {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--jth-radius);
  margin-bottom: var(--jth-space-1);
}

/* Hide the "no posts found" notice on the hotels/transport hub category
   pages now that they carry dedicated guide content instead of a post
   listing. WordPress core adds the category-{slug} body class already, so
   no JS is needed (migrated from jth-hide-empty-monetization-category). */
body.category-hotels .posts-not-found,
body.category-transport .posts-not-found {
  display: none;
}

/* Kyoto individual attraction spot guides (Fushimi Inari, Arashiyama,
   Kiyomizu-dera) -- migrated from jth-kyoto-spot-guide-enhancement's CSS
   block (v2 reused v1's styles without redefining them). */
.jth-spot-guide-pro {
  margin: 18px 0 30px;
  padding: 22px;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  box-shadow: var(--jth-shadow-card);
}
.jth-spot-guide-pro h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jth-ink-strong);
  font-size: 1.45rem;
  line-height: 1.3;
}
.jth-spot-guide-pro h3 {
  margin: 20px 0 8px;
  color: var(--jth-ink-strong);
  font-size: 1.1rem;
  line-height: 1.35;
}
.jth-spot-guide-pro p {
  margin: 0 0 12px;
  line-height: 1.75;
}
.jth-spot-guide-pro ul {
  margin: 0 0 14px 1.2em;
  line-height: 1.75;
}
.jth-spot-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.jth-spot-guide-card {
  padding: 14px;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius);
  background: var(--jth-bg-panel);
}
.jth-spot-guide-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--jth-ink-strong);
}
.jth-spot-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.jth-spot-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: var(--jth-radius);
  background: var(--jth-accent);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
}
.jth-spot-cta a:nth-child(2) { background: #c2571c; }
.jth-spot-cta a:nth-child(3) { background: var(--jth-accent-dark); }
@media (max-width: 680px) {
  .jth-spot-guide-pro { padding: 16px; }
  .jth-spot-cta a { width: 100%; }
}

/* ============================================================
   Prefecture guide — design refresh (A x B x C hybrid).
   Styles both the existing markup emitted by
   jth_insert_prefecture_guide() and the new sections added in
   Phase 2 (breadcrumb, hero, byline, TOC, compare table, CTA).
   All classes are namespaced .jth-* to avoid Cocoon collisions.
   ============================================================ */

/* Breadcrumb */
.jth-breadcrumb {
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
  margin: 0 0 var(--jth-space-2);
}
.jth-breadcrumb a {
  color: var(--jth-muted);
  text-decoration: none;
}
.jth-breadcrumb a:hover { color: var(--jth-accent); }
.jth-breadcrumb span[aria-hidden] { margin: 0 6px; color: var(--jth-border); }

/* Author / updated / affiliate-disclosure byline */
.jth-guide-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--jth-space-1);
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
  margin: 0 0 var(--jth-space-3);
}
.jth-guide-byline .jth-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jth-accent-soft);
  color: var(--jth-accent-ink);
  font-weight: 600;
  font-size: var(--jth-text-sm);
}
.jth-guide-byline .jth-dot { color: var(--jth-border); }
.jth-guide-byline .jth-disclosure { color: var(--jth-muted); }

/* Table of contents */
.jth-toc {
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius);
  background: var(--jth-bg-panel);
  padding: var(--jth-space-2);
  margin: 0 0 var(--jth-space-3);
}
.jth-toc-title {
  font-size: var(--jth-text-sm);
  font-weight: 600;
  color: var(--jth-ink-strong);
  margin: 0 0 var(--jth-space-1);
}
.jth-toc ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px var(--jth-space-3);
  margin: 0;
  padding-left: 1.2em;
}
.jth-toc a {
  color: var(--jth-accent);
  text-decoration: none;
}
.jth-toc a:hover { text-decoration: underline; }

/* Main guide box */
.jth-high-demand-guide-pro {
  margin: var(--jth-space-3) 0;
  padding: var(--jth-space-3);
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  box-shadow: var(--jth-shadow-card);
}
.jth-high-demand-guide-pro > h2 {
  margin: 0 0 var(--jth-space-1);
  color: var(--jth-ink-strong);
  font-size: var(--jth-text-xl);
  line-height: 1.25;
}
.jth-guide-lead {
  margin: 0 0 var(--jth-space-2);
  color: var(--jth-muted);
  line-height: 1.7;
}

/* Quick facts — rendered as a definition-style table */
.jth-guide-facts {
  list-style: none;
  margin: 0 0 var(--jth-space-3);
  padding: 0;
  border-top: 1px solid var(--jth-border-soft);
}
.jth-guide-facts li {
  padding: var(--jth-space-1) 0;
  border-bottom: 1px solid var(--jth-border-soft);
  font-size: var(--jth-text-sm);
  color: var(--jth-ink);
  line-height: 1.5;
}

/* Section subheading inside the guide box (Quick facts / Where to stay) */
.jth-guide-subhead {
  margin: var(--jth-space-2) 0 var(--jth-space-1);
  font-size: var(--jth-text-lg);
  color: var(--jth-ink-strong);
}

/* Panel grid (Itinerary / Food / Transport) */
.jth-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--jth-space-2);
}
.jth-guide-panel {
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg-panel);
  padding: var(--jth-space-2);
  transition: var(--jth-transition);
}
.jth-guide-panel:hover {
  border-color: var(--jth-accent);
  box-shadow: var(--jth-shadow-hover);
  transform: translateY(-2px);
}
.jth-guide-panel h3 {
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-lg);
  color: var(--jth-ink-strong);
}
.jth-guide-panel ul {
  margin: 0;
  padding-left: 1.15em;
  line-height: 1.65;
}
.jth-guide-panel li { margin-bottom: 4px; }

/* Comparison table (Where to stay, when data allows) */
.jth-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--jth-space-3);
  font-size: var(--jth-text-sm);
}
.jth-compare-table th,
.jth-compare-table td {
  text-align: left;
  padding: var(--jth-space-1);
  border-bottom: 1px solid var(--jth-border-soft);
  vertical-align: top;
}
.jth-compare-table thead th {
  background: var(--jth-bg-panel);
  color: var(--jth-ink-strong);
  font-weight: 600;
}
.jth-compare-table tbody td:first-child { color: var(--jth-accent); font-weight: 600; }

/* Common questions (FAQ) */
.jth-faq { margin-top: var(--jth-space-3); }
.jth-faq-item {
  padding: var(--jth-space-2) 0;
  border-bottom: 1px solid var(--jth-border-soft);
}
.jth-faq-item:first-of-type { border-top: 1px solid var(--jth-border-soft); }
.jth-faq-q {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--jth-ink-strong);
}
.jth-faq-a {
  margin: 0;
  color: var(--jth-muted);
  line-height: 1.7;
}

/* CTA banner (Klook / Airalo affiliate) */
.jth-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jth-space-2);
  flex-wrap: wrap;
  margin: var(--jth-space-3) 0;
  padding: var(--jth-space-2) var(--jth-space-3);
  border-radius: var(--jth-radius-xl);
  background: var(--jth-accent);
  color: #fff;
}
.jth-cta-banner .jth-cta-copy strong {
  display: block;
  font-size: var(--jth-text-lg);
  line-height: 1.3;
}
.jth-cta-banner .jth-cta-copy span {
  display: block;
  margin-top: 4px;
  color: #a7f3d0;
  font-size: var(--jth-text-sm);
}
.jth-cta-banner a {
  display: inline-block;
  padding: var(--jth-space-1) var(--jth-space-2);
  border-radius: var(--jth-radius);
  background: #fff;
  color: var(--jth-accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Recommended planning guides */
.jth-planning-guides-pro { margin: var(--jth-space-3) 0; }
.jth-planning-guides-pro > h2 {
  font-size: var(--jth-text-xl);
  color: var(--jth-ink-strong);
  margin: 0 0 var(--jth-space-1);
}
.jth-planning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jth-space-2);
  margin-top: var(--jth-space-2);
}
.jth-planning-card {
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  padding: var(--jth-space-2);
  box-shadow: var(--jth-shadow-card);
  transition: var(--jth-transition);
}
.jth-planning-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--jth-shadow-hover);
  border-color: var(--jth-accent);
}
.jth-planning-card h3 {
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-lg);
  color: var(--jth-ink-strong);
}
.jth-planning-card p {
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
  line-height: 1.6;
}
.jth-planning-card a {
  font-weight: 600;
  color: var(--jth-accent);
  text-decoration: none;
}
.jth-planning-card a:hover { text-decoration: underline; }

/* Explore nearby Japan — internal link panels */
.jth-pref-internal-links { margin: var(--jth-space-4) 0 var(--jth-space-3); }
.jth-pref-internal-links > h2 {
  font-size: var(--jth-text-xl);
  color: var(--jth-ink-strong);
  margin: 0 0 var(--jth-space-1);
}
.jth-link-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jth-space-2);
  margin-top: var(--jth-space-2);
}
.jth-link-panel {
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg-panel);
  padding: var(--jth-space-2);
}
.jth-link-panel h3 {
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-base);
  color: var(--jth-ink-strong);
}
.jth-link-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.9;
}
.jth-link-panel a {
  color: var(--jth-accent);
  text-decoration: none;
  font-size: var(--jth-text-sm);
}
.jth-link-panel a:hover { text-decoration: underline; }

/* Photo-forward hero (Phase 4 homepage + optional prefecture header).
   Set the background image inline: style="background-image:url(...)". */
.jth-guide-hero {
  position: relative;
  border-radius: var(--jth-radius-xl);
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: flex-end;
  background: var(--jth-photo-placeholder) center/cover no-repeat;
  color: #fff;
}
.jth-guide-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .5);
}
.jth-guide-hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--jth-space-3);
}
.jth-guide-hero h1 {
  margin: 0;
  color: #fff;
  font-size: var(--jth-text-2xl);
  line-height: 1.15;
}
.jth-guide-hero p {
  margin: var(--jth-space-1) 0 0;
  color: #e2e8f0;
  font-size: var(--jth-text-lg);
  max-width: 640px;
}

/* Booking / tours CTA bar that sits just under a hero */
.jth-booking-bar {
  display: flex;
  align-items: center;
  gap: var(--jth-space-1);
  flex-wrap: wrap;
  margin: calc(-1 * var(--jth-space-3)) var(--jth-space-3) 0;
  position: relative;
  z-index: 2;
  background: var(--jth-bg);
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  box-shadow: var(--jth-shadow-hover);
  padding: var(--jth-space-2);
}
.jth-booking-bar strong { color: var(--jth-ink-strong); font-size: var(--jth-text-base); }
.jth-booking-bar a {
  margin-left: auto;
  background: var(--jth-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: var(--jth-space-1) var(--jth-space-2);
  border-radius: var(--jth-radius);
}

/* Responsive: collapse guide grids to a single column on phones */
@media (max-width: 600px) {
  .jth-toc ol,
  .jth-guide-grid,
  .jth-planning-grid,
  .jth-link-panels {
    grid-template-columns: 1fr;
  }
  .jth-high-demand-guide-pro { padding: var(--jth-space-2); }
  .jth-guide-hero h1 { font-size: var(--jth-text-xl); }
  .jth-booking-bar a { margin-left: 0; width: 100%; text-align: center; }
}

/* ============================================================
   Homepage (front page, id=3) — Phase 4.
   Migrated from 3 inline <style> blocks previously embedded in the
   page's post_content. Same class names/markup as before (no HTML
   structure change beyond the --featured card variant), now reusing
   the site-wide --jth-* tokens for consistency with the redesigned
   prefecture pages.
   ============================================================ */

.home .entry-content { display: flex; flex-direction: column; }
.home .entry-content .jth-visual-hub { order: -20; }
.home .entry-content .jth-home-hub { order: -10; }
.home .entry-content .jth-cta { order: -9; }

.jth-visual-hub { margin: var(--jth-space-1) 0 var(--jth-space-4); }
.jth-visual-hub__intro { margin: 0 0 var(--jth-space-2); color: #334155; max-width: 760px; }

/* Bento-style photo grid: first card (.jth-visual-card--featured) reads
   as the photo-forward hero tile; the rest form a supporting grid. */
.jth-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150px;
  gap: var(--jth-space-2);
}
.jth-visual-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--jth-radius-lg);
  background: var(--jth-ink-strong);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--jth-shadow-card);
  transition: var(--jth-transition);
}
.jth-visual-card:hover { box-shadow: var(--jth-shadow-hover); }
.jth-visual-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.jth-visual-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .08), rgba(15, 23, 42, .78));
}
.jth-visual-card:hover img { transform: scale(1.04); }
.jth-visual-card span { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.jth-visual-card strong { display: block; font-size: 1.05rem; line-height: 1.25; }
.jth-visual-card em {
  display: block;
  margin-top: 4px;
  color: #e2e8f0;
  font-size: .86rem;
  font-style: normal;
  line-height: 1.35;
}
.jth-visual-card--featured {
  grid-column: span 2;
  grid-row: span 1;
}
.jth-visual-card--featured strong { font-size: 1.4rem; }
.jth-visual-card--featured em { font-size: .95rem; }
.jth-visual-card--plain {
  background: var(--jth-bg-panel);
  border: 1px solid var(--jth-border-soft);
  color: #172033;
  padding: var(--jth-space-2);
}
.jth-visual-card--plain:after { display: none; }
.jth-visual-card--plain span { position: static; }
.jth-visual-card--plain em { color: var(--jth-muted); }

@media (min-width: 700px) {
  .jth-visual-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 178px; }
  .jth-visual-card--featured { grid-column: span 2; grid-row: span 2; }
  .jth-visual-card--featured strong { font-size: 1.75rem; }
  .jth-visual-card--featured em { font-size: 1.05rem; }
}

.jth-first-time-hub { margin: var(--jth-space-4) 0; }
.jth-first-time-head { margin-bottom: var(--jth-space-2); }
.jth-first-time-head h2 { font-size: clamp(1.45rem, 2vw, 2rem); margin: 0 0 var(--jth-space-1); }
.jth-first-time-head p { margin: 0; color: #4b5563; line-height: 1.7; }
.jth-first-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--jth-space-2);
}
.jth-first-time-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  text-decoration: none;
  color: #111827;
  box-shadow: var(--jth-shadow-card);
  transition: var(--jth-transition);
}
.jth-first-time-card:hover {
  transform: translateY(-2px);
  border-color: var(--jth-accent);
  box-shadow: var(--jth-shadow-hover);
}
.jth-first-time-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.jth-first-time-card-body { padding: var(--jth-space-2) var(--jth-space-2); }
.jth-first-time-card-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 var(--jth-space-1);
  color: var(--jth-ink-strong);
}
.jth-first-time-card p { font-size: .94rem; line-height: 1.65; margin: 0; color: #475569; }

@media (max-width: 680px) {
  .jth-first-time-hub { margin: var(--jth-space-3) 0; }
  .jth-first-time-grid { grid-template-columns: 1fr; }
  .jth-first-time-card img { height: 150px; }
}

.jth-purpose-hub { margin: var(--jth-space-4) 0; }
.jth-purpose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--jth-space-2);
}
.jth-purpose-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--jth-border-soft);
  border-left: 5px solid var(--jth-accent);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg-panel);
  color: #172033;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.jth-purpose-card:hover { transform: translateY(-2px); box-shadow: var(--jth-shadow-hover); }
.jth-purpose-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.jth-purpose-card-body { padding: var(--jth-space-2) 16px; }
.jth-purpose-card strong { display: block; font-size: 1rem; color: var(--jth-accent-dark); }
.jth-purpose-card-desc { display: block; margin-top: 5px; color: #475569; font-size: .9rem; line-height: 1.45; }

@media (max-width: 600px) {
  .jth-purpose-grid { grid-template-columns: 1fr; }
  .jth-purpose-card img { height: 120px; }
}

/* Homepage-only utility rules (previously "jth-home-cleanup"). */
.home .date-tags,
.home .sns-follow,
.home .sns-follow-message,
.home #sidebar .widget_search { display: none !important; }
@media (min-width: 768px) {
  .home .footer-widgets-mobile { display: none !important; }
}
@media (max-width: 767px) {
  .home .footer-widgets.cf { display: none !important; }
  .home .footer-widgets-mobile { display: block !important; }
}

/* Homepage hero. Gives the front page a strong photo-forward first view
   (previously the top ~676px was logo + text + CTA with no imagery, which
   read as empty/cheap, especially on mobile). The hero carries the page's
   visible H1; Cocoon's own .entry-title ("Explore Japan") is hidden on the
   home page to avoid a doubled heading. Background reuses an existing
   audited image (no new upload). */
.home .entry-title { display: none; }
/* .entry-content is a flex column whose existing sections use negative order
   (jth-visual-hub is -20); the hero must sit above them, so order -30. */
.home .entry-content .jth-home-hero { order: -30; }
.jth-home-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--jth-radius-lg);
  min-height: clamp(320px, 52vw, 460px);
  display: flex;
  align-items: flex-end;
  margin: var(--jth-space-1) 0 var(--jth-space-3);
  background: var(--jth-ink-strong);
}
.jth-home-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jth-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .15), rgba(15, 23, 42, .78));
}
.jth-home-hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--jth-space-3);
  max-width: 680px;
  color: #fff;
}
.jth-home-hero__inner h1 {
  margin: 0 0 var(--jth-space-1);
  color: #fff;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.15;
}
.jth-home-hero__inner p {
  margin: 0 0 var(--jth-space-2);
  color: #e2e8f0;
  font-size: var(--jth-text-lg);
  line-height: 1.5;
}
.jth-home-hero__cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--jth-radius);
  background: var(--jth-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.jth-home-hero__cta:hover,
.jth-home-hero__cta:focus { background: var(--jth-accent-dark); }
@media (max-width: 600px) {
  .jth-home-hero__inner { padding: var(--jth-space-2); }
  .jth-home-hero__inner p { font-size: var(--jth-text-base); }
}

/* Homepage layout: 1-column, full width. The only sidebar widget that was
   showing (Popular Destinations) duplicated the homepage's own destination
   cards, so rather than leaving an empty 376px sidebar column (which pushed
   the content left and created a lopsided empty gutter on the right), the
   whole sidebar is hidden on the front page and #main expands to full width.
   .content-in is flex, so hiding #sidebar + width:100% on #main centers the
   content. Prefecture/post pages keep their sidebar (unaffected). */
/* #content ancestor added to raise specificity above Cocoon's own responsive
   #sidebar/#main rules (which otherwise win on source order at equal
   specificity). */
.home #content #sidebar { display: none !important; }
.home #content #main { width: 100% !important; }

/* Latest Articles slider (pref_latest_posts_slider_func output). Replaces
   the function's old hardcoded inline styles (#ddd border, #003b80 blue
   title, 10px radius) with the site-wide --jth-* card language so it
   matches the First Time in Japan / Plan Japan by travel style cards. */
.jth-posts-slider {
  display: flex;
  gap: var(--jth-space-2);
  overflow-x: auto;
  padding-bottom: var(--jth-space-1);
}
.jth-post-card {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  box-shadow: var(--jth-shadow-card);
  text-decoration: none;
  color: var(--jth-ink);
  transition: var(--jth-transition);
}
.jth-post-card:hover {
  transform: translateY(-2px);
  border-color: var(--jth-accent);
  box-shadow: var(--jth-shadow-hover);
}
.jth-post-card__img { width: 100%; height: 140px; object-fit: cover; display: block; }
.jth-post-card__body { display: block; padding: var(--jth-space-2); }
.jth-post-card__title {
  display: block;
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--jth-ink-strong);
}
.jth-post-card__excerpt {
  display: block;
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
  line-height: 1.6;
}

/* Japan Map image: center it and cap its width instead of the default
   block-image left-aligned, near-full-bleed 800x800 rendering. */
.home .wp-block-image img[src*="map-japan"] {
  display: block;
  margin: 0 auto;
  max-width: 560px;
  width: 100%;
  height: auto;
}

/* Explore Japan by Region: de-style the default WP column/list blocks
   (disc bullets, default blue links) to match the site's teal link
   language and give each region a light card. */
.home .wp-block-columns {
  gap: var(--jth-space-3);
}
.home .wp-block-columns .wp-block-column {
  padding: var(--jth-space-2);
  background: var(--jth-bg-panel);
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
}
.home .wp-block-columns h2 {
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-lg);
  color: var(--jth-ink-strong);
}
.home .wp-block-columns .wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home .wp-block-columns .wp-block-list li { padding: 4px 0; }
.home .wp-block-columns .wp-block-list a {
  color: var(--jth-accent);
  text-decoration: none;
  font-size: var(--jth-text-sm);
}
.home .wp-block-columns .wp-block-list a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .jth-post-card { flex: 0 0 200px; }
}

/* ============================================================
   Site 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; }

/* ============================================================
   Category hub guides (things-to-do / itinerary / food / hotels /
   transport / seasonal-travel). Shared skin for the jth_*_guide_html()
   functions rendered via jth_category_guide_loop_start() on otherwise-
   empty topic category archives. Previously jth-hotels-core/jth-esim-
   guide-pro had no CSS at all (unstyled); now unified with the
   prefecture-guide visual language (.jth-guide-panel/.jth-cta-banner).
   ============================================================ */
.jth-cat-hub {
  margin: var(--jth-space-3) 0;
  padding: var(--jth-space-3);
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  box-shadow: var(--jth-shadow-card);
}
.jth-cat-hub > h1 {
  margin: 0 0 var(--jth-space-1);
  color: var(--jth-ink-strong);
  font-size: var(--jth-text-2xl);
  line-height: 1.2;
}
.jth-cat-hub-lead {
  margin: 0 0 var(--jth-space-2);
  color: var(--jth-muted);
  line-height: 1.7;
  font-size: var(--jth-text-lg);
}
.jth-cat-hub-note {
  margin: 0 0 var(--jth-space-2);
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
}
.jth-cat-hub h2 {
  margin: var(--jth-space-3) 0 var(--jth-space-1);
  font-size: var(--jth-text-xl);
  color: var(--jth-ink-strong);
}
.jth-cat-hub h3 {
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-lg);
  color: var(--jth-ink-strong);
}
.jth-cat-hub ul { margin: 0 0 var(--jth-space-3); padding-left: 1.15em; line-height: 1.65; }
.jth-cat-hub table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--jth-space-3);
  font-size: var(--jth-text-sm);
}
.jth-cat-hub th,
.jth-cat-hub td {
  text-align: left;
  padding: var(--jth-space-1);
  border-bottom: 1px solid var(--jth-border-soft);
  vertical-align: top;
}
.jth-cat-hub thead th { background: var(--jth-bg-panel); color: var(--jth-ink-strong); font-weight: 600; }

.jth-cat-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--jth-space-2);
  margin-bottom: var(--jth-space-3);
}
.jth-cat-hub-grid.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.jth-cat-card {
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg-panel);
  padding: var(--jth-space-2);
  transition: var(--jth-transition);
}
.jth-cat-card:hover {
  border-color: var(--jth-accent);
  box-shadow: var(--jth-shadow-hover);
  transform: translateY(-2px);
}
.jth-cat-card h3 { margin: 0 0 var(--jth-space-1); }
.jth-cat-card p { margin: 0; color: var(--jth-muted); line-height: 1.6; font-size: var(--jth-text-sm); }
.jth-cat-card ul { margin: 0; padding-left: 1.15em; line-height: 1.6; font-size: var(--jth-text-sm); }
.jth-cat-card li { margin-bottom: 4px; }

.jth-cat-cta-row { display: flex; gap: var(--jth-space-1); flex-wrap: wrap; margin: 0 0 var(--jth-space-2); }
.jth-cat-btn {
  display: inline-block;
  padding: var(--jth-space-1) var(--jth-space-2);
  border-radius: var(--jth-radius);
  background: var(--jth-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: var(--jth-text-sm);
  transition: var(--jth-transition);
}
.jth-cat-btn:hover { background: var(--jth-accent-dark); }
.jth-cat-btn.alt {
  background: var(--jth-bg);
  color: var(--jth-accent);
  border: 1px solid var(--jth-border);
}
.jth-cat-btn.alt:hover { border-color: var(--jth-accent); }

@media (max-width: 600px) {
  .jth-cat-hub { padding: var(--jth-space-2); }
  .jth-cat-hub-grid,
  .jth-cat-hub-grid.two { grid-template-columns: 1fr; }
  .jth-cat-cta-row { flex-direction: column; }
  .jth-cat-cta-row .jth-cat-btn { width: 100%; text-align: center; }
}

/* ============================================================
   Prefecture page photo hero (2026-07-05, Tokyo pilot). Same visual
   language as .jth-home-hero, kept as an independent class so the
   proven homepage implementation is never touched by this rollout.
   Only rendered when jth_prefecture_hero_enabled() returns true for
   the current slug (functions.php).
   ============================================================ */
.jth-has-page-hero .entry-title { display: none; }
/* Cocoon's own default post-thumbnail eye-catch would otherwise stack a
   second, unrelated photo above the new hero. */
.jth-has-page-hero .eye-catch { display: none; }
.jth-page-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--jth-radius-lg);
  min-height: clamp(280px, 45vw, 400px);
  display: flex;
  align-items: flex-end;
  margin: var(--jth-space-1) 0 var(--jth-space-3);
  background: var(--jth-ink-strong);
}
.jth-page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jth-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .15), rgba(15, 23, 42, .78));
}
.jth-page-hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--jth-space-3);
  max-width: 680px;
  color: #fff;
}
.jth-page-hero__inner h1 {
  margin: 0 0 var(--jth-space-1);
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1.2;
}
.jth-page-hero__inner p {
  margin: 0;
  color: #e2e8f0;
  font-size: var(--jth-text-lg);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .jth-page-hero__inner { padding: var(--jth-space-2); }
  .jth-page-hero__inner p { font-size: var(--jth-text-base); }
}

/* Cocoon's built-in automatic table of contents (site-wide "page" post
   type setting, #toc). Low value on short guide pages and clutters the
   view right below the new photo hero, so hidden via CSS rather than
   changing the underlying Cocoon setting (easy to revert). */
#toc { display: none; }