/*
 * Layout rules for translated pages (site/<code>/). Loaded only by them, after styles.css.
 * Every rule is scoped to its language or language group with :lang(), e.g.
 *   :lang(de), :lang(fi) .features-section h2 { ... }
 * Above each rule: which block it fixes and why. Never change wording here or in the pages.
 */

/* App headings: keep the age and daily-practice headings in balanced lines. */
:lang(de) .app-hero h1,
:lang(de) .best-results h2 {
  text-wrap: balance;
}

/* Method hero: avoid leaving "Mathe." alone on the second tablet line. */
:lang(de) .method-hero p {
  text-wrap: balance;
}

/* Method principles: allow a German compound to wrap within the mobile width. */
:lang(de) .method-pillars h2 {
  hyphens: auto;
  text-wrap: balance;
}

/* Practice duration: keep the numeric range and its unit on the same line. */
:lang(de) .time-range {
  white-space: nowrap;
}

@media (max-width: 720px) {
  /* Home headline: fit "So macht Mathe" before the existing deliberate break. */
  :lang(de) .features-content h2 {
    font-size: 40px;
  }

  /* Adventure headings: fit "Mathe-Abenteuer" intact in two mobile lines. */
  :lang(de) .adventure-section h2,
  :lang(de) .journey-section h2 {
    text-wrap: balance;
    font-size: 36px;
  }
}

/* Step and value headings, principle cards, story heading: balanced lines instead of one word
   left alone on the last line ("Rechnen, das Spaß / macht", "Von Anfang an das richtige / Niveau",
   "Qualität bis ins kleinste / Detail", "Warum eine gute Geschichte so / wichtig ist"). */
:lang(de) .mastery-step h3,
:lang(de) .method-pillars h3,
:lang(de) .story-driven h2 {
  text-wrap: balance;
}

/* Body text, list items and section subheads: avoid a single word on the last line
   ("wollen.", "Hause.", "brauchen.", "Tag.", "Nachricht.", "können.").
   The home subtitle keeps normal wrapping so its mobile lines follow the sentences. */
:lang(de) p:not(.subtitle),
:lang(de) li,
:lang(de) .subhead {
  text-wrap: pretty;
}

/* Adventure headings: avoid a lone MathHero below a long tablet line. */
:lang(fr) .adventure-section h2,
:lang(fr) .journey-section h2 {
  text-wrap: balance;
}

/* App hero and daily practice: balance long headings around their intact phrases. */
:lang(fr) .app-hero h1,
:lang(fr) .best-results h2 {
  text-wrap: balance;
}

/* Method introduction: avoid leaving only "maths." on the second tablet line. */
:lang(fr) .method-hero p {
  text-wrap: balance;
}

/* Progress heading: keep the child and the MathHero phrase in balanced lines. */
:lang(fr) .mastery-works h2 {
  text-wrap: balance;
}

@media (min-width: 721px) {
  /* Story heading: avoid the short "change tout" tail on wide screens. */
  :lang(fr) .story-driven h2 {
    text-wrap: balance;
  }
}

@media (min-width: 1025px) {
  /* FAQ title: fit "fréquentes" in its 250px column without splitting the word. */
  :lang(fr) .faq-section h2 {
    font-size: 41px;
  }
}

/* Vietnamese text: use a complete Vietnamese family so accented letters keep the same weight. */
body:lang(vi) {
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* Language picker: override its explicit Rubik fonts with the Vietnamese page font. */
html:lang(vi) .language-trigger,
html:lang(vi) .language-picker,
html:lang(vi) .language-heading h2 {
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* App curriculum title: balance the wider Vietnamese glyphs without a lone final syllable. */
:lang(vi) .app-goals h2 {
  text-wrap: balance;
}

/* Footer copyright: keep two balanced lines when the Vietnamese font needs a mobile wrap. */
:lang(vi) .copyright {
  text-wrap: balance;
}

/* Home subtitle: balance the two sentences without splitting "rõ rệt". */
:lang(vi) .features-content .subtitle {
  text-wrap: balance;
}

/* Adventure headings: avoid a short "toán học" tail on tablets. */
:lang(vi) .adventure-section h2,
:lang(vi) .journey-section h2 {
  text-wrap: balance;
}

/* App section headings: avoid short final lines for family and progress. */
:lang(vi) .made-for-families h2,
:lang(vi) .built-for-mastery h2 {
  text-wrap: balance;
}

@media (min-width: 721px) {
  /* Daily practice: balance the desktop heading while preserving its natural mobile lines. */
  :lang(vi) .best-results h2 {
    text-wrap: balance;
  }
}

/* Method introduction: keep the tablet subtitle from ending with only "môn Toán". */
:lang(vi) .method-hero p {
  text-wrap: balance;
}

/* Method headings: balance the intact Vietnamese phrases across lines. */
:lang(vi) .method-pillars h3,
:lang(vi) .story-driven h2 {
  text-wrap: balance;
}

/* Studio hero: move the decorative star clear of the longer Vietnamese title. */
:lang(vi) .about-hero .star-tl {
  left: -40px;
}

@media (max-width: 720px) {
  /* Adventure headings: fit intact phrases in two mobile lines instead of four. */
  :lang(vi) .adventure-section h2,
  :lang(vi) .journey-section h2 {
    font-size: 32px;
  }

  /* Story heading: fit intact phrases in three mobile lines instead of four. */
  :lang(vi) .story-driven h2 {
    font-size: 36px;
  }
}