/* Typography read from the original Figma homepage text properties. */
@font-face {
  font-family: "Noto Sans SC";
  src: url("/assets/fonts/design/NotoSansSC-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif SC";
  src: url("/assets/fonts/design/NotoSerifSC-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
:root {
  --design-text-font: "Noto Sans SC", sans-serif;
  --design-heading-font: "Noto Serif SC", serif;
  --design-button-font: "Noto Sans SC", sans-serif;
  --design-number-font: "Noto Sans SC", sans-serif;
}
body { font-synthesis: none; }

/*
 * Shared typography for the captured inner pages and local interaction UI.
 * The four --design-*-font values are supplied by the verified design fonts.
 * This file changes font families only; sizes, weights and geometry stay in
 * the page styles. Icon fonts and the logo artwork keep their own families.
 */

body,
.demo-template-page,
.demo-training-detail,
.demo-modal-overlay,
.demo-toast,
.demo-loading-error {
  font-family: var(--design-text-font);
}

/* Captured text components carry inline font-family declarations. */
#app .text-container,
#app .breadcrumbContainer,
#app .breadcrumbContainer .text,
#app .breadcrumbContainer .text span,
#app .paginationContainer,
#app .note-editor-content,
#app .demo-detail-body,
#app .demo-training-detail .richtext,
#app .demo-training-detail .course-txt,
#app .demo-training-detail .courseTeacherItemR .txt {
  font-family: var(--design-text-font) !important;
}

/* Word-style rich text has nested font declarations on both p and span. */
#app :where(.note-editor-content, .demo-detail-body,
  .demo-training-detail .richtext, .demo-training-detail .course-txt,
  .demo-training-detail .courseTeacherItemR .txt)
  :is(p, span, a, strong, b, em, small, label, li, td, th, h1, h2, h3, h4, h5, h6):where(:not(.el-icon):not([class^="icon-"]):not([class*=" icon-"])) {
  font-family: inherit !important;
}

/* Semantic titles, plus the shared captured article/about/service title. */
body[data-page]:not([data-page="home"]) #app
  :is(h1, h2, h3, h4, h5, h6, .course-h3, .trainDetailR-title,
    .el-dialog__title, .demo-section-title),
body[data-page]:not([data-page="home"]) #app
  .container_id_0-rect_id_104 .text-container,
.demo-modal-overlay :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--design-heading-font) !important;
}

/* Apply control fonts to text-bearing controls, never to i or icon classes. */
body[data-page]:not([data-page="home"]) #app
  :is(button, input, textarea, select, .btn-inner, .el-tabs__item, .demo-button):not(.el-icon):not([class^="icon-"]):not([class*=" icon-"]),
.demo-modal-overlay
  :is(button, input, textarea, select, .demo-button):not(.el-icon):not([class^="icon-"]):not([class*=" icon-"]) {
  font-family: var(--design-button-font) !important;
}

body[data-page]:not([data-page="home"]) #app
  :is(input, textarea)::placeholder,
.demo-modal-overlay :is(input, textarea)::placeholder {
  font-family: var(--design-text-font) !important;
}

/* Preserve the original navigation's hover/active behavior through its vars. */
body[data-page]:not([data-page="home"]) #app
  :is(.el-menu, .el-submenu, .el-menu-item, .nav_menu_item,
    .custom-submenu, .breadcrumbContainer, .paginationContainer) {
  --fontFamily: var(--design-button-font) !important;
  --hoverFontFamily: var(--design-button-font) !important;
  --activeFontFamily: var(--design-button-font) !important;
  --liFontFamily: var(--design-button-font) !important;
  --liHoverFontFamily: var(--design-button-font) !important;
  --liActiveFontFamily: var(--design-button-font) !important;
  --levTwoFontFamily: var(--design-button-font) !important;
  --levTwoHoverFontFamily: var(--design-button-font) !important;
  --levTwoActiveFontFamily: var(--design-button-font) !important;
  --secondNavTitle_fontFamily: var(--design-button-font) !important;
  --secondNavHoverTitle_fontFamily: var(--design-button-font) !important;
  --secondNavActiveTitle_fontFamily: var(--design-button-font) !important;
  --thirdNavTitle_fontFamily: var(--design-button-font) !important;
  --thirdHoverNavTitle_fontFamily: var(--design-button-font) !important;
  --thirdActiveNavTitle_fontFamily: var(--design-button-font) !important;
  --titleFont_fontFamily: var(--design-button-font) !important;
  --titleHoverFont_fontFamily: var(--design-button-font) !important;
  --titleActiveFont_fontFamily: var(--design-button-font) !important;
  --pageTurnFontFamily: var(--design-button-font) !important;
  --otherFontFamily: var(--design-text-font) !important;
}

body[data-page]:not([data-page="home"]) #app
  :is(.el-submenu__title, .nav-menu-link, .second-menu-title,
    .third-menu-title, .sub-menu-item, .nav-title, .nav-submenu) {
  font-family: var(--design-button-font) !important;
}

body[data-page]:not([data-page="home"]) #app .input-component-input {
  --placeholder-font-family: var(--design-text-font) !important;
}

/* Numeric page controls and date elements; skip the pager's icon ellipsis. */
body[data-page]:not([data-page="home"]) #app time,
body[data-page]:not([data-page="home"]) #app
  .paginationContainer .el-pager li:not(.el-icon):not([class^="icon-"]):not([class*=" icon-"]) {
  font-family: var(--design-number-font) !important;
}

/* Captured section titles are text components rather than heading tags. */
body[data-page="list"] #app
  .vdr.container_id_0-rect_id_38 > .full_rect > .text-container,
body[data-page="list"] #app
  .vdr.container_id_0-rect_id_3 > .full_rect > .text-container[aria-label="新教师培训"],
body[data-page]:not([data-page="home"]) #app
  .vdr.container_id_0-rect_id_104 > .full_rect > .text-container,
body[data-page="list"] #app
  .vdr.container_id_0-rect_id_106 .note-editor-content > p:first-child > span[style*="font-size: 30px"] {
  font-family: var(--design-heading-font) !important;
  font-weight: 700 !important;
}

/* Use the verified bold heading face for semantic inner-page/modal titles. */
body[data-page]:not([data-page="home"]) #app
  :is(h1, h2, h3, h4, h5, h6, .course-h3, .trainDetailR-title,
    .el-dialog__title, .demo-section-title),
.demo-modal-overlay :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700 !important;
}