/**
 * Full-site typography and color consistency contract.
 *
 * This final cascade layer normalizes the public theme without deleting legacy
 * page CSS. It intentionally uses a compact semantic scale and four neutral
 * color roles: heading, body, muted and line.
 *
 * Loaded after precision-typography.css.
 *
 * @package Tongyi_Automation
 */

:root {
  /* Strict public type scale. */
  --font-size-micro: .75rem;       /* 12px: technical micro labels only */
  --font-size-caption: .875rem;    /* 14px: metadata, labels, controls */
  --font-size-meta: .875rem;       /* 14px */
  --font-size-small: .9375rem;     /* 15px: compact card/support copy */
  --font-size-body: 1rem;          /* 16px: default copy */
  --font-size-lead: 1.125rem;      /* 18px: introductions */
  --font-size-h4: 1.125rem;        /* 18px */
  --font-size-h3: 1.25rem;         /* 20px */
  --font-size-h2: clamp(1.875rem, 2.25vw, 2.25rem); /* 30–36px */
  --font-size-h1: clamp(3rem, 3.6vw, 3.5rem);       /* 48–56px */
  --font-size-display: clamp(3rem, 4.25vw, 4rem);   /* 48–64px */

  /* Semantic foreground roles. */
  --c-heading: var(--c-ink);
  --c-copy: var(--c-text);
  --c-subtle: var(--c-muted);
  --c-disabled: var(--c-faint);
}

/* Base copy contract. */
html body[class] main#main-content {
  color: var(--c-copy);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

html body[class] main#main-content :is(h1, h2, h3, h4):not(.sr-only):not(.screen-reader-text) {
  color: var(--c-heading) !important;
  font-family: var(--font-sans) !important;
  text-wrap: balance;
}

html body[class] main#main-content h1:not(.sr-only):not(.screen-reader-text) {
  font-size: var(--font-size-h1) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em !important;
}

html body[class] main#main-content h2:not(.sr-only):not(.screen-reader-text) {
  font-size: var(--font-size-h2) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
}

html body[class] main#main-content h3:not(.sr-only):not(.screen-reader-text) {
  font-size: var(--font-size-h3) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}

html body[class] main#main-content h4:not(.sr-only):not(.screen-reader-text) {
  font-size: var(--font-size-h4) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html body[class] main#main-content :is(p, li):not([class*="eyebrow"]):not([class*="kicker"]):not([class*="overline"]):not([class*="meta"]):not([class*="label"]):not([class*="status"]):not([class*="notice"]):not([class*="error"]):not([class*="success"]):not([class*="warning"]):not(.sr-only):not(.screen-reader-text) {
  color: var(--c-copy) !important;
  font-size: var(--font-size-body) !important;
  line-height: 1.7 !important;
}

/* Lead/intro copy remains one level above body copy. */
html body[class] main#main-content :is(
  [class*="lead"],
  [class*="intro"],
  [class*="description"],
  [class*="summary"],
  .archive-description,
  .entry-summary
):not([class*="card"]):not([class*="meta"]) {
  color: var(--c-copy) !important;
  font-size: var(--font-size-lead) !important;
  line-height: 1.65 !important;
}

/* Compact card and supporting copy use one shared 15px tier. */
html body[class] main#main-content :is([class*="card"], [class*="tile"], [class*="item"]) :is(p, li):not([class*="meta"]):not([class*="label"]):not([class*="status"]):not([class*="notice"]):not([class*="error"]):not([class*="success"]):not([class*="warning"]) {
  color: var(--c-copy) !important;
  font-size: var(--font-size-small) !important;
  line-height: 1.6 !important;
}

/* Labels and metadata. */
html body[class] main#main-content :is(
  [class*="eyebrow"],
  [class*="kicker"],
  [class*="overline"]
) {
  color: var(--c-brand) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

html body[class] main#main-content :is(
  small,
  time,
  figcaption,
  [class*="meta"],
  [class*="caption"],
  [class*="label"]
) {
  color: var(--c-subtle) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.5 !important;
}

/* Buttons and form controls. */
html body[class] :is(.button, a[class*="button"], button[class*="button"], button, input[type="submit"]) {
  font-family: var(--font-sans) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body[class] main#main-content :is(label, legend) {
  color: var(--c-heading) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

html body[class] main#main-content :is(input, select, textarea) {
  color: var(--c-heading) !important;
  background-color: var(--c-surface) !important;
  border-color: var(--c-line-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--font-size-body) !important;
  line-height: 1.5 !important;
}

html body[class] main#main-content :is(input, textarea)::placeholder {
  color: var(--c-disabled) !important;
  opacity: 1;
}

