/* =====================================================================
 * Arapsko pismo.
 *
 * Učitava se samo na arapskoj verziji sajta, poslije preokrenutih (.rtl)
 * stilova. Ovaj fajl se piše ručno — rtlcss ga ne dira, jer ovdje nema šta
 * da se preokreće.
 *
 * NotoSans koji sajt inače koristi nema arapske glifove, pa bi bez ovoga
 * pregledač posegnuo za sistemskim fontom: drugačija debljina, drugačija
 * visina reda i razmak koji se ne slaže sa ostatkom dizajna. Noto Sans
 * Arabic je isto Noto pismo, pa uz latinicu stoji kao rođeno.
 *
 * Fajlovi su TTF, ne WOFF2 — isti oni koje koristi i izvoz PDF-a
 * (resources/fonts/noto-arabic), pa se ne drže dvije verzije istog fonta.
 * Veći su za oko 100 KB po rezu; to je cijena jednog fonta, ne razloga za
 * drugu kopiju koja se razilazi.
 * ===================================================================== */

@font-face {
    font-family: 'NotoSansArabic';
    src: url('../fonts/NotoSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NotoSansArabic';
    src: url('../fonts/NotoSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Latinica ostaje prva u nizu: reference oglasa (CMM-1234), „m²", e-mail
   adrese i brojevi tako zadržavaju izgled koji imaju na ostalim jezicima, a
   arapski tekst pada na Noto Sans Arabic. */
[dir='rtl'] body,
[dir='rtl'] input,
[dir='rtl'] textarea,
[dir='rtl'] select,
[dir='rtl'] button {
    font-family: 'NotoSans', 'NotoSansArabic', Arial, sans-serif;
}

/* Arapsko pismo ima veće nadredne i podredne znakove od latinice, pa mu
   zbijeni redovi iz osnovnog dizajna sijeku dijakritike. */
[dir='rtl'] p,
[dir='rtl'] li,
[dir='rtl'] .text {
    line-height: 190%;
}

[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] h4 {
    line-height: 150%;
}

/* Razmak između slova je latinična tipografska odluka; u arapskom razdvaja
   slova koja se moraju spajati i tekst postaje nečitljiv. */
[dir='rtl'] body,
[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] h4,
[dir='rtl'] .title span,
[dir='rtl'] .btn,
[dir='rtl'] .btn-green,
[dir='rtl'] .btn-white {
    letter-spacing: 0;
}

/* Brojevi i cijene ostaju u zapadnim ciframa i čitaju se slijeva nadesno.
   Bez ovoga se „€250,000" u arapskom pasusu prelomi na pogrešnu stranu. */
[dir='rtl'] .property-price,
[dir='rtl'] .price,
[dir='rtl'] .p-location,
[dir='rtl'] .property-spec {
    direction: ltr;
    text-align: right;
}

/* Zastavice u biraču jezika i telefonskom polju su slike, ne tekst — smjer
   im se ne preokreće. */
[dir='rtl'] .fi,
[dir='rtl'] .iti__flag {
    direction: ltr;
}

/* Strelica „otvara se u novom tabu" pokazuje gore-desno, u smjeru čitanja.
   Na arapskom se čita zdesna nalijevo, pa se i ona okreće. Ovo rtlcss ne umije
   sam — slike i putanje u SVG-u ne prevrće. */
[dir='rtl'] .external-icon {
    transform: scaleX(-1);
}