/* ===== Header language links (theme styles .langs button; we now emit <a>) ===== */
.langs{ display:flex; gap:10px; align-items:center; direction:ltr; flex-wrap:wrap; }
.langs a{
  background:none; border:0; color:var(--steel,#9aa0a6);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em;
  padding:6px 11px; cursor:pointer; border-radius:6px; transition:.2s;
  text-decoration:none; line-height:1; display:inline-block;
}
.langs a:hover{ color:var(--white,#fff); background:rgba(255,255,255,.06); }
.langs a.on{ color:var(--ink,#160a02); background:var(--molten,#ff5e1a); border:1px solid var(--molten,#ff5e1a); font-weight:700; box-shadow:0 0 0 2px rgba(255,94,26,.25); }
@media(max-width:600px){ .langs{ gap:8px; } .langs a{ padding:5px 9px; font-size:10px; } }

/* ============ RTL (Arabic) ============
   The theme locks .bmb-root to direction:ltr — override it so the whole
   layout (header, flex rows, grids) mirrors properly for Arabic. */
[dir="rtl"] .bmb-root{ direction:rtl; text-align:right; }
[dir="rtl"] body{ text-align:right; }

/* Mixed Arabic + Latin/technical text: let each element pick its own base
   direction from its first strong character. Keeps "58-63 HRC", "Ø 20-40 mm",
   "Mn18Cr2" and e-mail/phone readable instead of visually reordered. */
/* Block prose stays RTL even when it starts with a Latin word (e.g. "BMB ...", "Mn13 ...").
   plaintext was flipping whole Arabic paragraphs to the left — removed for prose. */
[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] blockquote,
[dir="rtl"] .lead,[dir="rtl"] .intro,[dir="rtl"] .mb-lede,[dir="rtl"] .mb-prose,
[dir="rtl"] .rfq-body,[dir="rtl"] .ct{
  direction:rtl; text-align:right;
}
/* Headings & short labels: right-aligned (never justified) */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6,
[dir="rtl"] .kicker,[dir="rtl"] .sh,[dir="rtl"] .mb-h2,[dir="rtl"] .mb-eyebrow,
[dir="rtl"] .hero-tagline,[dir="rtl"] .hero h1,[dir="rtl"] .ck,[dir="rtl"] label{
  direction:rtl; text-align:right;
}
/* Layout blocks mirror; standalone numeric/technical bits keep their own base direction */
[dir="rtl"] .mb-split,[dir="rtl"] .bm-split,[dir="rtl"] .hero-grid,
[dir="rtl"] .mb-callout,[dir="rtl"] .hero-stats{ direction:rtl; }
[dir="rtl"] .n,[dir="rtl"] .l,[dir="rtl"] figcaption,[dir="rtl"] .cap,
[dir="rtl"] .mb-fact,[dir="rtl"] .chip,[dir="rtl"] .badge,[dir="rtl"] .stat{
  unicode-bidi:plaintext;
}
/* Tables: keep the header/column order mirrored but cells self-directed */
[dir="rtl"] table{ direction:rtl; }
[dir="rtl"] td,[dir="rtl"] th{ text-align:right; }

/* Forms */
[dir="rtl"] input,[dir="rtl"] textarea{ text-align:right; direction:rtl; }
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"]{ direction:ltr; text-align:right; }

/* Keep artwork, code-ish chips and contact lines in LTR so glyph order is right */
[dir="rtl"] svg,[dir="rtl"] .bmb-anim,[dir="rtl"] pre,[dir="rtl"] code{ direction:ltr; }
[dir="rtl"] .util,[dir="rtl"] .util *{ direction:ltr; }

/* RFQ / vertical buttons keep their own orientation */
[dir="rtl"] .rfq-tab,[dir="rtl"] .rfq-side{ direction:ltr; }


/* ===== Justified body copy (site-wide) ===== */
.bmb-root p.lead,.bmb-root .mb-lede,.bmb-root .mb-prose,.bmb-root .intro,.bmb-root .rfq-body,.bmb-root .ct{
  text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto;
}
[dir="rtl"] .bmb-root p.lead,[dir="rtl"] .bmb-root .mb-lede,[dir="rtl"] .bmb-root .mb-prose,
[dir="rtl"] .bmb-root .intro{ text-align:justify; hyphens:auto; }

/* ============================================================
   Session fixes: justify text, switcher spacing/active box, RTL
   ============================================================ */

/* --- Task 2: justify body copy (low-specificity :where so labels,
   mono, centered text keep their own alignment) --- */
.bmb-root :where(p, p.lead, .lead, .prose p, .rich p, .copy p){
  text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto;
}

/* --- Task 3: language keys — more spacing + clear active orange box --- */
.langs{ gap:10px !important; flex-wrap:wrap; }
.langs a, .langs button{
  padding:6px 12px; border:1px solid transparent; border-radius:6px; line-height:1;
}
.langs a.on, .langs button.on{
  color:var(--ink,#160a02) !important;
  background:var(--molten,#ff5e1a) !important;
  border-color:var(--molten,#ff5e1a) !important;
  font-weight:700;
}
@media(max-width:600px){ .langs{ gap:7px !important; } .langs a, .langs button{ padding:5px 9px; } }

/* --- Task 5: Arabic RTL — right-align content that was leaking left --- */
[dir="rtl"] .bmb-root{ direction:rtl; }
[dir="rtl"] .bmb-root :where(h1,h2,h3,h4,h5,p,li,dd,dt,blockquote,figcaption,.kicker,.lead,.eyebrow,.sec-head,.card,.feature,.faq,.spec){
  text-align:right;
}
[dir="rtl"] .bmb-root :where(ul,ol){ padding-right:1.15em; padding-left:0; }
[dir="rtl"] .bmb-root :where(.util-left,.util-right){ text-align:right; }
/* keep genuinely centered blocks centered even in RTL */
[dir="rtl"] .bmb-root :where(.mini,.rfq-done,.center,[style*="text-align:center"]){ text-align:center; }
/* mixed Latin+Arabic technical strings (e.g. "45–65 HRC", "Ø 20–40 mm") read correctly */
[dir="rtl"] .bmb-root :where(td,th,.spec,.n,.bm-table td,.bm-table th){ unicode-bidi:plaintext; }
/* the little orange kicker dash sits on the right in RTL */
[dir="rtl"] .kicker{ flex-direction:row-reverse; }