/*
 * EW RTL Commentary — Arabic stylesheet
 *
 * Canonical source: EW_Translation_2026/prior-translations/ar/20260413_fix/01-01-ht-ar.html
 * Hanging-indent rule source: EW_Translation_2026/tools/02i_fix_arabic_bullets_and_inline_commentary.py
 *   (Fix E: fix_inject_hanging_indent_css)
 *
 * All rules are scoped under .ew-ar-commentary because the import pipeline
 * wraps chapter content in:
 *   <div dir="rtl" lang="ar" class="ew-ar-commentary">...</div>
 * This prevents the rules from leaking into surrounding WordPress chrome
 * (theme header, footer, sidebar, nav, etc.).
 */

/* ─── Google Fonts ────────────────────────────────────────────────────── */
/* Lato + Karla + Merriweather, full weight stack with display=swap so
 * Arabic body text remains visible while the Latin fallback fonts load.
 * Stack mirrors the canonical-normalized HTML head; weights extended to
 * 300/400/500/600/700/900 for headings vs. body. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700;900&family=Karla:wght@300;400;500;600;700&family=Merriweather:wght@300;400;500;600;700;900&display=swap');

/* ─── Container ───────────────────────────────────────────────────────── */
.ew-ar-commentary {
    direction: rtl;
    text-align: right;
    font-size: 1.1em;
    line-height: 1.6;
}

/* ─── Headings & body typography ──────────────────────────────────────── */
.ew-ar-commentary h1 {
    font-size: 2em;
    margin-bottom: 1.5em;
}

.ew-ar-commentary h3 {
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.ew-ar-commentary h4 {
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.ew-ar-commentary p {
    margin-bottom: 1em;
}

.ew-ar-commentary em {
    font-style: italic;
}

.ew-ar-commentary strong {
    font-weight: bold;
}

/* ─── Hanging indent (Fix E) ──────────────────────────────────────────── */
/* Native WordPress <ol>/<ul> rendering gives paragraphs a hanging indent —
 * the marker (١., ٢., •, ✓) sits outside the text block, and wrapped lines
 * align with the body text of the first line. The Arabic corpus uses
 * <p style="padding-right: Npx;"> with the marker inline, which by default
 * renders as a block indent (all lines align with the marker).
 *
 * Negative text-indent in RTL pulls the first line outward into the
 * padding-right gutter, yielding the hanging-indent effect across all
 * indent levels (30px numbered commentary, 60px sub-points, 90px quote
 * markers). Mirrors the rule injected by Fix E in
 * 02i_fix_arabic_bullets_and_inline_commentary.py. */
.ew-ar-commentary p[style*="padding-right"] {
    text-indent: -1.5em;
}

/* ─── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ew-ar-commentary {
        padding: 10px;
    }
}