/* Arabic pages of a client's website (front end v2, batch 5 = H9). Loaded after the design's own CSS, only on /ar
   pages (<html lang="ar" dir="rtl">). The layout mirrors by itself (the designs use logical properties: margin-inline,
   inset-inline, text-align: start). This file sets the Arabic type and the few things that don't mirror on their own.
   Fonts (SIL OFL 1.1, see /assets/fonts/ar/README.txt): Amiri for Atelier and Silver headings (the calligraphic
   contrast that goes with Prata), Readex Pro for text everywhere and Noir's headings (geometric, like Jost).
   unicode-range: Latin words (a business name, a brand) keep the design's own fonts; Arabic letters use these. */

@font-face { font-family: "Amiri BP"; src: url("/assets/fonts/ar/amiri-ar.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Readex BP"; src: url("/assets/fonts/ar/readex-pro-ar.woff2") format("woff2"); font-weight: 160 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root {
  --serif: "Prata", "Amiri BP", Georgia, serif;
  --sans: "Libre Franklin", "Readex BP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Jost", "Readex BP", "Futura", system-ui, sans-serif;
}

/* Arabic letters join: never spread them apart. Upper case means nothing in Arabic (Latin words keep it). */
html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: normal !important; }
body { line-height: 1.85; }
p, li, dd { line-height: 1.85; }

/* headings: Arabic needs taller lines than Latin (dots and marks above and below) */
h1, h2, h3 { line-height: 1.4; }
.d-atelier h1, .d-silver h1 { line-height: 1.3; }
.d-noir h1, .d-noir h2, .d-noir h3 { line-height: 1.3; font-weight: 600; }
.d-noir .s-brand { font-weight: 600; }

/* small labels (eyebrows, kickers, footer headings): a little bigger, Arabic is smaller to the eye at the same size */
.s-eyebrow, .s-kicker, .s-foot__h, .s-facts span, .s-menu__group h3 { font-size: .9rem; }
.s-badge { font-size: .74rem; }
.s-nav { font-size: 1rem; }
.d-noir .s-nav { font-size: .95rem; }
.s-about__lead { line-height: 1.6; max-width: 30ch; }
.s-lede--story { line-height: 1.7; }

/* a business name in Latin letters ("Ember & Blade Barbers") keeps its own word order when it wraps */
.s-hero h1, .s-foot__name, .s-brand > span { unicode-bidi: plaintext; text-align: right; }

/* things that point: the forward arrow turns round */
.s-ic--fwd { transform: scaleX(-1); }
.s-menu__open:hover .s-ic--fwd { transform: scaleX(-1) translateX(3px); }

/* the big first letter of a story is a Latin idea: Arabic letters join, so no drop cap */
.s-story__body p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }

/* "Today" next to today's opening hours */
.d-atelier .s-hours__table tr.is-today th::after, .d-silver .s-hours__table tr.is-today th::after { content: "اليوم"; }

/* contact details written left to right still line up with the Arabic around them */
.s-contact a[dir="ltr"] { text-align: right; }

/* phone numbers, emails, web addresses typed by visitors read left to right */
.s-form input[type="tel"], .s-form input[type="email"], .s-form input[name="contact"] { direction: ltr; text-align: right; }

/* Noir: the soft light in the corner moves to the other side */
.d-noir .s-phero { background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.06), transparent 60%), var(--bg); }

/* the language switch shows "English" in the design's Latin face */
.s-lang { font-family: var(--sans); }