/* Every authored page imports this sheet before its component styles.
   Important layer order is reversed: this language layer must come first.
   It deliberately leaves size, weight, style, spacing, paint and artwork alone. */
/* Reuse the site's existing files, including pages without site-typography.css. */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@layer arotec-language-fonts {
  /* Native families are resolved by availability, not user-agent detection:
     Apple supplies PingFang/Hiragino; Windows supplies JhengHei/YaHei/Yu Gothic.
     Android and other platforms use the existing language-specific Noto web
     fonts (or an installed Source Han family). Keep script variants separate
     so a missing native family cannot select another region's Han glyphs. */
  :root {
    --arotec-font-cjk-tc: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Roboto", sans-serif;
    --arotec-font-cjk-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", "Roboto", sans-serif;
    --arotec-font-cjk-sc: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Source Han Sans CN", "Noto Sans SC", "Noto Sans CJK SC", "Roboto", sans-serif;
  }

  /* :lang() follows the nearest language annotation, including native-language
     choices and untranslated foreign passages, and updates on language change. */
  :where(:root, :lang(en)) {
    --arotec-language-font: "DM Sans", "Noto Sans Thai", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif !important;
  }
  :where(:lang(th)) {
    --arotec-language-font: "Noto Sans Thai", "DM Sans", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif !important;
  }
  :where(:lang(ja)) {
    --arotec-language-font: var(--arotec-font-cjk-jp) !important;
  }
  :where(:lang(zh), :lang(zh-Hant), :lang(zh-TW), :lang(zh-HK), :lang(zh-MO)) {
    --arotec-language-font: var(--arotec-font-cjk-tc) !important;
  }
  /* More specific Chinese variants must follow the generic zh match above. */
  :where(:lang(zh-CN), :lang(zh-Hans), :lang(zh-SG)) {
    --arotec-language-font: var(--arotec-font-cjk-sc) !important;
  }

  /* Runtime language choices name their own language without a lang attribute. */
  :where(.language-chip[data-lang-chip="en"], .language-chip[data-lang-chip="en"] *, :is(#languageSelect, #memberLanguageSelect) option[value="en"]) {
    --arotec-language-font: "DM Sans", "Noto Sans Thai", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif !important;
  }
  :where(.language-chip[data-lang-chip="th"], .language-chip[data-lang-chip="th"] *, :is(#languageSelect, #memberLanguageSelect) option[value="th"]) {
    --arotec-language-font: "Noto Sans Thai", "DM Sans", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif !important;
  }
  :where(.language-chip[data-lang-chip="ja"], .language-chip[data-lang-chip="ja"] *, :is(#languageSelect, #memberLanguageSelect) option[value="ja"]) {
    --arotec-language-font: var(--arotec-font-cjk-jp) !important;
  }
  :where(.language-chip:is([data-lang-chip="zh"], [data-lang-chip="zh-Hant"], [data-lang-chip="zh-TW"], [data-lang-chip="zh-HK"], [data-lang-chip="zh-MO"]), .language-chip:is([data-lang-chip="zh"], [data-lang-chip="zh-Hant"], [data-lang-chip="zh-TW"], [data-lang-chip="zh-HK"], [data-lang-chip="zh-MO"]) *, :is(#languageSelect, #memberLanguageSelect) option:is([value="zh"], [value="zh-Hant"], [value="zh-TW"], [value="zh-HK"], [value="zh-MO"])) {
    --arotec-language-font: var(--arotec-font-cjk-tc) !important;
  }
  :where(.language-chip:is([data-lang-chip="zh-CN"], [data-lang-chip="zh-Hans"], [data-lang-chip="zh-SG"]), .language-chip:is([data-lang-chip="zh-CN"], [data-lang-chip="zh-Hans"], [data-lang-chip="zh-SG"]) *, :is(#languageSelect, #memberLanguageSelect) option:is([value="zh-CN"], [value="zh-Hans"], [value="zh-SG"])) {
    --arotec-language-font: var(--arotec-font-cjk-sc) !important;
  }

  /* Set the aliases locally as legacy diagrams redefine these on sections. */
  :where(*) {
    --site-font: var(--arotec-language-font) !important;
    --arotec-font-family: var(--arotec-language-font) !important;
  }

  /* These are icon glyph containers, not prose. SVG text remains in scope;
     paths, images, embedded brand artwork and raster lettering are unchanged. */
  :where(*):not(:is(
    .ph, .ph-duotone, .ph-thin, .ph-light, .ph-bold, .ph-fill,
    [class^="ph-"], [class*=" ph-"],
    .fa, .fas, .far, .fal, .fat, .fad, .fab,
    [class^="fa-"], [class*=" fa-"],
    .bi, [class^="bi-"], [class*=" bi-"],
    .material-icons, .material-icons-outlined, .material-icons-round,
    .material-icons-sharp, .material-icons-two-tone,
    .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp,
    [data-icon-font]
  )) {
    font-family: var(--arotec-language-font) !important;
  }

  /* Text controls and generated annotations follow their owner's language.
     Authored ::before/::after icon glyph families are intentionally untouched. */
  :where(input, textarea)::placeholder,
  :where(input[type="file"])::file-selector-button,
  #brain-skin-axis .css-arrow::before {
    font-family: var(--arotec-language-font) !important;
  }

  /* A nested important layer wins over campaign families authored directly in
     this layer. Scope it to CJK prose so English campaign fonts and icon glyphs
     retain their existing styling. No type size or line-box values change. */
  @layer cjk-native {
    :where(:lang(ja), :lang(zh)):not(:is(
      .ph, .ph-duotone, .ph-thin, .ph-light, .ph-bold, .ph-fill,
      [class^="ph-"], [class*=" ph-"],
      .fa, .fas, .far, .fal, .fat, .fad, .fab,
      [class^="fa-"], [class*=" fa-"],
      .bi, [class^="bi-"], [class*=" bi-"],
      .material-icons, .material-icons-outlined, .material-icons-round,
      .material-icons-sharp, .material-icons-two-tone,
      .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp,
      [data-icon-font]
    )) {
      font-family: var(--arotec-language-font) !important;
    }

    /* CJK punctuation follows native line-breaking rules. Emergency breaks
       protect narrow prose containing long Latin terms without changing an
       authored white-space/nowrap mode or mathematical notation. */
    :where(p, h1, h2, h3, h4, li, summary, label, button):is(:lang(ja), :lang(zh)):not(:where(
      pre, pre *, code, code *, kbd, kbd *, samp, samp *, math, math *,
      [role="math"], [role="math"] *,
      [class*="formula" i], [class*="formula" i] *, [id*="formula" i], [id*="formula" i] *,
      [class*="equation" i], [class*="equation" i] *, [id*="equation" i], [id*="equation" i] *,
      [data-preserve-wrap], [data-preserve-wrap] *,
      nobr, nobr *, .nowrap, .nowrap *, .no-wrap, .no-wrap *, .text-nowrap, .text-nowrap *,
      [data-icon-font], .ph, [class^="ph-"], [class*=" ph-"],
      .fa, .fas, .far, .fal, .fat, .fad, .fab, [class^="fa-"], [class*=" fa-"],
      .bi, [class^="bi-"], [class*=" bi-"], [class^="material-icons"], [class^="material-symbols"]
    )) {
      line-break: strict !important;
      word-break: normal !important;
      overflow-wrap: break-word !important;
    }

    /* Use the style longhand: text-wrap: balance would also reset an explicit
       nowrap mode. Existing hard breaks and heading dimensions stay intact. */
    :where(h1, h2, h3, h4):is(:lang(ja), :lang(zh)):not(:where(
      [class*="formula" i], [class*="formula" i] *, [id*="formula" i], [id*="formula" i] *,
      [class*="equation" i], [class*="equation" i] *, [id*="equation" i], [id*="equation" i] *,
      [data-preserve-wrap], [data-preserve-wrap] *,
      nobr, nobr *, .nowrap, .nowrap *, .no-wrap, .no-wrap *, .text-nowrap, .text-nowrap *,
      [data-icon-font]
    )) {
      text-wrap-style: balance !important;
    }
  }
}

/* Shared language families load first; palette rules remain below. */
/* Load before authored stylesheets: important cascade layers reverse order.
   Only source-owned text surfaces and generated text annotations are scoped.
   No font or box geometry, image treatment or backdrop is changed here. */
@layer arotec-text-colors {
  :root { --arotec-text-navy: #113568; --arotec-text-white: #ffffff; }
  [data-arotec-text-tone="navy"] { -webkit-text-fill-color: var(--arotec-text-navy) !important; }
  [data-arotec-text-tone="white"] { -webkit-text-fill-color: var(--arotec-text-white) !important; }
  [data-arotec-text-tone="navy"][data-arotec-text-mode="color-and-fill"] { color: var(--arotec-text-navy) !important; }
  [data-arotec-text-tone="white"][data-arotec-text-mode="color-and-fill"] { color: var(--arotec-text-white) !important; }
  input[data-arotec-text-tone]::placeholder,
  textarea[data-arotec-text-tone]::placeholder { color: inherit !important; -webkit-text-fill-color: inherit !important; opacity: 1; }
  [data-arotec-before-tone="navy"]::before,
  [data-arotec-after-tone="navy"]::after { color: var(--arotec-text-navy) !important; -webkit-text-fill-color: var(--arotec-text-navy) !important; }
  [data-arotec-before-tone="white"]::before,
  [data-arotec-after-tone="white"]::after { color: var(--arotec-text-white) !important; -webkit-text-fill-color: var(--arotec-text-white) !important; }
  [data-arotec-icon-paint="preserve"]::before,
  [data-arotec-icon-paint="preserve"]::after { -webkit-text-fill-color: inherit !important; }
  [data-arotec-icon-before="preserve"]::before,
  [data-arotec-icon-after="preserve"]::after { -webkit-text-fill-color: currentColor !important; }

  /* The shared navigation/footer and policy panel are authored white. Keep
     link font paint navy through hover/focus without recoloring arrow SVGs. */
  :is(.site-header,.site-footer,.nav-submenu,.mobile-panel,.search-panel,.pilot-footer,.pilot-policy-main) :is(a,button) {
    -webkit-text-fill-color: var(--arotec-text-navy) !important;
  }
  :is(.site-header,.site-footer,.pilot-footer,.pilot-policy-main) :is(h1,h2,h3,h4,p,label,input,select,textarea,td,th,li) {
    color: var(--arotec-text-navy) !important;
    -webkit-text-fill-color: var(--arotec-text-navy) !important;
  }
  /* Shared shell exceptions have actual dark/plum backgrounds. Light native
     controls and the selected white language chip remain navy. */
  #site-shell .utility-nav :is(.nav-link,.nav-dropdown-trigger),
  #site-shell .mobile-panel :is(a,button,h2,h3,p,label),
  #site-shell .search-card :is(a,button,h2,p,span,label,input) {
    -webkit-text-fill-color: var(--arotec-text-white) !important;
  }
  #site-shell .search-card .search-input::placeholder { color: var(--arotec-text-white) !important; -webkit-text-fill-color: var(--arotec-text-white) !important; }
  #site-shell .mobile-panel :is(.pill-button,.contact-pill,.language-select,.language-chip.active),
  #site-shell :is(.language-select,.language-select option) {
    -webkit-text-fill-color: var(--arotec-text-navy) !important;
  }
  .arotec-storage :is(h2,p,label,.arotec-storage__policy,.arotec-storage__withdraw,.arotec-storage__close) {
    color: var(--arotec-text-navy) !important;
    -webkit-text-fill-color: var(--arotec-text-navy) !important;
  }
  .arotec-storage .arotec-storage__button,
  :is(.ss-more,.brs-more,.dsw-section-more,.exb-link,.ci-submit,.sfl-button,.sfl-source-cta,.wwa-more) {
    -webkit-text-fill-color: var(--arotec-text-white) !important;
  }
  #home-hero :is(.hero-title,.hero-reference-eyebrow,.hero-reference-support,.hero-reference-body),
  #home-hero .hero-reference-cta > span {
    -webkit-text-fill-color: var(--arotec-text-navy) !important;
  }
  #home-hero .hero-art-labels li,
  .nss-hero-copy :is(h1,h2,p,li),
  .vagus-launch :is(h1,p) { -webkit-text-fill-color: var(--arotec-text-white) !important; }
  .vagus-countdown__digits span {
    color: var(--arotec-text-navy) !important;
    -webkit-text-fill-color: var(--arotec-text-navy) !important;
  }
  /* The only authored inline SVG chart labels are live text on this white
     chart. Scope fill to text/tspan; paths, markers and scientific art retain
     their existing paint and every type/position attribute remains intact. */
  body.stress-page .native-graph-copy :is(text,tspan) { fill: var(--arotec-text-navy) !important; }
}