/* JOYFUL DETOUR JAPAN — SESSION 3 design proposal. */
:root {
  --jdj-ink: #193c38;
  --jdj-muted: #506660;
  --jdj-accent: #007466;
  --jdj-accent-hover: #005b50;
  --jdj-paper: #ffffff;
  --jdj-canvas: #f5f9f7;
  --jdj-tint: #eaf5ef;
  --jdj-warm: #fff5e4;
  --jdj-border: #c9dcd3;
  --jdj-focus: #175faa;
  --jdj-radius: 12px;
  --jdj-space-1: .5rem;
  --jdj-space-2: 1rem;
  --jdj-space-3: 1.5rem;
  --jdj-space-4: 2rem;
  --jdj-space-5: 3rem;
  --jdj-space-6: 4.5rem;
  --jdj-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
body:not(.wp-admin) {
  --color_main: var(--jdj-accent);
  --color_text: var(--jdj-ink);
  --color_link: var(--jdj-accent);
  --color_bg: var(--jdj-canvas);
  background: var(--jdj-canvas);
  color: var(--jdj-ink);
  font-family: var(--jdj-font);
  line-height: 1.75;
}
#header {
  background: var(--jdj-paper);
  color: var(--jdj-ink);
  border-bottom: 1px solid var(--jdj-border);
  box-shadow: none;
}
#header .c-headLogo__link {
  font-size: clamp(1rem, 1.3vw, 1.375rem);
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.35;
}
#header .c-gnav > li > a {
  min-height: 64px;
  padding-inline: 1rem;
  font-weight: 600;
}
#header .c-gnav .ttl { font-size: .9375rem; }
#footer {
  background: var(--jdj-ink);
  color: var(--jdj-paper);
}
#footer a { color: inherit; }
#footer .copyright { padding-block: 1.5rem; }
.post_content, .editor-styles-wrapper {
  color: var(--jdj-ink);
  font-family: var(--jdj-font);
  line-height: 1.75;
}
.post_content :where(p, li), .editor-styles-wrapper :where(p, li) {
  overflow-wrap: anywhere;
}
.post_content :where(h1, h2, h3), .editor-styles-wrapper :where(h1, h2, h3) {
  color: var(--jdj-ink);
  line-height: 1.3;
  overflow-wrap: break-word;
}
.post_content h2.wp-block-heading, .editor-styles-wrapper h2.wp-block-heading {
  color: var(--jdj-ink);
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 750;
  margin-block: 2.5rem 1rem;
}
.post_content h2.wp-block-heading::before,
.post_content h2.wp-block-heading::after { display: none; }
.post_content a:not(.wp-block-button__link):not(.jdj-button) {
  text-underline-offset: .2em;
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--jdj-focus);
  outline-offset: 3px;
}
.jdj-section { margin-block: var(--jdj-space-5); }
.jdj-region-intro {
  background: var(--jdj-tint);
  border: 1px solid var(--jdj-border);
  border-radius: var(--jdj-radius);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.jdj-eyebrow {
  color: var(--jdj-accent);
  font-size: .8125rem;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-block: 0 .75rem;
}
.jdj-region-intro h2.wp-block-heading { margin-top: 0; }
.jdj-region-intro > :last-child { margin-bottom: 0; }
.jdj-card-grid,
.jdj-card-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jdj-space-3);
}
/* Classic Group blocks wrap their cards in one inner container. */
.jdj-card-grid > .wp-block-group__inner-container { grid-column: 1 / -1; min-width: 0; }
.jdj-card-grid > .jdj-card,
.jdj-card-grid > .wp-block-group__inner-container > .jdj-card { margin: 0; min-width: 0; }
.jdj-card {
  background: var(--jdj-paper);
  border: 1px solid var(--jdj-border);
  border-radius: var(--jdj-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.jdj-card h3 {
  border: 0;
  padding: 0;
  margin-block: 0 .75rem;
  font-size: 1.375rem;
}
.jdj-card p { color: var(--jdj-muted); }
.jdj-card > :last-child { margin-bottom: 0; }
.jdj-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.jdj-button, .jdj-actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.375rem;
  border: 2px solid var(--jdj-accent);
  border-radius: 8px;
  background: var(--jdj-accent);
  color: var(--jdj-paper);
  font: 700 1rem/1.4 var(--jdj-font);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  box-shadow: none;
  transition: background-color .15s, border-color .15s;
}
.jdj-button:hover, .jdj-actions .wp-block-button__link:hover {
  background: var(--jdj-accent-hover);
  border-color: var(--jdj-accent-hover);
  color: var(--jdj-paper);
}
.jdj-button--secondary, .jdj-actions .is-style-outline .wp-block-button__link {
  background: var(--jdj-paper);
  color: var(--jdj-accent);
}
.jdj-note {
  padding: 1rem 1.25rem;
  background: var(--jdj-warm);
  border-left: 4px solid var(--jdj-accent);
  color: var(--jdj-ink);
}
.jdj-preview-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 1rem 0; }
.jdj-preview-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.jdj-preview-footer { background: var(--jdj-ink); color: white; padding: 1.5rem; border-radius: 12px; }
.jdj-preview-footer a { color: white; }
@media (max-width: 600px) {
  .jdj-card-grid,
  .jdj-card-grid > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .jdj-section { margin-block: 2rem; }
  .jdj-actions { align-items: stretch; }
  .jdj-actions > * { flex: 1 1 100%; }
  .jdj-actions .wp-block-button__link { width: 100%; }
  #header .c-headLogo__link { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jdj-button, .jdj-actions .wp-block-button__link { transition: none; }
}