/* Arabic. Loaded only when the language is right-to-left.
   travnik.css is written with logical properties (margin-inline, inset-inline,
   border-inline-start, padding-block) throughout, so the layout mirrors itself
   and this file only has to handle the handful of things that cannot be
   expressed logically: the script, and glyphs that must stay left-to-right. */

body{
  font-family:"Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  /* Arabic runs taller and needs more room between lines to stay readable */
  line-height:1.9;
}
h1,h2,h3,h4{
  font-family:"Noto Kufi Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  letter-spacing:0;           /* negative tracking mangles joined Arabic script */
  line-height:1.45;
}
.kicker{letter-spacing:0}
.site-foot h4{letter-spacing:0}
.facts dt{letter-spacing:0}

/* Numerals, prices, phone numbers, coordinates and URLs stay left-to-right
   even inside a right-to-left sentence. */
.ltr,time,.price,.tel,.coord,code,kbd{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* The gradient in the brand mark is directional; mirror it so the blue stays
   on the leading edge in both scripts. */
.brand-mark{background:linear-gradient(210deg,var(--blue) 0 45%,var(--ochre) 45% 100%)}

/* The hero's decorative glow sits on the trailing side in LTR; move it. */
.hero::after{
  background:
    radial-gradient(120% 90% at 22% 12%,rgba(200,135,59,.30),transparent 55%),
    linear-gradient(200deg,rgba(8,39,51,.90),rgba(29,111,150,.72));
}

/* An arrow that means "onward" points the other way in Arabic. */
.btn .arrow, .more-arrow{transform:scaleX(-1)}