/* ==========================================================================
   Typography - global type system for every page of the theme.

   Loaded straight after reset.css so anything later can override it. Every
   value comes from tokens.css: never write a raw px/rem size or a colour here
   or in the sheets that follow.

   Three layers, in order:
     1. element defaults    - bare h1-h6, p, small, ... on any page
     2. role classes (.t-*) - the design's named text styles, reusable anywhere
     3. shared patterns     - section headings and editor prose
   ========================================================================== */

/* --- 1. Element defaults --------------------------------------------------
   The design deliberately mixes both families in headings (section titles use
   Be Vietnam Pro, hero and card titles use Inter), so headings inherit the
   body family and opt into --font-display through a class. Only size, weight,
   rhythm and colour are set here. */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

h1 {
  font-size: var(--fs-h2);
}

h2 {
  font-size: var(--fs-h3);
}

h3 {
  font-size: var(--fs-h4);
}

h4 {
  font-size: var(--fs-lg);
}

h5 {
  font-size: var(--fs-body);
}

h6 {
  font-size: var(--fs-sm);
}

p {
  line-height: var(--lh-body);
}

small {
  font-size: var(--fs-sm);
}

strong, b {
  font-weight: var(--fw-semibold);
}

/* reset.css strips link decoration. Give it back inside running text only -
   listing it per container rather than as a bare `p a` on purpose, because the
   design markup puts plain links inside <p> and <li> (the footer menu) and they
   must stay undecorated. */
.prose a:not(.btn),
.entry__content a:not(.btn),
.comment-content a:not(.btn),
.archive-description a:not(.btn) {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}

.prose a:not(.btn):hover,
.entry__content a:not(.btn):hover,
.comment-content a:not(.btn):hover,
.archive-description a:not(.btn):hover {
  color: var(--c-primary-hover);
}

/* --- 2. Role classes ------------------------------------------------------
   The named text styles from the Figma file. Use them instead of restating
   family/size/weight on a section-specific class. */
.t-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-normal);
}

.t-kicker {
  font-weight: var(--fw-medium);
  font-size: var(--fs-hero-kicker);
  line-height: var(--lh-normal);
}

.t-h2 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-normal);
}

.t-h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-normal);
}

.t-h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
}

.t-page-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-page-title);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.t-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.t-label {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
}

.t-caption {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}

/* Big figures ("120+", "06") - Mona Sans at a fixed width axis. */
.t-stat {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: var(--fs-stat);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-stat);
  color: var(--c-text);
  font-variation-settings: "wdth" 100;
}

.t-muted {
  color: var(--c-ink-50);
}

/* --- 2b. Family / weight utilities ---------------------------------------- */
.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

/* Mona Sans is variable; pin the width axis so it never renders condensed. */
.font-num {
  font-family: var(--font-num);
  font-variation-settings: "wdth" 100;
}

.fw-regular {
  font-weight: var(--fw-regular);
}

.fw-medium {
  font-weight: var(--fw-medium);
}

.fw-semibold {
  font-weight: var(--fw-semibold);
}

.fw-bold {
  font-weight: var(--fw-bold);
}

/* Truncate to a fixed number of lines: set --lines on the element. */
.text-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 2);
  overflow: hidden;
}

/* --- 3a. Section heading --------------------------------------------------
   Every ported section opens with this pair. The flex container itself lives
   in layout.css; only the text styles are here. */
.section-head__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-normal);
  text-transform: capitalize;
  color: var(--c-ink);
}

.section-head__title--bold {
  font-weight: var(--fw-bold);
}

/* Newsroom section titles: body face, regular weight, no capitalising - they
   read as plain labels beside their hairline, not as display headings. */
.section-head__title--rule {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-brand);
  text-transform: none;
  color: var(--c-ink-pure);
}

/* Section titles set in the body family - "Về chúng tôi", "Các sự kiện chính". */
.section-head__title--body {
  font-family: var(--font-body);
}

/* Set in full caps - the support page headings, which the design draws that
   way rather than capitalised. */
.section-head__title--upper {
  text-transform: uppercase;
}

.section-head__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  max-width: 982px;
}

.section-head__lead--full {
  max-width: none;
}

/* --- 3b. Generic page and archive titles ---------------------------------- */
.page-title,
.entry__title {
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
}

/* --- 3c. Editor prose -----------------------------------------------------
   Scoped to .entry__content on purpose: reset.css flattens element margins for
   the design sections, and re-applying article spacing globally would push
   those sections apart. */
.entry__content h1,
.entry__content h2,
.entry__content h3,
.entry__content h4 {
  font-family: var(--font-display);
  margin: 0 0 var(--space-md);
}

.entry__content p,
.entry__content ul,
.entry__content ol,
.entry__content blockquote,
.entry__content table {
  margin: 0 0 var(--space-md);
}

.entry__content ul,
.entry__content ol {
  padding-left: 1.25em;
  list-style: revert;
}

.entry__content li + li {
  margin-top: var(--space-3xs);
}

.entry__content blockquote {
  padding-left: var(--space-md);
  border-left: 2px solid var(--c-hairline);
  color: var(--c-ink-70);
}