/* ==========================================================================
   bcio-translate: script hygiene, RTL fixes and the language switcher.
   Font stacks are NOT set here: a site's own font variables differ from site to site, so the stacks for
   scripts its webfonts do not cover go into the project's i18n.site.css, which build.py appends.
   ========================================================================== */

/* 1. Script hygiene ------------------------------------------------------- */

/* no synthesized italics on CJK, Arabic, Indic or Ethiopic glyphs */
:lang(zh) em, :lang(zh) i, :lang(ja) em, :lang(ja) i, :lang(ko) em, :lang(ko) i,
:lang(ar) em, :lang(ar) i, :lang(ur) em, :lang(ur) i, :lang(hi) em, :lang(hi) i {
  font-style: normal;
  font-synthesis: weight;
}
html:lang(zh), html:lang(ja) { line-break: strict; }
html:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
/* long compounds and unbroken words must wrap instead of widening the page */
html:not(:lang(en)) body { overflow-wrap: break-word; }
/* tracking and forced capitals do not suit these scripts */
html:lang(zh) *, html:lang(ja) *, html:lang(ko) *, html:lang(ar) *, html:lang(ur) * { letter-spacing: 0 !important; }

/* 2. RTL -------------------------------------------------------------------- */
[dir="rtl"] [aria-hidden="true"][tabindex="-1"] { left: auto !important; right: -9999px !important; }
[dir="rtl"] a[href^="tel:"] { unicode-bidi: plaintext; }
[dir="rtl"] bdi[dir="ltr"] { unicode-bidi: isolate; }

/* text a client script translates after hydration: kept out of sight until then, three seconds at most */
html:not(.bcio-ready) [data-bcio-wait] { visibility: hidden; animation: bcio-wait-show 0s linear 3s forwards; }
@keyframes bcio-wait-show { to { visibility: visible; } }

/* 3. The switcher ----------------------------------------------------------- */
.bcio-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: 0.875rem;
  line-height: 1;
  z-index: 60;
}
.bcio-lang__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.bcio-lang__btn:hover { background: rgba(128, 128, 128, 0.14); }
.bcio-lang__btn:focus-visible, .bcio-lang__option:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bcio-lang__globe, .bcio-lang__chev, .bcio-lang__check { flex: none; font-size: 1.15em; }
.bcio-lang__chev { font-size: 0.9em; transition: transform 0.15s ease; }
.bcio-lang__btn[aria-expanded="true"] .bcio-lang__chev { transform: rotate(180deg); }
.bcio-lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 11rem;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  color: #111827;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 12px;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.22);
  text-align: start;
}
.bcio-lang__menu[hidden] { display: none !important; }
.bcio-lang__menu li { margin: 0; padding: 0; list-style: none; }
.bcio-lang__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: 8px;
  color: #111827;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.bcio-lang__option:hover { background: rgba(17, 24, 39, 0.07); }
.bcio-lang__option[aria-current="true"] { font-weight: 700; }

/* the page is wider than the window: the header switcher is the globe alone */
.bcio-tight-1 .bcio-lang--header .bcio-lang__btn { width: 44px; padding: 0; }
.bcio-tight-1 .bcio-lang--header .bcio-lang__cur, .bcio-tight-1 .bcio-lang--header .bcio-lang__chev { display: none; }

