/* ==========================================================================
   Miftah Islamiyat — Arabic typography  (visual redesign, Stage 2)

   Readability above all. Prescribed passages must be easy to read at a glance,
   so no decorative calligraphy, generous line height for the diacritics, and
   clear separation from the surrounding English.
   ========================================================================== */

.ar,
[lang="ar"] {
  font-family: var(--font-ar);
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
  font-size: 1.6em;
  line-height: 2.15;
  font-weight: 400;
  letter-spacing: 0;
  word-spacing: 0.05em;
}

html[data-arabic-size="large"]   .ar, html[data-arabic-size="large"]   [lang="ar"] { font-size: 1.9em;  line-height: 2.25; }
html[data-arabic-size="x-large"] .ar, html[data-arabic-size="x-large"] [lang="ar"] { font-size: 2.25em; line-height: 2.35; }

/* Arabic always sits in its own block, never inline inside English prose. */
/* The prescribed text is the most important thing on any lesson page, so the
   block is given the manuscript treatment: a warm ground rather than plain
   white, an illuminated edge on the right (the side Arabic reads from) and a
   little more air around the diacritics. */
.arabic-block {
  position: relative;
  padding: var(--s6) var(--s6) var(--s5);
  margin-bottom: var(--s5);
  background:
    radial-gradient(120% 100% at 100% 0%, var(--gold-tint) 0%, transparent 62%),
    var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.arabic-block::before {
  content: ""; position: absolute; top: var(--s5); bottom: var(--s5); right: 0;
  width: 4px; border-radius: 4px 0 0 4px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--pine) 55%, var(--indigo) 100%);
  opacity: .8;
}

.arabic-block .ar { margin: 0 0 var(--s5); max-width: none; white-space: pre-line; }

.arabic-block__translation {
  direction: ltr; text-align: left;
  margin: 0; padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-0); line-height: 1.72;
  max-width: none;
}
.arabic-block__ref {
  direction: ltr; text-align: left;
  margin: var(--s3) 0 0;
  font-family: var(--font-ui); font-size: 0.76rem; font-weight: 650;
  letter-spacing: .04em; color: var(--ink-faint);
}

/* Small inline Arabic — glossary and vocabulary. Isolated so it can never
   disturb the direction of the surrounding English sentence. */
.vocab__ar, .glossary__ar {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--font-ar);
  line-height: 1.6;
}

/* Optional transliteration line, off unless the student turns it on. */
.translit {
  direction: ltr; text-align: left;
  font-style: italic; font-size: 0.94rem; color: var(--ink-faint);
}
html:not([data-translit="on"]) .translit { display: none; }