@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 12.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   12. ARABIC & RTL
   ------------------------------------------------------------
   Three reusable blocks: the ayah block, the hadith block and
   the inline Arabic run. All Arabic sets in Amiri with the
   leading tokens derived from that font's real metrics — see
   the note in tokens.css.
   ============================================================ */

/* -- 12a. Shared Arabic text behaviour ----------------------- */

/* Letter-spacing pulls Arabic letters apart and breaks their joins
   in some browsers, so Arabic never inherits tracking from a label,
   a heading or a row around it. Every Arabic run carries lang="ar".
   Never set letter-spacing on an Arabic element itself: a class
   selector outranks this rule. */
:lang(ar) {
  letter-spacing: normal;
}

.arabic {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  font-weight: var(--weight-regular);
  /* Amiri's own numerals and Arabic-preferred forms. */
  font-variant-numeric: normal;
  font-feature-settings: 'calt' 1, 'liga' 1;
}

/* -- 12b. Inline Arabic run ---------------------------------
   A word or phrase set inside an English sentence. Two things
   keep the diacritics clear of the line above:

     1. The run's own line-height (--leading-arabic-run) is
        held below the surrounding line box, so the run never
        makes the leading ragged.
     2. Any paragraph that contains a run gets extra headroom
        via :has() — the marks then have room whatever their
        height. Browsers without :has() still clear ordinary
        harakat on the body's 1.75 leading.
   ------------------------------------------------------------ */
.arabic-inline {
  font-family: var(--font-arabic);
  font-size: var(--text-arabic-inline);
  line-height: var(--leading-arabic-run);
  direction: rtl;
  unicode-bidi: isolate;
  font-weight: var(--weight-regular);
  /* Sit the run on the Latin baseline rather than letting the
     taller Arabic em box drag it downward. */
  vertical-align: baseline;
}

.arabic-inline--strong {
  font-weight: var(--weight-bold);
  color: var(--colour-heading);
}

/* Give the line the room its marks need. */
.prose p:has(.arabic-inline),
.prose li:has(.arabic-inline),
.lede:has(.arabic-inline) {
  line-height: var(--leading-body-arabic);
}

/* Transliteration convention: italic, with the macrons kept. */
.translit {
  font-style: italic;
  color: var(--colour-text-muted);
}

/* -- 12c. Ayah block -----------------------------------------
   Quran. Cream ground, double warm rule frame echoing the logo
   tiles, deep burgundy Arabic, reference, optional translation.
   ------------------------------------------------------------ */
.ayah {
  position: relative;
  margin-block: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  background-color: var(--cream-100);
  border: var(--rule-hairline) solid var(--cream-400);
  border-radius: var(--radius-tile);
}

/* The inner hairline — the logo's outline within an outline. */
.ayah::after {
  content: '';
  position: absolute;
  inset: var(--space-2xs);
  border: var(--rule-hairline) solid var(--burgundy-100);
  border-radius: calc(var(--radius-tile) - var(--space-3xs));
  pointer-events: none;
}

@media (min-width: 40em) {
  .ayah {
    padding: var(--space-xl) var(--space-lg);
  }
}

.ayah__text {
  margin: 0;
  font-family: var(--font-arabic);
  font-size: var(--text-arabic-block);
  line-height: var(--leading-arabic);
  color: var(--burgundy-900);
  direction: rtl;
  text-align: center;
  /* Let long ayat break naturally rather than justify raggedly. */
  text-wrap: pretty;
}

.ayah__ref {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-heading);
}

/* Thin warm rules flanking the reference. */
.ayah__ref::before,
.ayah__ref::after {
  content: '';
  width: var(--space-lg);
  height: var(--rule-hairline);
  background-color: var(--burgundy-200);
}

.ayah__translation {
  max-width: var(--measure-wide);
  margin: var(--space-md) auto 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
  text-align: center;
  font-style: italic;
}

.ayah__translation cite {
  display: block;
  margin-top: var(--space-2xs);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
}

/* Variant for the inverse band. */
.band--inverse .ayah {
  background-color: transparent;
  border-color: var(--burgundy-800);
}

.band--inverse .ayah::after {
  border-color: var(--burgundy-800);
}

.band--inverse .ayah__text {
  color: var(--cream-200);
}

.band--inverse .ayah__ref {
  color: var(--colour-text-inverse-muted);
}

.band--inverse .ayah__ref::before,
.band--inverse .ayah__ref::after {
  background-color: var(--burgundy-400);
}

.band--inverse .ayah__translation {
  color: var(--colour-text-inverse-muted);
}

/* -- 12d. Hadith block ---------------------------------------
   Paper ground inside a cream frame, with a burgundy rail on
   the inline-start edge. Arabic, then translation, then source.
   ------------------------------------------------------------ */
.hadith {
  margin-block: var(--space-xl);
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  background-color: var(--colour-bg-card-cream);
  border: var(--border-cream);
  border-inline-start: var(--rule-rail) solid var(--burgundy-600);
  border-start-start-radius: var(--radius-none);
  border-end-start-radius: var(--radius-none);
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}

@media (min-width: 40em) {
  .hadith {
    padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
  }
}

.hadith__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-text-meta);
  margin-bottom: var(--space-sm);
}

.hadith__arabic {
  margin: 0;
  font-family: var(--font-arabic);
  font-size: var(--text-arabic-hadith);
  line-height: var(--leading-arabic-hadith);
  color: var(--ink-900);
  direction: rtl;
  text-align: right;
  text-wrap: pretty;
}

.hadith__translation {
  margin: var(--space-md) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--colour-text);
}

.hadith__source {
  display: block;
  margin-top: var(--space-md);
  padding-top: var(--space-xs);
  border-top: var(--rule-hairline) solid var(--cream-400);
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
}

.hadith__grade {
  color: var(--colour-heading);
  font-weight: var(--weight-semibold);
}

/* -- 12e. Full RTL page direction ----------------------------
   Not used by these mockup pages, but the components are
   already logical-property based, so an Arabic edition only
   needs dir="rtl" on <html>.
   ------------------------------------------------------------ */
[dir='rtl'] body {
  font-family: var(--font-arabic);
  line-height: var(--leading-arabic-inline);
}

[dir='rtl'] .link-row__arrow {
  transform: scaleX(-1);
}

[dir='rtl'] .section-head__link::after {
  content: ' \2190';
}