/* ============================================================================
   Multilingual typography — language-scoped readability refinements.
   ----------------------------------------------------------------------------
   Scope is ONLY html:lang(ja|ko|zh) and html:lang(ar) / [dir="rtl"], so the
   English design is never touched. No HTML, class, JS or breakpoint changes —
   this file only tunes font stacks, line-height, spacing and letter/word-spacing
   so dense CJK and connected Arabic scripts breathe like the English original.
   Vertical rhythm may grow (intended); layout WIDTH is preserved. All values are
   unitless / em-based, so they scale identically across desktop, tablet, mobile.
   ============================================================================ */

/* 1 · Script-aware font stacks -------------------------------------------------
   The brand fonts (Archivo Narrow / Work Sans / Space Mono) are Latin-only, so
   CJK/Arabic glyphs previously fell back to the generic sans-serif. Keep the
   Latin design font FIRST (brand name, "PT PMA", "KBLI", numerals stay on-brand)
   and append high-quality system script fonts for the localized glyphs. */
html:lang(ja) {
  --dca-font-body:    'Work Sans', 'Work Sans Fallback', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', sans-serif;
  --dca-font-display: 'Archivo Narrow', 'Archivo Narrow Fallback', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  --dca-font-mono:    'Space Mono', 'Space Mono Fallback', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', monospace;
}
html:lang(ko) {
  --dca-font-body:    'Work Sans', 'Work Sans Fallback', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --dca-font-display: 'Archivo Narrow', 'Archivo Narrow Fallback', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --dca-font-mono:    'Space Mono', 'Space Mono Fallback', 'Apple SD Gothic Neo', 'Malgun Gothic', monospace;
}
html:lang(zh) {
  --dca-font-body:    'Work Sans', 'Work Sans Fallback', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Noto Sans SC', sans-serif;
  --dca-font-display: 'Archivo Narrow', 'Archivo Narrow Fallback', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --dca-font-mono:    'Space Mono', 'Space Mono Fallback', 'PingFang SC', 'Microsoft YaHei', monospace;
}
html:lang(ar) {
  --dca-font-body:    'Work Sans', 'Segoe UI', 'Geeza Pro', 'Noto Naskh Arabic', 'Tahoma', sans-serif;
  --dca-font-display: 'Archivo Narrow', 'Segoe UI', 'Geeza Pro', 'Noto Naskh Arabic', 'Tahoma', sans-serif;
  --dca-font-mono:    'Space Mono', 'Segoe UI', 'Geeza Pro', 'Noto Naskh Arabic', monospace;
}

/* 2 · Body-copy line-height tokens — more leading for dense scripts ----------- */
html:lang(ja), html:lang(ko), html:lang(zh) {
  --dca-lh-normal:  1.7;
  --dca-lh-relaxed: 1.95;
  --dca-lh-loose:   2;
}
html:lang(ar) {
  --dca-lh-normal:  1.8;
  --dca-lh-relaxed: 2.05;
  --dca-lh-loose:   2.1;
}

/* 3 · Reading text: paragraphs + list items ---------------------------------- */
html:lang(ja) p, html:lang(ko) p, html:lang(zh) p,
html:lang(ja) li, html:lang(ko) li, html:lang(zh) li { line-height: 1.95; }
html:lang(ar) p, html:lang(ar) li { line-height: 2.05; }

/* Tailwind leading-relaxed is used on intro/body copy — relax it for dense scripts. */
html:lang(ja) .leading-relaxed, html:lang(ko) .leading-relaxed, html:lang(zh) .leading-relaxed { line-height: 1.95; }
html:lang(ar) .leading-relaxed { line-height: 2.05; }

/* 4 · Headings — the Latin display leading (≈0.9–1.25) clips CJK/Arabic glyphs.
   Higher-specificity language selectors relax it without touching English. */
html:lang(ja) .font-display-hero, html:lang(ko) .font-display-hero, html:lang(zh) .font-display-hero { line-height: 1.2; }
html:lang(ar) .font-display-hero { line-height: 1.32; }
html:lang(ja) .font-headline-lg, html:lang(ko) .font-headline-lg, html:lang(zh) .font-headline-lg,
html:lang(ja) .font-headline-md, html:lang(ko) .font-headline-md, html:lang(zh) .font-headline-md { line-height: 1.42; }
html:lang(ar) .font-headline-lg, html:lang(ar) .font-headline-md { line-height: 1.5; }
html:lang(ja) .leading-none, html:lang(ko) .leading-none, html:lang(zh) .leading-none { line-height: 1.15; }
html:lang(ar) .leading-none { line-height: 1.3; }
html:lang(ja) .leading-tight, html:lang(ko) .leading-tight, html:lang(zh) .leading-tight { line-height: 1.4; }
html:lang(ar) .leading-tight { line-height: 1.5; }

