/* Right-to-left layer for languages whose own text is written right to left (Persian now,
 * Hebrew next). The interface stays English and left to right; only the target-language
 * text blocks are set right to left, in a font that has the script. Loaded last, after
 * the shared stylesheets, and keyed on <html data-text-direction="rtl">, like the layer
 * the CJK languages use for their fonts. */


/* Arabic-script text everywhere uses Vazirmatn. The shared stylesheets set one Latin font
 * stack per rule (Source Sans 3, Noto Sans, Source Serif 4, Noto Serif, Fraunces), so rather
 * than touching every rule, each of those families also gets the Arabic-script range of
 * Vazirmatn. A font family declared twice with different unicode ranges is one font whose
 * Latin letters come from the first declaration (Google Fonts, in index.html) and whose
 * Arabic-script letters come from here. The file is the same one the page's own Vazirmatn
 * rule loads, so the browser fetches it once.
 *
 * The weight range of each declaration must equal the one Google Fonts uses for that family
 * (Source Sans 3 and Source Serif 4: 200 900; the others: 100 900). A different range makes
 * the browser treat the two declarations as different weights and drop the Latin one, so the
 * English text silently falls back to Georgia. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vazirmatn/v16/Dxxo8j6PP2D_kU2muijlGMWWIGroe7ll.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vazirmatn/v16/Dxxo8j6PP2D_kU2muijlGMWWIGroe7ll.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vazirmatn/v16/Dxxo8j6PP2D_kU2muijlGMWWIGroe7ll.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Serif";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vazirmatn/v16/Dxxo8j6PP2D_kU2muijlGMWWIGroe7ll.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vazirmatn/v16/Dxxo8j6PP2D_kU2muijlGMWWIGroe7ll.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root[data-text-direction="rtl"] {
  --rtl-font: "Vazirmatn", "Noto Naskh Arabic", "Noto Sans Arabic", "Noto Sans", sans-serif;
}

/* Target-language text blocks. Everything in this list holds only target-language text. */
[data-text-direction="rtl"] :is(
    .word-text-block,
    .sentence-box-norwegian,
    .sentence-box-norwegian p,
    .japanese-sentence,
    .sticky-title-japanese,
    .japanese-title,
    .definition-text,
    .game-pronunciation-target,
    .home-wotd-word,
    .word-list-norwegian,
    .word-list-word-link
  ) {
  direction: rtl;
  text-align: right;
  font-family: var(--rtl-font);
}

/* Text that can be either language (a game card shows the Persian word or its English
 * meaning; a search box takes either): the browser picks the direction from the first
 * strong character. */
[data-text-direction="rtl"] :is(
    .game-translation-card,
    .game-word,
    .game-teaching-sentence,
    .game-answer-status,
    .dictionary-row-word
  ) {
  unicode-bidi: plaintext;
  text-align: start;
  font-family: var(--rtl-font), sans-serif;
}

/* Text boxes look like every other language's until something is typed: the placeholder keeps the
 * interface font and left alignment. Typed text takes its direction from its first strong
 * character (the Arabic-script letters already use Vazirmatn through the font rules above). */
[data-text-direction="rtl"] :is(#search-bar, .game-typed-answer-input):not(:placeholder-shown) {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Centered prompts and cards stay centered. */
[data-text-direction="rtl"] :is(.game-word, .game-translation-card) {
  text-align: center;
}

/* Persian looks small next to Latin type at the same size. */
[data-text-direction="rtl"] :is(.word-text-block, .sentence-box-norwegian p, .japanese-sentence, .definition-text) {
  line-height: 1.9;
}

/* The language-name menu and the romanization stay left to right. */
[data-text-direction="rtl"] :is(.pronunciation, .game-pronunciation) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Story cards are mirrored: the title block sits on the right, the star and the genre and level
 * rail on the left, and every line of the card is aligned to the right (the English title and the
 * reading time are English but sit under the Persian title). In the reader, each English line is
 * aligned to the right, directly under its Persian line. */
[data-text-direction="rtl"] .story-card-link {
  flex-direction: row-reverse;
}

[data-text-direction="rtl"] .story-card-link .title-container {
  text-align: right;
}

[data-text-direction="rtl"] .story-card-link :is(.english-title, .story-reading-time) {
  direction: ltr;
  text-align: right;
}

[data-text-direction="rtl"] .story-card-link .stories-detail-container {
  margin-left: 0;
  margin-right: 10px;
}

[data-text-direction="rtl"] :is(.stories-list-item, .story-recommendation) .story-card-favorite-button,
[data-text-direction="rtl"] body.stories-mode :is(.stories-list-item, .story-recommendation) .story-card-favorite-button {
  left: 11px;
  right: auto;
}

[data-text-direction="rtl"] #story-content .english-sentence {
  text-align: right;
}

/* Result cards in a list of words are mirrored like the story cards: the word, its class, its English
 * meaning and its level sit in the right column, right-aligned, with the Persian definition on the left
 * and the star at the left edge. */
[data-text-direction="rtl"] .multiple-results-definition {
  padding: 15px 25px 15px 70px;
}

[data-text-direction="rtl"] .multiple-results-definition-header {
  flex-direction: row-reverse;
}

[data-text-direction="rtl"] .word-gender.multiple-results-word-gender {
  align-items: flex-end;
  margin: 0 0 0 20px !important;
}

[data-text-direction="rtl"] .word-gender.multiple-results-word-gender > * {
  align-self: flex-end;
}

