/* ============================================================
   wiki-rtl.css — RTL overrides for the wiki templates

   Loads AFTER wiki.css. Every rule here is scoped under
   [dir="rtl"] so the LTR layout in wiki.css remains unchanged
   for every other locale. Strictly mirror-only — every rule
   here flips a directional/physical property that wiki.css
   already sets, so RTL pages never gain styling that LTR pages
   don't have.
   ============================================================ */


/* ------------------------------------------------------------
   (a) Sidebar transform states (LTR layout offset rules now
       live in wiki.css under the structural RTL block)
   ------------------------------------------------------------
   The sidebar's static positioning (left/right + border swap)
   and the main column's reserved gutter ARE structural and live
   in wiki.css so the LTR build can verify the mirror contract
   without loading this stylesheet. The transform-based slide-in
   states for the off-canvas mobile sidebar are dynamic
   (depend on `.collapsed` / `.open`) and stay here so they only
   load when an RTL locale is rendered.
   ------------------------------------------------------------ */
[dir="rtl"] .wiki-sidebar.collapsed {
  transform: translateX(var(--wiki-sidebar-width));
}

@media (max-width: 1024px) {
  [dir="rtl"] .wiki-sidebar {
    transform: translateX(var(--wiki-sidebar-width));
  }
  [dir="rtl"] .wiki-sidebar.open {
    transform: translateX(0);
  }
}


/* ------------------------------------------------------------
   (b) Sidebar nav items — top, sub, sub-sub
   ------------------------------------------------------------
   The 3px accent bar sits on the inside edge of every nav row
   (top-level .wiki-nav-item, level-2 .wiki-nav-sub-item,
   level-3 .wiki-nav-sub-sub-item). Hide the LTR border (zero
   width) and redraw the same bar on the right.

   Sub-rows are also indented from the start edge with
   asymmetric padding (`padding: 5px 20px 5px 40px` for level
   2, `4px 20px 4px 56px` for level 3). The 40px / 56px gutter
   has to live on the right side in RTL, so we explicitly swap
   padding-left and padding-right.

   The chevron on expandable rows uses `margin-left: auto` to
   push itself to the visual end of the flex row. In an RTL
   flex row, the visual end is on the LEFT, so a physical
   `margin-left: auto` actually pushes the chevron toward the
   visual START (right). Flip to `margin-right: auto` so the
   chevron stays at the visual end.
   ------------------------------------------------------------ */
[dir="rtl"] .wiki-nav-item {
  border-left: 0;
  border-right: 3px solid transparent;
}

[dir="rtl"] .wiki-nav-item.active {
  border-left-color: transparent;
  border-right-color: var(--color-primary);
}

