/* Urdu pages (/ur/), loaded after styles.css: Nastaliq type, roomier lines, and the few pieces that keep
   a left-to-right layout. Everything else flips by itself through dir="rtl" and the logical properties
   (margin-inline-start, text-align: start, ...) in styles.css. */
:root {
  --font-ur: "Noto Nastaliq Urdu", serif;
  /* Latin letters and numbers (Rs 350, 12:30) stay in the site's fonts; Urdu falls through to Nastaliq. */
  --font-body: "Manrope", var(--font-ur);
  --font-display: var(--font-ur);
  --font-price: "Oswald", var(--font-ur);
}

/* Spacing between letters breaks the joins in Urdu script. */
html[lang="ur"] * { letter-spacing: normal !important; }

/* Nastaliq letters rise high (ک، ٹ، ل) and drop low (ے، ی، ں), so lines need about 2.3x the font size
   between them or a tall letter runs into the tail of the line above. Headings too, and they wrap into
   even lines rather than leaving one word alone. */
body { font-size: 17px; line-height: 2.3; }
html[lang="ur"] :is(h1, h2, h3, legend) { font-weight: 700; line-height: 2.3; text-wrap: balance; }
.lead { font-size: 19px; line-height: 2.4; }
.eyebrow { font-size: 15px; font-weight: 700; }
.btn { padding-bottom: 4px; line-height: 1.9; }
.price,
.status { line-height: 1.8; }

/* prices never split from their "Rs" */
b[data-bowl-from],
b[data-soup-from],
b[data-family-from],
b[data-price] { white-space: nowrap; }

/* Typed text (names, addresses) may be English or Urdu: each line takes its own direction. */
input,
textarea { unicode-bidi: plaintext; }

/* ---------- homepage ---------- */

/* the plates now sit on the left, so the glow behind them moves too */
.hero {
  background:
    radial-gradient(55% 60% at 25% 45%, rgb(200 155 106 / 0.22), transparent 70%),
    radial-gradient(40% 40% at 90% 90%, rgb(179 22 27 / 0.18), transparent 70%),
    var(--lattice),
    var(--dark);
}
.price-tag { font-size: 15px; line-height: 2.2; }
.price-tag b { line-height: 1.3; }

.section-intro h2,
.faq-intro h2,
.reviews-head h2,
.review-cta h2,
.visit-card h2,
.bowl-banner h2 { font-size: clamp(28px, 3.6vw, 42px); }
/* These headings are painted with background-clip: text (the scroll "ink fill"), which only paints inside
   the heading's box. Nastaliq letters reach above and below it, so give the box room without moving anything. */
.section-intro h2,
.faq-intro h2,
.reviews-head h2,
.review-cta h2 { padding-block: 0.5em; margin-block: -0.5em; }
.promo h2 { font-size: clamp(28px, 3.8vw, 44px); }
.faq-list summary { line-height: 2.3; }
.footer-slogan { line-height: 2; }
.site-footer h3 { font-size: 15px; }

/* The moving strip, the promo and review sliders and the category banners keep their left-to-right mechanics
   (scroll positions, photo panel on the left); only their text reads right to left. */
.marquee-track,
.promo-track,
.review-track,
.slider-controls,
.cat-banner { direction: ltr; }
.marquee span { font-family: var(--font-ur); font-weight: 700; line-height: 1.8; }
.promo-text,
.cat-text { direction: rtl; }

/* Paragraphs whose words stack especially high (کچھ، کچن) get a little more room between lines */
.promo-text > p:not(.promo-kicker) { line-height: 2.5; }
.feature p { line-height: 2.5; }
.steps small { margin-top: 6px; line-height: 2.3; }
[data-info="address"] { line-height: 2.8; } /* اسلام آباد منی ایکس چینج climbs high */

/* "Visit us" card: a little tighter, so it and the map beside it stay compact */
.visit-card h2 { line-height: 2; }
.visit-list { gap: 8px; }
.visit-list dt { line-height: 1.7; }
.visit-list dd { margin-top: 0; }

/* Google rating sits under the reviews heading, on the right with it (not across on the left) */
.reviews-head { flex-direction: column; align-items: flex-start; gap: 26px; }

/* the checkout's back arrow points the reading way too */
.sheet-back svg { transform: scaleX(-1); }

/* "Details" arrow points the reading way */
.link-arrow::after { content: " ←"; }

/* SEO text preview: stop on a whole line (Urdu lines are taller). Each line is 2.6em and the gap between
   paragraphs is one line, so 10.4em (four lines) always ends between lines. */
.seo-text { font-size: 15px; }
.seo-text p { margin-bottom: 2.6em; line-height: 2.6; }
.js .seo-text.is-clamped { max-height: 10.4em; }

/* ---------- menu page ---------- */

.page-hero h1 { font-size: clamp(36px, 5.5vw, 52px); }
.cat-text h2 { font-size: clamp(26px, 5vw, 46px); line-height: 2.2; }
.cat-text h2::after { margin-top: 0; }
.cat-text p { font-size: 13px; font-weight: 700; }
@media (min-width: 760px) { .cat-text p { font-size: 15px; } }

/* Two-line previews cut at the box edge: Urdu lines need the extra height or the letters get clipped */
.product .desc,
.reorder-text p { line-height: 2.4; }
/* Long dish names wrap on phones; names like ڈمپلنگز stack high */
html[lang="ur"] .product h3 { line-height: 2.6; }
/* Bowl base and dish-group cards: narrow on phones, so a slightly smaller name with room between lines */
.bowl-group b { font-size: 15px; line-height: 2.2; }
.dish span { line-height: 2.4; } /* bowl dish names beside their photos */