/* Language selector + RTL support for the marketing site (see docs/i18n-website.md) */
html.i18n-wait body{visibility:hidden}
.lang-sw{position:relative;display:inline-flex;align-items:center;flex:none}
.lang-globe{position:absolute;inset-inline-start:10px;width:16px;height:16px;pointer-events:none;color:#fff;opacity:.9}
.lang-sel{appearance:none;-webkit-appearance:none;font:inherit;font-size:13.5px;font-weight:700;line-height:1;color:#fff;background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;height:36px;padding:0 28px 0 32px;padding-inline:32px 28px;cursor:pointer;max-width:150px;text-overflow:ellipsis}
.lang-sel:hover{background-color:rgba(255,255,255,.18)}
.lang-sel:focus-visible{outline:2px solid #f5b81f;outline-offset:2px}
.lang-sel option{color:#171534;background:#fff}
[dir=rtl] .lang-sel{background-position:left 10px center}
.aos-legal-note{background:#fff7e0;color:#4a3b00;border-bottom:1px solid #f0d890;padding:12px 16px;font-size:14px;line-height:1.5;text-align:center}
.aos-legal-note a{color:#1d3a8f;font-weight:700;text-decoration:underline}

/* ---- RTL (ar, ur): dir=rtl on <html> mirrors flex/grid; these are the targeted fixes for physical properties ---- */
[dir=rtl] *{letter-spacing:0!important}
[dir=rtl] [style*="margin-left:auto"]{margin-left:0!important;margin-right:auto!important}
[dir=rtl] [style*="margin-right:auto"]{margin-right:0!important;margin-left:auto!important}
[dir=rtl] [style*="text-align:left"]{text-align:right!important}
[dir=rtl] .carr.prev,.wrap [dir=rtl] .carr.prev{left:auto;right:-6px}
[dir=rtl] .carr.next{right:auto;left:-6px}
[dir=rtl] .wrap .carr.prev{left:auto;right:-2px}
[dir=rtl] .wrap .carr.next{right:auto;left:-2px}
[dir=rtl] .carr{transform:scaleX(-1)}
/* taller headings for scripts with stacked marks */
:lang(bn) h1,:lang(bn) h2,:lang(pa) h1,:lang(pa) h2,:lang(ur) h1,:lang(ur) h2{line-height:1.3}

/* Desktop: the language selector sits on its own at the far right of the header, after the sign-in buttons, set off by a divider.
   (Under 960px the mobile layer in responsive.css moves it into the menu, so this is desktop only.) */
@media (min-width:960px){
  .nav-cta .lang-sw{order:99;margin-inline-start:6px;padding-inline-start:16px;border-inline-start:1px solid rgba(255,255,255,.28)}
}

/* Wide screens: pin the selector to the far right edge of the page, on its own, clear of the nav buttons.
   Below 1360px there isn't spare room beside the content, so it stays at the end of the button row (rule above). */
@media (min-width:1360px){
  header.nav{position:sticky}
  header.nav .lang-sw{position:absolute;inset-inline-end:20px;top:50%;transform:translateY(-50%);order:0;margin:0;padding:0;border:0}
}

/* the wordmark must never wrap onto two lines when the nav is crowded (long translated menu labels) */
header.nav .brand{white-space:nowrap;flex-shrink:0}