/* inside a menu sheet: the full list, opening upward when it sits at the bottom */
.bcio-lang--sheet { display: flex; margin: 16px 0; }
.bcio-lang--sheet .bcio-lang__btn { width: 100%; justify-content: space-between; }
.bcio-lang--sheet .bcio-lang__menu { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
.bcio-lang--sheet { flex-direction: column; align-items: stretch; }

/* no anchor in the page: a fixed control in the lower start corner */
.bcio-lang--floating { position: fixed; inset-block-end: 16px; inset-inline-start: 16px; z-index: 2147483000; }
.bcio-lang--floating .bcio-lang__btn { background: #fff; color: #111827; border-color: rgba(17, 24, 39, 0.25); box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.3); }
.bcio-lang--floating .bcio-lang__menu { top: auto; bottom: calc(100% + 6px); inset-inline-end: auto; inset-inline-start: 0; }

@media (max-width: 640px) {
  .bcio-lang--header .bcio-lang__cur { max-width: 4.5em; overflow: hidden; text-overflow: ellipsis; }
}
@media print { .bcio-lang { display: none !important; } }

/* site */
/* addlifeserve.com: fonts for scripts the site's webfonts do not cover, and the switcher in the site's style. */

/* The site's Inter Tight and Source Sans 3 files are Latin subsets. Vietnamese needs letters outside them, and a
   word must not be drawn in two families, so Vietnamese uses one system family with complete coverage. */
html:lang(vi) {
  --font-inter-tight: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial;
  --font-source-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial;
}
/* Chinese: the site's Latin fonts stay for Latin letters and digits; Chinese families follow by script. */
html:lang(zh-Hans) {
  --font-inter-tight: "interTight", "interTight Fallback", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB";
  --font-source-sans: "sourceSans", "sourceSans Fallback", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB";
}
html:lang(zh-Hant) {
  --font-inter-tight: "interTight", "interTight Fallback", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Heiti TC";
  --font-source-sans: "sourceSans", "sourceSans Fallback", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Heiti TC";
}
/* headings are set tight for Latin capitals; Chinese and Vietnamese marks need the room */
html:lang(zh) :is(h1, h2, h3), html:lang(vi) :is(h1, h2, h3) { line-height: 1.25; }

/* the switcher follows the header's own buttons: square, one hairline, the header's ink */
.bcio-lang--header { margin-inline-start: 0; }
.bcio-lang--header .bcio-lang__btn {
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line, currentColor);
  border-radius: 0;
  color: var(--ink, inherit);
  font: 600 var(--nav-fs, 15px)/1 var(--font-display, inherit);
  transition: background-color 0.12s linear, color 0.12s linear, border-color 0.12s linear;
}
.bcio-lang--header .bcio-lang__btn:is(:hover, :focus-visible) {
  background: var(--ink, #071b34);
  border-color: var(--ink, #071b34);
  color: var(--ink-inv, #fff);
}
.bcio-lang__menu { border-radius: 0; border-color: #071b34; color: #071b34; box-shadow: 0 16px 32px -12px rgba(7, 27, 52, 0.35); }
.bcio-lang__option { border-radius: 0; color: #071b34; font-family: var(--font-sans, inherit); }
.bcio-lang--sheet .bcio-lang__btn { border-radius: 0; border-color: #071b34; color: #071b34; font: 600 16px/1 var(--font-display, inherit); padding: 0 16px; min-height: 52px; }
.bcio-lang--sheet .bcio-lang__menu { border: 0; padding: 0; }
.bcio-lang--sheet { margin: 24px 0 8px; }
/* below the width where the header's own request button drops its label, the switcher is the globe alone */
@media (max-width: 519.98px) {
  .bcio-lang--header .bcio-lang__btn { width: 44px; padding: 0; }
  .bcio-lang--header .bcio-lang__cur, .bcio-lang--header .bcio-lang__chev { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .bcio-lang--header .bcio-lang__cur { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; }
}
/* under 420px the header has room for its own two buttons only; the switcher is in the menu sheet */
@media (max-width: 419.98px) { .bcio-lang--header { display: none; } }

/* still wider than the window with the switcher reduced: the header's request button takes the icon-only form the
   site itself uses under 520px */
.bcio-tight-2 .masthead-cta { width: 44px; padding: 0; }
.bcio-tight-2 .masthead-cta-icon { display: block; }
.bcio-tight-2 .masthead-cta-label { clip-path: inset(50%); white-space: nowrap; width: 1px; height: 1px; position: absolute; overflow: hidden; }

/* The home headline is set for a three-line English sentence. Vietnamese and Tagalog need about twice the
   letters, so the same block takes a smaller size and a wider measure; Chinese breaks into two even lines. */
html:lang(vi) .home-title, html:lang(tl) .home-title { font-size: calc(var(--t-display) * 0.7); max-width: 11.5em; line-height: 1.12; }
html:lang(es) .home-title { max-width: 8em; }
html:lang(zh) .home-title { max-width: 7.3em; line-height: 1.18; }
