/* ============================================================================
   Doha MUN — right-to-left corrections

   Loaded only on the Arabic page. It is short on purpose: dohamun.css is written
   in logical properties throughout — padding-inline, inset-inline-start,
   margin-block, transform-origin: inline-start — so the whole layout mirrors
   without being restated. What is left here is the set of things logical
   properties genuinely cannot express, plus two Arabic typesetting corrections
   that are not about direction at all.
   ============================================================================ */

/* ---- 1. Letter-spacing --------------------------------------------------- */

/* The most damaging thing an English-built stylesheet does to Arabic.

   Arabic is cursive: letters join, and the joins are part of the letterform, not
   space between letters. Any letter-spacing value — and the display headings here
   carry -0.025em — is applied *between joined glyphs*, so the connections stretch
   or break and the word stops looking like a word. Latin tracking has no Arabic
   equivalent, so the answer is not a smaller value, it is none. */
.dm-lang-ar :is(h1, h2, h3, h4, h5, h6),
.dm-lang-ar .dm-hero-title,
.dm-lang-ar .dm-bititle,
.dm-lang-ar .dm-stat-value,
.dm-lang-ar .dm-placard-abbr,
.dm-lang-ar .dm-countdown-value {
    letter-spacing: normal;
}

/* Naskh needs more room between lines than Latin does: the ascenders and the dot
   groups below the baseline collide at Latin leading. */
.dm-lang-ar :is(h1, h2, h3) { line-height: 1.35; }
.dm-lang-ar .dm-hero-title { line-height: 1.28; }

/* The English half of a bilingual heading keeps its Latin serif and its Latin
   tracking — it is Latin. */
.dm-lang-ar .dm-bititle-secondary {
    font-family: var(--font-serif-display);
    letter-spacing: var(--tracking-normal);
    direction: ltr;
}

/* ---- 2. Directional transforms ------------------------------------------- */

/* transform: translateX() is physical, not logical: 4px is 4px to the right in
   both directions. Every arrow that nudges on hover has to be flipped, and the
   arrow glyph itself has to point the other way.

   scaleX(-1) first, then the translate — inside a flipped coordinate system a
   positive translateX moves the glyph visually leftward, which is the direction
   of travel here. */
.dm-lang-ar .dm-inline-arrow,
.dm-lang-ar .qf-btn svg[viewBox="0 0 24 24"] {
    transform: scaleX(-1);
}

.dm-lang-ar .dm-textlink:hover .dm-inline-arrow,
.dm-lang-ar .dm-timeline-title a:hover .dm-inline-arrow {
    transform: scaleX(-1) translateX(4px);
}

.dm-lang-ar .qf-btn.dm-btn-lg:hover svg { transform: scaleX(-1) translateX(4px); }

/* ---- 3. Marquee ----------------------------------------------------------- */

/* The track is laid out left-to-right whatever the page direction, because the
   -50% loop depends on the two halves sitting in a known order. The phrases inside
   are isolated back to RTL so each one still shapes and orders correctly.

   The animation is reversed rather than re-written: the same keyframes played
   backwards move the strip rightward, so new text enters from the leading edge for
   an Arabic reader instead of trailing off it. */
.dm-lang-ar .dm-marquee-track {
    direction: ltr;
    animation-direction: reverse;
}

.dm-lang-ar .dm-marquee-item,
.dm-lang-ar .dm-marquee-dot {
    direction: rtl;
    unicode-bidi: isolate;
}

/* ---- 4. Things that must not mirror --------------------------------------- */

/* A floor plan is a map of a real building. Mirroring it would put the General
   Assembly hall on the wrong side of the campus, which is the one kind of error
   a reader acts on. */
.dm-lang-ar .dm-plan { direction: ltr; }
.dm-lang-ar .dm-plan-label { direction: rtl; }

/* The SDG wheel is drawn from an angle formula and is radially symmetric, but its
   numeral is Latin — the goal is called "17" in every UN language. */
.dm-lang-ar .dm-wheel-num { direction: ltr; }

/* The countdown reads days-hours-minutes-seconds in both languages: it is a
   duration counting down, and reversing it puts seconds first. */
.dm-lang-ar .dm-countdown-units { flex-direction: row; }

/* ---- 5. Hero ------------------------------------------------------------- */

/* The scrim's radial highlight is positioned at 20% across, under where the
   headline starts. On the Arabic page the headline starts at the other edge. */
.dm-lang-ar .dm-hero-scrim {
    background:
        linear-gradient(to bottom, var(--surface-page) 0%, transparent 24%, transparent 60%, var(--surface-page) 100%),
        radial-gradient(120% 90% at 80% 45%,
            var(--surface-page) 0%,
            color-mix(in srgb, var(--surface-page) 74%, transparent) 40%,
            transparent 74%);
}

/* translateX(-50%) centres by moving left; in RTL the element's own box origin is
   already on the right, so the sign is unchanged — but the property is physical,
   so it is restated here to make that explicit rather than accidental. */
.dm-lang-ar .dm-hero-scroll { transform: translateX(-50%); }

/* ---- 6. Numerals ---------------------------------------------------------- */

/* Arabic-Indic digits are rendered by dm_num() and by motion.js. tabular-nums
   still applies — the countdown must not reflow every second — but the Latin
   fallback face has no Arabic-Indic glyphs, so the stack has to lead with the
   Arabic face wherever digits appear on their own. */
.dm-lang-ar :is(.dm-countdown-value, .dm-stat-value, .dm-topics-n, .dm-step-n, .dm-tri-n) {
    font-family: var(--font-arabic);
    font-variant-numeric: tabular-nums;
}