/* =============================================================================
   dns-rtl.css
   The Arabic route. Enqueued only when is_rtl().

   WHAT THIS FILE IS NOT
   It is not a mirroring pass. dns-skin.css is written entirely in logical
   properties, so the layout already flips: grid column order follows writing
   direction, margin-inline-start moves, text-align: start moves. On site 1 an
   audit of four stylesheets after the whole English build found exactly one
   margin-left, one text-align: right and four physical radii. That is what
   logical properties buy.

   WHAT ARABIC ACTUALLY NEEDS IS TYPOGRAPHY, and it is these four things:

     1. letter-spacing reset to normal on everything. Tracking breaks Arabic
        letter joining and turns a joined word into disconnected shapes. This
        is the single most damaging thing you can do to Arabic text, and it
        still looks like text at a glance, so it survives review.
     2. text-transform off. Arabic is unicameral, it has no case, so any
        inherited uppercase is meaningless and can break shaping.
     3. More line height. Arabic carries marks above and below the baseline
        and needs the room.
     4. Larger body size. Amiri sets small relative to its em compared with
        Literata, so 1rem in Arabic reads smaller than 1rem in English.

   This design has no uppercase anywhere in the Latin route, deliberately, so
   rule 2 has almost nothing to undo. That was a design decision taken to make
   the Arabic route cheaper, not an accident.
   ========================================================================== */


/* --- Arabic type faces ---------------------------------------------------
   Reem Kufi (display) and Amiri (reading text) were the faces here until the
   client reported the display face unreadable. Both are gone, @font-face
   blocks included, not just unreferenced: Reem Kufi is a Kufic display face,
   angular and disjointed at heading sizes rather than merely decorative, and
   Amiri is a heavy Bulaq press Naskh revival that reads as a different
   register of Arabic to a screen reader used to plain text. Neither ever
   needed to be reached for. dns-fonts.css already self hosts Noto Sans
   Arabic, a plain variable sans with a measured metric matched fallback, and
   dns-tokens.css already names it in --dns-font-display-ar and
   --dns-font-text-ar. Nothing before this fix ever read those two tokens,
   which is the actual bug: the family reassignment below pointed at Reem Kufi
   and Amiri instead of the pair already built for exactly this route.
   ------------------------------------------------------------------------ */


/* =============================================================================
   Family reassignment.

   Component CSS never names a family, it reads these two properties, so this
   single block switches the whole site's typography for the Arabic route.
   Both now point at the one already self hosted, unstyled Arabic face.
   ========================================================================== */

:root {
	--dns-font-display: var(--dns-font-display-ar);
	--dns-font-text: var(--dns-font-text-ar);
}


/* =============================================================================
   Arabic typography.

   Written at (0,0,0) through :where() wherever it is a region default, and at
   ordinary specificity only where it must beat a component that sets tracking.
   ========================================================================== */

/* 1 and 2. Tracking and case. Applied to everything, including the elements
   that carry a tracking token in the Latin route. This has to win against the
   component rule that set it, so it names the component classes explicitly
   rather than relying on a bare element selector. */
:where([lang="ar"], [dir="rtl"]) * {
	letter-spacing: normal;
	text-transform: none;
}

.dns-eyebrow,
.dns-gutter__ref,
.dns-index__lab,
.dns-roll__ref,
.dns-leaf__meta,
.dns-parallel__lang,
.dns-btn,
.dns-docket__n {
	letter-spacing: normal;
	text-transform: none;
}

/* 3 and 4. Line height and size. Arabic carries marks above and below the
   baseline regardless of which face draws them, so both step up here. Sized
   for Noto Sans Arabic against Familjen Grotesk and Public Sans; recheck by
   eye against the Latin route if the Arabic face ever changes again. */
:where(body) {
	font-size: 1.1875rem;
	line-height: 1.95;
}

:where(body) h1,
:where(body) h2,
:where(body) h3,
:where(body) h4 {
	line-height: 1.42;
	font-weight: 600;
}

:where(body) h1 { font-size: clamp(2.25rem, 1.5rem + 3.3vw, 4.25rem); }
:where(body) h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); }
:where(body) h3 { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); }

:where(body) li { margin-block-end: var(--dns-s3); }

/* Cards gain a little block padding so the taller Arabic line does not crowd
   the head rule. */
.dns-leaf { padding-block: var(--dns-s7) var(--dns-s7); }
.dns-leaf__head { margin-block-start: calc(var(--dns-s7) * -1); padding-block-start: var(--dns-s7); }

/* =============================================================================
   Digits.

   Latin digits everywhere, on both routes, because the gazette, the trade
   licence and the invoice all use them, and a licence number in Arabic-Indic
   digits cannot be copied into a government form.

   Any run of digits inside Arabic prose is wrapped by the builder in an
   explicit LTR span, so the bidi algorithm cannot reorder a phone number or a
   reference. This rule styles that span.
   ========================================================================== */

.dns-ltr {
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--dns-font-display);
	font-variant-numeric: tabular-nums;
}

/* =============================================================================
   The one thing logical properties genuinely cannot flip.

   A directional glyph has to be mirrored by hand. An arrow pointing at the
   next step must point the other way in a right to left reading order. A seal
   or a mark is NOT directional and must not be mirrored, because a mirrored
   seal looks broken to an Arabic reader exactly as it would to a Latin one.
   ========================================================================== */

.dns-arrow { display: inline-block; transform: scaleX(-1); }