/* 5 · Long-form Insight reading surface (.article-body): paragraph / list /
   heading rhythm, so a 3-line English paragraph does not compress into a dense
   1–2 line block. */
html:lang(ja) .article-body p, html:lang(ko) .article-body p, html:lang(zh) .article-body p { line-height: 1.95; margin-bottom: 1.7em; }
html:lang(zh) .article-body p { margin-bottom: 1.85em; }
html:lang(ar) .article-body p { line-height: 2.05; margin-bottom: 1.8em; }
html:lang(ja) .article-body li, html:lang(ko) .article-body li, html:lang(zh) .article-body li { line-height: 1.9; margin-bottom: 0.55em; }
html:lang(ar) .article-body li { line-height: 2; margin-bottom: 0.6em; }
html:lang(ja) .article-body ul, html:lang(ko) .article-body ul, html:lang(zh) .article-body ul, html:lang(ar) .article-body ul,
html:lang(ja) .article-body ol, html:lang(ko) .article-body ol, html:lang(zh) .article-body ol, html:lang(ar) .article-body ol { margin-top: 1.2em; margin-bottom: 1.7em; }
html:lang(ja) .article-body h2, html:lang(ko) .article-body h2, html:lang(zh) .article-body h2 { line-height: 1.5; margin-top: 2.4em; margin-bottom: 1em; }
html:lang(ar) .article-body h2 { line-height: 1.6; margin-top: 2.4em; margin-bottom: 1em; }
html:lang(ja) .article-body h3, html:lang(ko) .article-body h3, html:lang(zh) .article-body h3 { line-height: 1.55; margin-top: 1.9em; margin-bottom: 0.7em; }
html:lang(ar) .article-body h3 { line-height: 1.6; margin-top: 1.9em; margin-bottom: 0.7em; }

/* 6 · Korean — a little word-spacing eases dense Hangul (Korean uses spaces). */
html:lang(ko) p, html:lang(ko) li, html:lang(ko) .article-body { word-spacing: 0.05em; }

/* 7 · Japanese — return to the English editorial rhythm. The earlier pass over-
   spaced JA, so: drop the extra character tracking, and reset the article-body
   block + heading MARGINS to the design (English) token values. Line-height,
   fonts and readability are unchanged. (ja only.) */
html:lang(ja) p, html:lang(ja) li { letter-spacing: normal; }
html:lang(ja) .article-body p  { margin-bottom: var(--dca-space-5); }
html:lang(ja) .article-body li { margin-bottom: var(--dca-space-3); }
html:lang(ja) .article-body ul,
html:lang(ja) .article-body ol { margin-top: 0; margin-bottom: var(--dca-space-5); }
html:lang(ja) .article-body h2 { margin-top: var(--dca-space-14); margin-bottom: var(--dca-space-5-5); }
html:lang(ja) .article-body h3 { margin-top: var(--dca-space-8); margin-bottom: var(--dca-space-3); }

/* 8 · Arabic — NEVER letter-space Arabic (it breaks the cursive joining) and
   neutralise the design's "tracked caps" utilities on Arabic text. */
html:lang(ar) p, html:lang(ar) li,
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3, html:lang(ar) h4,
html:lang(ar) .font-display-hero, html:lang(ar) .font-headline-lg, html:lang(ar) .font-headline-md,
html:lang(ar) .font-body-large, html:lang(ar) .font-body-md,
html:lang(ar) .article-body, html:lang(ar) .article-body * { letter-spacing: normal; }
html:lang(ar) [class*="tracking-"] { letter-spacing: normal; }
/* Keep Arabic ragged-right (respecting direction) — never justify/stretch letters. */
html:lang(ar) .article-body p, html:lang(ar) .article-body li { text-align: start; }

