
/* The Urdu font (Nafees Web Naskh) is declared in ONE place: fp-status-fonts.css,
   which also defines --fp-urdu-font / --fp-urdu-lh used below. It is loaded
   right after this file. The font file lives in public/fonts/urdu/ - no CDN and
   no other Urdu/Arabic font is used anywhere on the site. */
/* Friendse Universal Multilingual Text
   UTF-8/Unicode-first typography and automatic LTR/RTL handling.
   No language is forced; the browser chooses the installed glyphs for the
   script actually used by the user. */
:root {
  /* "Nafees Web Naskh" is first on purpose: its @font-face is limited (unicode-range)
     to Arabic-script letters, so Urdu words ALWAYS use it - even inside a post that
     starts in English (LTR) - while English letters/digits skip it and use the
     device fonts below. No Arabic font other than Nafees is listed. */
  --fp-unicode-font:
    "Nafees Web Naskh", "Noto Sans", "Noto Sans Devanagari",
    "Noto Sans Bengali", "Noto Sans Gurmukhi", "Noto Sans Gujarati",
    "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada",
    "Noto Sans Malayalam", "Noto Sans Thai", "Noto Sans Hebrew",
    "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans CJK JP",
    "Segoe UI", "Segoe UI Symbol", "Arial Unicode MS", system-ui, sans-serif;
}

/* Text fields: dir=auto is applied by fp-universal-text.js. */
input[type="text"], input[type="search"], input[type="url"],
input[type="email"], input[type="tel"], textarea, [contenteditable="true"] {
  font-family: var(--fp-unicode-font);
  unicode-bidi: plaintext;
  overflow-wrap: anywhere;
}

.fp-composer-textarea,
.fp-post-body,
.fp-post-text,
.friende-viewer-caption-text,
.friende-comment-text,
.friende-status-caption,
.friende-status-title,
.friende-feed-status-name {
  font-family: var(--fp-unicode-font) !important;
  unicode-bidi: plaintext;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: start;
}

.fp-composer-textarea,
.friende-viewer-caption-text,
.friende-status-caption,
.friende-status-title {
  line-height: 1.7;
}

.fp-post-text,
.fp-post-body,
.friende-comment-text {
  line-height: 1.65;
}

/* Auto-direction: browser resolves the base direction from the first strong
   character, so English, Urdu, Arabic, Hindi, Persian, Hebrew, etc. can be
   mixed naturally in one field/post. */