[dir="rtl"] .wiki-nav-item__chevron {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .wiki-nav-sub-item {
  border-left: 0;
  border-right: 3px solid transparent;
  padding-left: 20px;
  padding-right: 40px;
}

[dir="rtl"] .wiki-nav-sub-item.active {
  border-left-color: transparent;
  border-right-color: var(--color-secondary);
}

[dir="rtl"] .wiki-nav-sub-sub-item {
  border-left: 0;
  border-right: 3px solid transparent;
  padding-left: 20px;
  padding-right: 56px;
}

[dir="rtl"] .wiki-nav-sub-sub-item.active {
  border-left-color: transparent;
  border-right-color: var(--color-secondary);
}


/* ------------------------------------------------------------
   (b2) Wiki header — search input + icon
   ------------------------------------------------------------
   The search input reserves 40px of left padding for an
   absolutely-positioned magnifying-glass icon at left:13px.
   In RTL the icon belongs on the right, so the input padding
   must mirror to keep the typed text from running under the
   icon.
   ------------------------------------------------------------ */
[dir="rtl"] .wiki-header__search-input {
  padding-left: 16px;
  padding-right: 40px;
}

[dir="rtl"] .wiki-header__search-icon {
  left: auto;
  right: 13px;
}

/* Language-switcher dropdown — anchor to the trigger's
   start edge. LTR uses right:0; RTL uses left:0. */
[dir="rtl"] .wiki-header .nav__lang-switcher-menu {
  right: auto;
  left: 0;
}


/* ------------------------------------------------------------
   (c) Floating table of contents
   ------------------------------------------------------------
   The TOC pins to the right gutter in LTR (right: 32px). In
   RTL it pins to the left gutter. The link's active/hover bar
   also flips sides, and h3 links indent from the right rather
   than the left so the indent and the active bar stay
   consistent.
   ------------------------------------------------------------ */
[dir="rtl"] .wiki-toc {
  right: auto;
  left: 32px;
}

[dir="rtl"] .wiki-toc__link {
  border-left: 0;
  border-right: 2px solid transparent;
}

[dir="rtl"] .wiki-toc__link:hover {
  border-left-color: transparent;
  border-right-color: var(--color-primary);
}

[dir="rtl"] .wiki-toc__link.active {
  border-left-color: transparent;
  border-right-color: var(--color-secondary);
}

[dir="rtl"] .wiki-toc__link--h3 {
  padding-left: 8px;
  padding-right: 20px;
}


/* ------------------------------------------------------------
   (d) Back-to-top FAB
   ------------------------------------------------------------
   Stays in the bottom-start corner relative to the reader, so
   it moves from the bottom-right (LTR) to the bottom-left
   (RTL). Also flip the mobile breakpoint variant.
   ------------------------------------------------------------ */
[dir="rtl"] .wiki-back-to-top {
  right: auto;
  left: 32px;
}

@media (max-width: 768px) {
  [dir="rtl"] .wiki-back-to-top {
    left: 20px;
  }
}


/* ------------------------------------------------------------
   (e) Callouts (tip / warning / info / danger)
   ------------------------------------------------------------
   Each callout has a 4px coloured accent bar on the start
   edge — the inside edge that meets the body copy. Move it
   from the left to the right and re-apply each variant's
   colour on the right side.
   ------------------------------------------------------------ */
[dir="rtl"] .wiki-callout {
  border-left: 0;
  border-right: 4px solid transparent;
}

[dir="rtl"] .wiki-callout--tip {
  border-right-color: var(--color-success);
}

[dir="rtl"] .wiki-callout--warning {
  border-right-color: var(--color-warning);
}

[dir="rtl"] .wiki-callout--info {
  border-right-color: var(--color-info);
}

[dir="rtl"] .wiki-callout--danger {
  border-right-color: var(--color-danger);
}


/* ------------------------------------------------------------
   (f) Breadcrumb separator glyph
   ------------------------------------------------------------
   Templates use the right-pointing single angle quote (›,
   ›) — that's a directional arrow and must mirror in
   RTL. We only ever flip arrow-style separators; if a
   template uses a slash (/) or middle dot (·), those glyphs
   read the same in both directions and are left untouched.
   The :not() guard isolates that intent: a template that
   wants a non-mirrored separator can opt out by adding the
   .wiki-breadcrumb__sep--neutral modifier alongside the base
   class. (No template uses that modifier today — it's a
   forward-looking hook.)
   ------------------------------------------------------------ */
[dir="rtl"] .wiki-breadcrumb__sep:not(.wiki-breadcrumb__sep--neutral) {
  display: inline-block;
  transform: scaleX(-1);
}


/* ------------------------------------------------------------
   (g) Force LTR on code blocks and tree displays
   ------------------------------------------------------------
   Source code, command-line snippets, and the monospace
   site-map "tree" are inherently LTR — RTL renders them in
   visual-order break (numbers and identifiers are LTR-only,
   leading whitespace ends up on the wrong side, ASCII tree
   glyphs flip etc.). unicode-bidi: isolate prevents the
   surrounding RTL paragraph direction from leaking in.
   Selectors are scoped to the article body so this stylesheet
   stays safe to bundle with broader site CSS in future.

   With the code block forced LTR, its absolutely-positioned
   chrome (the language label and the copy button) still has
   to follow the reader: in LTR they sit top-right, in RTL
   they sit top-left.
   ------------------------------------------------------------ */
[dir="rtl"] .wiki-content pre,
[dir="rtl"] .wiki-content code,
[dir="rtl"] .wiki-tree-wrapper {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

[dir="rtl"] .wiki-code-block__label {
  right: auto;
  left: 14px;
}

[dir="rtl"] .wiki-code-copy-btn {
  right: auto;
  left: 10px;
}

/* Flex-based tree (.wiki-tree__item--child / --grandchild) —
   the ::before connector line and the row indents are
   physical-left in LTR. Mirror to physical-right in RTL so the
   tree visually nests from the start edge of an Arabic page. */
[dir="rtl"] .wiki-tree__item--child {
  margin-left: 0;
  margin-right: 24px;
}

[dir="rtl"] .wiki-tree__item--child::before {
  left: auto;
  right: -16px;
}

[dir="rtl"] .wiki-tree__item--grandchild {
  margin-left: 0;
  margin-right: 48px;
}

[dir="rtl"] .wiki-tree__item--grandchild::before {
  left: auto;
  right: -16px;
}


/* ------------------------------------------------------------
   (h) Content lists
   ------------------------------------------------------------
   Bullet/number markers indent from the start edge of the
   line, which mirrors with direction. (wiki.css has no
   blockquote rule today — if/when one is added with a
   start-edge bar, mirror it here too.)
   ------------------------------------------------------------ */
[dir="rtl"] .wiki-content ul,
[dir="rtl"] .wiki-content ol {
  padding-left: 0;
  padding-right: 24px;
}


/* ------------------------------------------------------------
   (i) Wiki header — keep brand at the reading-start edge
   ------------------------------------------------------------
   The header is a flex row: logo, search, nav, mobile-toggle.
   With direction:rtl, flex-direction:row already lays children
   out right-to-left (RTL flow start = right edge), so the
   logo lands at the reading-start edge for free — no
   row-reverse needed.

   .wiki-header__search uses `margin-left: auto` to absorb
   leftover space and push itself toward the nav. That margin
   is physical, but the SAME physical-left margin in an
   RTL row produces the mirrored result we want (search
   hugged against the LEFT-most nav cluster, gap between
   logo and search), so it also needs no override.
   ------------------------------------------------------------ */