/*
 * Inner-page palette mapped from the approved homepage.
 *
 * Large surfaces: white / cool neutral.
 * Information: industrial navy / slate.
 * Brand green: primary actions, active states, functional icons and small labels.
 *
 * This file is intentionally loaded on non-home pages only.
 */

body:not(.home),
body:not(.home) main,
body:not(.home) main > [id],
body:not(.home) main > [class] {
  --inner-navy: #0a2747;
  --inner-navy-deep: #071d35;
  --inner-navy-soft: #173b57;
  --inner-steel: #315f78;
  --inner-slate: #5f6d79;
  --inner-muted: #7a8791;
  --inner-surface: #f5f7f8;
  --inner-surface-blue: #eef3f5;
  --inner-line: #dce4e8;
  --inner-green: #2faa43;
  --inner-green-dark: #218b32;
  --inner-green-soft: #eaf8ec;

  --navy: var(--inner-navy) !important;
  --navy-2: var(--inner-navy-deep) !important;
  --text: var(--inner-navy) !important;
  --body: var(--inner-slate) !important;
  --muted: var(--inner-muted) !important;
  --green: var(--inner-green) !important;
  --green-dark: var(--inner-green-dark) !important;
  --green-soft: var(--inner-green-soft) !important;
  --sky: var(--inner-surface-blue) !important;
  --soft: var(--inner-surface) !important;
  --line: var(--inner-line) !important;
  --border: var(--inner-line) !important;

  --app-navy: var(--inner-navy) !important;
  --app-green: var(--inner-green) !important;
  --app-green-soft: var(--inner-green-soft) !important;
  --app-muted: var(--inner-slate) !important;
  --app-soft: var(--inner-surface) !important;
  --app-line: var(--inner-line) !important;

  --cnas-navy: var(--inner-navy) !important;
  --cnas-green: var(--inner-green) !important;
  --cnas-green-dark: var(--inner-green-dark) !important;
  --cnas-soft: var(--inner-surface) !important;
  --cnas-soft-blue: var(--inner-surface) !important;
  --cnas-line: var(--inner-line) !important;
  --cnas-muted: var(--inner-slate) !important;

  --ytl-navy: var(--inner-navy) !important;
  --ytl-navy-900: var(--inner-navy) !important;
  --ytl-navy-950: var(--inner-navy-deep) !important;
  --ytl-deep: var(--inner-navy-deep) !important;
  --ytl-muted: var(--inner-slate) !important;
  --ytl-line: var(--inner-line) !important;
  --ytl-border: var(--inner-line) !important;
  --ytl-border-soft: var(--inner-line) !important;
  --ytl-soft: var(--inner-surface) !important;
  --ytl-bg-green: var(--inner-surface) !important;
  --ytl-green: var(--inner-green) !important;
  --ytl-green-500: var(--inner-green) !important;
  --ytl-green-600: var(--inner-green) !important;
  --ytl-green-700: var(--inner-green-dark) !important;
  --ytl-green-100: var(--inner-green-soft) !important;
  --ytl-green-200: #c8e8cc !important;
  --ytl-slate-700: #425a70 !important;
  --ytl-slate-600: var(--inner-slate) !important;
  --ytl-slate-500: var(--inner-muted) !important;
  --ytl-slate-300: #ccd8e2 !important;
  --ytl-slate-200: var(--inner-line) !important;
  --ytl-slate-100: var(--inner-surface) !important;

  --ytl-products-green: var(--inner-green) !important;
  --ytl-products-navy: var(--inner-navy) !important;
  --ytl-products-text: var(--inner-slate) !important;
  --ytl-products-line: var(--inner-line) !important;
}

body:not(.home) {
  color: var(--inner-slate);
  background: #fff;
}

body:not(.home) ::selection {
  color: var(--inner-navy-deep);
  background: #caedcf;
}

/* Large sections remain neutral. Green is not used as a page wash. */
body:not(.home) main :is(.section.soft, .section.sky, .ytl-section.soft, .ytl-section.sky),
body:not(.home) #page-applications .app-section.is-alt,
body:not(.home) .ytl-application-standard-page :is(.app-section.is-alt, .overview-strip),
body:not(.home) #page-product[data-product-collection-page],
body:not(.home) #page-company .history-alternative-section {
  background-color: var(--inner-surface) !important;
}

