/* =====================================================================
   ARABIC AND RIGHT TO LEFT
   =====================================================================

   Loaded only when is_rtl() is true, so nothing here costs the English site a byte.

   Almost nothing in this file is a direction flip. The main stylesheet was written in
   logical properties from the start (margin-inline, inset-inline-start, text-align:
   start), so the layout mirrors on its own the moment dir="rtl" is set. An audit of all
   four stylesheets found exactly one margin-left, one text-align: right, and four
   physical border-radius values, and the first two were inside comments.

   What this file is actually for is typography. Arabic is not English in another
   direction: it has no capital letters, no small caps, joins its letters, sits lower
   against the baseline, and is destroyed by letter-spacing. Those are the real changes.
   ===================================================================== */

/* --------------------------------------------------------------- typefaces */

/* Mirrors the English pairing rather than replacing it with one font doing both jobs:
   a naskh carries the display voice that Georgia carries in English, and a humanist sans
   carries the text voice that system-ui carries. The Latin fallbacks stay in the stack
   because these pages still contain Latin: AED, UAE PASS, the phone number, and the
   gazette citations. */
[dir="rtl"] {
	--pn-font-display: "Noto Naskh Arabic", "Noto Naskh Arabic UI", "Geeza Pro",
		"Segoe UI", Georgia, serif;
	--pn-font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro",
		system-ui, -apple-system, "Segoe UI", sans-serif;
	--pn-font-heading: var(--pn-font-display);

	/* Digits stay Latin. Dubai Courts publishes its fee schedule in Latin numerals, the
	   invoices use them, and AED 1,000 written as ١٬٠٠٠ would not match the document the
	   visitor is holding. This is a deliberate localisation choice, not an oversight. */
	--pn-font-numeric: var(--pn-font-body);
}

/* ------------------------------------------------------------- letterforms */

/* The single most damaging thing you can do to Arabic. Arabic letters join, and
   letter-spacing breaks the joins apart, so a spaced Arabic word renders as a row of
   disconnected shapes that a reader has to decode letter by letter. Every eyebrow,
   button, table header and nav label in this design carries tracking, so all of it is
   reset here rather than in twenty separate places. */
[dir="rtl"] * {
	letter-spacing: normal;
}

/* Arabic has no letter case, so uppercase is a no-op that still costs a repaint, and
   small-caps falls back to synthesised nonsense. Both are turned off, and the labels
   that relied on caps for hierarchy get weight and colour instead, which is how Arabic
   typography has always marked emphasis. */
[dir="rtl"] * {
	text-transform: none;
	font-variant-caps: normal;
}

[dir="rtl"] .pn-wizard__label,
[dir="rtl"] .pn-card__label,
[dir="rtl"] .entry-content .pn-fee-table th,
[dir="rtl"] .pn-stats__list > li > strong,
[dir="rtl"] .pn-eyebrow {
	font-weight: 700;
}

/* Arabic sits taller and lower than Latin at the same size: it has deep descenders and
   the marks sit above. The English leading is too tight for it. */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] li {
	line-height: 1.85;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
	line-height: 1.45;
}

/* Naskh reads small at the same nominal size, because the letterforms use less of the
   em box vertically than Latin does. A small lift keeps the measured reading size level
   with the English side rather than making Arabic the harder page to read. */
[dir="rtl"] {
	font-size: 1.03em;
}

/* ------------------------------------------------------- direction fixes */

/* The four physical radii in the main stylesheet. Each belongs to a component with an
   accent rule down its starting edge: square against the rule, rounded away from it.
   `border-inline-start` already flips; the radius did not follow it, so in Arabic the
   rounding landed on the same side as the rule and the component looked chipped. Logical
   radius properties flip with the writing mode. */
[dir="rtl"] .pn-card__fee,
[dir="rtl"] .pn-contact,
[dir="rtl"] .pn-callout,
[dir="rtl"] .pn-confirm {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: var(--pn-radius);
	border-end-end-radius: var(--pn-radius);
}

/* The hero photograph's overlay is a directional gradient: darkest where the text is,
   clearing where the wizard card sits. Both of those swap sides in Arabic, so the
   gradient has to swap with them or the text would sit over the bright end. */
[dir="rtl"] .pn-imageband::before {
	background:
		linear-gradient(260deg, rgba(10, 32, 54, 0.92) 0%, rgba(10, 32, 54, 0.78) 36%,
			rgba(10, 32, 54, 0.38) 70%, rgba(10, 32, 54, 0.18) 100%);
}

/* An arrow means "forward", and forward is leftward in Arabic. The glyphs are mirrored
   rather than swapped for different glyphs, so there is one icon to maintain. */
[dir="rtl"] .pn-wizard__next svg,
[dir="rtl"] .pn-btn svg,
[dir="rtl"] .pn-post-foot__actions svg,
[dir="rtl"] .pn-sitecta a svg {
	transform: scaleX(-1);
}

/* --------------------------------------------------------- header order */

/* The logo goes back to the start of the header. See the long note in the patch that
   introduced this: GeneratePress mirrors its alignment class for RTL and puts order: -5
   on the navigation, which in an already-RTL flex container flips the header a second
   time and lands it back in the Latin arrangement.

   Ordering the branding rather than unsetting their rule, because the number they use is
   theirs to change. -10 wins against -5 and against anything else they are likely to
   pick, and it says what it means: the brand comes first. */
[dir="rtl"] .site-header .inside-header > .site-branding {
	order: -10;
}

/* GeneratePress pushes the navigation away from the branding with `margin-left: auto`,
   measured resolving to 81px of free space. Left is the end side in English and the start
   side in Arabic, so the auto margin has to move with the writing mode or the menu is
   pushed back towards the logo instead of away from it. */
[dir="rtl"] .site-header .inside-header > .main-navigation {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

/* The mobile header puts the toggle in its own wrapper next to the branding. Same
   reasoning, same fix, so the logo stays at the start on a phone too. */
@media (max-width: 768px) {
	[dir="rtl"] .site-header .inside-header > .main-navigation.mobile-menu-control-wrapper {
		margin-inline-start: auto;
		margin-inline-end: 0;
	}
}

/* --------------------------------------------------------- mixed content */

/* Latin runs inside Arabic text: AED 1,000, UAE PASS, the phone number, the gazette
   issue. Without an isolate the bidirectional algorithm can drag adjacent Arabic
   punctuation into the Latin run and put a full stop at the wrong end of the sentence.
   `unicode-bidi: isolate` on the inline elements that carry them fences each run. */
[dir="rtl"] :is(a[href^="tel:"], a[href^="mailto:"], code, .pn-fee, time) {
	unicode-bidi: isolate;
}

/* Phone numbers must not be mirrored. A tel: link is a Latin number in an Arabic
   sentence and it has to read left to right whatever surrounds it. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .pn-foot__contact a[href^="tel:"] {
	direction: ltr;
	unicode-bidi: embed;
}

/* Fee figures keep Latin digits and Latin ordering. AED 15,000 reads the same in both
   languages and must not be reordered by the bidi algorithm. */
[dir="rtl"] .entry-content .pn-fee-table td:last-child,
[dir="rtl"] .pn-card__fee {
	unicode-bidi: isolate;
}

/* The switcher's own styles live in pn-skin.css, not here. This file loads only on
   Arabic pages, and the switcher is in the header of both languages. */