/* Site-wide readable typography. Loaded after the visual theme. */

html[data-effective-theme="light"] {
    --theme-text-muted: #4a525c;
    --theme-text-soft: #626c78;
    --theme-heading: #1c2530;
}

html[data-effective-theme="dark"] {
    --theme-text-muted: #cbd3dd;
    --theme-text-soft: #aeb8c5;
    --theme-heading: #f7f9fc;
}

html[data-effective-theme] body {
    font-size: 16px !important;
    line-height: 1.58 !important;
    text-rendering: optimizeLegibility;
}

html[data-effective-theme][data-effective-theme] body main :is(p, li, dd, figcaption, td):not(.hero *):not(.article-meta *):not(.breadcrumbs *):not(.breadcrumb *):not(.fohow-breadcrumbs *):not(.book-breadcrumbs *):not(.blog-date):not(.tag):not(.category-badge):not(.section-tag):not(.eyebrow):not(.part-meta) {
    color: var(--theme-text-muted) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
}

html[data-effective-theme][data-effective-theme] body main
    :is(h1, .main-title, .article-header h1):not(.hero *) {
    color: var(--theme-heading) !important;
    font-size: clamp(32px, 3vw, 40px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
}

html[data-effective-theme][data-effective-theme] body main h2:not(.hero *) {
    color: var(--theme-heading) !important;
    font-size: clamp(25px, 2.2vw, 31px) !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.01em !important;
}

html[data-effective-theme][data-effective-theme] body main h3:not(.hero *) {
    color: var(--theme-heading) !important;
    font-size: clamp(21px, 1.7vw, 24px) !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    letter-spacing: -0.005em !important;
}

html[data-effective-theme][data-effective-theme] body main h4:not(.hero *) {
    color: var(--theme-heading) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

html[data-effective-theme][data-effective-theme] body main .section-header
    :is(h2, .section-title) {
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.2 !important;
}

html[data-effective-theme][data-effective-theme] body main .hero
    :is(h1, .main-title) {
    font-size: clamp(38px, 4.4vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.035em !important;
}

html[data-effective-theme][data-effective-theme] body main [role="note"] {
    color: var(--theme-text-muted) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.58 !important;
}

html[data-effective-theme][data-effective-theme] body main [role="note"] :is(p, li) {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

html[data-effective-theme][data-effective-theme] body main
    :is(.blog-card, .related-card, .fohow-static-related__card, .popular-articles__card, .product-card, .feature-card, .training-card)
    :is(h2, h3, h4, .blog-title, .blog-title a, .popular-articles__card-title, .popular-articles__card-title a, .related-card-title, .related-card-title a, strong) {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

@media screen and (max-width: 820px) {
    html[data-effective-theme="light"] {
        --theme-text: #252c34;
        --theme-text-muted: #2d353e;
        --theme-text-soft: #46515d;
        --theme-heading: #111820;
    }

    html[data-effective-theme="dark"] {
        --theme-text: #f3f6f9;
        --theme-text-muted: #e2e7ed;
        --theme-text-soft: #c8d0da;
        --theme-heading: #ffffff;
    }

    html[data-effective-theme] body {
        font-size: 17px !important;
        line-height: 1.7 !important;
    }

    html[data-effective-theme][data-effective-theme] body main :is(p, li, dd, figcaption, td):not(.hero *):not(.article-meta *):not(.breadcrumbs *):not(.breadcrumb *):not(.fohow-breadcrumbs *):not(.book-breadcrumbs *):not(.blog-date):not(.tag):not(.category-badge):not(.section-tag):not(.eyebrow):not(.part-meta) {
        color: var(--theme-text-muted) !important;
        font-size: 18px !important;
        font-weight: 450 !important;
        line-height: 1.7 !important;
    }

    html[data-effective-theme][data-effective-theme] body main
        :is(h1, .main-title, .article-header h1):not(.hero *) {
        font-size: clamp(30px, 8vw, 34px) !important;
        line-height: 1.2 !important;
        letter-spacing: -0.012em !important;
    }

    html[data-effective-theme][data-effective-theme] body main h2:not(.hero *) {
        font-size: clamp(25px, 6.8vw, 29px) !important;
        line-height: 1.28 !important;
    }

    html[data-effective-theme][data-effective-theme] body main h3:not(.hero *) {
        font-size: clamp(21px, 5.8vw, 24px) !important;
        line-height: 1.32 !important;
    }

    html[data-effective-theme][data-effective-theme] body main h4:not(.hero *) {
        font-size: 20px !important;
    }

    html[data-effective-theme][data-effective-theme] body main .section-header
        :is(h2, .section-title) {
        font-size: clamp(27px, 7.4vw, 31px) !important;
    }

    html[data-effective-theme][data-effective-theme] body main .hero
        :is(h1, .main-title) {
        font-size: clamp(30px, 8.4vw, 36px) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.02em !important;
    }

    html[data-effective-theme][data-effective-theme] body main .hero
        :is(p, .hero-subtitle, .title-line--secondary, .title-line.subtitle) {
        color: #ffffff !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: 1.62 !important;
        opacity: 1 !important;
    }

    html[data-effective-theme][data-effective-theme] body main [role="note"] {
        font-size: 16px !important;
        font-weight: 450 !important;
        line-height: 1.62 !important;
    }

    html[data-effective-theme][data-effective-theme] body main .hero .hero-feature {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    html[data-effective-theme][data-effective-theme] body main .hero .hero-cta
        :is(a, button, .primary-button, .secondary-button) {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    html[data-effective-theme][data-effective-theme] body main
        :is(.blog-card, .related-card, .fohow-static-related__card, .popular-articles__card, .product-card, .feature-card, .training-card)
        :is(h2, h3, h4, .blog-title, .blog-title a, .popular-articles__card-title, .popular-articles__card-title a, .related-card-title, .related-card-title a, strong) {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }

    html[data-effective-theme][data-effective-theme] body main
        #mainCategoryMenu .category-btn {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
}