/* Language switcher (src/site/i18n-ui.js), the "This page is in English." note and fonts for non-Latin scripts. */
/* ---- Language switcher: a quiet button, a solid white list (hairline, soft shadow) ---- */
.lang-switch { position: relative; display: inline-block; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: #fff; font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s; }
.lang-btn:hover { border-color: rgba(255, 255, 255, 0.5); }
.lang-btn:focus-visible, .lang-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lang-flag { width: 20px; height: 14px; flex: none; border-radius: 2px; }
.lang-chev { opacity: .7; transition: transform .2s var(--ease); }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-list { position: absolute; z-index: 90; top: calc(100% + 8px); left: 0; width: 248px; max-height: min(420px, 70vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; color: #0d0d0f; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); animation: drop .18s var(--ease); }
.lang-list[hidden] { display: none; }
.lang-up .lang-list { top: auto; bottom: calc(100% + 8px); }
.lang-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #0d0d0f !important; text-decoration: none; }
.lang-opt:hover, .lang-opt:focus-visible { background: #f4f3ef; }
.lang-names { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.lang-native { font-size: .92rem; font-weight: 600; }
.lang-en { font-size: .76rem; color: var(--muted); }
.lang-check { color: var(--gold-dark); flex: none; }
.lang-opt[aria-current="true"] { background: #faf8f4; }
/* Compact version in the mobile menu: black on white, the list opens in place */
.nav-lang { padding: 8px 4px 4px; }
.lang-switch-compact { display: block; }
.lang-switch-compact .lang-btn { color: #0d0d0f; border-color: rgba(0, 0, 0, 0.12); width: 100%; justify-content: flex-start; min-height: 40px; }
.lang-switch-compact .lang-btn .lang-chev { margin-left: auto; }
.lang-switch-compact .lang-list { position: static; width: auto; max-height: 260px; margin-top: 6px; box-shadow: none; animation: none; }
.footer-lang { margin-top: 18px; }

/* "This page is in English." under the header bar on translated views */
.lang-note { max-width: 1240px; margin: 8px auto 0; text-align: center; pointer-events: none; transition: opacity .2s; }
.lang-note span { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .78rem; background: #fff; color: #0d0d0f; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.site-header.scrolled .lang-note, .site-header.menu-open .lang-note { opacity: 0; }

/* Scripts that Instrument Sans and Newsreader don't cover: system or Noto fonts after them */
html:lang(ur) { --font: 'Instrument Sans', 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Noto Naskh Arabic', sans-serif; --font-display: 'Times New Roman', 'Newsreader', 'Noto Nastaliq Urdu', serif; }
html:lang(ar) { --font: 'Instrument Sans', 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', sans-serif; --font-display: 'Times New Roman', 'Newsreader', 'Noto Naskh Arabic', serif; }
html:lang(pa) { --font: 'Instrument Sans', 'Noto Sans Gurmukhi', 'Raavi', sans-serif; --font-display: 'Times New Roman', 'Newsreader', 'Noto Sans Gurmukhi', serif; }
html:lang(bn) { --font: 'Instrument Sans', 'Noto Sans Bengali', 'Vrinda', sans-serif; --font-display: 'Times New Roman', 'Newsreader', 'Noto Sans Bengali', serif; }
html:lang(gu) { --font: 'Instrument Sans', 'Noto Sans Gujarati', 'Shruti', sans-serif; --font-display: 'Times New Roman', 'Newsreader', 'Noto Sans Gujarati', serif; }
html:lang(zh-Hans) { --font: 'Instrument Sans', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'WenQuanYi Zen Hei', sans-serif; --font-display: 'Times New Roman', 'Newsreader', 'Songti SC', 'SimSun', 'Noto Serif SC', serif; }
html:lang(ur) body { line-height: 1.9; }
html:lang(ur) h1, html:lang(ur) h2, html:lang(ur) h3 { line-height: 1.5; letter-spacing: 0; }
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3, html:lang(pa) h1, html:lang(bn) h1, html:lang(gu) h1, html:lang(pa) h2, html:lang(bn) h2, html:lang(gu) h2 { line-height: 1.3; letter-spacing: 0; }
html:not(:lang(en)) .eyebrow, html:not(:lang(en)) .hero-eyebrow { letter-spacing: .04em; }
/* Hardening: footer/menu image rules must not stretch the flags */
.lang-switch .lang-flag { width: 20px !important; height: 14px !important; max-width: none; flex: none; margin: 0; border-radius: 3px; object-fit: cover; }
.lang-switch .lang-btn { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; padding: 7px 12px; }
.lang-switch .lang-opt { display: grid !important; grid-template-columns: 20px 1fr 16px; align-items: center; gap: 10px; text-align: start; }
.lang-switch .lang-names { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.lang-switch .lang-native { font-weight: 600; text-align: start; }
.lang-switch .lang-en { font-size: .8em; opacity: .6; }
/* Fonts for scripts we don't self-host: fall back to the best system fonts */
html:lang(pa) body { font-family: 'Noto Sans Gurmukhi', 'Raavi', 'Gurmukhi MN', 'Nirmala UI', var(--font); }
html:lang(gu) body { font-family: 'Noto Sans Gujarati', 'Shruti', 'Gujarati Sangam MN', 'Nirmala UI', var(--font); }
html:lang(bn) body { font-family: 'Noto Sans Bengali', 'Vrinda', 'Bangla Sangam MN', 'Nirmala UI', var(--font); }
html:lang(zh) body { font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', var(--font); }