body:not(.home) main :is(.section.white, .ytl-section.white),
body:not(.home) #page-applications .app-section:not(.is-alt) {
  background-color: #fff !important;
}

body:not(.home) #page-company .ytl-history__header {
  background:
    radial-gradient(circle at 91% 7%, rgba(49, 95, 120, .10), transparent 31%),
    linear-gradient(135deg, #f8fafb, var(--inner-surface-blue)) !important;
}

/*
 * The platform template predates the shared inner-page section classes.
 * Give its content modules the same white/cool-gray rhythm as the homepage.
 */
body:not(.home) #page-platform > .section:not(.ytl-bg-hero-section) {
  background-image: none !important;
}

body:not(.home) #page-platform > .section:nth-of-type(even) {
  background: #fff !important;
}

body:not(.home) #page-platform > .section:nth-of-type(odd):not(.ytl-bg-hero-section) {
  background: #f4f7f8 !important;
}

/* Factory content follows the same white / cool-gray cadence. */
body:not(.home) #page-factory > .ytl-section:nth-of-type(even) {
  background: #fff !important;
  background-image: none !important;
}

body:not(.home) #page-factory > .ytl-section:nth-of-type(odd) {
  background: #f4f7f8 !important;
  background-image: none !important;
}

body:not(.home) #page-company .ytl-history__header::after {
  border-color: rgba(49, 95, 120, .10) !important;
  box-shadow: 0 0 0 45px rgba(49, 95, 120, .025) !important;
}

/* Information hierarchy follows the homepage: navy headings and slate copy. */
body:not(.home) main :is(
  .section-head,
  .heading-row,
  .card,
  .product-card,
  .app-card,
  .app-meter-card,
  .app-support-card,
  .app-checklist-card,
  .knowledge-card,
  .role-card,
  .market-card,
  .journey-card,
  .why-card,
  .facts-card,
  .gateway-card,
  .oem-capability-card,
  .oem-input-card,
  .oem-product-card,
  .oem-scenario-card
) :is(h2, h3, h4) {
  color: var(--inner-navy) !important;
}

body:not(.home) main :is(
  .section-head,
  .heading-row,
  .card,
  .product-card,
  .app-card,
  .app-meter-card,
  .app-support-card,
  .app-checklist-card,
  .knowledge-card,
  .role-card,
  .market-card,
  .journey-card,
  .why-card,
  .facts-card,
  .gateway-card,
  .oem-capability-card,
  .oem-input-card,
  .oem-product-card,
  .oem-scenario-card
) p {
  color: var(--inner-slate) !important;
}

/* Eyebrows, tags and type labels use one restrained soft-green treatment. */
body:not(.home) main :is(
  .kicker,
  .green-tag,
  .tag,
  .type-tag,
  .resource-type,
  .card-type,
  .section-kicker,
  .app-kicker,
  .inspection-kicker,
  .contact-hero-kicker,
  .history-layout-label
) {
  border-color: #c8e8cc !important;
  border-radius: 7px !important;
  background: var(--inner-green-soft) !important;
  color: var(--inner-green-dark) !important;
  box-shadow: none !important;
}

body:not(.home) #page-company .ytl-history__eyebrow {
  color: var(--inner-green-dark) !important;
}

body:not(.home) #page-company .ytl-history__eyebrow::before {
  background: var(--inner-green) !important;
}

body:not(.home) main .tags {
  align-items: center;
  gap: 10px;
}

body:not(.home) main .tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  line-height: 1.2;
}

/* Functional icons use one brand green without green blocks dominating cards. */
body:not(.home) main :is(
  .chip,
  .app-icon,
  .control-icon,
  .oem-step-icon,
  .oem-quality-icon,
  .contact-guidance-icon,
  .contact-brand-icon,
  .card-icon,
  .icon-badge,
  .ytl-cnas-icon,
  .ytl-semantic-icon
) {
  color: var(--inner-green) !important;
}

body:not(.home) main :is(
  .chip,
  .app-icon,
  .control-icon,
  .oem-step-icon,
  .oem-quality-icon,
  .contact-guidance-icon,
  .card-icon,
  .icon-badge,
  .ytl-cnas-icon,
  .ytl-semantic-icon
) svg {
  color: inherit !important;
  stroke: currentColor;
}

