/**
 * Tnational public-site typography (Inter scale)
 * Load after page/component CSS so these rules harmonize headings and body text.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

:root {
    --font-sans: "Inter", sans-serif;
    --text-body: 16px;
    --leading-body: 1.6;
    --leading-prose: 1.7;
    --text-h1: 48px;
    --text-h2: 36px;
    --text-h3: 28px;
    --text-h4: 22px;
    --lh-h1: 1.1;
    --lh-h2: 1.2;
    --lh-h3: 1.3;
    --lh-h4: 1.4;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
input,
select,
textarea,
button {
    font-family: var(--font-sans) !important;
    font-size: var(--text-body) !important;
    line-height: var(--leading-body) !important;
    font-weight: 400 !important;
}

main > section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

main > section.valuTrek-hero,
main > section.hero {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

body h1,
body .hero h1,
body .hero-content h1,
body .valuTrek-hero h1,
body .valuTrek-hero-content h1 {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h1) !important;
    line-height: var(--lh-h1) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

body h2 {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h2) !important;
    line-height: var(--lh-h2) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

body h3 {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h3) !important;
    line-height: var(--lh-h3) !important;
    font-weight: 600 !important;
}

body h4 {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h4) !important;
    line-height: var(--lh-h4) !important;
    font-weight: 600 !important;
}

body h5,
body h6 {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-h4);
    font-weight: 600;
}

body p,
body li {
    font-family: var(--font-sans) !important;
    font-size: var(--text-body) !important;
    line-height: var(--leading-prose) !important;
    font-weight: 400 !important;
}

body .sp-section-lede,
body .sp-section-note,
body .sp-prose-panel p,
body .sp-card,
body .sp-highlight-card p,
body .loc-site-footer,
body .section-desc,
body .tp-content p {
    font-family: var(--font-sans) !important;
    font-size: var(--text-body) !important;
    line-height: var(--leading-prose) !important;
    font-weight: 400 !important;
}

/* Section labels map to h3 scale; main section titles to h2 */
body .section-mini-title,
body .mini-title {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h3) !important;
    line-height: var(--lh-h3) !important;
    font-weight: 600 !important;
}

body .section-title,
body .tp .section-title {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h2) !important;
    line-height: var(--lh-h2) !important;
    font-weight: 700 !important;
}

body .hero-eyebrow,
body .valuTrek-hero .hero-eyebrow {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h4) !important;
    line-height: var(--lh-h4) !important;
    font-weight: 400 !important;
}

body header nav a,
body nav a,
body .dropdown-hyperlink {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

body .btn,
body .cta-primary,
body .hero-buttons .btn {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1.4;
}

body footer h2 {
    font-size: var(--text-h4);
    line-height: var(--lh-h4);
    font-weight: 600;
}

body footer p,
body footer li,
body footer a {
    font-size: 14px;
    line-height: var(--leading-prose);
    font-weight: 400;
}

/* Avoid overly bold UI chrome */
body span,
body div,
body a:not(.btn):not(nav a) {
    font-weight: inherit;
}

@media (max-width: 767px) {
    body h1,
    body .hero h1,
    body .hero-content h1,
    body .valuTrek-hero h1,
    body .valuTrek-hero-content h1 {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    body h2,
    body .section-title,
    body .tp .section-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    body h3,
    body .section-mini-title,
    body .mini-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    body h4,
    body .hero-eyebrow,
    body .valuTrek-hero .hero-eyebrow {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    main > section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    main > section.valuTrek-hero,
    main > section.hero {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (max-width: 480px) {
    body h1,
    body .valuTrek-hero h1,
    body .valuTrek-hero-content h1 {
        font-size: 28px !important;
    }

    body h2,
    body .section-title,
    body .tp .section-title {
        font-size: 24px !important;
    }
}