/**
 * Vietnamese display typography.
 *
 * WHY THIS FILE EXISTS
 *
 * Measured on the live pages at a 1440px viewport, Vietnamese display type ran
 * LARGER than English, which is the opposite of the brand direction:
 *
 *   role          English              Vietnamese           was
 *   hero h1       60.5px / lh 1.04     66.4px / lh 1.08     +10%, wrapped to 4 lines
 *   gateway h2    34.6px / lh 1.10     43.2px / lh 1.08     +25%
 *   section h2    37px   / lh 1.16     31px   / lh 1.18     already correct
 *   card h3       23px   / lh 1.22     20px   / lh 1.27     already correct
 *   body, lead    20px                 20px                 already correct
 *
 * So only the two display roles were wrong. The rest of the scale already
 * follows the direction and is left alone.
 *
 * LEADING AND TRACKING
 *
 * The subtler fault was metrics. Vietnamese stacks a tone mark on top of a
 * vowel that may already carry a circumflex, and can put a dot underneath the
 * same glyph -- ế is e + circumflex + acute; ệ adds the dot below. That needs
 * roughly 0.12em more leading than Latin at the same size, and it needs the
 * tracking not to be negative: pulling glyphs together is what makes stacked
 * marks collide with their neighbours.
 *
 * The display roles were set with English metrics -- lh 1.08 and -0.025em --
 * which is why the hero read as cramped. Leading here is the English value for
 * the same role plus ~0.12; tracking is 0.
 *
 * WHY IT LOADS LAST
 *
 * The homepage layout is styled through ~256 `body.home` rules, and the
 * Vietnamese homepage now carries that class (see trinity_language_body_class
 * in inc/bilingual.php) so that its layout matches English. The side effect is
 * that English layout rules can outrank the Vietnamese language rules: the
 * gateway heading was taking its size from `body.home .process-section h2`.
 * The language scale has to win over the layout rules, so it is stated last
 * and explicitly.
 */

/* --------------------------------------------------------------------------
   Hero
   The 620px copy column puts the three/four line break at almost exactly
   53px: measured, 53.0px wraps to three lines and 53.3px to four. Sitting on
   that boundary is fragile -- a font swap or a slightly different string flips
   it -- so this targets ~49px at 1440, comfortably clear of the break, and
   caps at 3.1rem so a wider viewport cannot push it back over.

   English is 60.5px here. Vietnamese is smaller by more than the "slightly"
   the direction asks for, and that is deliberate: the line count matters more
   than parity, and at weight 800 Montserrat 49px still reads as display.

   The heading also carries an authored <br>. Suppressing it does not help --
   measured, still four lines at 53.3px -- so the size is what fixes this.
   -------------------------------------------------------------------------- */

html body.trinity-lang-vi .site-main .split-hero .split-hero__copy h1,
html body.trinity-lang-vi .site-main .split-hero .split-hero__copy h1.wp-block-heading,
html body.trinity-lang-vi .site-main .wp-block-group.split-hero h1.wp-block-heading {
  font-size: clamp(2.4rem, 3.4vw, 3.1rem) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Section headings
   The size is already correct at 31px. Metrics only.
   -------------------------------------------------------------------------- */

html body.trinity-lang-vi .site-main h2,
html body.trinity-lang-vi .site-main h2.wp-block-heading {
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The services gateway heading
   Its size was coming from `body.home .process-section h2`, an English layout
   rule, at 43.2px. clamp(1.6rem, 2.15vw, 2.1rem) gives 31px at 1440, against
   English at 34.6px.
   -------------------------------------------------------------------------- */

html body.trinity-lang-vi .site-main .trinity-services-gateway-v18__copy h2,
html body.trinity-lang-vi .site-main .trinity-services-gateway-v18__copy h2.wp-block-heading {
  font-size: clamp(1.6rem, 2.15vw, 2.1rem) !important;
  line-height: 1.24 !important;
  letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   Card and timeline headings
   Size already correct at 20px. Metrics only.
   -------------------------------------------------------------------------- */

html body.trinity-lang-vi .site-main h3,
html body.trinity-lang-vi .site-main h3.wp-block-heading {
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   Labels
   The eyebrow keeps its positive tracking -- uppercase Vietnamese needs it as
   much as uppercase Latin does -- but gains a little leading, because an
   uppercase tone mark sits higher than a lowercase one.
   -------------------------------------------------------------------------- */

html body.trinity-lang-vi .site-main .eyebrow {
  line-height: 1.42 !important;
}

/* --------------------------------------------------------------------------
   Never negative on Vietnamese.
   A catch-all so a future build cannot reintroduce negative tracking on
   Vietnamese display text without saying so here.
   -------------------------------------------------------------------------- */

html body.trinity-lang-vi .site-main h1,
html body.trinity-lang-vi .site-main h2,
html body.trinity-lang-vi .site-main h3,
html body.trinity-lang-vi .site-main h4,
html body.trinity-lang-vi .site-main .trinity-lead,
html body.trinity-lang-vi .site-main p {
  letter-spacing: 0 !important;
}

/* The label is the one exception: uppercase always needs opening out. */
html body.trinity-lang-vi .site-main p.eyebrow,
html body.trinity-lang-vi .site-main .eyebrow {
  letter-spacing: 0.07em !important;
}