/* ----------------------------------------------------------------------------
   9 · Simplified Chinese — additional refinement (zh only).
   Han glyphs sit at full em width with no side-bearing, so Chinese body copy
   reads dense next to Latin even at a generous line-height. A little character
   tracking (字距) plus more block/heading spacing gives the premium editorial
   rhythm the design intends. Chinese glyphs are unconnected, so tracking is safe
   (unlike Arabic). Everything here is scoped to zh — en/ja/ko/ar are untouched.
   This block loads last, so it refines the shared CJK rules above for Chinese.
   -------------------------------------------------------------------------- */
html:lang(zh) p,
html:lang(zh) li,
html:lang(zh) .leading-relaxed { letter-spacing: 0.05em; line-height: 2; }

/* Long-form reading surface: a touch more tracking, leading and block spacing. */
html:lang(zh) .article-body p  { letter-spacing: 0.05em; line-height: 2; margin-bottom: 2.1em; }
html:lang(zh) .article-body li { letter-spacing: 0.05em; line-height: 1.95; margin-bottom: 0.7em; }
html:lang(zh) .article-body ul,
html:lang(zh) .article-body ol { margin-top: 1.4em; margin-bottom: 2.1em; }

/* Headings (H1 / H2 / H3) — gentle tracking + more air; Chinese headings read
   dense with the tight Latin display leading. */
html:lang(zh) .font-display-hero { letter-spacing: 0.02em; line-height: 1.3; }
html:lang(zh) .font-headline-lg,
html:lang(zh) .font-headline-md  { letter-spacing: 0.03em; line-height: 1.55; }
html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3 { letter-spacing: 0.02em; }
html:lang(zh) .article-body h2 { letter-spacing: 0.03em; line-height: 1.6; margin-top: 2.7em; margin-bottom: 1.15em; }
html:lang(zh) .article-body h3 { letter-spacing: 0.03em; line-height: 1.6; margin-top: 2.15em; margin-bottom: 0.85em; }


/* ============================================================================
   Home hero vertical balance — localized homes only (ja / ko / zh / ar).
   ----------------------------------------------------------------------------
   .hero-section is capped at min(calc(100vh - 5rem), 30rem) on desktop, so the
   section only reaches a full viewport when its copy is tall enough to push it
   there. CJK and Arabic set the same message in fewer, denser lines, so the
   localized hero settles near the 30rem floor and reads as compressed against
   the English original.

   Fix: lift the floor to one viewport and open the hero's internal vertical
   rhythm. The copy column is already `justify-center`, so the extra room
   distributes evenly above and below the block. Font sizes, widths, breakpoints,
   layout composition, markup and the English hero are all untouched. Applies at
   the existing md breakpoint only; mobile is unchanged.
   ========================================================================== */
@media (min-width: 768px) {

  /* One desktop viewport (minus the 5rem fixed header), as English already reads. */
  html:lang(ja) .hero-section,
  html:lang(ko) .hero-section,
  html:lang(zh) .hero-section,
  html:lang(ar) .hero-section {
    min-height: calc(100vh - 5rem);
  }

  /* Copy column: more breathing room top and bottom. */
  html:lang(ja) .hero-section > div:first-child,
  html:lang(ko) .hero-section > div:first-child,
  html:lang(zh) .hero-section > div:first-child,
  html:lang(ar) .hero-section > div:first-child {
    padding-top: calc(var(--dca-space-margin-desktop, 4rem) * 1.5);
    padding-bottom: calc(var(--dca-space-margin-desktop, 4rem) * 1.5);
  }

  /* Spacing between the hero elements: overline → headline → standfirst → CTAs. */
  html:lang(ja) .hero-section > div:first-child > .font-overline,
  html:lang(ko) .hero-section > div:first-child > .font-overline,
  html:lang(zh) .hero-section > div:first-child > .font-overline,
  html:lang(ar) .hero-section > div:first-child > .font-overline {
    margin-bottom: 2rem;
  }

  html:lang(ja) .hero-section > div:first-child > h1,
  html:lang(ko) .hero-section > div:first-child > h1,
  html:lang(zh) .hero-section > div:first-child > h1,
  html:lang(ar) .hero-section > div:first-child > h1 {
    margin-bottom: 2.25rem;
  }

  html:lang(ja) .hero-section > div:first-child > h1 + p,
  html:lang(ko) .hero-section > div:first-child > h1 + p,
  html:lang(zh) .hero-section > div:first-child > h1 + p,
  html:lang(ar) .hero-section > div:first-child > h1 + p {
    margin-bottom: 3.25rem;
  }
}