/* =====================================================================
 * 7WFC — Arabic companion face and RTL typography
 *
 * Load after fonts.css and vote.css, on every page, in every language.
 * Everything here is scoped to [dir="rtl"] except the @font-face
 * declarations, which are inert until an Arabic character is rendered.
 *
 * Be Vietnam Pro has no Arabic coverage. Without a declared companion the
 * browser substitutes a system font — Tahoma on Windows, Geeza Pro on
 * macOS, Noto on Android — each with different metrics. The header height
 * then varies by operating system and the card grid loses its rhythm.
 *
 * Chosen face: IBM Plex Sans Arabic.
 *   - SIL Open Font License 1.1, so it can be self-hosted and shipped.
 *     Files are in assets/fonts/, with OFL-ibm-plex-sans-arabic.txt
 *     alongside them as the licence requires. Source: Fontsource 5.3.0.
 *   - weights 100 to 700, matching the four weights Be Vietnam Pro uses
 *     here, so no synthetic bolding
 *   - humanist naskh with low stroke contrast and open counters, which
 *     sits well against Be Vietnam Pro's geometry
 *   - x-height and stem weights close enough that size-adjust below is a
 *     small correction rather than a rescue
 *
 * Alternatives considered, in case N7W has a preference:
 *   Cairo         — more geometric, closer to Be Vietnam Pro's skeleton,
 *                   but lighter in colour; text blocks look washed out
 *                   next to Latin at the same weight
 *   Noto Sans Arabic — widest coverage and the safest fallback, but
 *                   deliberately neutral; adds nothing to the brand
 *   Tajawal       — good display face, weaker at 15.5px body size
 *
 * If the choice changes, only the src and size-adjust below change.
 * ===================================================================== */

