/*
 * Typography — where Meta Serif Pro is used, and where it is not.
 *
 * The pairing: Meta Serif Pro carries voice (headings, titles, quotes, the
 * figures the firm wants read), Inter carries function (navigation, buttons,
 * forms, labels, tables, body copy). Keeping the two jobs separate is what
 * makes the serif read as deliberate rather than decorative.
 *
 * One file so the whole type system can be tuned in one place.
 * Faces are declared in fonts.css.
 */

@layer components {

/*
 * ── Display weights ─────────────────────────────────────────────────────────
 * The old values (300 on every large heading) were tuned for Inter, which is
 * narrow and needed the lightness. Meta Serif Pro at 300 reads delicate rather
 * than emphatic, so the display scale steps up.
 *
 * Weighted optically, not uniformly: large type needs less weight to feel
 * present, small type needs more. So the hero sits at Medium and a card title
 * at Bold, even though the hero is the louder element.
 *
 * Meta Serif Pro ships 300 / 400 / 500 / 700 / 800 / 900. There is no 600 —
 * the old `font-weight:600` rules were already resolving to Bold, so this makes
 * that explicit rather than leaving it to the browser's matching algorithm.
 *
 * Dial the whole system from these four values.
 */
:root {
	--fw-display: 500;   /* hero and page headings, statements */
	--fw-title:   700;   /* entity and card titles, section headings */
	--fw-strong:  700;   /* emphasis inside a display line */
	--fw-quote:   400;   /* quotations — elegance, not weight */
}

/* ── Document headings ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-title);
}

/*
 * Display sizes were tuned for Inter, which is narrow and needs negative
 * tracking. A serif at the same tracking looks cramped, so the large sizes get
 * their letter-spacing relaxed toward zero.
 */
.hero-title,
.page-hero-title,
.lp-name,
.statement,
.block-statement,
.footer-statement,
.xp-stmt,
.art-title,
.bk-title,
.nf-title,
.po-title,
.dl-title,
.res-title,
.sr-none-title {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	letter-spacing: -0.005em;
}

/*
 * ── Home page expertise statement ───────────────────────────────────────────
 * Two separate problems, two separate levers.
 *
 * SIZE: reduced from the 2.25rem cap the shared --fs-statement carries.
 *
 * LINE COUNT: font size does not affect it. `.statement` caps at
 * `max-width: 22em`, and because em scales with the font, shrinking the type
 * keeps exactly the same ~40 characters per line — the same four lines, just
 * smaller. Widening the measure is what buys lines back: 30em holds roughly 54
 * characters, so a tagline up to ~155 characters lands in three.
 *
 * The field is capped at 200 characters, so anything longer than the budget is
 * a copy decision, not a CSS one — see the note in inc/acf.php.
 */
.xp-stmt {
	font-size: clamp(1.3rem, calc(1.05rem + 1.2vw), 2.05rem);
	max-width: 30em;
}

/* Emphasis inside a display line has to out-weigh the line it sits in. */
.hero-title strong, .hero-title b,
.page-hero-title strong, .page-hero-title b,
.statement strong, .statement b,
.block-statement strong,
.footer-statement strong,
.xp-stmt strong {
	font-weight: var(--fw-strong);
}

/* ── Entity and card titles ──────────────────────────────────────────────── */
.pa-title,
.tm-name,
.leader-name,
.lw-name,
.lm-name,
.dir-name,
.pf-name,
.rv-name,
.img-card-title,
.media-card-title,
.gal-title,
.sr-title,
.sv-name,
.f-drop-title,
.brand-name,
.footer-brand-name {
	font-family: var(--font-display);
	font-weight: var(--fw-title);
	letter-spacing: 0;
}

/*
 * These two are <span>s, so the design's `margin-bottom:0.4rem` on the title was
 * silently ignored — margins do not apply to inline elements — and the heading
 * ran straight into its own description on one line. Affects every img-card:
 * the home page, initiatives, careers and who-we-are.
 */
.img-card-title,
.img-card-sub {
	display: block;
}

/* ── Quotations ──────────────────────────────────────────────────────────── */
blockquote,
.pull-quote,
.quote,
.intro-quote blockquote,
.grand-quote blockquote {
	font-family: var(--font-display);
	font-weight: var(--fw-quote);
	letter-spacing: -0.005em;
}

/* The oversized quote marks are glyphs from the display face, so they match. */
.gq-mark,
.intro-quote .gq-mark {
	font-family: var(--font-display);
}

/* ── Figures the firm wants read as statements ───────────────────────────── */
.fact-value,
.stat-num,
.lm-fact-value,
.ct-value,
.pa-num,
.bk-num,
.fr-score,
.principle-num {
	font-family: var(--font-display);
	font-weight: var(--fw-title);
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: 0;
}

/* ── Emphasis inside prose ───────────────────────────────────────────────── */
/*
 * A serif italic is the point of having one: it carries case names, statute
 * titles and Latin terms, which is most of what a law firm emphasises.
 */
.pd-prose em,
.pd-prose i,
.pd-prose cite,
.art-body em,
.art-body i,
.art-body cite,
.entry-content em,
.entry-content i,
.entry-content cite {
	font-family: var(--font-display);
	font-style: italic;
}

/* Prose subheadings sit with the headings, not the body. */
.pd-prose h2,
.pd-prose h3,
.pd-prose h4,
.art-body h2,
.art-body h3,
.art-body h4,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--font-display);
}