body:not(.home) main :is(
  .chip,
  .app-icon,
  .control-icon,
  .oem-step-icon,
  .oem-quality-icon,
  .contact-guidance-icon,
  .card-icon,
  .icon-badge,
  .ytl-cnas-icon,
  .ytl-semantic-icon
) svg :is(path, rect, circle, line, polyline, polygon) {
  stroke: currentColor;
}

/* CTA controls mirror the approved homepage: one shape and one action green. */
body:not(.home) main :is(
  .btn,
  .btn.secondary,
  .app-btn,
  .ytl-btn,
  .yq-btn,
  .ytl-cnas-btn,
  .submit,
  .contact-submit,
  input[type="submit"]
) {
  min-height: 44px;
  padding: 0 22px;
  gap: 10px;
  border: 1px solid var(--inner-green) !important;
  border-radius: 7px !important;
  background: var(--inner-green) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 9px 22px rgba(47, 170, 67, .16) !important;
}

body:not(.home) main :is(
  .btn,
  .btn.secondary,
  .app-btn,
  .ytl-btn,
  .yq-btn,
  .ytl-cnas-btn,
  .submit,
  .contact-submit,
  input[type="submit"]
):is(:hover, :focus-visible) {
  border-color: var(--inner-green-dark) !important;
  background: var(--inner-green-dark) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(33, 139, 50, .24) !important;
}

body:not(.home) .site-header .quote-btn {
  border-radius: 7px;
}

/* Inactive filters/tabs remain neutral; green is reserved for active state. */
body:not(.home) main :is(
  .what-tab,
  .tab,
  .filter-chip,
  .app-filter,
  .ytl-process-tab
) {
  border-color: var(--inner-line) !important;
  background: #fff !important;
  color: var(--inner-navy) !important;
  box-shadow: none !important;
}

body:not(.home) main :is(
  .what-tab.active,
  .what-tab.is-active,
  .tab.active,
  .tab.is-active,
  .filter-chip.active,
  .filter-chip.is-active,
  .app-filter.active,
  .app-filter.is-active,
  .ytl-process-tab.is-active
) {
  border-color: var(--inner-green) !important;
  background: var(--inner-green) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(47, 170, 67, .18) !important;
}

body:not(.home) main :is(
  .what-tab,
  .tab,
  .filter-chip,
  .app-filter,
  .ytl-process-tab
):not(.active, .is-active):is(:hover, :focus-visible) {
  border-color: rgba(47, 170, 67, .48) !important;
  background: var(--inner-green-soft) !important;
  color: var(--inner-green-dark) !important;
}

/* Cards stay white. Hover feedback is a green edge with a navy shadow. */
body:not(.home) main :is(
  .card,
  .product-card,
  .ytl-product-card,
  .app-card,
  .app-meter-card,
  .app-support-card,
  .app-checklist-card,
  .app-related-card,
  .application-card,
  .knowledge-card,
  .role-card,
  .market-card,
  .journey-card,
  .why-card,
  .gateway-card,
  .oem-capability-card,
  .oem-input-card,
  .oem-product-card,
  .oem-scenario-card,
  .inspection-card,
  .yq-card
) {
  border-color: var(--inner-line) !important;
}

body:not(.home) main :is(
  .card,
  .product-card,
  .ytl-product-card,
  .app-card,
  .app-meter-card,
  .app-support-card,
  .app-checklist-card,
  .app-related-card,
  .application-card,
  .knowledge-card,
  .role-card,
  .market-card,
  .journey-card,
  .why-card,
  .gateway-card,
  .oem-capability-card,
  .oem-input-card,
  .oem-product-card,
  .oem-scenario-card,
  .inspection-card,
  .yq-card
):is(:hover, :focus-within) {
  border-color: rgba(47, 170, 67, .48) !important;
  box-shadow: 0 18px 40px rgba(10, 39, 71, .10) !important;
}

body:not(.home) main :is(
  .app-card-link,
  .link,
  .text-link,
  .card-link,
  .ytl-product-card__link
) {
  color: var(--inner-navy) !important;
}

body:not(.home) main :is(
  .app-card-link,
  .link,
  .text-link,
  .card-link,
  .ytl-product-card__link
):is(:hover, :focus-visible),
body:not(.home) main :is(
  .card,
  .product-card,
  .ytl-product-card,
  .app-card,
  .app-meter-card,
  .knowledge-card
):hover :is(.app-card-link, .link, .text-link, .card-link, .ytl-product-card__link) {
  color: var(--inner-green-dark) !important;
}

