/* ==========================================================================
   Smart Solutions — Urdu layer
   Loaded ONLY by the Urdu build, after style.css. Nothing in here can affect
   the English pages, which is the whole point: style.css stays the single
   design system and this file adapts it for Nastaliq and RTL.

   Two jobs:
     1. Typography — Nastaliq needs far more leading than Latin, and the design
        system's negative letter-spacing actively breaks Arabic letter joining.
     2. Direction — `dir="rtl"` on <html> flips text and flex/grid flow for
        free. What it does NOT flip is physical CSS (left/right, padding-left,
        one-sided gradients), so those are corrected here one by one.
   ========================================================================== */

:root {
  /* Nastaliq first, Inter behind it. Per-character fallback means Latin runs
     inside an Urdu sentence — BMS, kW, LiFePO4, CCTV — pick up Inter without
     needing a wrapper element in the content. */
  --urdu-body: 'Noto Nastaliq Urdu', 'Inter', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Typography
   Nastaliq's baseline slopes and its descenders drop a long way below it, so
   every Urdu block needs generous line-height and a little breathing room at
   the bottom or the tails clip against the next element.
   -------------------------------------------------------------------------- */
body.lang-ur {
  font-family: var(--urdu-body);
  line-height: 2.15;
}

body.lang-ur h1,
body.lang-ur h2,
body.lang-ur h3,
body.lang-ur h4 {
  font-family: var(--urdu-body);
  /* Negative tracking pulls Nastaliq's joined forms into each other. */
  letter-spacing: 0;
  font-weight: 600;
  line-height: 1.8;
  padding-bottom: .12em;
}
body.lang-ur h1 { font-size: clamp(28px, 7.2vw, 52px); font-weight: 600; line-height: 1.75; }
body.lang-ur h2 { font-size: clamp(23px, 5.4vw, 36px); font-weight: 600; }
body.lang-ur h3 { font-size: clamp(18px, 4.2vw, 22px); }
body.lang-ur h4 { font-size: 16.5px; line-height: 1.95; }

body.lang-ur p,
body.lang-ur li,
body.lang-ur dd,
body.lang-ur dt,
body.lang-ur blockquote,
body.lang-ur figcaption {
  line-height: 2.2;
}
body.lang-ur .lede { font-size: 16px; line-height: 2.3; }
body.lang-ur .sec-head p { line-height: 2.25; }

/* The eyebrow/kicker is set in uppercase Latin with wide tracking. Neither
   applies to Nastaliq — uppercase is a no-op and tracking breaks joins. */
body.lang-ur .kicker {
  font-family: var(--urdu-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  line-height: 1.9;
  padding-block: 3px 7px;
}

/* Buttons: Nastaliq needs the extra bottom padding, and the label must not
   wrap mid-word in a pill. */
body.lang-ur .btn {
  font-family: var(--urdu-body);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.9;
  padding: 11px 26px 15px;
}
body.lang-ur .btn-lg { padding: 14px 32px 18px; }
body.lang-ur .nav-actions .btn { padding: 8px 18px 12px; }

/* Anything explicitly marked as English keeps the Latin design system. Used
   for numerals, product names and the nav, which read better untouched. */
body.lang-ur .en,
body.lang-ur [lang="en"] { font-family: var(--sans); letter-spacing: normal; }

/* Components the design system pins to a Latin face. Several of those
   selectors outrank a plain class — `.hero .hero-title` is (0,2,0) and was
   beating `.hero-title-ur` (0,1,0) — so every one is restated here with
   enough specificity to actually win. Without this the text silently falls
   back to whatever Arabic face the OS provides, which is a Naskh, not
   Nastaliq, and the whole point of the Urdu build is lost. */
body.lang-ur .hero .hero-title,
body.lang-ur .hero-eyebrow,
body.lang-ur .acc-btn,
body.lang-ur .link-arrow,
body.lang-ur .project-tag,
body.lang-ur .mnav-group > span,
body.lang-ur .mnav-group a,
body.lang-ur .mnav-contact a,
body.lang-ur .topbar a,
body.lang-ur .hp-head b,
body.lang-ur .form-label,
body.lang-ur .footer-bottom span,
body.lang-ur cite,
body.lang-ur .lc-promo-list li {
  font-family: var(--urdu-body);
  letter-spacing: 0;
}
/* `.project-tag` is a small uppercase pill; Nastaliq ignores the casing but
   still wants its tracking removed. */
body.lang-ur .project-tag { text-transform: none; font-size: 12px; line-height: 1.9; }

/* English-only furniture keeps the Latin stack. These carry numerals, product
   names or the nav — Nastaliq has no business rendering any of them. */
body.lang-ur .nav-links > li > a,
body.lang-ur .ls-item[lang="en"],
body.lang-ur .hero-tagline,
body.lang-ur .stat b,
body.lang-ur .step b.step-n,
body.lang-ur .card-num,
body.lang-ur .hero-phone,
/* Top-level drawer links are the English nav; the CTA buttons below them are
   Urdu, so they must not be swept up by this. */
body.lang-ur .mobile-nav > a:not(.btn),
body.lang-ur .av { font-family: var(--display); letter-spacing: -.02em; }

/* Phone numbers and email addresses are Latin data wherever they appear. */
body.lang-ur [data-tel],
body.lang-ur [data-mail],
body.lang-ur .footer-contact a { font-family: var(--sans); letter-spacing: normal; }

/* …but the one Urdu label inside the phone mockup stays Nastaliq. */
body.lang-ur .hero-phone .hp-head b { font-family: var(--urdu-body); letter-spacing: 0; }

/* --------------------------------------------------------------------------
   2. RTL corrections — physical properties dir="rtl" cannot flip
   -------------------------------------------------------------------------- */

/* The skip link is parked off-canvas with `left: -9999px`. In LTR that is
   harmless, but in RTL the inline axis runs the other way and the browser
   counts it as real scrollable width — the document became 11,350px wide and
   the whole page could be scrolled sideways into emptiness. A transform moves
   it out of view without contributing any scroll area at all. */
body.lang-ur .skip-link { left: auto; right: 0; transform: translateY(-250%); }
body.lang-ur .skip-link:focus { right: 0; left: auto; transform: none; }

/* Latin-only data in an RTL paragraph gets reordered by the bidi algorithm:
   "+92 300 1234567" was rendering as "1234567 300 92+". These runs are always
   left-to-right regardless of the surrounding text. */
body.lang-ur [data-tel],
body.lang-ur [data-mail],
body.lang-ur .ltr { direction: ltr; unicode-bidi: isolate; }

/* The nav keeps its English labels, which must not break across two lines
   when the language switcher tightens the header. */
body.lang-ur .nav-links > li > a { white-space: nowrap; }

/* Bulleted feature lists: the marker was pinned left with left padding. */
body.lang-ur .card-list li { padding-left: 0; padding-right: 26px; }
body.lang-ur .card-list li::before { left: auto; right: 0; }
body.lang-ur .card-list li::after { left: auto; right: 5px; }
body.lang-ur .card .card-list li { padding-right: 22px; }
body.lang-ur .card .card-list li::after { right: 4px; }

/* Watermark numeral on the service cards. */
body.lang-ur .card-num { right: auto; left: 22px; }

/* Tag pinned into the corner of a project image. */
body.lang-ur .project-tag-float { left: auto; right: 16px; }

/* Accordion rows and the footer strip both hard-set text-align: left. */
body.lang-ur .acc-btn { text-align: right; }
@media (min-width: 768px) {
  body.lang-ur .footer-bottom { text-align: right; }
}

/* The inline "learn more" arrow should travel toward the reading edge. */
body.lang-ur .link-arrow:hover svg { transform: translateX(-4px); }
/* Nastaliq's tail drops ~4px below the line box these two were sized for. */
body.lang-ur .link-arrow { line-height: 2.1; padding-bottom: 4px; }
body.lang-ur .hero-strip-item b { padding-bottom: 4px; }

/* Breadcrumb / list chevrons are drawn pointing right. */
body.lang-ur .crumbs svg,
body.lang-ur .mobile-nav > a svg,
body.lang-ur .mnav-group a svg { transform: scaleX(-1); }

/* The drawer slides in from the reading edge. */
body.lang-ur .mobile-nav { transform: translateX(-100%); }
body.lang-ur .mobile-nav.open { transform: none; }

/* --------------------------------------------------------------------------
   3. Hero
   The slide artwork is composed with the subject (house, phone) on the RIGHT
   and its dark wash on the LEFT — and for the banner slides that wash is baked
   into the pixels by prepare-hero.mjs. So the copy column must stay on the
   left in Urdu as well. Keep the hero grid LTR and run the copy RTL inside it:
   the text then right-aligns within a column that is still capped well clear
   of the photograph.
   -------------------------------------------------------------------------- */
body.lang-ur .hero-inner { direction: ltr; }
/* Everything in the copy column reads RTL and stacks against its right edge,
   which is the column's inner edge — furthest from the photograph. */
body.lang-ur .hero-copy { direction: rtl; text-align: right; }

/* The English keyword line stays Latin. It is a block with a max-width, so in
   an RTL column it needs an explicit left auto-margin to sit flush right —
   `margin-inline-start` resolves against the element's own LTR direction and
   pushed it the wrong way. */
body.lang-ur .hero-sub:not(.ur) {
  font-family: var(--sans);
  direction: ltr;
  text-align: right;
  letter-spacing: normal;
  line-height: 1.7;
  margin-left: auto;
  margin-right: 0;
}
body.lang-ur .hero-tagline { direction: ltr; text-align: right; }

/* Arrows are pinned to the container's right edge on desktop; mirror them. */
@media (min-width: 1024px) {
  body.lang-ur .hero-next {
    right: auto;
    left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  }
  body.lang-ur .hero-prev {
    right: auto;
    left: max(calc(var(--gutter) + 52px), calc((100% - var(--maxw)) / 2 + var(--gutter) + 52px));
  }
}
body.lang-ur .hero-arrow svg { transform: scaleX(-1); }

/* The phone mockup is a picture of an English app UI — keep it as designed. */
body.lang-ur .hero-phone { direction: ltr; text-align: left; }

/* Feature strip under the hero. */
body.lang-ur .hero-strip-item b {
  font-family: var(--urdu-body);
  letter-spacing: 0;
  line-height: 1.9;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. The Urdu accent devices
   On an English page a Nastaliq line is an accent, so `.ur-note` frames it in
   a tinted box. On an Urdu page the surrounding copy is already Nastaliq, so a
   box would just be noise — the punch line earns its emphasis from weight and
   colour instead.
   -------------------------------------------------------------------------- */
/* The punch line sits directly under the service title and carries the card:
   it is the line that says what the customer actually gets. It leads on size,
   weight and colour, with no rule above it — a border there would cut it off
   from the title it belongs to. */
body.lang-ur .ur-punch {
  display: block;
  font-family: var(--urdu-body);
  font-size: 16.5px;
  line-height: 2.05;
  font-weight: 600;
  color: var(--blue);
  margin-top: 9px;
}
/* The description follows as supporting detail — smaller, quieter, and
   separated by a hairline so the two Urdu blocks never read as one. */
body.lang-ur .card-desc {
  font-size: 13.6px;
  line-height: 2.05;
  color: var(--body);
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
body.lang-ur .section-navy .ur-punch { color: var(--blue-bright); }
body.lang-ur .section-navy .card-desc { border-top-color: rgba(255, 255, 255, .14); }

/* Where a note box does still appear on an Urdu page, it is already RTL —
   it only needs its leading rule on the correct side. */
body.lang-ur .ur-note {
  background: linear-gradient(270deg, var(--paper-2), rgba(233, 241, 251, 0));
  border-right: 3px solid var(--blue);
}

/* Customer quotes are long Nastaliq passages; they need the most leading. */
body.lang-ur .quote-ur p { line-height: 2.35; font-size: 15px; }
body.lang-ur .quote-ur footer { direction: rtl; }

/* --------------------------------------------------------------------------
   5. Calculator
   The load calculator stays English and left-to-right by design: it is a
   dense numeric tool whose whole layout (unit columns, sliders, the appliance
   table) was built LTR, and its labels are technical. Only the page chrome
   around it is Urdu. `dir="ltr"` on the tool restores every physical rule
   inside it in one move.
   -------------------------------------------------------------------------- */
body.lang-ur .lc { text-align: left; }
body.lang-ur .lc h1, body.lang-ur .lc h2, body.lang-ur .lc h3, body.lang-ur .lc h4 {
  font-family: var(--display); letter-spacing: -.02em; line-height: 1.2; padding-bottom: 0;
}
body.lang-ur .lc p, body.lang-ur .lc li, body.lang-ur .lc dd, body.lang-ur .lc dt {
  font-family: var(--sans); line-height: 1.7;
}
body.lang-ur .lc .btn { font-family: var(--display); line-height: 1.2; padding: 14px 24px; }
body.lang-ur .lc .kicker {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px; line-height: 1; padding-block: 0;
}
/* The Urdu accent lines inside the calculator keep Nastaliq. */
body.lang-ur .lc-edu-ur, body.lang-ur .lc-opt-ur,
body.lang-ur .lc .ur, body.lang-ur .lc .ur-note {
  font-family: var(--urdu-body); direction: rtl; text-align: right; line-height: 2.1;
}

/* --------------------------------------------------------------------------
   6. Spacing
   Nastaliq's taller line boxes make every stacked block read tighter than the
   Latin original, so a few gaps are reopened.
   -------------------------------------------------------------------------- */
body.lang-ur .sec-head { margin-bottom: 34px; }
body.lang-ur .card h3 { margin-bottom: 4px; }
body.lang-ur .feature h4 { margin-bottom: 2px; }
body.lang-ur .step h4 { margin-bottom: 4px; }
body.lang-ur .acc-btn { padding: 15px 20px 19px; line-height: 2; }
body.lang-ur .acc-panel-inner { line-height: 2.25; font-size: 14.5px; }
body.lang-ur .footer-col h4 { margin-bottom: 6px; }
body.lang-ur .cta-band h2 { line-height: 1.85; }

/* Nastaliq at small sizes on a phone is hard work; nudge it up. */
@media (max-width: 520px) {
  body.lang-ur { line-height: 2.1; }
  body.lang-ur p, body.lang-ur li { font-size: 15px; }
  body.lang-ur .lede { font-size: 15.5px; }
}