/* ==========================================================================
   urdu.css — Urdu (RTL) support for the Team Overc's blog
   ==========================================================================

   WHAT THIS IS
   ------------
   A reusable, self-contained stylesheet that activates Urdu/RTL rendering
   for any page that opts in. It does nothing at all unless a page's <html>
   tag carries lang="ur" and/or dir="rtl" — so linking it from an English
   page is a safe no-op, and none of the 78 existing English blog pages
   need to change.

   HOW TO USE IT (for the next job — Urdu post migration)
   --------------------------------------------------------
   1. On the Urdu post page itself, set:
        <html lang="ur" dir="rtl">
      (both attributes — dir="rtl" drives the CSS below, lang="ur" is for
      screen readers / browser language detection / the font-matching
      unicode-range some browsers use).

   2. Link this file from the page's <head>, in ADDITION to the page's own
      existing inline <style> block (do not remove or replace that block —
      this file only overrides the handful of properties that break in
      RTL; everything else — colours, spacing, layout structure — is
      inherited unchanged from the per-page inline styles, exactly like
      every English post already has). Because Urdu posts live in the SAME
      /blog/ directory as English posts (see NOTES-urdu-slug-convention.md),
      the path is one level up, same as every other shared asset:
        <link rel="stylesheet" href="../urdu.css">
      (If ever linked directly from blogs.html itself — e.g. to preview a
      title in-grid — the path is simply "urdu.css", no "../".)

   3. Nothing else. The rules below key off html[dir="rtl"] / html[lang="ur"]
      and require no additional markup changes to the existing template.

   MIXED-LANGUAGE DIRECTORY (blogs.html) — a DIFFERENT, narrower case
   --------------------------------------------------------------------
   blogs.html itself lists English and Urdu posts side by side and stays
   lang="en" dir="ltr" as a whole (a directory page mixing two languages
   should not flip its entire chrome to RTL just because some of its
   entries are Urdu — same convention as Wikipedia's own language-picker
   pages). Individual Urdu CARDS inside that LTR grid are still styled
   correctly — see the `.blog-card[data-lang="ur"]` rules near the bottom,
   which apply Urdu font/direction/alignment to just that card's own title
   and excerpt text, without touching the surrounding LTR grid layout.

   SCOPE / AUDIT NOTE
   -------------------
   This file was written against the shared inline <style> block used by
   every currently-migrated blog page (verified live against
   blog/best-real-estate-company-2025.html, the most recently migrated
   post as of 2026-09-16) — same CSS custom properties (--bg/--fg/--accent
   etc.), same class names (header/nav, .mobile-nav-overlay, .post-hero/
   .post-body/.post-cover, .blog-grid/.blog-card, footer/.foot-col,
   .cta-section). Every hardcoded left/right, float, or asymmetric margin/
   padding/border found in that template has a corresponding override
   below. If a future template redesign changes those class names or
   introduces new hardcoded-direction rules, re-audit this file against
   the new template before relying on it.
   ========================================================================== */

/* ---- Urdu font stack ---------------------------------------------------
   Noto Nastaliq Urdu is the modern web-safe choice for the traditional
   Nastaliq calligraphic style most Pakistani readers expect for Urdu body
   text. Noto Naskh Arabic is kept as a straighter-letterform fallback
   (renders faster / more compactly, useful for short UI labels like the
   EN/UR toggle). "Jameel Noori Nastaleeq" is listed first as an optional
   local-install preference in case a reader has it installed, but the
   page must not depend on it — Noto Nastaliq Urdu (loaded below via
   Google Fonts) is the real, always-available default.
   FLAG FOR EMPLOYER REVIEW: this exact font choice has NOT been shown to
   the employer for approval yet — treat it as this job's best-practice
   default, not a final sign-off. Swap the two font-family lines below if
   a different Urdu font is preferred later; nothing else in this file
   needs to change.
   -------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400..700&family=Noto+Naskh+Arabic:wght@400..700&display=swap');

:root{
  --urdu-font: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Noto Naskh Urdu", Tahoma, sans-serif;
}

/* ---- Page-level flip ---------------------------------------------------- */
html[dir="rtl"], html[lang="ur"]{
  direction: rtl;
}
html[dir="rtl"] body, html[lang="ur"] body{
  direction: rtl;
  font-family: var(--urdu-font);
}

/* Nastaliq needs real breathing room and reads worse hyphenated/justified
   (justify+hyphens is a Latin-typography convention with no equivalent in
   Nastaliq's calligraphic joining rules) — undo both, right-align instead. */
html[dir="rtl"] .post-body p,
html[dir="rtl"] .post-stinger,
html[dir="rtl"] .post-body li{
  line-height: 2.15;
  text-align: right;
  text-justify: auto;
  hyphens: none;
}
html[dir="rtl"] .post-body h3,
html[dir="rtl"] .post-body h4,
html[dir="rtl"] .post-title,
html[dir="rtl"] .post-meta,
html[dir="rtl"] .bexcerpt,
html[dir="rtl"] .btitle{
  text-align: right;
}

/* Nastaliq is a cursive, diagonally-stacking script: negative/tight
   letter-spacing (a Latin convention, used everywhere in the base LTR
   template for tracked-out headings) breaks the joins between letters
   and visually collides adjacent words, and line-height under ~1.6
   gives the diagonal stacking nowhere to go — this is the exact bug
   that made "بیسمنٹ" and "کے لیے" run together in the post title.
   Reset both wherever Urdu text renders. */
