/*
 * Site-wide readable typography.
 *
 * Inter is served locally by inter-font.css. This final layer normalizes text
 * that older component rules rendered at 800-950 while leaving icon fonts and
 * the WordPress administration area alone.
 */
:root {
    --kh-text-weight: 400;
    --kh-link-weight: 500;
    --kh-control-weight: 600;
    --kh-heading-weight: 650;
}

html body {
    font-family: var(--kh-ui-font, "Inter", "Segoe UI", system-ui, sans-serif) !important;
    font-weight: var(--kh-text-weight);
}

html body #content#content :where(
    h1, h2, h3, h4, h5, h6,
    p, a, button, input, select, textarea, label,
    li, dt, dd, th, td, small, strong, b, em, blockquote,
    span:not(.dashicons):not([class*="icon"]):not([class^="fa"]):not([class*=" fa"])
) {
    font-family: var(--kh-ui-font, "Inter", "Segoe UI", system-ui, sans-serif) !important;
    letter-spacing: 0 !important;
}

html body #content#content :where(p, li, dt, dd, th, td, label, small, em, blockquote) {
    font-weight: var(--kh-text-weight) !important;
}

html body #content#content h1,
html body #content#content h2 {
    font-weight: var(--kh-heading-weight) !important;
    line-height: 1.2;
}

html body #content#content h3,
html body #content#content h4,
html body #content#content h5,
html body #content#content h6 {
    font-weight: var(--kh-control-weight) !important;
    line-height: 1.25;
}

html body #content#content :where(a:not(.button):not([class*="btn"]), .breadcrumb, .breadcrumbs) {
    font-weight: var(--kh-link-weight) !important;
}

html body #content#content :where(
    strong, b,
    button, .button, [role="button"],
    input[type="button"], input[type="submit"], input[type="reset"],
    [class*="btn"]
) {
    font-weight: var(--kh-control-weight) !important;
}

html body #content#content :where(
    button, .button, [role="button"],
    input[type="button"], input[type="submit"], input[type="reset"],
    [class*="btn"]
) :where(span:not(.dashicons):not([class*="icon"]), strong, b) {
    font-weight: var(--kh-control-weight) !important;
}

html body :where(.site-header, .site-footer) :where(
    a, button, input, select, textarea, label, p, li, small, strong, b,
    span:not(.dashicons):not([class*="icon"]):not([class^="fa"]):not([class*=" fa"])
) {
    font-family: var(--kh-ui-font, "Inter", "Segoe UI", system-ui, sans-serif) !important;
    letter-spacing: 0 !important;
}

html body .site-header :where(a, button, label) {
    font-weight: var(--kh-link-weight) !important;
}

html body .site-header .main-navigation > ul > li > a,
html body .site-header .main-navigation .mega-catalog > a,
html body .site-header :where(.button, [class*="btn"]) {
    font-weight: var(--kh-control-weight) !important;
}

html body .site-footer :where(p, li, small) {
    font-weight: var(--kh-text-weight) !important;
}

html body .site-footer :where(a, strong, b, button, .button, [class*="btn"]) {
    font-weight: var(--kh-link-weight) !important;
}

/* The downloads branch already has a tuned hierarchy; keep its final values. */
html body #content#content main.kh-downloads-page.kh-downloads-detail > h1,
html body #content#content main.kh-downloads-page.kh-downloads-detail .kh-dl-product-title,
html body #content#content main.kh-downloads-page.kh-downloads-category h1,
html body #content#content main.kh-downloads-page.kh-downloads-home .kh-dl-hero h1 {
    font-weight: var(--kh-heading-weight) !important;
    line-height: 1.18 !important;
}

/* Desktop type scale aligned with the measured Keysoft storefront. */
html {
    font-size: 16px !important;
}

