/* ============================================================================
   RTL adaptation layer — bitcoinhyper.ae (Arabic ar-AE portal)
   ----------------------------------------------------------------------------
   Loaded last, after the shared design system and the Tailwind build.

   Under `dir="rtl"` the browser already mirrors everything that is expressed
   in logical terms: flex `row`, grid column order, `text-align: start`,
   `margin-inline`, list markers, table column order and the default text
   alignment of block content. This file therefore restates ONLY the
   declarations that the donor expresses on the physical left/right axis and
   that would otherwise stay anchored to the wrong edge.

   Deliberately NOT mirrored (they are not directional):
     - the MS Digital Asset Academy logo and the footer monogram
     - country flags (SVG and emoji)
     - the podcast/video play glyphs
     - book covers, portraits, QR-like and photographic assets
     - the RSS mark

   No colour, spacing scale, typography, component structure or breakpoint is
   changed here.
   ========================================================================== */

/* ── 1. Shared design system: physical → logical ─────────────────────────── */

/* Prose lists: the indent belongs to the start edge. */
[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol {
  padding-left: 0;
  padding-inline-start: 1.5rem;
}

/* Inline badge inside dropdown item titles. */
[dir="rtl"] .ndrop__badge {
  margin-left: 0;
  margin-inline-start: .35rem;
}

/* ── 2. Navigation ───────────────────────────────────────────────────────── */

/* The countries panel is the last item of the desktop row, so under RTL it
   sits at the LEFT edge of the viewport. Anchor it there instead of at the
   right, mirroring the viewport-safety rule inherited from the donor. */
@media (min-width: 1024px) {
  [dir="rtl"] .sitenav__links .bh-network-nav .ndrop__panel {
    right: auto;
    left: 0;
  }
}

/* ── 3. Tailwind utilities used by the pages ─────────────────────────────── */

[dir="rtl"] .text-left  { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

[dir="rtl"] .pl-4  { padding-left: 0; padding-inline-start: 1rem; }
[dir="rtl"] .pl-12 { padding-left: 0; padding-inline-start: 3rem; }

/* Absolutely positioned decorations mirror to the opposite corner. */
[dir="rtl"] .left-4    { left: auto;  right: 1rem; }
[dir="rtl"] .right-2   { right: auto; left: .5rem; }
[dir="rtl"] .right-4   { right: auto; left: 1rem; }
[dir="rtl"] .-right-4  { right: auto; left: -1rem; }

/* Column separators sit on the start edge of every item but the first. */
@media (min-width: 640px) {
  [dir="rtl"] .sm\:divide-x > :not([hidden]) ~ :not([hidden]) {
    border-left-width: 0;
    border-right-width: calc(1px * (1 - var(--tw-divide-x-reverse)));
  }
}

/* Privacy notice: the Arabic policy names are longer than the donor's, so they
   are allowed to wrap rather than push the bar into horizontal overflow. */
[dir="rtl"] .bh-pin-link { white-space: normal; }

/* ── 4. Bidirectional text: Latin runs inside Arabic prose ───────────────── */

/* `<bdi>` carries the isolation; these rules only keep such runs typeset in
   the Latin faces the design system already loads, so domains, contract
   addresses, ISBN/ASIN codes and CLI snippets stay legible and unbroken. */
bdi {
  unicode-bidi: isolate;
}
.ltr-code {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  white-space: nowrap;
}
/* Long hexadecimal identifiers (contract addresses, hashes) must be allowed to
   wrap rather than force a horizontal scrollbar on narrow viewports. */
.ltr-hash {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Preformatted blocks stay left-to-right and scroll inside their own box. */
[dir="rtl"] pre,
[dir="rtl"] code {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}
[dir="rtl"] pre {
  overflow-x: auto;
}

/* ── 5. Arabic typography ────────────────────────────────────────────────── */

/* Arabic script has taller ascenders/descenders and no uppercase; the donor's
   `text-transform: uppercase` is a no-op on Arabic but the wide letter-spacing
   it is paired with breaks Arabic joining. Neutralise the tracking on the
   labels that carry it, and give running Arabic text a little more leading. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .kpi-label,
[dir="rtl"] .footer-col__title,
[dir="rtl"] .nav-mobile__section-label,
[dir="rtl"] .ndrop__group-label,
[dir="rtl"] .bh-pin-eyebrow {
  letter-spacing: 0;
}

[dir="rtl"] .prose p,
[dir="rtl"] .prose li,
[dir="rtl"] .section-lead {
  line-height: 1.95;
}

/* The mono face has no Arabic coverage either; keep the mono look for Latin
   tokens and fall back to a readable Arabic face for Arabic glossary terms. */
[dir="rtl"] .font-mono {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', 'Noto Sans Arabic', 'Segoe UI', monospace;
}

/* The serif display face has no Arabic coverage; fall back to the system
   Arabic serif rather than to a Latin-only fallback. */
[dir="rtl"] .font-serif,
[dir="rtl"] .section-title,
[dir="rtl"] .kpi-value,
[dir="rtl"] .stat-num,
[dir="rtl"] .prose h2,
[dir="rtl"] .prose h3 {
  font-family: 'EB Garamond', 'Noto Naskh Arabic', 'Amiri', 'Times New Roman', Georgia, serif;
}

/* ── 6. Tables ───────────────────────────────────────────────────────────── */

/* Column order mirrors automatically; only wide tables need to keep their own
   scroll container so the page body never scrolls horizontally. */
[dir="rtl"] .overflow-x-auto {
  overflow-x: auto;
}

/* ── 7. Directional glyphs ───────────────────────────────────────────────── */

/* Arrows that mean "onward / back" are mirrored; every other inline icon is
   left untouched. `.rtl-flip` is applied explicitly in the markup. */
[dir="rtl"] .rtl-flip {
  display: inline-block;
  transform: scaleX(-1);
}