/* Tables use 14px labels and technical values without page-specific drift. */
html body[class] main#main-content table :is(th, td) {
  color: var(--c-copy) !important;
  border-color: var(--c-line) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.5 !important;
}

html body[class] main#main-content table th {
  color: var(--c-heading) !important;
  font-weight: 700 !important;
}

/* Card title and body color contract. */
html body[class] main#main-content :is([class*="card"], [class*="tile"]) :is(h2, h3) {
  color: var(--c-heading) !important;
  font-size: var(--font-size-h3) !important;
  line-height: 1.3 !important;
}

html body[class] main#main-content :is([class*="card"], [class*="tile"]) h4 {
  color: var(--c-heading) !important;
  font-size: var(--font-size-h4) !important;
  line-height: 1.35 !important;
}

html body[class] main#main-content :is([class*="card"], [class*="tile"]) strong {
  color: var(--c-heading) !important;
}

/* Technical values keep an industrial mono face after generic card contracts. */
html body[class] main#main-content :is(
  .counter,
  .home-statistic strong,
  .site-stat dd,
  .site-stat strong,
  .case-metrics strong,
  .resource-metrics strong,
  .cert-metric strong,
  .solutions-live-stat strong,
  .solution-metric > strong,
  .kh-hero-stat strong,
  .pd-quick-specs dd,
  .pd-parameter-table :is(thead th:not(:first-child), tbody td),
  [class*="stat"] > strong,
  [class*="metric"] > strong,
  [class*="fact"] > strong,
  [class*="model-code"],
  [class*="model-number"],
  [class*="version"],
  [class*="file-size"]
) {
  font-family: var(--font-technical) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1 !important;
  letter-spacing: var(--tracking-technical) !important;
}

/* Dark industrial surfaces: restore intentional inverse colors after base rules. */
html body[class] main#main-content :is(
  .site-cta,
  .kh-newsletter,
  .solutions-live-proof,
  .selector-help,
  .product-center-category-card.is-featured,
  .priorities-card,
  .resource-request,
  .cert-support,
  .about-hero-card > div,
  .contact-reference__cta,
  .resource-search-header,
  .resource-result-card,
  .resource-request-dialog,
  .kh-evidence,
  .kh-continue,
  .solution-builder-block.is-background-dark,
  .pd-proof,
  .pd-result-band,
  .kh-hero-stat,
  .kh-hero-note,
  [class*="dark-panel"],
  [class*="dark-section"]
) {
  --c-heading: #ffffff;
  --c-copy: #d0d5dd;
  --c-subtle: #98a2b3;
}

html body[class] main#main-content :is(
  .site-cta,
  .kh-newsletter,
  .solutions-live-proof,
  .selector-help,
  .product-center-category-card.is-featured,
  .priorities-card,
  .resource-request,
  .cert-support,
  .about-hero-card > div,
  .contact-reference__cta,
  .resource-search-header,
  .resource-result-card,
  .resource-request-dialog,
  .kh-evidence,
  .kh-continue,
  .solution-builder-block.is-background-dark,
  .pd-proof,
  .pd-result-band,
  .kh-hero-stat,
  .kh-hero-note,
  [class*="dark-panel"],
  [class*="dark-section"]
) :is(h1, h2, h3, h4, strong) {
  color: #ffffff !important;
}

html body[class] main#main-content :is(
  .site-cta,
  .kh-newsletter,
  .solutions-live-proof,
  .selector-help,
  .product-center-category-card.is-featured,
  .priorities-card,
  .resource-request,
  .cert-support,
  .about-hero-card > div,
  .contact-reference__cta,
  .resource-search-header,
  .resource-result-card,
  .resource-request-dialog,
  .kh-evidence,
  .kh-continue,
  .solution-builder-block.is-background-dark,
  .pd-proof,
  .pd-result-band,
  .kh-hero-stat,
  .kh-hero-note,
  [class*="dark-panel"],
  [class*="dark-section"]
) :is(p, li, small, span):not([class*="eyebrow"]):not([class*="kicker"]) {
  color: #d0d5dd !important;
}

/* Mobile preserves hierarchy, not arbitrary page-specific shrinkage. */
@media (max-width: 680px) {
  :root {
    --font-size-h1: clamp(2.25rem, 9.5vw, 2.5rem); /* 36–40px */
    --font-size-h2: clamp(1.625rem, 7.2vw, 1.875rem); /* 26–30px */
  }

  html body[class] main#main-content h1:not(.sr-only):not(.screen-reader-text) {
    line-height: 1.08 !important;
  }

  html body[class] main#main-content :is(p, li):not([class*="meta"]):not([class*="label"]) {
    line-height: 1.65 !important;
  }
}

