/* Arabic pages only (scripts/build-arabic.js adds this file; <html lang="ar" dir="rtl">).
   Flex and grid rows flip by themselves under dir="rtl"; this file fixes what doesn't:
   fonts with Arabic letters, spacing that breaks joined letters, line heights, and left/right placements. */

/* Latin text keeps Archivo; Arabic letters fall through to fonts that have them on every system. */
:root[lang="ar"] body,
:root[lang="ar"] button, :root[lang="ar"] input, :root[lang="ar"] select, :root[lang="ar"] textarea {
  font-family: "Archivo", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
}
/* Letter-spacing pulls joined Arabic letters apart, and Arabic has no capitals. */
:root[lang="ar"] body * { letter-spacing: 0 !important; text-transform: none !important; }
/* Arabic letters are taller and deeper than Latin: tight English line heights clip them. */
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3 { line-height: 1.3 !important; }
:root[lang="ar"] body { line-height: 1.7; }
/* Code, domains, keys and prompts stay left-to-right inside Arabic text. */
:root[lang="ar"] pre, :root[lang="ar"] code, :root[lang="ar"] .copybox pre, :root[lang="ar"] input[type="url"],
:root[lang="ar"] input[inputmode="url"], :root[lang="ar"] input[type="email"], :root[lang="ar"] .mono { direction: ltr; text-align: left; unicode-bidi: plaintext; }

/* ---------- landing film: the pictures are a mock English website, so they keep their own layout ---------- */
:root[lang="ar"] .film .vis { direction: ltr; }
:root[lang="ar"] .say { left: auto; right: 72px; text-align: right; }
:root[lang="ar"] .credit { right: auto; left: 72px; }
@media (max-width:760px), (max-width:1100px) and (orientation:portrait) and (min-height:501px) {
  :root[lang="ar"] .say { left: 16px; right: 16px; }
  :root[lang="ar"] .credit { left: 16px; right: auto; }
}
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait) and (min-height:501px) {
  :root[lang="ar"] .say { left: 40px; right: 40px; }
}
@media (max-height:500px) and (orientation:landscape) {
  :root[lang="ar"] .say { right: 16px; left: auto; }
}

/* Picture labels are Arabic now: each line takes its own direction, so full stops and colons land on the right side.
   Code, domains and anything marked translate="no" keep left-to-right. */
:root[lang="ar"] .film .vis :is(p, li, h3, h4, span, div, b, button, a, label):not(pre *, code *, [translate="no"], [translate="no"] *) { unicode-bidi: plaintext; }
/* The pricing cards are real content, not a mock picture: fully right-to-left (free check first, on the right). */
:root[lang="ar"] .film [data-s="prices"] .vis { direction: rtl; }
/* Desktop: Arabic captions sit on the right, so "It can happen to you" moves its picture to the left, and the
   longer Arabic hero line gets a slightly smaller size so it stays on 3 lines. */
@media (min-width:1101px), (min-width:761px) and (orientation:landscape) {
  :root[lang="ar"] .win--yours { left: 30px; }
  :root[lang="ar"] .say--hero h1 { font-size: clamp(46px, 4.6vw, 74px); }
  :root[lang="ar"] .say--hero { max-width: min(680px, 50vw); }
}
/* phone: the current chapter's name sits at the right end of the progress bar */
@media (max-width:760px), (max-width:1100px) and (orientation:portrait) and (min-height:501px) {
  :root[lang="ar"] .chap.on span { left: auto; right: 0; }
}

/* ---------- pages after the landing ---------- */
/* Off-screen to the right, which a right-to-left page can't scroll to (to the left it could, and did: 10,000px). */
:root[lang="ar"] .hp { left: auto; right: -10000px; }
/* The menu opens from its button, which now sits at the left end of the bar. */
:root[lang="ar"] .fmenu-panel { right: auto; left: 0; }
/* Small labels use a monospace font in English; Arabic letters get a proportional font instead (a monospace
   fallback spreads them out). Latin letters, codes and numbers keep IBM Plex Mono. */
/* (the Arabic font comes first: even the spaces of a monospace font leave wide gaps between Arabic words) */
:root[lang="ar"] body.jp { --font-mono: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif; }
:root[lang="ar"] { --mono: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif; }
/* real code keeps its monospace font */
:root[lang="ar"] :is(pre, code, kbd, .copybox pre, .prove-peek pre, .film .code, .film .addr, .nf-code, #missing-id, .ho-url) { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
/* Paths and addresses read left to right, even inside an Arabic page. */
:root[lang="ar"] :is(.nf-code, #missing-id, .ho-url, .addr) { direction: ltr; unicode-bidi: isolate; text-align: left; }
:root[lang="ar"] .cert-host { direction: ltr; unicode-bidi: isolate; text-align: right; }
/* "Skip to…" link: at the start of the line (the right), over the logo, as in English. */
:root[lang="ar"] .skip { left: auto; right: 12px; }

/* ---------- report ---------- */
.jp .found-box[open] .found-more::after { content: "Hide"; }
:root[lang="ar"] .jp .found-box[open] .found-more::after { content: "إخفاء"; }
/* the price note after "Run the deep check" may wrap in Arabic (it was clipped on phones) */
:root[lang="ar"] .unlock-price { white-space: normal; }
/* "today's grade → certificate": the arrow points the reading way (phones already turn it downward) */
@media (min-width:861px) { :root[lang="ar"] .onfile-arrow { display: inline-block; transform: scaleX(-1); } }
/* email addresses stay in one piece inside Arabic sentences */
:root[lang="ar"] :is(.inbox-email, .acct-menu-who b) { direction: ltr; unicode-bidi: isolate; }
/* the arrows between the 3 steps point the reading way and sit on the right edge of each step */
:root[lang="ar"] .how3 li + li::before { content: "←"; left: auto; right: -8px; transform: translate(50%, -50%); }
:root[lang="ar"] .ho-reqs li[data-state="todo"]::before { content: "←"; }
/* phones: the Arabic "Sign in" (تسجيل الدخول) is wider than the English, so the top bar tightens a little */
@media (max-width:420px) {
  :root[lang="ar"] .jnav .fnav-links { gap: 9px; }
  :root[lang="ar"] .jnav .brand { font-size: 15px; gap: 8px; }
  :root[lang="ar"] .jnav .nav-signin, :root[lang="ar"] .jnav .fmenu-btn { font-size: 13px; }
}