/* Rules, inputs and card separators use the same cool gray as the homepage. */
body:not(.home) main hr,
body:not(.home) main :is(
  .section-head,
  .heading-row,
  .what-tabs,
  .tabs,
  .filter-bar,
  .app-filters,
  .facts-card,
  .form-card,
  input,
  textarea,
  select
) {
  border-color: var(--inner-line) !important;
}

body:not(.home) main :is(input, textarea, select):is(:focus, :focus-visible) {
  border-color: rgba(47, 170, 67, .62) !important;
  box-shadow: 0 0 0 3px rgba(47, 170, 67, .12) !important;
  outline: 0;
}

body:not(.home) main :focus-visible {
  outline-color: rgba(47, 170, 67, .45);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.home) main :is(
    .card,
    .product-card,
    .ytl-product-card,
    .app-card,
    .app-meter-card,
    .knowledge-card,
    .role-card,
    .market-card,
    .journey-card,
    .why-card,
    .gateway-card
  ) {
    transition: none !important;
  }
}

/*
 * One heading color system, aligned with the approved homepage.
 * Green remains an accent for icons, labels, buttons and selected inline words.
 */
body:not(.home) main :is(h1, h2, h3, h4, h5, h6) {
  color: var(--inner-navy) !important;
}

/*
 * Titles placed directly on dark photography or strong CTA surfaces keep the
 * homepage's high-contrast white treatment.
 */
body:not(.home) main :is(
  .hero,
  .app-hero,
  .ytl-application-detail-hero,
  .ytl-bg-hero-section,
  .contact-hero,
  .resource-banner-hero,
  .yq-hero,
  .ytl-cnas-hero,
  .factory-hero,
  .all-products-hero,
  .ytl-history-page-hero,
  .cta,
  .standards-band
) :is(h1, h2, h3, h4, h5, h6) {
  color: #fff !important;
}

/* Preserve the approved green data accent on the duplicate Home page view. */
body:not(.home) main #page-home .ytl-home-about-fact h3 {
  color: var(--inner-green-dark) !important;
}

/*
 * Banner height standard.
 * Home and both Applications banner types intentionally keep their approved
 * dimensions. Products overview and every other photographic inner-page
 * banner use the same 560px desktop / 500px compact standard as ODM.
 */
