/* Memory Clone localisation: language switcher, suggestion banner, notices, script fonts. */

#header .mc-lang,
.mc-lang {
  position: relative;
  flex: 0 0 auto;
  margin-left: 10px;
  z-index: 1002;
}

.mc-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 250, 240, .9);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.mc-lang-toggle:hover,
.mc-lang-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
}

.mc-lang-toggle:focus-visible,
.mc-lang-menu a:focus-visible,
.mc-lang-suggest a:focus-visible,
.mc-lang-suggest button:focus-visible {
  outline: 3px solid rgba(143, 240, 191, .75);
  outline-offset: 2px;
}

.mc-lang-toggle .bi-globe2 { font-size: 1rem; }
.mc-lang-caret { font-size: .7rem; opacity: .75; transition: transform .2s ease; }
.mc-lang-toggle[aria-expanded="true"] .mc-lang-caret { transform: rotate(180deg); }

.mc-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: #0d1526;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
}

.mc-lang-menu[hidden] { display: none !important; }

.mc-lang-menu li { margin: 0; padding: 0; }

.mc-lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: rgba(255, 250, 240, .86);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mc-lang-menu a:hover,
.mc-lang-menu a:focus { background: rgba(255, 255, 255, .08); color: #fff; }
.mc-lang-menu a.active { color: #8ef1dd; }

/* Mobile header: the globe sits next to the menu button. */
@media (max-width: 760px) {
  body.mc-page #header .mc-lang { margin-left: auto !important; order: 2; }
  body.mc-page #header .mc-lang ~ .mobile-nav-toggle { margin-left: 8px !important; order: 3; }
  .mc-lang-toggle { height: 42px; padding: 0 10px; }
  .mc-lang-toggle .mc-lang-caret { display: none; }
  .mc-lang-menu { position: fixed; top: 72px; right: 10px; left: auto; max-height: calc(100vh - 90px); }
}

/* First-visit browser-language suggestion (root home page only). */
.mc-lang-suggest {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  max-width: 440px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: #0d1526;
  color: rgba(255, 250, 240, .92);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
}

.mc-lang-suggest[hidden] { display: none !important; }
.mc-lang-suggest > .bi { font-size: 1.2rem; color: #8ef1dd; }
.mc-lang-suggest p { flex: 1 1 220px; margin: 0; font-weight: 700; line-height: 1.4; }

.mc-lang-suggest a,
.mc-lang-suggest button {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.mc-lang-suggest a { background: linear-gradient(135deg, #2f6bff, #1495ff); color: #fff; border: 0; }
.mc-lang-suggest button { background: transparent; color: rgba(255, 250, 240, .8); border: 1px solid rgba(255, 255, 255, .2); }

@media (max-width: 520px) {
  .mc-lang-suggest { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* "Provided in English" notices on translated legal pages and guides. */
.mc-lang-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(142, 241, 221, .35);
  border-radius: 12px;
  background: rgba(142, 241, 221, .08);
  color: rgba(255, 250, 240, .92);
  font-weight: 700;
  line-height: 1.45;
}

.mc-lang-notice .bi { color: #8ef1dd; margin-top: 2px; }

/* Scripts not covered by Sora/Manrope: keep the Latin brand fonts first, then a
   matching Noto face (loaded per language) and the platform CJK/Devanagari fonts. */
html:lang(zh-CN) body, html:lang(zh-CN) h1, html:lang(zh-CN) h2, html:lang(zh-CN) h3, html:lang(zh-CN) h4,
html:lang(zh-CN) button, html:lang(zh-CN) input, html:lang(zh-CN) textarea, html:lang(zh-CN) select, html:lang(zh-CN) .btn {
  font-family: "Manrope", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif !important;
}
html:lang(ja) body, html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3, html:lang(ja) h4,
html:lang(ja) button, html:lang(ja) input, html:lang(ja) textarea, html:lang(ja) select, html:lang(ja) .btn {
  font-family: "Manrope", "Noto Sans JP", "Yu Gothic UI", "Meiryo", "Hiragino Sans", sans-serif !important;
}
html:lang(ko) body, html:lang(ko) h1, html:lang(ko) h2, html:lang(ko) h3, html:lang(ko) h4,
html:lang(ko) button, html:lang(ko) input, html:lang(ko) textarea, html:lang(ko) select, html:lang(ko) .btn {
  font-family: "Manrope", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
}
html:lang(hi) body, html:lang(hi) h1, html:lang(hi) h2, html:lang(hi) h3, html:lang(hi) h4,
html:lang(hi) button, html:lang(hi) input, html:lang(hi) textarea, html:lang(hi) select, html:lang(hi) .btn {
  font-family: "Manrope", "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif !important;
}

/* CJK has no word spaces; avoid letter-spaced uppercase eyebrows breaking oddly. */
html:lang(zh-CN) .mc-eyebrow, html:lang(ja) .mc-eyebrow, html:lang(ko) .mc-eyebrow,
html:lang(zh-CN) .section-title span, html:lang(ja) .section-title span, html:lang(ko) .section-title span {
  letter-spacing: .04em;
}
html:lang(zh-CN) h1, html:lang(ja) h1, html:lang(ko) h1 { word-break: keep-all; line-break: strict; }
html:lang(hi) h1, html:lang(hi) h2, html:lang(hi) h3 { line-height: 1.3; }

/* Translated copy is often longer than English: let fixed-width English UI wrap instead of overflowing.
   (Selectors carry both ids to outrank the hero newsletter locks in mc-marketing.css.) */
html:not([lang="en"]) body.marketing-page #hero #newsletter-form-hero { min-width: 0 !important; }
html:not([lang="en"]) body.marketing-page #hero #newsletter-form-hero label {
  white-space: normal !important;
  letter-spacing: -.01em !important;
  font-size: clamp(.9rem, 3.9cqw, 1.05rem) !important;
}
html:not([lang="en"]) body.marketing-page #hero #newsletter-form-hero .hero-newsletter-row { display: flex !important; min-width: 0 !important; width: 100% !important; }
html:not([lang="en"]) body.marketing-page #hero #newsletter-form-hero input[type="email"] { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
html:not([lang="en"]) body.marketing-page #hero #newsletter-form-hero button.btn { flex: 0 0 auto !important; white-space: nowrap !important; }
html:not([lang="en"]) body.marketing-page #hero #newsletter-form-hero small { overflow-wrap: anywhere; }
html:not([lang="en"]) #header .header-actions .btn,
html:not([lang="en"]) #header .navmenu a { white-space: nowrap; }

/* Header pills are pixel-locked to the English labels (90px / 129px); translated labels size to content. */
@media (min-width: 761px) {
  html:not([lang="en"]) body > #header .header-actions .btn-warm,
  html:not([lang="en"]) body > #header .header-actions .btn-blue,
  html:not([lang="en"]) body > #header .header-actions .btn-profile,
  html:not([lang="en"]) body > #header .header-actions .btn-cyan {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 14px !important;
  }
  html:not([lang="en"]) body > #header .navmenu a.active { width: auto !important; }
}
/* Narrower desktops: the globe shows only its icon so the translated header keeps its spacing. */
@media (min-width: 761px) and (max-width: 1380px) {
  .mc-lang-toggle .mc-lang-current,
  .mc-lang-toggle .mc-lang-caret { display: none; }
  .mc-lang-toggle { padding: 0; width: 36px; justify-content: center; }
  html:not([lang="en"]) body > #header .navmenu ul { gap: 4px !important; }
  html:not([lang="en"]) body > #header .navmenu a { padding: 9px 8px !important; }
  html:not([lang="en"]) body > #header .header-actions { gap: 6px !important; }
}

/* Mobile header: logo leaves room for the globe and the menu button on one row. */
@media (max-width: 760px) {
  html body #header .logo,
  html body.mc-page #header .logo,
  html body.marketing-page #header .logo {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(100% - 120px) !important;
  }
  html body #header .mc-lang .mc-lang-toggle { width: 42px; padding: 0; justify-content: center; }
  html body #header .mc-lang .mc-lang-current { display: none; }
}