/* ==========================================================================
   canonical-ar.css — consolidated v4 Arabic / RTL overrides, adapted to the sg-seminary
   theme on the COMMERCIAL type stack. Generated by assets/.build-canonical.py
   from /design-export/ (do not hand-edit; regenerate from source).

   Transform (a) FONT REMAP: the export's --sg-font-* roles are aliased below to
   the theme's commercial role tokens (--font-display = Quarto, --font-read = Lyon
   Text, --font-ui = Sohne; AR = Zarid Display / Riwaya / Bukra; Quran = the
   certified mushaf face --font-quran). No libre literals (Quarto/Spectral/Source
   Sans 3/Scheherazade/Readex/Reem Kufi) are emitted.

   Transform (b) TOKEN ALIAS: the export references --sg-* custom properties; the
   theme's tokens.css defines un-prefixed ones. Each --sg-* used by the canonical
   CSS is aliased to the nearest theme token here. Shades/tints the theme does not
   define keep a literal fallback (the export's own value).
   ========================================================================== */
[dir="rtl"] {
  /* --- Color: brand --- */
  --sg-astral: var(--astral);
  --sg-gamboge: var(--gamboge);
  --sg-soft-sand: var(--rule);              /* #E5D3B3 — the sand rule */
  --sg-burnt-umber: #8A5A44;                /* not a theme token — literal */
  --sg-deep-olive: #6B7B52;                 /* literal */
  --sg-slate-gray: #6A757D;                 /* literal */

  /* --- Color: astral shades/tints (export-defined; literal fallbacks) --- */
  --sg-astral-shade-30: var(--astral-700);  /* #22506A == theme --astral-700 */
  --sg-astral-shade-50: #1B4055;
  --sg-astral-shade-70: #13303F;
  --sg-astral-shade-90: #0A1E29;
  --sg-astral-tint-90: #E8EFF2;

  /* --- Color: gamboge shades --- */
  --sg-gamboge-shade-30: #B8810A;
  --sg-gamboge-shade-50: #84600A;

  /* --- Color: sand tints --- */
  --sg-sand-tint-70: #F5ECDA;

  /* --- Color: foreground / ink --- */
  --sg-fg: var(--ink);
  --sg-fg-muted: var(--muted);
  --sg-fg-subtle: var(--subtle);
  --sg-ink-subtle: #5E646B;                 /* AA-safe small-label grey (export) */

  /* --- Color: surfaces --- */
  --sg-bg-alt: var(--paper-alt);

  /* --- Color: status --- */
  --sg-success: #4F7A4A;
  --sg-danger: #A8452F;

  /* --- Type roles (commercial stack via theme --font-*) --- */
  --sg-font-display: var(--font-display);   /* Quarto (EN) / Zarid Display (AR) */
  --sg-font-serif:   var(--font-display);   /* export alias of display */
  --sg-font-read:    var(--font-read);      /* Lyon Text (EN) / Riwaya (AR) */
  --sg-font-body:    var(--font-ui);        /* export legacy alias → UI sans */
  --sg-font-ui:      var(--font-ui);        /* Sohne (EN) / Bukra (AR) */
  --sg-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Arabic faces — commercial roles the theme already uses */
  --sg-font-arabic-display: "Zarid Display", "Riwaya", serif;
  --sg-font-arabic-read:    "Riwaya", serif;
  --sg-font-arabic:         "Bukra", system-ui, sans-serif;   /* AR chrome/UI */
  --sg-font-arabic-wordmark:"Zarid Display", "Bukra", sans-serif; /* AR display role */

  /* --- Shape / motion (export-defined; literal) --- */
  --sg-radius-pill: 999px;
  --sg-shadow-xs: 0 1px 2px rgba(20, 40, 60, 0.06);
  --sg-shadow-sm: 0 2px 8px rgba(20, 40, 60, 0.06);
  --sg-shadow-md: 0 4px 16px rgba(20, 40, 60, 0.08);
  --sg-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== AR / RTL overrides: consolidated from v4_ar.css ===== */

/* ---- begin v4_ar.css ---- */
/* ============================================================================
   v4_ar.css — universal Arabic / RTL foundation
   Loaded AFTER tokens.css + v4.css (+ any page CSS) on every Arabic peer page.

   Strategy: the English pages all draw their headline type from
   --sg-font-display / --sg-font-serif (Quarto). We simply REDEFINE those
   variables to Scheherazade New inside the Arabic body, so every headline on
   every page becomes Arabic display type with zero per-page selectors.
   Body / UI type becomes Readex Pro the same way.
   ========================================================================== */

[dir="rtl"] body.sg-v4 {
  /* swap the display + serif stacks site-wide → Arabic headline face */
  --sg-font-display: '29LT Zarid Display', 'Scheherazade New', 'Readex Pro', serif;
  --sg-font-serif:   '29LT Zarid Display', 'Scheherazade New', 'Readex Pro', serif;
  /* swap the interface stack too → every element that asks for --sg-font-ui /
     --sg-font-body (nav, buttons, labels, badges) becomes the Arabic interface
     face (29LT Bukra · stand-in Readex Pro) instead of the Latin sans. */
  --sg-font-ui:   var(--sg-font-arabic-ui);
  --sg-font-body: var(--sg-font-arabic-ui);
  --sg-font-read: var(--sg-font-arabic-read);   /* reading role flips too — no per-page guard */
  font-family: var(--sg-font-arabic);
  direction: rtl;
}

/* ── READING TYPE (RTL / Arabic) — mirror of the English three-role rule ───
   Parity with EN: long-form Arabic prose DEFAULTS to the READING face
   (29LT Riwaya, full harakat · comp stand-in Scheherazade New). UI chrome that
   happens to use the same tags stays in the interface sans (29LT Bukra · comp
   stand-in Readex Pro). Headings already draw the display face via the
   --sg-font-display redefinition above. Quran keeps --sg-font-quran. */
[dir="rtl"] :is(p, li, blockquote, dd, .lede, .deck) {
  font-family: var(--sg-font-arabic-read);
}
[dir="rtl"] :is(
  .eyebrow, .kicker, [class*="kicker"], [class*="eyebrow"],
  .v4-foot li, .v4-foot li a, .v4-foot p, .v4-nav-items li, .v4-util li, .v4-util p,
  .v4-crumb, .crumb, .meta, .when, .lab, .role, .tag,
  .v4-answer-foot, .v4-answer-foot *,
  .v4-lst-show-meta, .v4-lst-show-teacher, .v4-lst-show-actions *,
  .v4-mc-fchip, .v4-foot-legal, .v4-foot-legal *
) {
  font-family: var(--sg-font-arabic-ui);
}

/* Arabic does not italicise — neutralise every italic the English type set used */
[dir="rtl"] em,
[dir="rtl"] i,
[dir="rtl"] cite,
[dir="rtl"] blockquote,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5,
[dir="rtl"] .eyebrow,
[dir="rtl"] figcaption { font-style: normal; }

/* Scheherazade sits a touch tight by default — give headlines room to breathe */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.34; }

