/* ==========================================================================
   Right-to-left corrections — linked only from a page whose <html> carries
   dir="rtl" (see rtlLinkFor in scripts/build/lib/render.mjs).
   --------------------------------------------------------------------------
   What dir="rtl" already does, and what it does not.

   It flips the text flow and every flex/grid row, so the three-column game
   shell needs no rule here: .content-area-1 is a flex row (sidebar, main,
   sidebar), .about-section is a flex row of two 50% halves, .game-grid and
   .seo-hub-grid are auto-fill grids, and the header on a phone is a
   `grid-template-columns: auto minmax(0,1fr) auto` row. All of them mirror on
   their own, and `scroll-snap-align: start` / `padding-inline-start` on the
   play-next rail are logical already.

   What it does not flip is a physical side — and the three sheets under this
   page were written with those. They come from two places:
     vendor-theme.css   a byte copy of the vendor's inline <style>
     seo.css / chrome.css   this build's own layers
   plus /static/mb9/css/style.css, of which exactly one rule reaches these
   pages (.entry-content li, mirrored below). Every rule below is a mirror of a
   rule that exists in one of those files; none of them invents a value.

   Order and specificity. A crawled page still carries the vendor's <style>
   inline and it is emitted *after* this link, so a same-specificity override
   would lose on source order. `[dir="rtl"]` is an attribute selector and adds
   one class-level notch to every selector here (0,2,0 against the vendor's
   0,1,0), which is enough to win without !important.
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */

/* vendor: `.logo { margin-left: 70px }`, and `.logo { margin-left: 0 }` under
   1586px. Mirrored at both widths. */
[dir="rtl"] .logo {
  margin-left: 0;
  margin-right: 70px;
}

/* vendor: `.search-box { margin: 5px; margin-right: 20px }`. */
[dir="rtl"] .search-box {
  margin-right: 5px;
  margin-left: 20px;
}

/* vendor: `.search-box button { margin-left: -30px }` on its own. */
[dir="rtl"] .search-box button {
  margin-left: 0;
  margin-right: -30px;
}

/* seo.css: the submit button is pulled over the input's end edge with
   `margin-left: -44px` (the vendor's own -30px is overridden by that rule).
   Under dir="rtl" the button sits at the input's *left*, so the pull has to
   come from the other side or it moves away from the field it should cover. */
[dir="rtl"] header .search-box button {
  margin-left: 0;
  margin-right: -44px;
}

/* vendor: `.search-icon { left: 10px }` — absolute, so it never flips. */
[dir="rtl"] .search-icon {
  left: auto;
  right: 10px;
}

/* vendor: `nav ul li { margin-left: 25px }` and `header nav li { margin-left:
   5px }` — the chip gutter, which otherwise falls on the trailing edge of
   every chip and doubles the gap between the last two. */
[dir="rtl"] nav ul li {
  margin-left: 0;
  margin-right: 25px;
}

[dir="rtl"] header nav li {
  margin-left: 0;
  margin-right: 5px;
}

/* --- Body ---------------------------------------------------------------- */

/* mb9 style.css: `section-title`'s icon sits to the leading edge of its label. */
[dir="rtl"] .section-title i {
  margin-right: 0;
  margin-left: 10px;
}

/* mb9 style.css: `.entry-content li { margin-left: 15px }` — the list indent.
   Without this an Arabic bullet list has its markers flush against the text. */
[dir="rtl"] .entry-content li {
  margin-left: 0;
  margin-right: 15px;
}

/* vendor: `.rating-count { text-align: right }`. */
[dir="rtl"] .rating-count {
  text-align: left;
}

/* seo.css: the breadcrumb separator is drawn by a ::before carrying "›" and a
   right margin. In an RTL trail the next crumb is to the *left*, so the glyph
   points the other way and its gap moves with it. */
[dir="rtl"] .seo-breadcrumb-nav li + li::before {
  content: "‹";
  margin-right: 0;
  margin-left: 6px;
}

/* seo.css: `.status-suggest { text-align: left }`. */
[dir="rtl"] .status-suggest {
  text-align: right;
}

/* seo.css: the expanded-game exit control is pinned to the right corner. */
[dir="rtl"] .game-expanded .game-exit {
  right: auto;
  left: .5rem;
}

/* --- Footer and floating controls ---------------------------------------- */

/* vendor: `.footer-links { margin-left: -16% }` (the archive shifted the row
   and clipped phone links; chrome.css already zeroes it). Mirrored so a later
   vendor rule on the trailing side cannot reopen the gap. */
[dir="rtl"] footer.site-footer .footer-links {
  margin-right: 0;
}

/* vendor: `.to-top { right: 20px }` — fixed, so it never flips on its own. */
[dir="rtl"] .to-top {
  right: auto;
  left: 20px;
}

@media (max-width: 1586px) {
  /* vendor: the header stacks below 1586px and the logo's inline margin is
     cleared there. */
  [dir="rtl"] .logo {
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  /* chrome.css reserves the search submit button's width on one side of the
     input (`padding-right: 44px`) and trims the other to 11px. Under dir="rtl"
     the button is on the left, so the reservation swaps sides with it. */
  [dir="rtl"] header.site-header .search-box input {
    padding-left: 44px;
    padding-right: 11px;
  }
}