@import url("./design-tokens.css");
@import url("./typography.css");
@import url("./language-switch.css");
@import url("../../components/site-header/site-header.css");
@import url("../../components/site-header/site-header-github.css");
@import url("../../components/site-header/site-header-typography.css");
@import url("../../components/site-header/site-footer.css");
@import url("../../features/home/home-ant-zh.css");
@import url("../../features/home/home-carousel-position.css");
@import url("../../features/home/home-carousel-scale.css");
@import url("../../features/home/home-hero-contrast.css");
@import url("../../features/home/home-section-themes.css");
@import url("../../features/home/home-audit-fixes.css");
@import url("../../features/home/home-system-previews.css");
@import url("../../features/home/home-primary-action.css");
@import url("../../features/home/home-compact-spacing.css");
@import url("../../features/home/home-ending-cleanup.css");
@import url("../../features/home/home-discovery-cleanup.css");
@import url("../../features/library/library-hero-continuous.css");
@import url("./knowledge-directory-cleanup.css");

/*
 * Canonical ONDesign site chrome.
 *
 * Public pages load this file once. Global design and language typography
 * tokens are loaded here so feature pages consume one shared system.
 * Feature styles own only page content and must not restyle the shared header,
 * primary navigation, language switch, brand, footer, or redefine typography
 * scales locally.
 */

/* Skills carries a page-specific black instrument header while preserving the
 * shared navigation markup, geometry, behavior and ordering. */
