/* Neutral text hierarchy. Brand artwork, backgrounds and icon colors stay in
   their existing styles; dark surfaces receive an inverse gray hierarchy. */
@layer zjut-site-colors {
  :root {
    --site-text-main: #333333;
    --site-text-muted: #666666;
    --site-text-inverse: #eeeeee;
    --site-text-inverse-muted: #cccccc;
    --site-text-hover: #0d7773;
    --site-text-hover-inverse: #8ddbd5;
  }

  body, #app, .demo-modal-overlay, .demo-toast, .demo-loading-error {
    --site-ink: var(--site-text-main);
    --site-muted: var(--site-text-muted);
    --site-current: var(--site-ink);
    --site-hover: var(--site-text-hover);
    color: var(--site-current) !important;
  }

  #app :where(div, section, article, header, main, footer, nav, aside,
    p, span, a, ul, ol, li, dl, dt, dd, table, tbody, thead, tr, td, th,
    label, small, time, font, blockquote, figcaption, form, fieldset, legend,
    button, input, textarea, select, option, h1, h2, h3, h4, h5, h6,
    strong, b, summary, em, i):not(:where(.el-icon, [class^="el-icon-"],
      [class*=" el-icon-"], [class^="icon-"], [class*=" icon-"],
      .iconfont, [class^="vjs-icon-"], [class*=" vjs-icon-"],
      .vjs-icon-placeholder, .hv1-quick-icon, .hv1-quick-icon *,
      .hv1-contact-item > span, .hv1-contact-item > span *,
      .sp-contact-item > span, .sp-contact-item > span *, svg, svg *)),
  :where(.demo-modal-overlay, .demo-toast, .demo-loading-error)
    :where(div, p, span, a, label, small, button, input, textarea, select,
      option, h1, h2, h3, h4, h5, h6, strong, b, li, em, i):not(:where(
        .el-icon, [class^="el-icon-"], [class*=" el-icon-"],
        .iconfont, svg, svg *)) {
    color: var(--site-current, var(--site-ink)) !important;
  }

  #app :is(p, small, time, dt, figcaption, blockquote,
    .hv1-section-subtitle, .hv1-news-meta, .hv1-course-meta,
    .hv1-training-date, .hv1-training-desc, .hv1-teacher-meta,
    .sp-banner-en, .sp-breadcrumb, .sp-news-feature-meta,
    .sp-news-feature-description, .sp-news-date, .sp-catalog-meta,
    .sp-news-pagination-total, .sp-directory-count, .sp-training-meta,
    .tp-kicker, .tp-meta, .tp-richtext, .tp-related-meta,
    .up-result-meta, .up-empty, .demo-muted),
  .demo-modal-overlay :is(p, small, time, .demo-muted) {
    --site-current: var(--site-muted) !important;
  }

  #app :is(h1, h2, h3, h4, h5, h6, [role="heading"], strong, b, summary,
    .course-h3, .trainDetailR-title, .el-dialog__title, .demo-section-title,
    .tp-related-title, .hv1-training-name > a, .sp-section-title),
  .demo-modal-overlay :is(h1, h2, h3, h4, h5, h6, strong, b,
    .el-dialog__title) {
    --site-current: var(--site-ink) !important;
  }

  /* These components have a navy or other dark brand surface. */
  #app :where(.hv1-quick, .hv1-news-copy, .hv1-news-tag,
    .hv1-training-top, .hv1-lectures > h3, .hv1-teachers, .hv1-filled,
    .hv1-teacher-arrows button, .hv1-footer, .hv1-copyright,
    .sp-footer, .sp-copyright, .sp-button,
    .sp-news-page-numbers button.is-active,
    .sp-directory-pagination [aria-current],
    .sp-training-calendar-day.is-emphasized,
    .tp-button, .up-button, .up-pagination a[aria-current],
    .demo-button, .demo-fallback-footer, .demo-sidebar h2,
    .demo-pagination button.active, .el-button--primary),
  .demo-modal-overlay .demo-button {
    --site-ink: var(--site-text-inverse) !important;
    --site-muted: var(--site-text-inverse-muted) !important;
    --site-current: var(--site-ink) !important;
    --site-hover: var(--site-text-hover-inverse) !important;
  }

  /* Pale/white controls inside an inverse context need their own gray ink. */
  #app :is(.tp-button.is-secondary, .tp-button-secondary,
    .tp-button[data-variant="secondary"], .up-button.is-secondary,
    .demo-button.secondary, .hv1-news-controls button, .hv1-hero-arrow,
    input, textarea, option),
  .demo-modal-overlay :is(.demo-button.secondary, input, textarea, option) {
    --site-ink: var(--site-text-main) !important;
    --site-muted: var(--site-text-muted) !important;
    --site-current: var(--site-ink) !important;
    --site-hover: var(--site-text-hover) !important;
  }

  #app :is(.tp-button, .up-button, .demo-button):disabled,
  .demo-modal-overlay .demo-button:disabled {
    --site-current: var(--site-text-muted) !important;
  }

  /* Interaction feedback uses the same variables as the shared text layer. */
  #app .tertiary-page .tp-tabs button {
    --site-current: var(--site-text-muted) !important;
  }

  #app .tertiary-page :is(.tp-tool, .tp-lesson, .tp-tabs button):is(:hover, :focus-visible),
  #app .tertiary-page .tp-button.is-secondary:enabled:is(:hover, :focus-visible) {
    --site-current: var(--site-text-hover) !important;
  }

  #app .tertiary-page .tp-tabs button[aria-selected="true"] {
    --site-current: var(--site-text-main) !important;
  }

  #app .tertiary-page .tp-button:disabled {
    --site-ink: var(--site-text-muted) !important;
    --site-current: var(--site-text-muted) !important;
  }

  /* Resource introduction and saving have the same visual priority. */
  #app .tertiary-page[data-tertiary-type="resource"] .tp-actions > .tp-button:enabled {
    --site-ink: var(--site-text-main) !important;
    --site-muted: var(--site-text-muted) !important;
    --site-current: var(--site-ink) !important;
    --site-hover: var(--site-text-hover) !important;
  }

  #app .tertiary-page[data-tertiary-type="resource"] .tp-actions > .tp-button:enabled:is(:hover, :focus-visible) {
    --site-current: var(--site-text-hover) !important;
  }

  #app .tertiary-page .tp-richtext a :where(span, font, strong, b, em, i, u) {
    color: inherit !important;
  }

  #app :is(input, textarea)::placeholder,
  .demo-modal-overlay :is(input, textarea)::placeholder {
    color: var(--site-text-muted) !important;
  }

  /* Heading descendants share the parent's animated color, including old
     inline rich-text colors. Icon-font and SVG children remain untouched. */
  #app :is(h1, h2, h3, h4, h5, h6, [role="heading"],
    .tp-related-title, .hv1-training-name > a, .sp-section-title)
    :where(a, span, strong, b, em, i, small, font):not(:where(.el-icon,
      [class^="el-icon-"], [class*=" el-icon-"], .iconfont, svg, svg *)) {
    color: inherit !important;
  }

  /* Section labels and article/card headings use one restrained hover color.
     Focus within a linked heading receives the same keyboard feedback. */
  #app :is(h1, h2, h3, h4, h5, h6, [role="heading"],
    .tp-related-title, .hv1-training-name > a, .sp-section-title) {
    transition: color 180ms ease !important;
  }

  #app :is(.hv1-section-title > h2, .sp-section-title):hover,
  #app :is(h1, h2, h3, h4, h5, h6):has(a:is(:hover, :focus-visible)),
  #app a:is(:hover, :focus-visible) :is(h1, h2, h3, h4, h5, h6,
    .tp-related-title, .sp-section-title),
  #app .hv1-training-name > a:is(:hover, :focus-visible),
  #app .tp-related-item:is(:hover, :focus-visible) .tp-related-title {
    color: var(--site-hover) !important;
  }

  /* Non-heading text links remain neutral until they are actionable. */
  #app a:where(:hover, :focus-visible):not(:where(.hv1-quick,
    .hv1-quick *, .hv1-login, .sp-login, .sp-button, .tp-button,
    .up-button, .demo-button, .hv1-filled)) {
    color: var(--site-hover) !important;
  }

  @media (min-width: 1101px) {
    #app :is(.sp-banner, .sp-news-banner, .sp-banner + .sp-tabs,
      .sp-news-category-tabs, .sp-training-toolbar,
      .sp-training-calendar-title) {
      --site-ink: var(--site-text-inverse) !important;
      --site-muted: var(--site-text-inverse-muted) !important;
      --site-current: var(--site-ink) !important;
      --site-hover: var(--site-text-hover-inverse) !important;
    }

    #app :is(.sp-banner, .sp-news-banner, .sp-banner + .sp-tabs,
      .sp-news-category-tabs) {
      --site-muted: var(--site-text-inverse) !important;
    }

    #app .sp-training-feature-content .sp-button {
      --site-ink: var(--site-text-main) !important;
      --site-muted: var(--site-text-muted) !important;
      --site-current: var(--site-ink) !important;
      --site-hover: var(--site-text-hover) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #app :is(h1, h2, h3, h4, h5, h6, [role="heading"],
      .tp-related-title, .hv1-training-name > a, .sp-section-title) {
      transition: none !important;
    }
  }
}

@layer zjut-site-colors {
  #app :is(.hv1-login,.sp-login) {
    --site-ink:var(--site-text-main)!important;
    --site-muted:var(--site-text-muted)!important;
    --site-current:var(--site-ink)!important;
    --site-hover:var(--site-text-hover)!important;
    background:#fff!important;
    border:1px solid #d9e5eb!important;
    box-shadow:none!important;
    transition:background-color .18s,border-color .18s,color .18s;
  }
  #app :is(.hv1-login,.sp-login):is(:hover,:focus-visible) {
    --site-current:var(--site-text-hover)!important;
    background:#edf7f8!important;
    border-color:#28a4ba!important;
  }
}

/* Login opens a dialog directly; it has no dropdown menu. */
#app .hv1-login > .hv1-chevron,
#app .sp-login > .hv1-login-label + svg { display:none; }