/*
Theme Name:  Japan Gateway
Description: Astra child theme carrying the Japan Gateway / JGI "Japanese financial-editorial" design system. Tokens and chrome are global; component classes are scoped under a .jg wrapper (see content/home.html in the jvisas-jgi repo). Design source of truth: jvisas-investor-intelligence-prototype.html + 19-DESIGN.md + 19-design-tokens.json.
Author:      Andrew Savage
Template:    astra
Version:     1.0.0
Text Domain: japan-gateway
*/

/* ================= Design tokens (19-design-tokens.json) ================= */
:root {
  --ink: #17212B;
  --slate: #44515D;
  --indigo: #1D4E89;
  --verm: #A83D32;
  --gold: #8A5A12;
  --green: #276749;
  --paper: #F7F5F0;
  --white: #fff;
  --muted: #EEEAE2;
  --line: #C9C5BC;
  --quiet: #5B6670;
  --serif: Georgia, 'Noto Serif JP', serif;
  --sans: Inter, 'Noto Sans JP', Arial, sans-serif;
}

/* ================= Site-wide chrome ================= */
/* !important: Astra's customizer prints dynamic body{background:#fff} after this sheet */
body, .ast-separate-container .ast-article-single, .ast-plain-container .site-content {
  background: var(--paper) !important;
}
body {
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
}

/* Vermilion topline — the design system's signature bar */
body::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--verm);
}

h1, h2, h3.entry-title, .site-title {
  font-family: var(--serif);
  letter-spacing: -.03em;
}

a { color: var(--indigo); }
a:hover { color: var(--ink); }