[dir="auto"] {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Keep numbers, emoji and mixed-script fragments from forcing awkward wraps. */
.fp-post-text, .fp-composer-textarea, .friende-viewer-caption-text,
.friende-comment-text, .friende-status-caption, .friende-status-title {
  font-variant-ligatures: contextual common-ligatures;
  text-rendering: optimizeLegibility;
}

/* Mobile: slightly more breathing room for Urdu/Arabic/Indic scripts. */
@media (max-width: 640px) {
  .fp-composer-textarea { line-height: 1.75 !important; }
  .fp-post-text, .fp-post-body,
  .friende-viewer-caption-text, .friende-comment-text { line-height: 1.7; }
}

/* RTL script typography: Urdu (Nafees Web Naskh) only when the text's own
   direction is RTL (dir="auto" resolves from the first strong letter). LTR
   languages keep the site's normal UI font. */
.fp-post-body:dir(rtl),
.fp-post-text:dir(rtl),
.fp-post-title:dir(rtl),
.fp-repost-text:dir(rtl),
.fp-comment-text:dir(rtl),
.friende-viewer-caption-text:dir(rtl),
.friende-status-richtext:dir(rtl),
.fpr-caption:dir(rtl),
.fpr-title:dir(rtl),
.friende-comment-text:dir(rtl) {
  font-family:var(--fp-urdu-font, 'Nafees Web Naskh', system-ui, sans-serif) !important;
  direction:rtl;
  text-align:right;
  --fp-lh:var(--fp-urdu-lh, 1.8);
  --fp-title-lh:var(--fp-urdu-lh, 1.8);
  line-height:var(--fp-lh) !important;
  font-weight:400;
  letter-spacing:0;
  word-break:normal;
  overflow-wrap:anywhere;
}
.fp-post-body:dir(rtl), .fp-post-text:dir(rtl) { font-size:16px !important; }
.fp-post-title:dir(rtl) { font-size:17px !important; }
.friende-viewer-caption-text:dir(rtl), .fpr-caption:dir(rtl) { font-size:15px !important; }
.fp-repost-text:dir(rtl), .fp-comment-text:dir(rtl), .friende-comment-text:dir(rtl) { font-size:15px !important; }

/* Post composer: what you type looks like what will be published. */
.fp-composer-textarea:dir(rtl) {
  font-family:var(--fp-urdu-font, 'Nafees Web Naskh', system-ui, sans-serif) !important;
  line-height:var(--fp-urdu-lh, 1.8) !important;
}

/* Fallback for browsers without :dir() (Chrome < 120, old Android WebView):
   an unknown pseudo-class would invalidate the whole rule above, so this is a
   separate block. fp-universal-text.js sets data-fp-rtl only on those browsers. */
.fp-post-body[data-fp-rtl="1"],
.fp-post-text[data-fp-rtl="1"],
.fp-post-title[data-fp-rtl="1"],
.fp-repost-text[data-fp-rtl="1"],
.fp-comment-text[data-fp-rtl="1"],
.friende-viewer-caption-text[data-fp-rtl="1"],
.friende-status-richtext[data-fp-rtl="1"],
.fpr-caption[data-fp-rtl="1"],
.fpr-title[data-fp-rtl="1"],
.friende-comment-text[data-fp-rtl="1"] {
  font-family:var(--fp-urdu-font, 'Nafees Web Naskh', system-ui, sans-serif) !important;
  direction:rtl;
  text-align:right;
  --fp-lh:var(--fp-urdu-lh, 1.8);
  --fp-title-lh:var(--fp-urdu-lh, 1.8);
  line-height:var(--fp-lh) !important;
  font-weight:400;
  letter-spacing:0;
  word-break:normal;
  overflow-wrap:anywhere;
}
.fp-post-body[data-fp-rtl="1"], .fp-post-text[data-fp-rtl="1"] { font-size:16px !important; }
.fp-post-title[data-fp-rtl="1"] { font-size:17px !important; }
.friende-viewer-caption-text[data-fp-rtl="1"], .fpr-caption[data-fp-rtl="1"] { font-size:15px !important; }
.fp-repost-text[data-fp-rtl="1"], .fp-comment-text[data-fp-rtl="1"], .friende-comment-text[data-fp-rtl="1"] { font-size:15px !important; }
.fp-composer-textarea[data-fp-rtl="1"] {
  font-family:var(--fp-urdu-font, 'Nafees Web Naskh', system-ui, sans-serif) !important;
  line-height:var(--fp-urdu-lh, 1.8) !important;
}

/* Never force every language into an Arabic font. Mixed-script content keeps
   unicode-bidi: plaintext so Urdu/Arabic and English/Hindi can coexist. */
.fp-post-body, .fp-post-text, .fp-repost-text, .fp-comment-text, .friende-viewer-caption-text, .fpr-caption, .fpr-title, .friende-comment-text {
  unicode-bidi:plaintext;
  text-align:start;
}

/* Feed posts: normal social typography, never bold/oversized just because the
   text is Urdu. (Lives here, not in the Status stylesheet, so it applies on the
   feed too.) */
.fp-post-body { max-width:100%; overflow-wrap:anywhere; }
.fp-post-body .fp-post-text { font-weight:400 !important; }
.fp-post-body .fp-see-more { font-weight:600 !important; font-size:13px !important; line-height:1.5 !important; white-space:nowrap; }
