/* ==========================================================================
   Hostna OS — Arabic surfaces (the ten Gulf pages and the Arabic journal)

   What this sheet is: the Arabic face and the direction fixes, nothing
   else. It loads AFTER os-page / os-tablet / os-blog (inc/arabic.php names
   them as dependencies) so its overrides win ties on equal specificity.

   Direction is carried by dir="rtl" on the hero and the document (and on the
   Journal screen), printed by the template; the OS chrome around them keeps
   its own direction. Grid and flex mirror themselves under dir="rtl" — the
   18px icon column of .sv-checks lands on the right without a rule — so the
   rules below are only the places os-page.css spoke in physical terms:
   a flag pinned with `left`, a paragraph indented with `margin-left`, a list
   padded with `padding-left`, and the tracked uppercase eyebrows, which must
   lose their letter-spacing because spacing breaks Arabic letter joining.

   The face: IBM Plex Sans Arabic (SIL OFL 1.1, assets/fonts/), Arabic
   subset only. Latin text inside an Arabic page keeps the system face the
   OS uses; digits and units read fine in either. Four weights, loaded on
   demand by unicode-range, ~45 KB each.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ── 1. the face ─────────────────────────────────────────────────────── */
body.hostna-arabic .os-hero,
body.hostna-arabic .os-doc,
body.hostna-arabic .os-cta,
body.hostna-arabic .bl-screen,
body.hostna-arabic .consent-bar,
body.hostna-arabic .mb-tag,
body.hostna-arabic .wt {
  font-family: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

/* Arabic needs more leading than Latin at the same size, and the bold cut
   of Plex Arabic is heavy enough that headings sit at 600 rather than 700. */
body.hostna-arabic .os-doc :where(p, li, dd),
body.hostna-arabic .bl-article :where(p, li) { line-height: 1.85; }
body.hostna-arabic .os-hero__lead { line-height: 1.75; }
body.hostna-arabic .os-hero h1,
body.hostna-arabic .os-doc :where(h2, h3),
body.hostna-arabic .bl-head h1 { font-weight: 600; line-height: 1.35; }

/* Tracking is Latin typography. Spacing between Arabic glyphs breaks the
   joins that make words words, so every tracked label loses it here. */
body.hostna-arabic .eyebrow,
body.hostna-arabic .mb-tag,
body.hostna-arabic .wt,
body.hostna-arabic .sv-plan__flag,
body.hostna-arabic .sv-offer__price span,
body.hostna-arabic .chip,
body.hostna-arabic .pill-mini,
body.hostna-arabic .bl-head__cat {
  letter-spacing: 0;
  text-transform: none;
}

/* ── 2. direction: the few physical rules os-page.css carries ─────────── */
body.hostna-arabic .os-hero[dir="rtl"],
body.hostna-arabic .os-doc[dir="rtl"],
body.hostna-arabic .bl-screen[dir="rtl"] { text-align: start; }

body.hostna-os-page.hostna-arabic .os-doc :where(ul, ol) {
  padding-left: 0;
  padding-inline-start: 1.4em;
}
body.hostna-os-page.hostna-arabic .os-faq p {
  margin: 8px 0 0;
  margin-inline-start: 1.1em;
}
body.hostna-os-page.hostna-arabic .sv-plan__flag {
  left: auto;
  right: 17px;
}
/* Plan names and the TLD column are Latin and are marked dir="ltr" inline;
   the numbers around them read correctly under bidi without help. */
body.hostna-arabic .sv-plan h3[dir="ltr"] { text-align: right; }

/* The CTA arrow is printed as ← in Arabic markup; the English one is →.
   Nothing to flip — but the hero button prints the English glyph from the
   shared template, so it is mirrored here. */
body.hostna-arabic .os-hero .prime-btn span[aria-hidden="true"],
body.hostna-arabic .os-cta__go span[aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }

/* ── 3. the pieces only these pages have ─────────────────────────────── */
body.hostna-os-page .ar-avail {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-3);
}
body.hostna-os-page .ar-avail b { color: var(--ink-2); font-weight: 600; }

body.hostna-os-page .ar-fx {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
body.hostna-os-page .sv-offer__price .ar-fx { margin-inline-start: 6px; }
body.hostna-os-page .sv-plan__renew.ar-fx { display: block; margin-top: -2px; }

body.hostna-os-page .ar-cards { margin: 0; }
body.hostna-os-page .ar-addons li b small { font-weight: 500; }

/* The domain price table: the document's own table rules, plus a scroll
   box so five columns survive a 360px phone without the page growing. */
body.hostna-os-page .ar-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 8px; }
body.hostna-os-page .ar-table table { min-width: 520px; width: 100%; }
body.hostna-os-page .ar-table th { white-space: nowrap; }
body.hostna-os-page .ar-table td { white-space: nowrap; }

/* The language pill under the hero lead — borrowed from the legal pages'
   .os-langswitch (os-page.css) and only positioned here. */
body.hostna-os-page .os-hero__copy .os-langswitch { margin: 0 0 16px; }

/* ── 4. the Journal in Arabic ────────────────────────────────────────── */
body.hostna-arabic .bl-screen[dir="rtl"] .bl-nav__link--next { text-align: start; }
body.hostna-arabic .bl-screen[dir="rtl"] .bl-article :where(ul, ol) { padding-left: 0; padding-inline-start: 1.4em; }
body.hostna-arabic .bl-screen[dir="rtl"] .bl-article :where(blockquote) { border-left: 0; border-inline-start: 3px solid var(--stroke-2); padding-left: 0; padding-inline-start: 14px; }
body.hostna-arabic .bl-screen[dir="rtl"] .bl-article :where(pre, code) { direction: ltr; text-align: left; unicode-bidi: isolate; }
body.hostna-arabic .bl-screen[dir="rtl"] .bl-article :where(table) { direction: rtl; }

/* ── 5. the cookie bar ───────────────────────────────────────────────── */
body.hostna-arabic .consent-bar[dir="rtl"] { text-align: start; }

/* The Arabic archive IS the Arabic journal: the English topic chips
   (Technology / Hosting Basics …) would only lead a reader out of it. */
body.hostna-arabic .bl-topics { display: none; }