/* Unified public footer geometry: page templates must not change the shared footer rail. */
html body[class] .site-footer.site-footer {
  min-height: 346px !important;
  margin-top: 0 !important;
  padding: 34px 0 0 !important;
  border-top: 0 !important;
}

html body[class] .site-footer.site-footer .shell {
  width: min(1720px, calc(100% - 96px)) !important;
  max-width: 1720px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

html body[class] .site-footer.site-footer .footer-grid,
html body[class] .site-footer.site-footer .footer-bottom {
  box-sizing: border-box !important;
}

html body[class] .site-footer.site-footer .footer-grid {
  min-height: 267px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1.45fr) repeat(4, minmax(130px, 1fr)) !important;
  gap: clamp(34px, 4.2vw, 78px) !important;
  padding: 0 0 28px !important;
}

html body[class] .site-footer.site-footer .footer-brand img {
  width: 154px !important;
  max-height: 42px !important;
}

html body[class] .site-footer.site-footer .footer-brand__logo {
  display: block !important;
  width: max-content !important;
  margin: 0 !important;
  line-height: 0 !important;
}

html body[class] .site-footer.site-footer .footer-brand > p {
  margin: 7px 0 0 !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-base) !important;
}

html body[class] .site-footer.site-footer .footer-brand > p:first-of-type {
  margin-top: 9px !important;
}

html body[class] .site-footer.site-footer .footer-contact-line,
html body[class] .site-footer.site-footer .footer-contact-line a {
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-base) !important;
}

html body[class] .site-footer.site-footer .footer-grid h2 {
  margin: 5px 0 10px !important;
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-tight) !important;
}

html body[class] .site-footer.site-footer .footer-menu,
html body[class] .site-footer.site-footer .footer-menu li,
html body[class] .site-footer.site-footer .footer-legal-menu,
html body[class] .site-footer.site-footer .footer-legal-menu li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body[class] .site-footer.site-footer .footer-menu a,
html body[class] .site-footer.site-footer .footer-column > a {
  min-height: 29px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-copy) !important;
}

html body[class] .site-footer.site-footer .footer-bottom {
  min-height: 38px !important;
  padding: 10px 0 !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-copy) !important;
}

html body[class] .site-footer.site-footer .footer-legal-menu {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 20px !important;
}

html body[class] .site-footer.site-footer .footer-bottom nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
}

html body[class] .site-footer.site-footer .footer-legal-menu > li + li,
html body[class] .site-footer.site-footer .footer-legal-menu > a + a {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

html body[class] .site-footer.site-footer .footer-cookie-settings {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

@media (max-width: 1024px) {
  html body[class] .site-footer.site-footer {
    min-height: 0 !important;
  }

  html body[class] .site-footer.site-footer .shell {
    width: calc(100% - 48px) !important;
    max-width: none !important;
  }

  html body[class] .site-footer.site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[class] .site-footer.site-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  html body[class] .site-footer.site-footer .footer-bottom {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
  }
}

@media (max-width: 599px) {
  html body[class] .site-footer.site-footer {
    padding-top: 32px !important;
  }

  html body[class] .site-footer.site-footer .shell {
    width: calc(100% - 32px) !important;
  }

  html body[class] .site-footer.site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  html body[class] .site-footer.site-footer .footer-brand {
    grid-column: auto;
  }

  html body[class] .site-footer.site-footer .footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body[class] .site-footer.site-footer .footer-legal-menu,
  html body[class] .site-footer.site-footer .footer-bottom nav {
    gap: 8px 16px !important;
  }
}

/* About uses a narrower 1680px content rail; keep its footer on that same edge. */
html body.page-template-page-about .site-footer.site-footer .shell {
  width: min(var(--about-shell, 1680px), calc(100% - (var(--about-gutter, 72px) * 2))) !important;
  max-width: var(--about-shell, 1680px) !important;
}

html body[class] main#main-content .product-center-category-grid.products-category-count-5 .product-center-category-copy h3 {
  font-size: clamp(14px, 0.9vw + 1.8px, 20px) !important;
}

/* Industries priorities: keep check icons brand red inside the dark panel.
   This must run after the generic dark-panel span color contract. */
html body[class].page-template-page-industries main#main-content .priorities-card .priorities-list li span.priorities-list__icon:not([class*="eyebrow"]):not([class*="kicker"]),
html body[class].page-template-page-industries main#main-content .priorities-card .priorities-list li span.priorities-list__icon:not([class*="eyebrow"]):not([class*="kicker"]) svg,
html body[class].page-template-page-industries main#main-content .priorities-card .priorities-list li span.priorities-list__icon:not([class*="eyebrow"]):not([class*="kicker"]) svg * {
  color: var(--c-brand, #e11d2e) !important;
  stroke: currentColor !important;
}