@media (min-width: 1024px) {
    html body {
        font-size: 16px !important;
    }

    html body #content#content h1 {
        font-size: 40px !important;
    }

    /* Product names use the compact scale from the original product layout. */
    html body.single-product #content#content h1.kh-product-dashboard__title,
    html body.single-product #content#content h1.product_title.entry-title {
        font-size: clamp(24px, 1.55vw, 30px) !important;
        line-height: 1.18 !important;
    }

    /* Article reading scale matched to the measured Keysoft article layout. */
    html body.single-post #content#content .kh-single-article-content > p,
    html body.single-post #content#content .kh-single-article-content > ul,
    html body.single-post #content#content .kh-single-article-content > ol,
    html body.single-post #content#content .kh-single-article-content > blockquote {
        font-size: 20px !important;
        line-height: 32px !important;
    }

    html body.single-post #content#content .kh-single-article-content > ul > li,
    html body.single-post #content#content .kh-single-article-content > ol > li,
    html body.single-post #content#content .kh-single-article-content > blockquote p {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    html body.single-post #content#content .kh-single-article-content > h2,
    html body.single-post #content#content .kh-single-article-content > h3 {
        font-size: 28px !important;
        line-height: 34px !important;
    }

    /*
     * Information pages used separate legacy component scales (10-14px).
     * Give every content template one readable baseline, then reserve 18px
     * for introductions and long-form/legal copy.
     */
    html body #content#content .kh-info-page :where(p, li, dd) {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    html body #content#content .kh-info-page :where(
        .kh-info-hero__content,
        .kh-delivery-hero__copy,
        .kh-faq-showcase__copy,
        .kh-discounts-hero__content,
        .kh-help-v2__hero-content,
        .kh-contact-page__hero-content
    ) > p,
    html body #content#content .kh-info-page--refund .kh-info-legal-section > p,
    html body #content#content .kh-info-page--refund .kh-info-legal-section > ul,
    html body #content#content .kh-info-page--refund .kh-info-legal-section > ol,
    html body #content#content .kh-info-page--about .kh-about-benefit__copy > p {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    html body #content#content .kh-info-page--refund .kh-info-legal-section > ul > li,
    html body #content#content .kh-info-page--refund .kh-info-legal-section > ol > li {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Standard WordPress pages that do not use a bespoke information template. */
    html body.page:not(.woocommerce-page) #content#content .entry-content > p,
    html body.page:not(.woocommerce-page) #content#content .entry-content > ul,
    html body.page:not(.woocommerce-page) #content#content .entry-content > ol,
    html body.page:not(.woocommerce-page) #content#content .entry-content > blockquote {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    html body.page:not(.woocommerce-page) #content#content .entry-content > ul > li,
    html body.page:not(.woocommerce-page) #content#content .entry-content > ol > li,
    html body.page:not(.woocommerce-page) #content#content .entry-content > blockquote p {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Store information and answers follow the same 18/16 hierarchy. */
    html body #content#content .kh-shop-seo-text > p {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    html body #content#content .kh-product-faq__answer :where(p, li) {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    html body header#masthead#masthead.site-header.site-header .top-menu.top-menu ul#top-menu#top-menu > li > a,
    html body header#masthead#masthead.site-header.site-header .top-menu.top-menu ul#top-menu#top-menu > li > span {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /*
     * Keep the primary destinations readable without letting them compete
     * with the blue catalogue action. The legacy header set every menu link
     * to 800, which made these four links visually too loud.
     */
    html body header#masthead#masthead.site-header.site-header
    .top-menu.top-menu ul#top-menu#top-menu > li:not(.mega-catalog) > a,
    html body header#masthead#masthead.site-header.site-header
    .top-menu.top-menu ul#top-menu#top-menu > li:not(.mega-catalog) > span {
        color: #334155 !important;
        font-weight: 600 !important;
    }

    html body header#masthead#masthead.site-header.site-header
    .top-menu.top-menu ul#top-menu#top-menu > li:not(.mega-catalog) > a:hover,
    html body header#masthead#masthead.site-header.site-header
    .top-menu.top-menu ul#top-menu#top-menu > li:not(.mega-catalog) > a:focus-visible,
    html body header#masthead#masthead.site-header.site-header
    .top-menu.top-menu ul#top-menu#top-menu > li.current-menu-item:not(.mega-catalog) > a,
    html body header#masthead#masthead.site-header.site-header
    .top-menu.top-menu ul#top-menu#top-menu > li.current-menu-ancestor:not(.mega-catalog) > a {
        color: #334155 !important;
    }

    html body:not(.is-mobile) .super-header.super-header.super-header
    .super-header-inner.super-header-inner.super-header-inner :where(a, span),
    html body:not(.is-mobile) .dim-header-top.dim-header-top.dim-header-top :where(a, span) {
        font-size: 12px !important;
        line-height: 18px !important;
        min-height: 22px !important;
        height: auto !important;
    }

    html body header#masthead#masthead.site-header.site-header .header-search.header-search .search-field.search-field,
    html body #content#content :where(input[type="search"], .search-field) {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    html body #content#content .kh-product-picker__header,
    html body #content#content .kh-product-picker__header :where(span, a),
    html body #content#content .kh-product-picker__tab,
    html body #content#content .kh-product-picker__tab-label,
    html body #content#content .kh-product-picker__chip,
    html body #content#content .kh-product-picker__chip span:first-child {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    html body #content#content .shop-item .shop-item__title-link,
    html body #content#content .shop-item__title-link,
    html body #content#content .woocommerce-loop-product__title {
        font-size: 18px !important;
        line-height: 25.2px !important;
    }
}