/*
 * Shared stylesheet for the website redesign preview.
 *
 * Keep redesign rules in this file (or additional files in this directory)
 * so production pages remain unchanged while the new UI is being developed.
 */

/* Inherited by all v2 text, including navigation, forms and dialogs. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.v2-preview-badge {
    position: absolute;
    top: 4px;
    left: 106px;
    z-index: 10;
    padding: 2px 7px;
    border-radius: 3px;
    background: #b42318;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 16px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .v2-preview-badge {
        left: 92px;
    }
}

/*
 * Shared gold call-to-action tokens.
 *
 * Used by the section CTAs (.wx-cta, .fx-cta, .rx-cta, .tx-cta) so they read as
 * one button family. The header nav (.hx-btn) and the news outline link
 * (.nx-more) deliberately keep their own treatment.
 */
:root {
    --cta-gradient: linear-gradient(180deg, #fff0d1 0%, #caa55f 100%);
    --cta-border: #e9c886;
    --cta-text: #10264b;
    --cta-radius: 6px;
}

@font-face {
    font-family: 'Alimama ShuHeiTi';
    src: url('../fonts/AlimamaShuHeiTi-Bold.woff2') format('woff2');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

/*
 * Noto fonts live in the generated fonts.css, built by
 * tools/fonts/build-subsets.py. That file declares the preloaded
 * header/hero subset and the unicode-range chunks that replaced the Google
 * Fonts copy of Noto Sans SC; the README beside the build script explains why.
 */

/* Mobile defaults; index-fluid.css owns the 1920px fluid desktop reference. */
.v2-index {
    --v2-font-body: 'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --v2-font-display: 'Alimama ShuHeiTi', var(--v2-font-body);
    --v2-heading-color: #ffde90;
    --v2-country-color: #ffefd2;
    --cta-gradient: linear-gradient(180deg, #ffefd2 0%, #ccaa6a 100%);
    --cta-border: #ffda96;
    --cta-text: #082d76;
    --cta-radius: 5px;
    --v2-content-max: 1280px;
    --v2-gutter: 40px;
    --v2-section-space: 80px;
    --v2-heading-size: 44px;
    --v2-body-size: 18px;
}

@media (max-width: 767px) {
    .v2-index {
        --v2-gutter: 20px;
        --v2-section-space: 48px;
        --v2-heading-size: 30px;
        --v2-body-size: 16px;
    }
}

/*
 * Anchored sections clear the fixed header.
 *
 * Only two of the eight carried a scroll-margin, and both hard-coded 80px
 * against a header that is 72px on phones and up to 108px on a wide screen -
 * so #isWhy, #tutor-bg, #student and #arrange landed 72px underneath it.
 * `--hx-header-h` is the header's own height (header-hero.css), so one rule
 * here keeps every anchor true to it, and the sections' own stylesheets stay
 * out of it.
 */
.v2-index section[id] {
    scroll-margin-top: calc(var(--hx-header-h, 80px) + 8px);
}