[data-text-direction="rtl"] .multiple-results-definition .multiple-results-english {
  direction: ltr;
  text-align: right;
}

[data-text-direction="rtl"] .multiple-results-definition-text {
  margin-left: 0;
  margin-right: 20px;
}

[data-text-direction="rtl"] .multiple-results-my-words-star {
  left: 20px;
  right: auto;
}

@media (max-width: 700px) {
  [data-text-direction="rtl"] .multiple-results-definition {
    padding: 15px 20px 15px 60px;
  }

  [data-text-direction="rtl"] .multiple-results-my-words-star {
    left: 15px;
    right: auto;
  }
}

/* An English translation under a target-language sentence is aligned to the right, directly under it
 * (Word Game, example sentences in word pages and in sentence search). */
[data-text-direction="rtl"] :is(.game-english-translation, .game-teaching-translation, .sentence-box-english, .sentence-box-english p) {
  direction: ltr;
  text-align: right;
}

/* The translation box is a flex row; its paragraph must sit at the right end. */
[data-text-direction="rtl"] .sentence-box-english {
  justify-content: flex-end;
}

/* Side by side (wide screens), a sentence pair is mirrored: the Persian card sits on the right, the
 * English card on the left, with the rounded outer corners, the shadows and the English text following.
 * Below this width the cards are stacked and the rules above apply. */
@media (min-width: 1025px) {
  [data-text-direction="rtl"] .sentence-container {
    flex-direction: row-reverse;
  }

  [data-text-direction="rtl"] .sentence-box-norwegian {
    border-radius: 0 12px 12px 0;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  }

  /* With the English hidden, the Persian card stands alone and is rounded on all corners. */
  [data-text-direction="rtl"] .sentence-box-norwegian.sentence-box-norwegian-hidden {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  [data-text-direction="rtl"] .sentence-box-english {
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.1);
    justify-content: flex-start;
  }

  [data-text-direction="rtl"] :is(.sentence-box-english, .sentence-box-english p) {
    text-align: left;
  }
}

/* The page of a single word is mirrored like the result cards: the word and its class sit on the right,
 * the star on the left, and the English meaning, the romanization and the level rows run right to left. */
[data-text-direction="rtl"] .single-result-my-words-controls {
  left: 25px;
  right: auto;
}

/* The Word of the day keeps its star where the other languages have it: its label is left-aligned
 * interface text, and a star at the left edge would sit on top of it. */
[data-text-direction="rtl"] .wotd .single-result-my-words-controls {
  left: auto;
  right: 12px;
}

[data-text-direction="rtl"] .single-result-definition .word-gender {
  align-items: flex-end;
}

[data-text-direction="rtl"] .single-result-definition .word-gender > * {
  align-self: flex-end;
}

[data-text-direction="rtl"] .single-result-definition .definition-content {
  direction: rtl;
}

[data-text-direction="rtl"] .single-result-definition .definition-content :is(p, .definition-actions-row) {
  unicode-bidi: plaintext;
}

/* My Words and the All Words list: the columns run right to left (word first, on the right; the star
 * at the left edge), and the English meaning is aligned to the right under the same rule as elsewhere. */
[data-text-direction="rtl"] .word-list-table,
[data-text-direction="rtl"] .word-list-row {
  direction: rtl;
}

[data-text-direction="rtl"] .word-list-table :is(th, td) {
  text-align: right;
}

[data-text-direction="rtl"] .word-list-table :is(.word-list-english, th.word-list-english) {
  direction: ltr;
  text-align: right;
}

[data-text-direction="rtl"] .word-list-row td:first-child {
  border-left: 0;
  border-right: 1px solid var(--color-wash-blue-border);
  border-radius: 0 10px 10px 0;
}

[data-text-direction="rtl"] .word-list-row td:last-child {
  border-left: 1px solid var(--color-wash-blue-border);
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

/* Grammar Journey player. Persian sentences, tiles and the answer being built run right to left, with the
 * English translation aligned under them at the right; the explanation and the choices stay English,
 * and Persian quoted inside an English paragraph is isolated by the player (.grammar-inline-rtl). */
[data-text-direction="rtl"] .grammar-inline-rtl {
  unicode-bidi: isolate;
}

[data-text-direction="rtl"] .grammar-line {
  direction: rtl;
}

[data-text-direction="rtl"] .grammar-activity[data-type='notice'] .grammar-chinese,
[data-text-direction="rtl"] .grammar-chinese {
  text-align: right;
}

[data-text-direction="rtl"] .grammar-app .grammar-example .grammar-translation {
  text-align: right;
}

[data-text-direction="rtl"] .grammar-tiles,
[data-text-direction="rtl"] .grammar-build-answer,
[data-text-direction="rtl"] .grammar-cloze {
  direction: rtl;
}

[data-text-direction="rtl"] .grammar-example > .grammar-line > .grammar-speak,
[data-text-direction="rtl"] .grammar-activity[data-type='notice'] .grammar-example > .grammar-line > .grammar-speak {
  right: auto;
  left: var(--s2);
}

[data-text-direction="rtl"] .grammar-build-answer:has(.grammar-answer-audio),
[data-text-direction="rtl"] .grammar-cloze:has(.grammar-answer-audio) {
  padding-right: var(--s3);
  padding-left: 60px;
}

[data-text-direction="rtl"] .grammar-answer-audio {
  right: auto;
  left: var(--s2);
}