/*
 * Fundex24 research theme — languages beyond English and Persian (2026-09-10).
 * Enqueued from functions.php after style.css (and after pr373-kb.css, which
 * index.php enqueues before wp_head). single.php does not load pr373-kb.css,
 * so the language menu is styled completely here.
 */

/* ---------- Fonts ----------
 * dana.css puts Dana on `body *`. Dana is a Persian face with a basic Latin
 * set, so Turkish letters (ğ ş ı İ) and every Devanagari or Han glyph would
 * fall back one character at a time. Each added language gets a stack that
 * covers its script — the same families as the Next.js site (globals.css).
 */
html:lang(tr) body *,
html:lang(id) body *,
html:lang(ms) body *,
html:lang(pt) body *,
html:lang(es) body * {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Urdu (2026-09-13): Dana lacks ٹ ڈ ڑ ں ے, so Urdu reads in Naskh — the same
   files as the Next.js site. The unicode-range leaves Latin runs to the system
   face. Arabic letters join, and letter-spacing tears the joins apart. */
@font-face {
  font-family: "Fundex24 Urdu";
  src: url("assets/fonts/noto-naskh-arabic/noto-naskh-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Fundex24 Urdu";
  src: url("assets/fonts/noto-naskh-arabic/noto-naskh-arabic-arabic-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Fundex24 Urdu";
  src: url("assets/fonts/noto-naskh-arabic/noto-naskh-arabic-arabic-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Fundex24 Urdu";
  src: url("assets/fonts/noto-naskh-arabic/noto-naskh-arabic-arabic-700-normal.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

html:lang(ur) body * {
  font-family: "Fundex24 Urdu", "Noto Naskh Arabic", Inter, ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif;
  letter-spacing: normal !important;
}

/* Naskh has tall ascenders and deep descenders; long text needs the room. */
html:lang(ur) .fxn-content p,
html:lang(ur) .fxn-content li {
  line-height: 2.05;
}

html:lang(hi) body * {
  font-family: Inter, "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", Mangal, ui-sans-serif, system-ui, sans-serif;
}

html:lang(zh-TW) body * {
  font-family: Inter, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", ui-sans-serif, system-ui, sans-serif;
}

html:lang(zh-HK) body * {
  font-family: Inter, "PingFang HK", "Noto Sans HK", "Microsoft JhengHei", ui-sans-serif, system-ui, sans-serif;
}

html:lang(zh-SG) body * {
  font-family: Inter, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

html:lang(tr) body :is(code, pre, kbd, samp),
html:lang(id) body :is(code, pre, kbd, samp),
html:lang(hi) body :is(code, pre, kbd, samp),
html:lang(zh) body :is(code, pre, kbd, samp),
html:lang(ms) body :is(code, pre, kbd, samp),
html:lang(pt) body :is(code, pre, kbd, samp),
html:lang(es) body :is(code, pre, kbd, samp),
html:lang(ur) body :is(code, pre, kbd, samp) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Chinese has no word spaces; a little more leading reads better in long text. */
html:lang(zh) .fxn-content p,
html:lang(zh) .fxn-content li {
  line-height: 1.95;
}

/* ---------- Language menu ---------- */
.fxn-lang-menu {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  line-height: 1;
}

.fxn-lang-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px 0 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  list-style: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.fxn-lang-menu > summary::-webkit-details-marker {
  display: none;
}

.fxn-lang-menu > summary::marker {
  content: "";
}

.fxn-lang-menu > summary svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  opacity: .85;
}

.fxn-lang-menu > summary::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-inline-start: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .7;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.fxn-lang-menu[open] > summary::after {
  transform: translateY(1px) rotate(225deg);
}

.fxn-lang-menu > summary:hover,
.fxn-lang-menu > summary:focus-visible,
.fxn-lang-menu[open] > summary {
  background: rgba(255, 255, 255, .10);
}

.fxn-lang-list {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: #0f1724;
  box-shadow: 0 18px 44px rgba(2, 8, 23, .45);
}

.fxn-lang-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fxn-lang-list li::before {
  content: none;
}

.fxn-lang-list .fxn-lang-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  color: rgba(238, 241, 246, .86);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

/* pr373-kb.css forces the old EN/FA pills to ltr on Persian pages; each option now carries its own dir. */
.fxn-lang-list .fxn-lang-option[dir="ltr"] {
  direction: ltr;
}

.fxn-lang-list .fxn-lang-option[dir="rtl"] {
  direction: rtl;
  font-family: "Dana", Tahoma, sans-serif;
}

.fxn-lang-list .fxn-lang-option:hover,
.fxn-lang-list .fxn-lang-option:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.fxn-lang-list .fxn-lang-option.is-active {
  color: #fff;
  background: linear-gradient(135deg, #03a5e7, #0284c7);
}

/* ---------- Raster images in the article body ----------
 * .fxn-content img only rounds corners. The body text column is narrower than
 * an image's width attribute, so the width shrinks while the height attribute
 * stays: SVG diagrams letterbox inside that box, but JPEG/PNG ones stretch.
 * SVGs are left exactly as they render today.
 */
.fxn-content img:not([src$=".svg"]) {
  max-width: 100%;
  height: auto;
}

/* ---------- "More guides in English" (added-language hubs) ----------
 * The theme's body text is light (--fxn-text) and the listing area is a light
 * surface, so every colour here is explicit — the same pr373-kb.css palette the
 * article cards use, which also switches for the dark theme.
 */
.fx-kb-more-en {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--fxkb-line, rgba(15, 23, 42, .08));
}

.fx-kb-more-en .fx-kb-feed-head p {
  max-width: 62ch;
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--fxkb-ink-soft, #4d5f7d);
}

.fx-kb-more-en-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.fx-kb-more-en-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--fxkb-line, rgba(15, 23, 42, .08));
  border-radius: 14px;
  background: var(--fxkb-surface, #fff);
  box-shadow: var(--fxkb-shadow, none);
}

.fx-kb-more-en-list a {
  color: var(--fxkb-ink, #16233c);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.55;
  text-decoration: none;
}

html[data-fx-theme="dark"] .fx-kb-more-en-list a {
  color: #fff;
}

.fx-kb-more-en-list a:hover,
.fx-kb-more-en-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fx-kb-more-en-list span {
  font-size: 12.5px;
  color: var(--fxkb-ink-mute, #6b7c99);
}

.fx-kb-more-en-link {
  display: inline-flex;
  gap: 6px;
  margin-top: 18px;
  color: #03a5e7;
  font-weight: 700;
  text-decoration: none;
}

/* Anchor audit 2026-09-14: visually hidden link text on every template
   (pr373-kb.css has the same rule, but loads on listings only). */
.fx-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Search modal rows are role="link" divs now, not a row plus a title <a>. */
.f24cc-result { cursor: pointer; }
.f24cc-result:focus-visible { outline: 2px solid #03a5e7; outline-offset: 2px; }

/* Links in article text: the base `a { color: inherit; text-decoration: none }` in style.css
   made them look like plain text. Only plain anchors in text blocks; the article map (TOC) and
   classed CTA/card links keep their own styling. */
:where(.fxn-content) :where(p, li, figcaption, blockquote):not(:where(.fx-article-map *)) > a:not([class]),
:where(.fxn-content) :where(p, li, figcaption, blockquote):not(:where(.fx-article-map *)) > :where(strong, em) > a:not([class]) {
  color: #0369a1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(.fxn-content) :where(p, li, figcaption, blockquote):not(:where(.fx-article-map *)) > a:not([class]):hover {
  color: #075985;
  text-decoration-thickness: 2px;
}