/* TECH JCORP language styles. Linked on every page, after core.css and the page file.
   English needs nothing here. scripts/i18n.js sets lang and dir on the html element, and every rule below
   is keyed on them, so one stylesheet serves every language.

   Right to left (Hebrew, Arabic): i18n.js sets dir="rtl". Flex, grid and the logical properties used in the
   other files mirror by themselves. The only rules here are the ones that do not: the side fades, the tick
   marks, the cover crops & the home photograph, which is flipped so the jaguar still faces the text. Other
   photographs are never mirrored.

   Two fonts per language, one for headings and one for body text. Latin letters (the brand name,
   technology names) always use the English fonts first, so TECH-JCORP looks identical everywhere, and the
   local script falls through to its own font. The font files for Hebrew, Arabic & Japanese are loaded by
   i18n.js only when that language is chosen (see "fonts" in translations/languages.json).

   Hebrew     headings: Frank Ruhl Libre, a formal print serif     body: Playpen Sans Hebrew, a handwriting style
   Arabic     headings: Amiri, a classical serif                   body: IBM Plex Sans Arabic
   Japanese   headings: Noto Serif JP                              body: Noto Sans JP
   French & Russian use the English pair, IBM Plex Serif & Inter, which include their letters.

   To add a language: add it to translations/languages.json, add its json file, and add a block here only if
   it needs its own fonts or a taller line height. */

/* Hebrew, Arabic & Japanese need more space between lines than Latin text */
html[lang="he"] {
  --lh-body: 1.8; --lh-long: 1.8;
  --font-heading: 'IBM Plex Serif', 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Playpen Sans Hebrew', 'Segoe Print', 'Comic Sans MS', sans-serif;
}

html[lang="ar"] {
  --lh-body: 1.8; --lh-long: 1.8;
  --font-heading: 'IBM Plex Serif', 'Amiri', 'Times New Roman', serif;
  --font-body: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 106.25%;
}

html[lang="ja"] {
  --lh-body: 1.85; --lh-long: 1.85;
  --font-heading: 'IBM Plex Serif', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-body: 'Inter', 'Noto Sans JP', 'Yu Gothic', 'Hiragino Sans', 'Meiryo', system-ui, sans-serif;
}
html[lang="ja"] body { line-break: strict; word-break: auto-phrase; }
html[lang="ja"] :is(h1, h2) span { white-space: nowrap; }

/* These scripts have no capitals and do not take letter spacing */
:is(html[lang="he"], html[lang="ar"], html[lang="ja"]) :is(h1, h2, h3, h4, .page-hero h1, .case-title, .project-name) { letter-spacing: 0; line-height: 1.3; }
:is(html[lang="he"], html[lang="ar"], html[lang="ja"]) :is(.kicker, .page-eyebrow, .eyebrow, .tier-label,
  .project-kicker, .case-kicker, .contact-detail-item .label, .form-group label, .footer-col h4, .hero-facts,
  .btn, .nav-links a, .mobile-menu a) { letter-spacing: 0; text-transform: none; }
:is(html[lang="he"], html[lang="ar"], html[lang="ja"]) .hero-tagline { direction: ltr; }
html[lang="ar"] .hero-tagline { direction: rtl; }
html[lang="fr"] :is(.kicker, .page-eyebrow, .eyebrow, .tier-label) { letter-spacing: .08em; }

/* Right to left. Two variables do most of the work:
   --side-fade flips every side fade on the heroes,
   --tick-flip mirrors the tick marks in the package and Overwatch lists (pages.css).
   Everything else follows the logical properties, so no per element overrides are needed. */
html[dir="rtl"] { --side-fade: 270deg; }
html[dir="rtl"] .hero-media { transform: scaleX(-1); }
html[dir="rtl"] .page-hero { background-position: center left; }

/* Image galleries keep their left to right controls, while captions read right to left */
html[dir="rtl"] .brand-showcase { direction: ltr; }
html[dir="rtl"] .showcase-caption { direction: rtl; }

/* Numbers, prices & email addresses keep their left to right order inside right to left text */
html[dir="rtl"] :is(.plan-price, input[type="email"], .contact-detail-item a) { unicode-bidi: plaintext; }