/* --- Face -------------------------------------------------------------
 * Declared under the same family name with a unicode-range, so the
 * cascade picks it up automatically for Arabic runs inside otherwise
 * Latin text — a city name in Arabic on an English page, for instance —
 * with no markup change.
 *
 * size-adjust corrects the optical size difference. Arabic glyphs at a
 * given font-size read smaller than Latin ones; without this, Arabic body
 * copy looks a step down from its Latin equivalent. 108% is measured
 * against Be Vietnam Pro at 15.5px and should be re-checked if the Latin
 * face ever changes.
 * -------------------------------------------------------------------- */

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 108%;
  src: url('assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1
                 U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF
                 U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E
                 U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F
                 U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37
                 U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F
                 U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F
                 U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72
                 U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89
                 U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB
                 U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  size-adjust: 108%;
  src: url('assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1
                 U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF
                 U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E
                 U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F
                 U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37
                 U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F
                 U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F
                 U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72
                 U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89
                 U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB
                 U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  size-adjust: 108%;
  src: url('assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1
                 U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF
                 U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E
                 U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F
                 U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37
                 U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F
                 U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F
                 U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72
                 U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89
                 U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB
                 U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  size-adjust: 108%;
  src: url('assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1
                 U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF
                 U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E
                 U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F
                 U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37
                 U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F
                 U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F
                 U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72
                 U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89
                 U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB
                 U+1EEF0-1EEF1;
}

/* --- 1. Letter-spacing must be zero ----------------------------------
 *
 * The single most damaging thing Latin CSS does to Arabic. Arabic is a
 * connected script: letters join along a baseline stroke. Adding tracking
 * pulls the joins apart and produces text that is not merely ugly but
 * genuinely harder to read, and in some renderings breaks the ligatures
 * outright.
 *
 * The reference build sets positive letter-spacing on 19 selectors,
 * mostly small-caps labels at .12em to .24em. All of them are reset here.
 * This is a correction, not a design change: the tracking exists to make
 * uppercase Latin labels breathe, and that reason does not exist in
 * Arabic.
 * -------------------------------------------------------------------- */

[dir="rtl"] .b1,
[dir="rtl"] .b2,
[dir="rtl"] .btn-hdr,
[dir="rtl"] .tsb-btn,
[dir="rtl"] .card-country,
[dir="rtl"] .city-back,
[dir="rtl"] .city-block h3,
[dir="rtl"] .city-hero-badge,
[dir="rtl"] .city-title .ct-loc,
[dir="rtl"] .cp-btn,
[dir="rtl"] .cp-lbl,
[dir="rtl"] .ff label,
[dir="rtl"] .hbadge,
[dir="rtl"] .hdr-counter-lbl,
[dir="rtl"] .logo-txt strong,
[dir="rtl"] .mey,
[dir="rtl"] .mi-loc,
[dir="rtl"] .mob-pill-lbl,
[dir="rtl"] .stat-l {
  letter-spacing: 0;
}

/* Negative tracking on headings is equally wrong in Arabic: it collapses
 * the joins. */
[dir="rtl"] .card-name,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  letter-spacing: 0;
}

/* --- 2. text-transform: uppercase does nothing ------------------------
 *
 * Arabic has no letter case. The declaration is harmless on Arabic glyphs
 * but applies to any Latin fragment inside an Arabic string — a city name
 * kept in Latin script, a URL — and shouts it. Removed.
 *
 * The small-caps label treatment therefore does not exist in Arabic. The
 * labels are differentiated by weight and colour instead, which is what
 * the size and weight bump below is for.
 * -------------------------------------------------------------------- */

[dir="rtl"] .b1,
[dir="rtl"] .b2,
[dir="rtl"] .btn-hdr,
[dir="rtl"] .card-country,
[dir="rtl"] .city-hero-badge,
[dir="rtl"] .cp-btn,
[dir="rtl"] .cp-lbl,
[dir="rtl"] .ct-loc,
[dir="rtl"] .hbadge,
[dir="rtl"] .hdr-counter-lbl,
[dir="rtl"] .mey,
[dir="rtl"] .mi-loc,
[dir="rtl"] .mob-pill-lbl,
[dir="rtl"] .stat-l {
  text-transform: none;
}

/* Losing uppercase costs those labels their visual rank. Weight restores
 * it without touching the Latin build. */
[dir="rtl"] .card-country,
[dir="rtl"] .hdr-counter-lbl,
[dir="rtl"] .mob-pill-lbl,
[dir="rtl"] .cp-lbl,
[dir="rtl"] .stat-l,
[dir="rtl"] .mey {
  font-weight: 700;
}

/* --- 3. Leading -------------------------------------------------------
 *
 * Arabic descenders run deeper than Latin and diacritics sit above the
 * line. At the Latin 1.55 they collide with the line above.
 * -------------------------------------------------------------------- */

[dir="rtl"] body {
  font-size: var(--wfc-size-body-ar);
  line-height: var(--wfc-line-body-ar);
}

[dir="rtl"] .hero-sub,
[dir="rtl"] .msub,
[dir="rtl"] .pn,
[dir="rtl"] .city-block p,
[dir="rtl"] .lock-note {
  line-height: 1.9;
}

/* Small labels need proportionally more, not less. */
[dir="rtl"] .card-country,
[dir="rtl"] .hdr-counter-lbl,
[dir="rtl"] .mob-pill-lbl {
  line-height: 1.6;
}

/* --- 4. Numerals ------------------------------------------------------
 *
 * The brand guide requires the numeral 7 everywhere and forbids spelling
 * it out. Arabic has two numeral systems in current use: Western digits
 * (٧ is Eastern Arabic; 7 is Western) are standard in Morocco, Algeria
 * and Tunisia, while Eastern Arabic-Indic digits are standard in Egypt
 * and the Gulf.
 *
 * The campaign's "7" is a brand mark as much as a number, and it appears
 * in the logo lockup in Latin form. Forcing Western digits keeps the
 * counter, the pip labels and the logo consistent with each other.
 *
 * This is a decision, not a technical necessity. Flagged in OPEN.md: if
 * N7W prefers Eastern Arabic-Indic digits in body copy, remove this rule
 * and the numerals follow the font's default.
 * -------------------------------------------------------------------- */

[dir="rtl"] {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

/* --- 5. Mirroring what CSS cannot mirror on its own -------------------
 *
 * Logical properties handle layout once the build is converted (see
 * AUDIT.md item 2). Three things are not covered by that conversion,
 * because they are content rather than layout.
 * -------------------------------------------------------------------- */

/* Directional glyphs in the copy. The back arrow and the "next" chevron
 * point the wrong way in RTL and must be flipped, not translated. */
[dir="rtl"] .city-back::before,
[dir="rtl"] .b2::before {
  transform: scaleX(-1);
  display: inline-block;
}

/* The search icon is a magnifier with a handle; mirroring it is the
 * convention in RTL interfaces. */
[dir="rtl"] .sw-icon {
  transform: scaleX(-1);
  display: inline-block;
}

/* The checkmark is NOT mirrored. It is a symbol, not a directional
 * indicator, and flipping it reads as an error mark in some contexts.
 * Stated explicitly because "mirror everything" is the usual reflex. */
[dir="rtl"] .card.voted .vote-btn::after {
  transform: none;
}

/* The progress bar fills from the start edge, which is the right edge in
 * RTL. The build animates width from the left. */
[dir="rtl"] .pbar {
  transform: scaleX(-1);
}

/* --- 6. Form fields ---------------------------------------------------
 *
 * Email addresses, phone numbers and URLs stay left-to-right even inside
 * an RTL form. Without this the "@" and the domain reorder visually while
 * the stored value stays correct, which reads as a bug to the voter and
 * produces support tickets that cannot be reproduced.
 * -------------------------------------------------------------------- */

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: right;
}

/* --- 7. Fallback ------------------------------------------------------
 *
 * If the Arabic woff2 files are missing, this is what renders. Named
 * explicitly rather than left to the browser, so a missing font degrades
 * predictably instead of differently on every operating system.
 * -------------------------------------------------------------------- */

[dir="rtl"] body {
  font-family: 'Be Vietnam Pro', 'IBM Plex Sans Arabic',
               'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif;
}