body:not(.home) main :is(
  .resource-banner-hero,
  .all-products-hero,
  .factory-hero,
  .yq-hero,
  .ytl-cnas-hero,
  .contact-hero
),
body:not(.home) :is(main#page-company, main #page-company) > .hero,
body:not(.home) :is(main#page-honor, main #page-honor) > .hero,
body:not(.home) :is(main#page-platform, main #page-platform) > .ytl-bg-hero-section,
body:not(.home) :is(main#page-oem, main #page-oem) > .ytl-bg-hero-section {
  box-sizing: border-box;
  min-height: 560px !important;
}

@media (min-width: 901px) {
  body:not(.home) main :is(
    .resource-banner-hero,
    .all-products-hero,
    .factory-hero,
    .yq-hero,
    .ytl-cnas-hero,
    .contact-hero
  ),
  body:not(.home) :is(main#page-company, main #page-company) > .hero,
  body:not(.home) :is(main#page-honor, main #page-honor) > .hero,
  body:not(.home) :is(main#page-platform, main #page-platform) > .ytl-bg-hero-section,
  body:not(.home) :is(main#page-oem, main #page-oem) > .ytl-bg-hero-section {
    height: 560px !important;
    max-height: 560px;
  }

  body:not(.home) :is(main#page-company, main #page-company) > .hero > .container {
    height: 100%;
    box-sizing: border-box;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  body:not(.home) :is(main#page-honor, main #page-honor) > .hero > .container {
    height: 100%;
    box-sizing: border-box;
    padding-top: 105px !important;
    padding-bottom: 105px !important;
  }

  body:not(.home) main .factory-hero > .ytl-container {
    height: 100%;
    box-sizing: border-box;
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  body:not(.home) main .yq-hero {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  body:not(.home) main .ytl-cnas-hero {
    padding-top: 33px !important;
    padding-bottom: 33px !important;
  }
}

/* Product-detail Heroes are light surfaces; their H1 must never inherit white. */
body:not(.home) :is(main.ytl-product-detail, main .ytl-product-detail) .ytl-series-hero h1 {
  color: var(--inner-navy) !important;
  text-shadow: none !important;
}

/* Contact: remove the decorative right card and use the photograph naturally. */
body:not(.home) main #page-contact .contact-hero-inner {
  grid-template-columns: minmax(0, 820px) !important;
  justify-content: start;
}

body:not(.home) main #page-contact .contact-hero-content {
  max-width: 820px;
}

/*
 * Contact desktop photograph:
 * give the copy a wider left-aligned canvas and lift it above the staff faces.
 * Tablet/mobile keep their existing responsive position.
 */
@media (min-width: 1101px) {
  body:not(.home) main #page-contact .contact-hero-inner {
    width: min(1400px, calc(100% - 64px));
  }

  body:not(.home) main #page-contact .contact-hero-content {
    transform: translateY(-36px);
  }

  body:not(.home) main #page-contact .contact-hero h1 {
    max-width: 640px;
  }
}

body:not(.home) main #page-contact .contact-hero .anchor-tabs {
  border-top-color: rgba(255, 255, 255, .22);
  background: var(--inner-green) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:not(.home) main #page-contact .contact-hero .anchor-tabs a {
  color: #fff !important;
}

body:not(.home) main #page-contact .contact-hero .anchor-tabs a::after {
  background: #fff;
}

body:not(.home) main #page-contact #inquiry-guidance,
body:not(.home) main #page-contact .contact-faq-section {
  padding-top: 72px !important;
}

@media (max-width: 900px) {
  body:not(.home) main :is(
    .resource-banner-hero,
    .all-products-hero,
    .factory-hero,
    .yq-hero,
    .ytl-cnas-hero,
    .contact-hero
  ),
  body:not(.home) :is(main#page-company, main #page-company) > .hero,
  body:not(.home) :is(main#page-honor, main #page-honor) > .hero,
  body:not(.home) :is(main#page-platform, main #page-platform) > .ytl-bg-hero-section,
  body:not(.home) :is(main#page-oem, main #page-oem) > .ytl-bg-hero-section {
    min-height: 500px !important;
  }
}

@media (max-width: 680px) {
  body:not(.home) main #page-contact #inquiry-guidance,
  body:not(.home) main #page-contact .contact-faq-section {
    padding-top: 56px !important;
  }
}

/*
 * Front-end Banner consistency:
 * - Breadcrumbs remain available in page data but are not shown on the public site.
 * - Hero eyebrow/kicker copy remains editable in the backend but is not shown publicly.
 */
body:not(.home):not(.wp-admin) main [class*="breadcrumb"],
body:not(.home):not(.wp-admin) main nav[aria-label="Breadcrumb"],
body:not(.home):not(.wp-admin) main nav[aria-label="breadcrumb"] {
  display: none !important;
}

body:not(.home):not(.wp-admin) main :is(
  .hero,
  .resource-banner-hero,
  .all-products-hero,
  .factory-hero,
  .yq-hero,
  .ytl-cnas-hero,
  .contact-hero,
  .ytl-application-detail-hero,
  .app-detail-hero-section,
  .ytl-bg-hero-section,
  .ytl-series-hero,
  .ytl-history-page-hero,
  .app-hero
) :is(
  .kicker,
  .eyebrow,
  .app-kicker,
  .contact-hero-kicker,
  .ytl-eyebrow,
  .yq-eyebrow,
  .ytl-cnas-eyebrow,
  .ytl-history__eyebrow
),
body:not(.home):not(.wp-admin) :is(main#page-company, main #page-company) > .hero .eyebrow,
body:not(.home):not(.wp-admin) :is(main#page-honor, main #page-honor) > .hero .eyebrow {
  display: none !important;
}

/* Product category banners use their uploaded ultrawide image ratio, not the generic 560px hero height. */
@media (min-width: 901px) {
  body:not(.home) main #page-product[data-product-collection-page] .all-products-hero.is-wide-banner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--product-hero-aspect, 3.555556);
  }

  body:not(.home) main #page-product[data-product-collection-page] .all-products-hero.is-wide-banner::before {
    background-size: 100% 100% !important;
    transform: none !important;
  }
}