body.skills-document > .site-header {
  --site-header-accent: #d71921;
  --ink: #fff;
  --muted: #999;
  --line: #333;
  --surface: #171717;
  border-color: #333 !important;
  background: #111 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.skills-document > .site-header .site-brand,
body.skills-document > .site-header nav.site-nav.site-nav > a,
body.skills-document > .site-header .site-nav-primary > a,
body.skills-document > .site-header .site-nav-community > a,
body.skills-document > .site-header .site-nav-more > summary {
  color: #fff !important;
}

body.skills-document > .site-header nav.site-nav.site-nav > a:hover,
body.skills-document > .site-header nav.site-nav.site-nav > a:focus-visible,
body.skills-document > .site-header nav.site-nav.site-nav > a[aria-current="page"],
body.skills-document > .site-header .site-nav-primary > a:hover,
body.skills-document > .site-header .site-nav-primary > a:focus-visible,
body.skills-document > .site-header .site-nav-primary > a[aria-current="page"],
body.skills-document > .site-header .site-nav-community > a:hover,
body.skills-document > .site-header .site-nav-community > a:focus-visible,
body.skills-document > .site-header .site-nav-community > a[aria-current="page"],
body.skills-document > .site-header .site-nav-more.is-current > summary,
body.skills-document > .site-header .site-nav-more > summary:hover,
body.skills-document > .site-header .site-nav-more > summary:focus-visible {
  color: var(--site-header-accent) !important;
}

body.skills-document > .site-header .site-brand-logo,
body.skills-document > .site-header .site-brand-wordmark {
  filter: brightness(0) invert(1);
}

body.skills-document > .site-header .global-language-switch {
  border-color: #444;
  background: #171717;
}

body.skills-document > .site-header .global-language-switch button {
  border-color: #444;
  color: #999;
}

body.skills-document > .site-header .global-language-switch button:hover,
body.skills-document > .site-header .global-language-switch button:focus-visible {
  background: #222;
  color: #fff;
}

body.skills-document > .site-header .global-language-switch button[aria-pressed="true"] {
  background: #fff;
  color: #111;
}

/*
 * Home header has two explicit visual states:
 * 1. Hero / first screen: transparent and integrated into the artwork.
 * 2. After the hero: restore the original solid white navigation chrome.
 *
 * The state is driven by scroll-linked custom properties because the shared
 * header contract intentionally protects its core properties with !important.
 */
body.project-home > .site-header {
  --home-nav-bg: rgba(255, 254, 250, 0);
  --home-nav-border: rgba(221, 217, 208, 0);
  --home-nav-shadow: rgba(25, 28, 25, 0);
  --home-nav-ink: #fff;
  --home-nav-muted: rgba(255, 255, 255, .82);
  --home-nav-switch-bg: rgba(0, 0, 0, .12);
  --home-nav-switch-border: rgba(255, 255, 255, .3);
  --home-nav-active-bg: #fff;
  --home-nav-active-ink: #171a18;
  --home-nav-logo-filter: brightness(0) invert(1);

  position: fixed !important;
  z-index: 60;
  top: 8px !important;
  left: 16px;
  right: 16px;
  width: calc(100% - 32px) !important;
  margin: 0 !important;
  border: 1px solid var(--home-nav-border) !important;
  border-radius: 999px !important;
  background: var(--home-nav-bg) !important;
  box-shadow: 0 8px 30px var(--home-nav-shadow) !important;
  backdrop-filter: none !important;
}

body.project-home > .site-header .site-brand,
body.project-home > .site-header nav.site-nav.site-nav > a,
body.project-home > .site-header .site-nav-primary > a,
body.project-home > .site-header .site-nav-community > a,
body.project-home > .site-header .site-nav-more > summary {
  color: var(--home-nav-ink) !important;
  text-shadow: none !important;
}

body.project-home > .site-header .site-brand-logo,
body.project-home > .site-header .site-brand-wordmark {
  filter: var(--home-nav-logo-filter);
}

body.project-home > .site-header nav.site-nav.site-nav > a:hover,
body.project-home > .site-header nav.site-nav.site-nav > a:focus-visible,
body.project-home > .site-header nav.site-nav.site-nav > a[aria-current="page"],
body.project-home > .site-header .site-nav-primary > a:hover,
body.project-home > .site-header .site-nav-primary > a:focus-visible,
body.project-home > .site-header .site-nav-primary > a[aria-current="page"],
body.project-home > .site-header .site-nav-community > a:hover,
body.project-home > .site-header .site-nav-community > a:focus-visible,
body.project-home > .site-header .site-nav-community > a[aria-current="page"],
body.project-home > .site-header .site-nav-more.is-current > summary,
body.project-home > .site-header .site-nav-more > summary:hover,
body.project-home > .site-header .site-nav-more > summary:focus-visible {
  color: var(--site-header-accent) !important;
}

body.project-home > .site-header .global-language-switch {
  border-color: var(--home-nav-switch-border) !important;
  background: var(--home-nav-switch-bg) !important;
  backdrop-filter: blur(8px);
}

body.project-home > .site-header .global-language-switch button {
  border-color: var(--home-nav-switch-border) !important;
  color: var(--home-nav-muted) !important;
}

body.project-home > .site-header .global-language-switch button[aria-pressed="true"] {
  background: var(--home-nav-active-bg) !important;
  color: var(--home-nav-active-ink) !important;
}

@supports (animation-timeline: scroll()) {
  body.project-home > .site-header {
    animation-name: home-nav-state;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timing-function: steps(1, end);
    animation-timeline: scroll(root block);
    animation-range: 0 72vh;
  }
}

@keyframes home-nav-state {
  from {
    --home-nav-bg: rgba(255, 254, 250, 0);
    --home-nav-border: rgba(221, 217, 208, 0);
    --home-nav-shadow: rgba(25, 28, 25, 0);
    --home-nav-ink: #fff;
    --home-nav-muted: rgba(255, 255, 255, .82);
    --home-nav-switch-bg: rgba(0, 0, 0, .12);
    --home-nav-switch-border: rgba(255, 255, 255, .3);
    --home-nav-active-bg: #fff;
    --home-nav-active-ink: #171a18;
    --home-nav-logo-filter: brightness(0) invert(1);
  }
  to {
    --home-nav-bg: #fffefa;
    --home-nav-border: rgba(221, 217, 208, .58);
    --home-nav-shadow: rgba(25, 28, 25, .045);
    --home-nav-ink: #24231f;
    --home-nav-muted: #77746d;
    --home-nav-switch-bg: #fffefa;
    --home-nav-switch-border: #ddd9d0;
    --home-nav-active-bg: #20231f;
    --home-nav-active-ink: #fff;
    --home-nav-logo-filter: none;
  }
}

/* Browsers without scroll timelines keep the normal white chrome below the
 * first screen via a conservative sticky fallback instead of staying transparent. */
@supports not (animation-timeline: scroll()) {
  body.project-home > .site-header {
    --home-nav-bg: #fffefa;
    --home-nav-border: rgba(221, 217, 208, .58);
    --home-nav-shadow: rgba(25, 28, 25, .045);
    --home-nav-ink: #24231f;
    --home-nav-muted: #77746d;
    --home-nav-switch-bg: #fffefa;
    --home-nav-switch-border: #ddd9d0;
    --home-nav-active-bg: #20231f;
    --home-nav-active-ink: #fff;
    --home-nav-logo-filter: none;
  }
}

@media (max-width: 700px) {
  body.project-home > .site-header {
    top: 6px !important;
    left: 8px;
    right: 8px;
    width: calc(100% - 16px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.project-home > .site-header { animation-timing-function: steps(1, end); }
}

/* Global first-level nav typography: active, dropdown, and Start Design must use
 * identical font metrics. Interaction states change color only, not weight. */
.site-header nav.site-nav.site-nav > a,
.site-header .site-nav-primary > a,
.site-header .site-nav-community > a,
.site-header .site-nav-more > summary,
.site-header .site-nav-community > .site-nav-start {
  font-family: var(--type-font-body) !important;
  font-size: 15px !important;
  font-weight: var(--type-label-weight) !important;
  letter-spacing: var(--type-body-tracking) !important;
  line-height: 1 !important;
}

.site-header nav.site-nav.site-nav > a[aria-current="page"],
.site-header .site-nav-primary > a[aria-current="page"],
.site-header .site-nav-community > a[aria-current="page"],
.site-header .site-nav-more.is-current > summary,
.site-header .site-nav-community > .site-nav-start[aria-current="page"] {
  font-weight: var(--type-label-weight) !important;
}

.site-header :is(
  .site-nav-primary > a,
  .site-nav-community > a,
  .site-nav-more > summary
) > span[data-i18n] {
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

@media (max-width: 940px) {
  .site-header nav.site-nav.site-nav > a,
  .site-header .site-nav-primary > a,
  .site-header .site-nav-community > a,
  .site-header .site-nav-more > summary,
  .site-header .site-nav-community > .site-nav-start {
    font-size: 12px !important;
  }
}

@media (max-width: 700px) {
  .site-header nav.site-nav.site-nav > a,
  .site-header .site-nav-primary > a,
  .site-header .site-nav-community > a,
  .site-header .site-nav-more > summary,
  .site-header .site-nav-community > .site-nav-start {
    font-size: 10px !important;
  }
}