/* ==========================================================================
   Parak Mahan Chemi — Demo 3 · LTR (English) adjustments
   Load LAST on en/ pages:  style.css → pages.css → pages-b|c.css → ltr.css
   The design is authored RTL with logical properties; this file only fixes
   what logical properties cannot: glyph direction, physical gradients/masks,
   RTL-tuned typography and a few RTL-specific compositions.
   All selectors are scoped to [dir="ltr"] so the file is inert on fa/ar pages.
   ========================================================================== */

/* ---------- 1. Typography for Latin text ---------- */
/* fa/ar use Estedad; English uses Inter. */
html[dir="ltr"] { --font: "Inter", system-ui, "Segoe UI", Tahoma, sans-serif; }
[dir="ltr"] body {
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: 0;
}
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4 { letter-spacing: -.01em; line-height: 1.25; }
[dir="ltr"] .hero h1 { line-height: 1.12; letter-spacing: -.025em; }
[dir="ltr"] .h2, [dir="ltr"] .page-hero__title, [dir="ltr"] .pdp__title { line-height: 1.18; letter-spacing: -.02em; }
[dir="ltr"] .hero__sub, [dir="ltr"] .lead, [dir="ltr"] .page-hero__lead, [dir="ltr"] .pdp__lead,
[dir="ltr"] .footer__about, [dir="ltr"] .accordion__body, [dir="ltr"] .feature p, [dir="ltr"] .industry p,
[dir="ltr"] .step p, [dir="ltr"] .guide__step > p, [dir="ltr"] .product__desc, [dir="ltr"] .article p,
[dir="ltr"] .app-card__body > span, [dir="ltr"] .pack-card__body p, [dir="ltr"] .dl-intro p { line-height: 1.65; }
[dir="ltr"] .prose { line-height: 1.75; }
[dir="ltr"] .prose h2, [dir="ltr"] .prose h3 { line-height: 1.3; }
[dir="ltr"] .eyebrow { letter-spacing: .02em; }
/* the latin tag duplicates the label in English */
[dir="ltr"] .eyebrow__latin { display: none; }
[dir="ltr"] .nav__link { font-size: .9063rem; }
[dir="ltr"] .btn { letter-spacing: .005em; }
[dir="ltr"] .stat__v small, [dir="ltr"] .spec__v small { letter-spacing: 0; }
[dir="ltr"] .hero h1 .accent::after { inset-block-end: .02em; }

/* ---------- 2. Forward arrows (sprite #i-arrow points left = forward in RTL) ---------- */
[dir="ltr"] svg.i-arrow,
[dir="ltr"] .link-arrow svg,
[dir="ltr"] .app-card__more svg,
[dir="ltr"] .article__foot svg,
[dir="ltr"] .pagination__next svg,
[dir="ltr"] svg:has(> use[href="#i-arrow"]) { transform: scaleX(-1); }
[dir="ltr"] .btn:hover svg.i-arrow,
[dir="ltr"] .link-arrow:hover svg,
[dir="ltr"] .app-card:hover .app-card__more svg { transform: scaleX(-1) translateX(-4px); }
/* "back" arrows: pagination prev keeps the natural (left-pointing) glyph */
[dir="ltr"] .pagination__prev svg,
[dir="ltr"] .pagination__prev svg:has(> use[href="#i-arrow"]) { transform: none; }

/* ---------- 3. Chevrons (sprite #i-chevron points left) ---------- */
[dir="ltr"] .lightbox__nav--prev svg { transform: none; }
[dir="ltr"] .lightbox__nav--next svg,
[dir="ltr"] .chevron-forward { transform: scaleX(-1); }
/* breadcrumb separator: "›" already points right in LTR (glyph mirroring only happens in RTL) */
[dir="ltr"] .breadcrumb li + li::before { content: "›"; }

/* ---------- 4. Latin-only fragments that were end-aligned for RTL ---------- */
[dir="ltr"] .logo__en,
[dir="ltr"] .spec__k,
[dir="ltr"] .meta dd.ltr-val,
[dir="ltr"] .param__f,
[dir="ltr"] .coa-doc__sub,
[dir="ltr"] .coa-doc__row .f,
[dir="ltr"] .cert b,
[dir="ltr"] .quote__contact b,
[dir="ltr"] .pdp__latin,
[dir="ltr"] .field input[type="tel"] { text-align: start; }
[dir="ltr"] .field input[type="tel"]::placeholder { direction: ltr; }
[dir="ltr"] .logo__en { letter-spacing: .22em; }

/* ---------- 5. Form controls ---------- */
[dir="ltr"] .field select { background-position: right 14px center; }
[dir="ltr"] .qform .qform__legend { float: left; float: inline-start; }

/* ---------- 6. Physical gradients / masks authored for RTL (mirror them) ---------- */
[dir="ltr"] .hero::before {
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 75%);
}
[dir="ltr"] .page-hero::before {
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 30% 30%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 90% at 30% 30%, #000 25%, transparent 80%);
}
[dir="ltr"] .quote::before {
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 70%); mask-image: linear-gradient(270deg, #000, transparent 70%);
}
[dir="ltr"] .cta-band::before {
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 75%); mask-image: linear-gradient(270deg, #000, transparent 75%);
}
[dir="ltr"] .hero h1 .accent::after { background: linear-gradient(270deg, var(--orange), rgba(255, 107, 44, .35)); }
[dir="ltr"] .coa__bar span { background: linear-gradient(90deg, var(--cobalt), var(--cobalt-300)); }
[dir="ltr"] .coa-doc::after { background: linear-gradient(270deg, var(--cobalt) 0 70%, var(--orange) 70% 100%); }
[dir="ltr"] .mini-coa::before { background: linear-gradient(270deg, var(--cobalt) 0 70%, var(--orange) 70%); }
[dir="ltr"] .article h3 a { background-position: 0 100%; }

/* ---------- 7. Motion that implies reading direction ---------- */
/* process rail dashes flow toward the next step (left → right) */
@keyframes track-ltr { to { background-position: 24px 0, 0 0; } }
@media (min-width: 1000px) {
  [dir="ltr"] .step__track::before { animation-name: track-ltr; }
}

/* ---------- 8. RTL-specific compositions ---------- */
/* hero: the SVG art is not mirrored (its labels are Latin), so keep the floating
   cards on the same physical side where the art leaves free space (left). */
[dir="ltr"] .hero-art__card--coa { inset-inline-end: auto; inset-inline-start: 0; }
[dir="ltr"] .hero-art__card--ship { inset-inline-end: auto; inset-inline-start: 0; }
/* export map: SVG labels are centered; nothing to mirror */

/* ---------- 9. Numbers / tabular data ---------- */
[dir="ltr"] .stat__v, [dir="ltr"] .spec__v, [dir="ltr"] .analysis .num, [dir="ltr"] .keyspecs dd,
[dir="ltr"] .product__purity, [dir="ltr"] .coa__big { font-variant-numeric: tabular-nums; }