/* ==================================================================
   C&C Accounting — language toggle + Chinese typography.
   Loaded on every page, alongside the page's own stylesheet.
   ================================================================== */

/* ---------- the toggle ---------- */
.cc-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;
  border:1px solid #d7dde5;border-radius:999px;background:#fff;flex:0 0 auto}
.cc-lang button{
  cursor:pointer;border:0;border-radius:999px;background:transparent;color:#68778a;
  padding:5px 13px;line-height:1.2;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:13px;font-weight:500;
  transition:background .18s,color .18s}
.cc-lang button:hover{color:#1e3a5f}
.cc-lang button[aria-pressed="true"]{background:#1e3a5f;color:#fff;font-weight:700}
.cc-lang button:focus-visible{outline:2px solid #1e3a5f;outline-offset:2px}
.cc-lang button[data-lang="zh"]{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",
    "Roboto",Arial,sans-serif}

/* sits between the nav and the "Let's talk" link in the site header */
.header-inner .cc-lang{margin-left:22px}
@media (max-width:1024px){.header-inner .cc-lang{margin-left:auto;margin-right:12px}}

/* drawer version, full width */
.mobile-drawer .cc-lang{display:flex;width:100%;justify-content:center;margin:18px 0 4px;
  padding:5px;border-radius:10px}
.mobile-drawer .cc-lang button{flex:1;padding:10px;border-radius:7px;font-size:14px}

/* ==================================================================
   Chinese typography.

   Noto Sans SC is the formal, professional Simplified Chinese face —
   the equivalent register to Roboto in English. Latin characters and
   digits inside Chinese text keep Roboto by listing it first, so
   currency figures and rates stay in the same numerals as the English
   version.
   ================================================================== */
:root[data-lang="zh"]{
  --cc-cjk:"Roboto","Noto Sans SC","PingFang SC","Microsoft YaHei",
    "Hiragino Sans GB","Source Han Sans SC",sans-serif;
}
:root[data-lang="zh"] .h,
:root[data-lang="zh"] .t,
:root[data-lang="zh"] .r,
:root[data-lang="zh"] .header,
:root[data-lang="zh"] .mobile-drawer,
:root[data-lang="zh"] .footer{font-family:var(--cc-cjk)}

:root[data-lang="zh"] .h :is(h1,h2,h3,h4,p,span,a,b,strong,em,li,td,th,label,button,small,summary,div),
:root[data-lang="zh"] .t :is(h1,h2,h3,h4,p,span,a,b,strong,em,li,td,th,label,button,small,summary,input,select),
:root[data-lang="zh"] .r :is(h1,h2,h3,h4,p,span,a,b,strong,em,li,td,th,label,button,small,summary),
:root[data-lang="zh"] .header :is(a,span,button),
:root[data-lang="zh"] .mobile-drawer :is(a,span,b),
:root[data-lang="zh"] .footer :is(h3,p,a,span){font-family:var(--cc-cjk)}

/* Chinese needs a touch more line height and no negative tracking */
:root[data-lang="zh"] .h,
:root[data-lang="zh"] .t,
:root[data-lang="zh"] .r{line-height:1.75}
:root[data-lang="zh"] .h :is(h1,h2,h3,h4),
:root[data-lang="zh"] .t :is(h1,h2,h3,h4),
:root[data-lang="zh"] .r :is(h1,h2,h3,h4){letter-spacing:0;line-height:1.35}
:root[data-lang="zh"] .h-hero h1{line-height:1.25}

/* uppercase + wide tracking is a Latin device; it mangles Chinese */
:root[data-lang="zh"] :is(.h-eyebrow,.t-eyebrow,.r-eyebrow,.h-tag,.r-tag,.t-chip,.h-badge,.t-badge){
  text-transform:none;letter-spacing:.02em}
:root[data-lang="zh"] :is(.t-tabs a,.h-btn,.t-btn,.r-btn,.t-seg button,.h-link,.t-card .t-go,.h-card .h-link){
  letter-spacing:0}
:root[data-lang="zh"] .t-card .t-go,
:root[data-lang="zh"] .r-chips button,
:root[data-lang="zh"] .r-card .r-tag{text-transform:none}

/* figures stay tabular and Latin */
:root[data-lang="zh"] :is(.t-figure,.h-stats b,.t-stats b,.t-trio b,table.t-table td,table.t-ref td){
  font-family:"Roboto",var(--cc-cjk)}

/* ==================================================================
   The four site pages (about, services, contact, careers) use the main
   site stylesheet rather than the cc-* ones, so their classes need the
   same Chinese treatment.
   ================================================================== */
:root[data-lang="zh"] main{font-family:var(--cc-cjk)}
:root[data-lang="zh"] main :is(h1,h2,h3,h4,p,span,a,b,strong,em,li,label,button,
  small,summary,div,input,select,textarea,option,article,header){font-family:var(--cc-cjk)}

:root[data-lang="zh"] :is(.page-hero,.split-copy,.service-list,.service-cards,
  .contact-page,.career-original,.image-cta){line-height:1.85}
:root[data-lang="zh"] :is(.page-hero h1,.contact-info h1,.career-title h1){
  letter-spacing:.01em;line-height:1.32}
:root[data-lang="zh"] :is(.split-copy h2,.section-lead h2,.service-list h2,
  .image-cta h2,.career-body h2){letter-spacing:.01em;line-height:1.45}
:root[data-lang="zh"] :is(.split-copy p,.service-list p,.career-body p,
  .contact-info p,.page-hero p){line-height:1.95}
:root[data-lang="zh"] :is(.service-cards h3,.service-list h3){line-height:1.5}
:root[data-lang="zh"] .career-body li{line-height:1.9;margin-bottom:6px}

/* uppercase + wide tracking is a Latin device and mangles Chinese */
:root[data-lang="zh"] :is(.kicker,.page-hero span,.contact-info>span,.blog-list>span){
  text-transform:none;letter-spacing:.04em}
:root[data-lang="zh"] :is(.button,.context-links a){letter-spacing:0}

/* form controls */
:root[data-lang="zh"] .contact-form :is(label,button,input,select,textarea){letter-spacing:0}
:root[data-lang="zh"] .contact-form label{line-height:1.8}

/* ------------------------------------------------------------------
   Contact form labels.

   Making the labels bilingual meant wrapping their visible text in a
   <span>. The site stylesheet's `.contact-form label > span` rule
   predates that: it was written for the lone red asterisk, so it now
   also reddens the label text, and because the label is a column flex
   container the asterisk lands on a line of its own. Put the text and
   its asterisk back on one baseline and give the red back to the
   asterisk only. The privacy checkbox is a grid, not a flex row, and
   is excluded.
   ------------------------------------------------------------------ */
.contact-form label:not(.checkbox){flex-flow:row wrap;align-items:baseline;gap:0 4px}
.contact-form label:not(.checkbox)>span[data-zh]{color:#52647c}
.contact-form label:not(.checkbox)>:is(input,select,textarea){flex:1 0 100%;margin-top:7px}