/* The lede under a page hero is a sentence of voice, not a UI label. */
.page-hero-lede {
	font-family: var(--font-display);
	font-weight: var(--fw-quote);
	letter-spacing: 0;
}

/*
 * ── Deliberately NOT the display face ───────────────────────────────────────
 * Navigation, buttons, form controls, small uppercase labels, tables and data
 * stay in Inter. They are read as interface, and a serif at micro sizes with
 * wide tracking loses legibility. Listed explicitly so a later change to the
 * heading rules cannot pull them in by accident.
 */
.nav a,
.nav .nav-disclosure,
.btn-outline,
.btn-ghost,
.btn-appoint,
.sv-add,
.cart-checkout,
.kicker,
.kicker-strong,
.crumb,
.sr-type,
.sv-cat,
.sv-fee-label,
.f-label,
.f-input,
.f-select,
.pager,
.pg,
input, select, textarea, button {
	font-family: var(--font);
}

/*
 * Marked up as headings, but they function as uppercase micro-labels — 0.72rem
 * to 0.85rem with 0.08em–0.16em tracking. A serif at that size and tracking
 * loses legibility, so they follow their job rather than their tag, and keep
 * the weights they were designed with.
 */
.fcol h4,
.pd-nav h3,
.lp-sec h2 {
	font-family: var(--font);
}

.fcol h4   { font-weight: 600; }
.pd-nav h3 { font-weight: 700; }
.lp-sec h2 { font-weight: 700; }

}

/* ── Chinese ────────────────────────────────────────────── */

/*
 * The Latin face stays FIRST in each stack and the CJK face follows. A browser
 * resolves fonts per glyph, so "CR. Amanya Advocates" inside a Chinese sentence
 * still renders in Meta Serif Pro and Inter, and only the Chinese characters
 * fall through to Noto. Putting the CJK face first would quietly restyle every
 * Latin word on the page.
 */
.lang-zh {
	--font-display: 'Meta Serif Pro', 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
	--font: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/*
 * Chinese has no spaces between words, so there is no inter-word tracking to
 * tighten — negative letter-spacing just crowds the glyphs into each other.
 * These are every selector in the theme that tightens tracking; the list is
 * generated from the stylesheets rather than typed, so none is missed.
 */
.lang-zh .art-title,
.lang-zh .bk-fee b,
.lang-zh .block-statement,
.lang-zh .ct-cell .ct-value,
.lang-zh .dir-name,
.lang-zh .fact-value,
.lang-zh .footer-statement,
.lang-zh .fr-score,
.lang-zh .gal-title,
.lang-zh .grand-quote blockquote,
.lang-zh .hero-title,
.lang-zh .img-card-title,
.lang-zh .intro-quote blockquote,
.lang-zh .lm-name,
.lang-zh .lp-name,
.lang-zh .lw-name,
.lang-zh .media-card-title,
.lang-zh .nf-ghost,
.lang-zh .nf-title,
.lang-zh .page-hero-title,
.lang-zh .pa-title,
.lang-zh .pay-head .total,
.lang-zh .pf-name,
.lang-zh .po-amt,
.lang-zh .po-title,
.lang-zh .res-title,
.lang-zh .sr-title,
.lang-zh .statement,
.lang-zh .stat-num,
.lang-zh .sv-fee--detail .sv-price,
.lang-zh .sv-name,
.lang-zh .sv-price,
.lang-zh .tm-name,
.lang-zh .wh-client,
.lang-zh .xd-item-title,
.lang-zh .xd-name {
	letter-spacing: normal;
}

/*
 * CJK text has no ascenders and descenders to speak of, so the line heights
 * tuned for Latin read cramped. A little more room, on the long-form text only.
 */
.lang-zh .prose p,
.lang-zh .lp-sec p,
.lang-zh .pd-body p {
	line-height: 1.9;
}

/* ── Languages that run longer than English ─────────────────────── */

/*
 * German runs about 30% longer than English, French and Swahili 15–25%.
 * "Explore the practice" becomes "Entdecken Sie den Fachbereich".
 *
 * Three labels in the theme sit in constrained flex rows AND are marked
 * nowrap, so longer text does not wrap — it overflows. These let them wrap.
 *
 * Scoped away from English on purpose. English layout is byte-for-byte
 * unchanged by this file, which is the standing constraint on the whole
 * multilingual build; the longer languages get the room instead.
 *
 * Deliberately NOT relaxed: .cart-line-fee and .xd-item-meta hold a price and
 * a date, .lang-list holds language names, and the control rows hold chevrons.
 * Those belong on one line in every language.
 */
body:not(.lang-en) .more-link,
body:not(.lang-en) .accolade-badge,
body:not(.lang-en) .fr-link {
	white-space: normal;
}

/* Wrapping a badge looks accidental unless the lines are balanced. */
body:not(.lang-en) .accolade-badge {
	text-wrap: balance;
}

/*
 * The hero and the statement lines are capped in em, so longer languages simply
 * take another line rather than overflowing — but at the tightest caps that
 * reads as cramped. A little more width, again only where it is needed.
 */
body:not(.lang-en) .footer-statement,
body:not(.lang-en) .statement {
	max-width: 20em;
}