/* Astra header -> sticky editorial masthead */
.site-header, .ast-primary-header-bar, .main-header-bar {
  background: rgba(247, 245, 240, .96) !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.site-title a, .site-title a:hover {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.site-description { color: var(--quiet); }
.main-header-menu a, .main-navigation a {
  color: var(--slate);
  font-size: 14px;
  font-family: var(--sans);
}
.main-header-menu a:hover, .main-navigation a:hover,
.main-header-menu .current-menu-item > a { color: var(--indigo); }

/* Content area */
.site-content, .ast-container { background: transparent; }
body .entry-content { font-family: var(--sans); }
.entry-content h2, .entry-content h3 { font-family: var(--serif); letter-spacing: -.03em; }

/* Hide the page title on the front page — the hero carries it */
.home .entry-header { display: none; }

/* Buttons (Astra + generic) */
.ast-button, .wp-block-button__link, button[type=submit], input[type=submit] {
  background: var(--indigo);
  border: 1px solid var(--indigo);
  color: #fff;
  border-radius: 4px;
  font-weight: 750;
}
.ast-button:hover, .wp-block-button__link:hover, button[type=submit]:hover, input[type=submit]:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ================= Footer =================
   Astra paints the footer background on the row *containers*
   (.site-above-footer-wrap / .site-below-footer-wrap), not on .site-footer, so those
   must be targeted directly or the footer renders as three mismatched bands. The
   earlier `footer .ast-builder-grid-row` selector also matched the nested wraps and
   painted a stray hairline on each; borders are now scoped to the two real edges. */
.site-footer {
  color: var(--quiet);
  font-size: 13px;
}
.site-footer,
.site-footer .site-above-footer-wrap,
.site-footer .site-below-footer-wrap,
.site-footer .ast-builder-grid-row-container,
.site-footer .ast-builder-footer-grid-columns,
.site-footer .ast-footer-copyright {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
}

/* Only two edges carry a rule: the top of the footer, and the divider above the copyright. */
.site-footer .ast-builder-grid-row-container,
.site-footer .ast-builder-footer-grid-columns,
.site-footer .ast-builder-layout-element,
.site-footer .ast-footer-copyright,
.site-footer .site-footer-section { border-top: 0 !important; }
.site-footer { border-top: 1px solid var(--line); }
.site-footer .site-below-footer-wrap { border-top: 1px solid var(--line) !important; }

/* Breathing room — Astra ships 20px top and bottom on both rows. */
.site-footer .site-above-footer-wrap { padding-top: 40px !important; padding-bottom: 36px !important; }
.site-footer .site-below-footer-wrap { padding-top: 26px !important; padding-bottom: 30px !important; }

/* One centre axis. Astra lays the above-footer row out as two equal grid columns with
   the first one empty, so the menu centres inside the right half while the copyright
   centres across the full width. Flex ignores the empty section and both rows agree. */
.site-footer .ast-builder-footer-grid-columns {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* Zero, deliberately: Astra's empty first section still occupies a flex item, so any
     column gap is spent to its left and pushes the row off the container's centre axis. */
  gap: 0;
}
.site-footer .site-footer-section { flex: 0 1 auto; width: auto !important; min-width: 0; }
.site-footer .site-footer-section:empty { display: none !important; }
.site-footer .site-navigation, .site-footer .footer-nav-wrap { flex-grow: 0 !important; }
.site-footer .ast-nav-menu { justify-content: center; flex-wrap: wrap; }

/* Footer links use the design system's label style rather than raw theme blue. */
.site-footer .ast-nav-menu a, .site-footer .footer-nav-wrap a {
  color: var(--slate);
  font: 700 12px/1.2 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 16px;
  transition: color .15s ease;
}
.site-footer .ast-nav-menu a:hover, .site-footer .footer-nav-wrap a:hover { color: var(--verm); }
.site-footer .ast-footer-copyright, .site-footer .ast-footer-copyright p {
  color: var(--quiet);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.site-footer .ast-footer-copyright a { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .ast-footer-copyright a:hover { color: var(--verm); }

/* ================= .jg component system (from the prototype) =================
   Scope: wrap page/marketing content in <div class="jg"> and these classes
   match jvisas-investor-intelligence-prototype.html one-for-one. */

.jg { font-family: var(--sans); color: var(--ink); }
.jg .shell { width: min(1180px, 100%); margin: auto; }

.jg .eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 800; color: var(--verm); display: flex; gap: 9px; align-items: center;
}
.jg .eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }

.jg .hero { padding: 66px 0 60px; border-bottom: 1px solid var(--line); background: linear-gradient(105deg, #f7f5f0 55%, #eeebe3); }
.jg .hero h1 { font: 600 clamp(38px, 5vw, 64px)/1.05 var(--serif); letter-spacing: -.045em; margin: 16px 0 21px; max-width: 750px; }
.jg .hero p { font-size: 18px; max-width: 640px; color: var(--slate); margin: 0 0 28px; }
.jg .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: end; }
.jg .hero-side { border-left: 1px solid var(--line); padding-left: 34px; }
.jg .hero-side h3 { font: 600 23px/1.2 var(--serif); margin: 0 0 15px; }

.jg .check { display: flex; gap: 10px; margin: 12px 0; color: var(--slate); font-size: 14px; }
.jg .check i { font-style: normal; color: var(--green); font-weight: 900; }

.jg .section { padding: 64px 0; }
.jg .section-head { max-width: 710px; margin-bottom: 38px; }
.jg .section h2 { font: 600 clamp(30px, 4vw, 44px)/1.12 var(--serif); letter-spacing: -.03em; margin: 13px 0; }
.jg .section-head p { color: var(--slate); font-size: 17px; }

.jg .tag {
  display: inline-block; border: 1px solid var(--line); padding: 3px 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

.jg .primary {
  display: inline-block; background: var(--indigo); border: 1px solid var(--indigo);
  color: #fff !important; padding: 12px 16px; min-height: 44px; border-radius: 4px;
  font-weight: 750; font-size: 15px;
}
.jg .primary:hover { background: var(--ink); border-color: var(--ink); }
.jg .secondary {
  display: inline-block; background: var(--white); border: 1px solid var(--ink);
  color: var(--ink) !important; padding: 11px 15px; min-height: 44px; border-radius: 4px;
  font-weight: 750; font-size: 15px;
}
.jg .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.jg .fineprint { font-size: 12px; color: var(--quiet); margin-top: 15px; }

/* Directory cards (Japan Gateway home) — brief/plan aesthetic from the prototype */
.jg .dir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.jg .dir-card {
  background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--muted); padding: 24px 26px; display: flex; flex-direction: column;
}
.jg .dir-card.featured { border-top-color: var(--verm); }
.jg .dir-card h3 { font: 600 24px/1.15 var(--serif); margin: 10px 0 9px; }
.jg .dir-card h3 a { color: var(--ink); }
.jg .dir-card h3 a:hover { color: var(--indigo); }
.jg .dir-card p { font-size: 14px; color: var(--slate); margin: 0 0 16px; flex: 1; }
.jg .dir-card .meta { color: var(--quiet); font-size: 12px; }

/* Steps list */
.jg .steps { border-top: 1px solid var(--line); margin-top: 30px; }
.jg .step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.jg .step b { font: 600 20px var(--serif); color: var(--verm); }
.jg .step strong { font-size: 14px; }
.jg .step p { font-size: 13px; margin: 3px 0; color: var(--quiet); }

/* Dark band + process grid */
.jg .dark { background: var(--ink); color: #fff; }
.jg .dark .section-head p { color: #c2cbd0; }
.jg .dark .eyebrow { color: #e8a197; }
.jg .process { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #61707c; border-left: 1px solid #61707c; }
.jg .process > div { padding: 23px; border-right: 1px solid #61707c; border-bottom: 1px solid #61707c; min-height: 170px; }
.jg .process b { font: 600 35px var(--serif); color: #d7a18f; }
.jg .process h3 { font-size: 15px; margin: 13px 0 5px; color: #fff; }
.jg .process p { font-size: 13px; margin: 0; color: #c2cbd0; }

.jg .foot { padding: 34px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--quiet); }

@media (max-width: 860px) {
  .jg .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .jg .hero-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .jg .process { grid-template-columns: 1fr 1fr; }
}