/*
 * Bowen Education Group - Typography refinement
 * Loaded after page styles so the type scale remains consistent site-wide.
 */

/*
 * English editorial system
 * Newsreader gives major headings the character of a British school journal;
 * Source Sans 3 keeps navigation, body copy and data calm and highly legible.
 * These overrides are intentionally language-scoped so Chinese typography is
 * unchanged.
 */
html[lang="en"] {
    --font-primary: "Source Sans 3", "Segoe UI", sans-serif;
    --font-heading: "Newsreader", Georgia, serif;
    --line-height-loose: 1.65;
}

html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea {
    font-family: var(--font-primary);
    font-optical-sizing: auto;
}

html[lang="en"] body {
    line-height: 1.65;
    letter-spacing: 0.002em;
}

html[lang="en"] h1,
html[lang="en"] h2 {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.028em;
}

/* Several legacy components use a `-zh` class name for their primary title
 * even in the English template. Keep the class for compatibility, but route
 * the rendered English title through the editorial display face. */
html[lang="en"] .hero-slide-title,
html[lang="en"] .prog-hero__title-zh,
html[lang="en"] .page-hero__title-zh,
html[lang="en"] .page-hero__title-en,
html[lang="en"] .page-hero-v2__title-zh,
html[lang="en"] .page-hero-v2__title-en,
html[lang="en"] .about-hero-title .title-zh,
html[lang="en"] .evt-hero__title,
html[lang="en"] .evt-hero__title-zh {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    font-weight: 600;
}

html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.012em;
}

html[lang="en"] .main-content p,
html[lang="en"] .main-content li {
    line-height: 1.68;
}

html[lang="en"] .nav-link,
html[lang="en"] .dropdown-menu a,
html[lang="en"] .mobile-nav-link,
html[lang="en"] .mobile-nav-toggle,
html[lang="en"] .btn,
html[lang="en"] .prog-btn {
    font-family: var(--font-primary);
    letter-spacing: 0.005em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

.main-content p,
.main-content li {
    text-wrap: pretty;
}

/* Shared page heroes */
.hero-slide-title,
.prog-hero__title-zh,
.contact-page .page-hero__title-zh,
.evt-hero__title {
    font-size: clamp(2.125rem, 3.5vw, 3rem);
}

.hero-slide-desc,
.prog-hero__sub,
.contact-page .page-hero__subtitle {
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

.page-hero-v2__title-zh {
    font-size: clamp(2rem, 3vw, 2.25rem);
}

.page-hero-v2__subtitle {
    font-size: 1rem;
}

.about-hero-title .title-zh {
    font-size: clamp(2.25rem, 4vw, 3rem);
}

.about-hero-title .title-en {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.about-hero-subtitle {
    font-size: 1.25rem;
}

.about-hero-tagline {
    font-size: 1rem;
}

html[lang="zh"] .hero-slide-title,
html[lang="zh"] .prog-hero__title-zh,
html[lang="zh"] .contact-page .page-hero__title-zh,
html[lang="zh"] .evt-hero__title {
    line-height: 1.25;
}

/* HSK & YCT editorial pages */
.exam-hero h1 {
    font-size: clamp(3rem, 6.2vw, 5.75rem);
    line-height: 0.92;
}

.exam-hero h1 em {
    font-size: 0.54em;
}

.exam-hero__lead {
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.65;
}

.exam-copy h2,
.exam-heading h2 {
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    line-height: 1.05;
}

.exam-lead {
    font-size: 1rem;
    line-height: 1.75;
}

.exam-track h3 {
    font-size: clamp(1.75rem, 2.6vw, 2.75rem);
}

.fee-panels h3,
.table-section-title {
    font-size: 1.75rem;
}

.candidate-grid h3 {
    font-size: 1.875rem;
}

.exam-register-band h2 {
    font-size: clamp(2.25rem, 3.5vw, 3.25rem);
}

.exam-faq summary {
    font-size: 1.125rem;
}

.exam-info-hero h1 {
    font-size: clamp(2.75rem, 5vw, 4.75rem);
}

.form-step legend {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.2;
}

.completion-card h1 {
    font-size: clamp(2.5rem, 5vw, 4.25rem);
}

html[lang="zh"] .exam-hero h1 {
    line-height: 1.05;
}

html[lang="zh"] .exam-copy h2,
html[lang="zh"] .exam-heading h2 {
    line-height: 1.22;
}

html[lang="zh"] .exam-info-hero h1,
html[lang="zh"] .completion-card h1 {
    line-height: 1.15;
}

@media (max-width: 620px) {
    .exam-hero h1 {
        font-size: clamp(2.75rem, 13vw, 3.8rem);
    }

    .exam-copy h2,
    .exam-heading h2 {
        font-size: 2.2rem;
    }

    input,
    select,
    textarea,
    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 16px;
    }
}