/* ── Numerals, codes, clock times, money: stay LTR ─────────────────────────
   Wrap any Latin-numeral / code / time run in <span class="ltr-numerals"> */
[dir="rtl"] .ltr-numerals {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}
[dir="rtl"] .tabular { font-variant-numeric: tabular-nums; }
/* monospace course codes always read LTR */
[dir="rtl"] .code,
[dir="rtl"] [class*="-code"],
[dir="rtl"] code,
[dir="rtl"] kbd { direction: ltr; unicode-bidi: embed; }

/* ── Directional arrows — every "→ / ←" CTA & link flips in RTL ────────────── */
[dir="rtl"] .v4-btn-link .arrow,
[dir="rtl"] .arrow-flip { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .v4-btn-link:hover .arrow { transform: scaleX(-1) translateX(3px); }

/* search / magnifier glyphs mirror so the handle points the natural way */
[dir="rtl"] .v4-ask-icon,
[dir="rtl"] .search-icon { transform: scaleX(-1); }

/* ── Arabic logo wordmark (replaces the EN <span class="v4-wm">) ───────────── */
[dir="rtl"] .ar-logo {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  font-family: "Riwaya", serif; font-weight: 500;
}
[dir="rtl"] .ar-logo .wm { font-family: var(--sg-font-arabic-wordmark); font-weight: 700; font-size: 27px; color: var(--sg-astral); line-height: 1; }
[dir="rtl"] .ar-logo .wm .guid { color: var(--sg-astral); font-weight: 700; }
[dir="rtl"] .v4-emblem { width: 32px; height: 32px; display: inline-block; flex-shrink: 0; }

/* footer + utility wordmark in Arabic — إرشاد in Reem Kufi */
[dir="rtl"] .v4-foot-wm,
[dir="rtl"] .v4-foot-wm .guid { font-family: var(--sg-font-arabic-wordmark); font-weight: 700; }

/* mobile nav drawer — slides from the left in RTL */
@media (max-width: 720px) {
  [dir="rtl"] .v4-nav-drawer { right: auto; left: 0; transform: translateX(-106%); }
  [dir="rtl"] .v4-nav-check:checked ~ .v4-nav-drawer { transform: none; }
  [dir="rtl"] .v4-nav-burger { margin-right: 0; margin-left: -10px; }
}
[dir="rtl"] .v4-nav-drawer-close { align-self: flex-start; }
[dir="rtl"] .v4-nav-drawer-links a,
[dir="rtl"] .v4-nav-drawer-util { text-align: right; }

/* footer sign-off (colophon) — mirror the verse divider to the right edge */
[dir="rtl"] .v4-foot-verse {
  align-items: flex-start; text-align: right;
  padding-left: 0; padding-right: 60px;
  border-left: none; border-right: 1px solid rgba(245,236,218,0.13);
}
[dir="rtl"] .v4-foot-tag { font-family: var(--sg-font-arabic); }
@media (max-width: 1080px) {
  [dir="rtl"] .v4-foot-verse {
    padding-right: 0; border-right: none;
    padding-top: 32px; border-top: 1px solid rgba(245,236,218,0.13);
  }
}

/* ── Generic accent-border mirroring ───────────────────────────────────────
   A great many cards in v4.css carry a left accent border. Flip the common
   "3px solid accent on the left" pattern to the right edge for RTL. Pages with
   bespoke borders still add their own override in their <style> block. */
/* door-proof accent is now a top-rule (direction-neutral) — no RTL flip needed */

/* prayer-rail city pin spacing */
[dir="rtl"] .v4-today-prayer .city::after { margin-left: 0; margin-right: 6px; }

/* lists: bullets / markers sit on the right automatically via dir=rtl, but
   any padding-left used for custom bullets should mirror */
[dir="rtl"] .v4-foot ul { padding: 0; }

/* keep Latin brand fragments (EN in the language toggle, EINs) upright */
[dir="rtl"] .keep-ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ---- end v4_ar.css ---- */