/*--------------------------------------------------------------
# RTL overrides unique to news-details.html
#
# Loaded after assets/css/rtl.css (which already covers the shared
# .thm-breadcrumb fix used by every inner page, incl. this one — no
# change needed there).
#
# Everything below fixes the same underlying bug: aports.css pairs
# inline-block / flex-row / floated siblings with a physical
# `margin-left` gap meant to sit *before* each item in source order.
# Under [dir="rtl"] the browser reverses the visual order of these
# siblings (bidi reordering for inline-block, "row" direction for
# flex, and float itself for the pagination boxes), but the margin
# stays on the same physical side, so the gap ends up on the wrong
# pair of items. Each rule below just mirrors the gap (and, for the
# floated pagination boxes, the float side) to track the item it's
# meant to separate.
--------------------------------------------------------------*/

/* Article tag pills ("Buying Guide" / "Property Purchase") — inline-block
   anchors, reordered by bidi under RTL. */
[dir="rtl"] .news-details__tags a+a {
  margin-left: 0;
  margin-right: 6px;
}

/* Article share icons — flex row, reordered under RTL. */
[dir="rtl"] .news-details__social-list a+a {
  margin-left: 0;
  margin-right: 30px;
}

/* "Related reading" boxes (li float: left with a margin-left gap). This
   only needs mirroring at the >=1200px breakpoint where the two boxes
   actually sit side by side — aports-responsive.css already stacks them
   vertically (margin-top instead of margin-left) below that, in which
   case there's no left/right order to mirror. */
@media (min-width: 1200px) {
  [dir="rtl"] .news-details__pagenation li {
    float: right;
  }

  [dir="rtl"] .news-details__pagenation li+li {
    margin-left: 0;
    margin-right: 30px;
  }
}

/* Sidebar "Latest posts" thumbnail — flex row, reordered under RTL, so the
   image ends up on the visual right of the text and the gap needs to move
   with it. */
[dir="rtl"] .sidebar__post-image {
  margin-right: 0;
  margin-left: 15px;
}

/* Sidebar search — icon button and input padding are pinned to the
   physical right edge; mirror them so the button sits at the reading
   "end" (left) in RTL instead of overlapping the placeholder text. */
[dir="rtl"] .sidebar__search-form input[type="search"] {
  padding-right: 50px;
  padding-left: 80px;
}

[dir="rtl"] .sidebar__search-form button[type="submit"] {
  right: auto;
  left: 0;
}