/**
 * Yuexiang isolated test-site typography
 *
 * This file is loaded only in the navigation test context. It turns the
 * hotel / wellness topic-page typography into the shared rule for every
 * rebuilt test page while leaving formal URLs untouched.
 */

body.yx-navigation-test {
    --yx-test-font-display: var(
        --yx-font-display,
        "Noto Serif SC",
        "Source Han Serif SC",
        serif
    );
    --yx-test-font-sans: var(
        --yx-font-sans,
        "Noto Sans SC",
        "Source Han Sans SC",
        system-ui,
        sans-serif
    );
    font-family: var(--yx-test-font-sans);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Navigation, footer, body copy and controls use the same modern sans stack. */
body.yx-navigation-test :where(
    #site-nav,
    #sidr-main,
    .yx-navigation-preview-footer,
    main,
    #content,
    button,
    input,
    select,
    textarea
) {
    font-family: var(--yx-test-font-sans);
}

body.yx-navigation-test :where(
    button,
    input,
    select,
    textarea,
    .button,
    [class*="__button"],
    [class*="__cta"],
    [class*="-submit"],
    [class*="__tab"]
) {
    font-family: var(--yx-test-font-sans) !important;
}

body.yx-navigation-test :where(
    .eyebrow,
    [class*="__eyebrow"],
    [class*="__kicker"],
    [class*="__overline"],
    [class*="__label"],
    [class*="__meta"]
) {
    font-family: var(--yx-test-font-sans) !important;
}

/*
 * The topic pages already carry the approved hierarchy, including their
 * compact semantic H1 above the large display statement. Other test pages
 * receive the same display face for visible headings.
 */
body.yx-navigation-test:not(.page-template-page-solution-scene-v2)
    :where(main, #content)
    :where(h1, h2, h3, h4, .entry-title, .page-title, .archive-title) {
    font-family: var(--yx-test-font-display) !important;
}

body.yx-navigation-test:not(.page-template-page-solution-scene-v2)
    :where(main, #content)
    :where(h1, h2) {
    letter-spacing: -.025em;
}

body.yx-navigation-test:not(.page-template-page-solution-scene-v2)
    :where(main, #content)
    :where(h3, h4) {
    letter-spacing: -.012em;
}

/* The shared lead form must look identical regardless of entry page. */
body.yx-navigation-test [data-yx-shared-lead-form],
body.yx-navigation-test [data-yx-shared-lead-form] :where(
    label,
    legend,
    input,
    select,
    textarea,
    button
) {
    font-family: var(--yx-test-font-sans) !important;
}

@media (max-width: 820px) {
    body.yx-navigation-test:not(.page-template-page-solution-scene-v2)
        :where(main, #content)
        :where(h1, h2) {
        letter-spacing: -.018em;
    }
}