/* Raging Salads — rs-rtl-pages.css: the language switch and the Arabic (right-to-left) layout of the static pages
   (Corporate Wellness, privacy, 404). Loaded after styles.css and rs-rtl.css; the shared Arabic rules live there. */

/* ===== Language switch (nav): an outline pill next to the nav's call to action ===== */
.rs-lang-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--olive); cursor: pointer;
  font-family: var(--display); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.rs-lang-pill:hover { border-color: var(--olive); background: var(--tint); }
.rs-lang-pill:lang(ar) { font-weight: 700; font-size: 17px; letter-spacing: 0; text-transform: none; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 400px) { .rs-lang-pill { padding: 8px 12px; } }

/* ===== Headings that carry both languages (word order differs): only the page's language shows ===== */
html:not([lang="ar"]) .rs-ar, html[lang="ar"] .rs-en { display: none; }

/* ===== Arabic type on these pages' own display styles ===== */
html[lang="ar"] body * { letter-spacing: 0 !important; }            /* spacing breaks Arabic letters apart */
html[lang="ar"] .lost h1.display, html[lang="ar"] .legal h1.display, html[lang="ar"] .legal h2,
html[lang="ar"] .corp-hero h1, html[lang="ar"] .corp-hero .script-inline, html[lang="ar"] .value-cell h3, html[lang="ar"] .step h3,
html[lang="ar"] .plan .pname, html[lang="ar"] .plan .pfrom, html[lang="ar"] .plan .pcta, html[lang="ar"] .seg button,
html[lang="ar"] .sample .s .nm, html[lang="ar"] .corp-stats .num, html[lang="ar"] .corp-cta h2,
html[lang="ar"] .corp-form button[type=submit], html[lang="ar"] .est-out .big, html[lang="ar"] .est-out .row2 .v,
html[lang="ar"] .est-field label b, html[lang="ar"] .foot-mail span, html[lang="ar"] .news p > span:first-child {
  font-weight: 800; font-synthesis: none;
}
html[lang="ar"] .lost h1.display { font-size: clamp(56px, 10vw, 150px); line-height: 1.15; }
html[lang="ar"] .legal h1.display { font-size: clamp(48px, 9vw, 120px); line-height: 1.15; }
html[lang="ar"] .legal h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.3; }
html[lang="ar"] .legal p, html[lang="ar"] .legal li { line-height: 1.85; }
/* Cairo's dots and tall letters need room: at 1.12 the dots under طعمي met الفريق on the next line */
html[lang="ar"] .corp-hero h1 { font-size: clamp(56px, 8vw, 140px); line-height: 1.32; }
html[lang="ar"] .corp-hero .script-inline { font-size: 28px; line-height: 1.4; }
html[lang="ar"] .value-cell h3 { font-size: 28px; line-height: 1.3; }
html[lang="ar"] .step h3 { font-size: 30px; line-height: 1.3; }
html[lang="ar"] .plan .pname { font-size: 36px; line-height: 1.2; }
html[lang="ar"] .sample .s .nm { font-size: 20px; line-height: 1.35; }
html[lang="ar"] .corp-cta h2 { font-size: clamp(44px, 7vw, 110px); line-height: 1.15; }
html[lang="ar"] .corp-stats .num { line-height: 1.15; }
html[lang="ar"] .plan .pfrom { font-size: 22px; }
html[lang="ar"] .corp-form .fld label, html[lang="ar"] .est-field label, html[lang="ar"] .est-field .est-lbl,
html[lang="ar"] .corp-form .fine, html[lang="ar"] .corp-form .est-attach, html[lang="ar"] .est-note,
html[lang="ar"] .est-out .row2 .k, html[lang="ar"] .corp-stats .lbl, html[lang="ar"] .step .tick, html[lang="ar"] .plan .ptag,
html[lang="ar"] .sample .s .tg, html[lang="ar"] .legal .updated { font-size: 13px; line-height: 1.7; }
@media (max-width: 1100px) and (min-width: 901px) { html[lang="ar"] .plan .pname { min-height: 2.4em; } }

/* ===== Mirrored layout ===== */
html[dir="rtl"] .lost-mark { right: auto; left: -0.04em; }
html[dir="rtl"] .legal ul { padding-left: 0; padding-right: 1.25em; }
html[dir="rtl"] .corp-hero-visual .tape { left: auto; right: -10px; transform: rotate(3deg); }
html[dir="rtl"] .corp-form { text-align: right; }
html[dir="rtl"] .corp-form .ok::before { margin-right: 0; margin-left: 10px; }
/* the honeypot sits off screen on the end side: off the start side it would widen an RTL page */
html[dir="rtl"] .corp-form .hp { left: auto; right: -10000px; }
html[dir="rtl"] .plan li::before { content: "↲"; content: "↲" / ""; }
/* typed phone numbers and emails read left to right (the Arabic placeholder stays right to left) */
html[dir="rtl"] .corp-form input[type="tel"]:not(:placeholder-shown), html[dir="rtl"] .corp-form input[type="email"] { direction: ltr; text-align: right; }