/* Theme toggle + language picker in the nav (Experience Design spec THEME-LANG v1, Aster, 4 Nov 2026).
   Loaded on every page in both themes, before light-theme.css. Logical properties only, so RTL needs nothing extra. */
.nav-ctl{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;min-width:40px;padding:0 10px;
  border-radius:10px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;font:500 .875rem/1 var(--font-body);
  cursor:pointer;transition:background .15s,border-color .15s}
.nav-ctl:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32)}
.nav-ctl:focus-visible,.lang-menu a:focus-visible,.lang-list a:focus-visible{outline:2px solid #A877FF;outline-offset:2px}
.nav-ctl svg{width:18px;height:18px;flex:none}
.theme-toggle{padding:0;width:40px}
/* the icon shows the theme you are in: moon = dark, sun = light */
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
.flag{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.22);flex:none;display:block;object-fit:cover}
.lang{position:relative}
.lang-btn .code{letter-spacing:.04em}
.lang-btn .caret{width:12px;height:12px;transition:transform .15s}
.lang-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:200px;margin:0;padding:6px;list-style:none;
  background:#15151E;border:1px solid rgba(197,180,227,.18);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.6);z-index:120}
.lang-menu[hidden]{display:none}
:is(.lang-menu,.lang-list) li>a[hreflang]{display:flex;align-items:center;gap:12px;padding:0 12px;min-height:44px;box-sizing:border-box;
  border-radius:8px;color:#fff;text-decoration:none;font-size:.9375rem}
:is(.lang-menu,.lang-list) li>a[hreflang]:hover{background:rgba(255,255,255,.06);color:#fff}
:is(.lang-menu,.lang-list) li>a[aria-current="true"]{background:rgba(127,38,253,.22)}
:is(.lang-menu,.lang-list) li>a[aria-current="true"]::after{content:"";margin-inline-start:auto;width:16px;height:16px;flex:none;
  background:#A877FF;-webkit-mask:url("flags/check.svg") center/contain no-repeat;mask:url("flags/check.svg") center/contain no-repeat}
/* each name is in its own language and script; Arabic gets the Arabic face */
:is(.lang-menu,.lang-list) [lang="ar"]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;font-size:1.0625rem}
/* phone: the bar keeps only the theme toggle; the language list sits in the drawer after the links, two per row */
.lang-head{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#A8B0C0;margin:16px 0 6px}
:lang(ar) .lang-head{letter-spacing:0;text-transform:none;font-size:.875rem}
.nav-mobile .lang-list{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.nav-mobile .lang-list li{margin:0;padding:0;border:0}
.nav-mobile .lang-list li>a[hreflang]{font-size:1rem;padding:0 10px}
@media (max-width:900px){.nav-cta .lang{display:none}.nav-ctl{height:44px;min-width:44px}.theme-toggle{width:44px}}
/* light theme (the generated light-theme.css colours plain links violet, so these are deliberately specific) */
:root[data-theme="light"] .nav-ctl{border-color:rgba(14,14,20,.16);color:#0E0E14}
:root[data-theme="light"] .nav-ctl:hover{background:rgba(14,14,20,.05);border-color:rgba(14,14,20,.3)}
:root[data-theme="light"] :is(.nav-ctl,.lang-menu a,.lang-list a):focus-visible{outline-color:#7F26FD}
:root[data-theme="light"] .flag{box-shadow:0 0 0 1px rgba(14,14,20,.16)}
:root[data-theme="light"] .lang-menu{background:#fff;border-color:#E5E7EE;box-shadow:0 20px 50px rgba(14,14,20,.12)}
:root[data-theme="light"] :is(.lang-menu,.lang-list) li>a[hreflang][href]{color:#0E0E14!important}
:root[data-theme="light"] :is(.lang-menu,.lang-list) li>a[hreflang]:hover{background:#F2F3F7}
:root[data-theme="light"] :is(.lang-menu,.lang-list) li>a[aria-current="true"]{background:rgba(127,38,253,.08)}
:root[data-theme="light"] :is(.lang-menu,.lang-list) li>a[aria-current="true"]::after{background:#7F26FD}
:root[data-theme="light"] .lang-head{color:#5A6478}
@media (prefers-reduced-motion:reduce){.nav-ctl,.lang-btn .caret{transition:none}}
/* AA fixes the sweep found in today's dark careers page (both themes stay AA) */
:root:not([data-theme="light"]) .role-pill{color:#00C8E0}
:root:not([data-theme="light"]) .file-hint{color:#8A93A6}
/* Room: with the language + theme controls the desktop nav is ~140px wider than its 1280px container, so it tightens
   (same moves as AR-SHELL-SPEC v1.1). Longer languages switch to the menu button earlier: see the breakpoints below. */
@media (min-width:1280px){
  .nav:has(.lang) .nav-links{gap:2px}
  .nav:has(.lang) .nav-links a{padding-inline:8px}
  .nav:has(.lang) .nav-inner{gap:16px}
  .nav:has(.lang) .nav-cta{gap:8px}
}
/* German and Russian nav labels need ~1340px (measured): their nav gets an 85rem container and switches to the menu
   button below 1360px instead of 1280px. English, Spanish, French and Arabic fit the 1280px container. */
:root:is(:lang(de),:lang(ru)) .nav .nav-inner{max-width:85rem}
@media (max-width:1359px){
  :root:is(:lang(de),:lang(ru)) .nav-links,:root:is(:lang(de),:lang(ru)) .nav-cta .btn{display:none}
  :root:is(:lang(de),:lang(ru)) .nav-toggle{display:inline-flex}
  :root:is(:lang(de),:lang(ru)) .nav-mobile{display:block}
}
/* Long words: German compounds and Russian words hyphenate in headings and narrow cards instead of overflowing */
:lang(de) :is(h1,h2,h3,.h1,.h2,.h3,.sc-h1,.sc-card p,.card p),:lang(ru) :is(h1,h2,h3,.h1,.h2,.h3,.sc-h1,.sc-card p,.card p){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* The drawer's language list is for phones; from 901px the bar's language button is visible, so the drawer skips it */
@media (min-width:901px){.nav-mobile .lang-head,.nav-mobile .lang-list{display:none}}
/* Phone overflows found on the translated pages (Wren's sweep, 4 Nov) */
/* FAQ questions: a flex row turns each <bdi> product name into its own unbreakable item, so an Arabic question with
   three names could not wrap (+31px). Block layout with the +/- icon pinned to the inline end wraps like any text. */
.faq-item > summary{display:block;position:relative;padding-inline-end:32px}
.faq-item > summary::after{position:absolute;inset-inline-end:0;top:50%;margin-top:-8px}
/* Two-column splits stack on phones; their items must be allowed to shrink below one long word (German compounds,
   Russian lines), which then hyphenate or wrap */
.split > *{min-width:0}
:is(.split,.card,.contact-meta) :is(h2,h3,h4,.h2,.h3,p,a){overflow-wrap:break-word}

/* Nav room, v1.3 (Wren's find, 4 Nov): product and FAQ pages carry a longer button, and a Windows scrollbar takes 15px.
   Nothing in the bar wraps, and just above each language's menu-button breakpoint the bar tightens a step further. */
.nav:has(.lang) :is(.nav-links>a,.nav-cta .btn){white-space:nowrap}
@media (min-width:1280px) and (max-width:1339px){
  .nav:has(.lang) .nav-links{gap:0}
  .nav:has(.lang) .nav-links a{padding-inline:6px}
  .nav:has(.lang) .nav-inner{gap:12px}
  .nav:has(.lang) .nav-cta{gap:6px}
}
@media (min-width:1360px) and (max-width:1399px){
  :root:is(:lang(de),:lang(ru)) .nav:has(.lang) .nav-links{gap:0}
  :root:is(:lang(de),:lang(ru)) .nav:has(.lang) .nav-links a{padding-inline:6px}
  :root:is(:lang(de),:lang(ru)) .nav:has(.lang) .nav-inner{gap:12px}
  :root:is(:lang(de),:lang(ru)) .nav:has(.lang) .nav-cta{gap:6px}
}
/* Translated stat words are wider than a three-across card in a narrow column (Spanish +67px at 920, /outcomes): the cards drop to two across or stack */
:is(:lang(es),:lang(fr),:lang(de),:lang(ru)) .grid-3:has(>.stat){grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
/* A button longer than a phone or tablet wraps to two lines instead of running off the edge (Russian +76px on /services at 390) */
@media (max-width:1023px){
  :is(main,.cta-band,.sc-cta) .btn{max-width:100%;white-space:normal;overflow-wrap:break-word;text-align:center}
}