html[dir="rtl"] .post-title{
  line-height: 1.9;
  letter-spacing: normal;
}
html[dir="rtl"] .post-body h3,
html[dir="rtl"] .post-body h4,
html[dir="rtl"] .cta-title{
  line-height: 1.6;
  letter-spacing: normal;
}
html[dir="rtl"] .logo,
html[dir="rtl"] nav ul,
html[dir="rtl"] .mnav-label,
html[dir="rtl"] .mobile-nav-overlay nav a,
html[dir="rtl"] .mobile-nav-overlay nav a .mnav-index,
html[dir="rtl"] .mnav-foot,
html[dir="rtl"] .section-label,
html[dir="rtl"] .post-back,
html[dir="rtl"] .post-cat-chip,
html[dir="rtl"] .post-meta,
html[dir="rtl"] .magnetic-btn,
html[dir="rtl"] footer .foot-col h4,
html[dir="rtl"] .foot-bottom,
html[dir="rtl"] .post-body table th{
  letter-spacing: normal;
}
.blog-card[data-lang="ur"] .btitle,
.blog-card[data-lang="ur"] .bexcerpt{
  line-height: 1.7;
  letter-spacing: normal;
}

/* ---- Header / desktop nav ------------------------------------------------
   header is a flex row (justify-content:space-between); dir:rtl on a
   flex container already mirrors its row order and inline alignment
   automatically, so the logo/nav/CTA swap sides with zero extra CSS. The
   only thing to fix is the mobile-nav-overlay's own internal left/right
   absolute-positioned bits, below. */

/* ---- Mobile nav overlay --------------------------------------------------
   Both ::after underline positions and .mnav-foot are already symmetric
   (left:X; right:X on the same rule), so they mirror correctly for free.
   Only the underline's transform-origin and the close button's fixed
   `right:5vw` placement need flipping so the animation direction and the
   close button's corner match reading direction. */
html[dir="rtl"] .mobile-nav-overlay nav a::after{
  transform-origin: right;
}
html[dir="rtl"] .mobile-nav-close{
  right: auto;
  left: 5vw;
}

/* ---- Post hero / back link ------------------------------------------------
   The "← Back to Blogs" arrow is a "→" glyph rotated 180deg to point left
   (correct for LTR, where "back" = leftward). In RTL, forward reading
   flows right-to-left, so "back" should point right — undo the rotation
   instead of doubling it. */
html[dir="rtl"] .post-back .arrow{
  transform: rotate(0deg);
}
html[dir="rtl"] .post-back:hover .arrow{
  transform: translateX(-6px);
}

/* ---- Post body: lists, blockquote-style note, calc blocks ---------------- */
html[dir="rtl"] .post-body ul,
html[dir="rtl"] .post-body ol{
  margin: 0 22px 30px 0; /* was 0 0 30px 22px (left-indented) */
}
html[dir="rtl"] .post-body li{
  padding-left: 0;
  padding-right: 6px; /* was padding-left:6px */
}
html[dir="rtl"] .post-update-note{
  border-left: none;
  border-right: 2px solid var(--accent); /* was border-left */
  border-radius: 8px 0 0 8px; /* was 0 8px 8px 0 — mirror the rounded corner */
}
html[dir="rtl"] .post-body .calc-block{
  padding-left: 0;
  padding-right: 2px; /* was padding-left:2px */
}

/* ---- Post body: tables ----------------------------------------------------
   th defaults to text-align:left, and the LAST column (usually a totals/
   amount column) is forced text-align:right regardless — both need to
   mirror so the "first column = label, last column = number" convention
   still reads correctly right-to-left. */
html[dir="rtl"] .post-body table th{
  text-align: right;
}
html[dir="rtl"] .post-body table td:last-child,
html[dir="rtl"] .post-body table th:last-child{
  text-align: left;
}

/* ---- blogs.html grid card badge -------------------------------------------
   Only relevant if blogs.html itself is ever rendered dir="rtl" (it isn't,
   by design — see note above) OR if a future Urdu-only listing page reuses
   this same .blog-card markup as a full RTL page. Kept here so the rule
   exists once, centrally, rather than needing re-discovery later. */
html[dir="rtl"] .blog-card .bcat{
  left: auto;
  right: 16px;
}

/* ---- Footer (mobile breakpoint) -------------------------------------------
   The @680px footer rules force text-align:left and margin-left:0 on the
   logo explicitly (rather than inheriting), so they must be overridden
   explicitly too. */
@media (max-width:680px){
  html[dir="rtl"] footer,
  html[dir="rtl"] footer .foot-col:first-child,
  html[dir="rtl"] .foot-bottom{
    text-align: right;
  }
  html[dir="rtl"] footer .foot-col:first-child img{
    margin-left: auto;
    margin-right: 0;
  }
}

/* ==========================================================================
   MIXED-LANGUAGE DIRECTORY SUPPORT — for blogs.html (which stays LTR)
   ==========================================================================
   Applies Urdu font/alignment to an individual Urdu card's own text inside
   the otherwise-LTR grid, once real Urdu blog cards exist with
   data-lang="ur" on the <a class="blog-card"> element (see
   blogs.html's own toggle-filter script for how data-lang is used to
   show/hide cards; this block is purely visual and independent of that
   filtering logic).
   ========================================================================== */
.blog-card[data-lang="ur"] .btitle,
.blog-card[data-lang="ur"] .bexcerpt,
.blog-card[data-lang="ur"] .bcat{
  font-family: var(--urdu-font);
  direction: rtl;
  text-align: right;
}
.blog-card[data-lang="ur"] .bcat{
  right: auto;
  left: 16px; /* card badge moves to the card's other corner for an Urdu card sitting in an LTR grid */
}
