/* ==========================================================================
   Yushuno — storefront webfont
   --------------------------------------------------------------------------
   Latin  : Brooklyn Normal  (brand display face — 114 glyphs, single weight)
   Arabic : IBM Plex Sans Arabic  (covers everything Brooklyn does not)

   Brooklyn has no Arabic glyphs and no ﷼ symbol, so its @font-face is scoped
   with an exact unicode-range taken from the font's own cmap. Any character
   outside that range — Arabic, riyal, box drawing, emoji — automatically
   falls through to IBM Plex Sans Arabic instead of a random system font.

   Paste this file's URL into:
     Theme editor -> إعدادات التخطيط -> الخطوط -> رابط الخط المخصص
   and put  Brooklyn  in  اسم الخط للملف المرفوع
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Brooklyn';
  src: url('https://cdn.jsdelivr.net/gh/mahmoudsaeedua74/Brooklyn-Normal@main/Brooklyn-Normal.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/mahmoudsaeedua74/Brooklyn-Normal@main/Brooklyn-Normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-005D, U+005F, U+0061-007B, U+007D-007E, U+00A1-00A3,
                 U+00A5, U+00A9, U+00AE, U+00B7, U+00BF, U+00D7, U+00F7,
                 U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026,
                 U+20AC, U+2212;
}

/* The theme writes `font-family: 'Brooklyn', sans-serif` on its own, which
   would drop Arabic onto the system UI font. These two rules insert the
   Arabic face into the stack for both the element and the CSS variable that
   the footer and the homepage sections read from. */
:root {
  --ath-body-font-family: 'Brooklyn', 'IBM Plex Sans Arabic', sans-serif !important;
}

html,
body {
  font-family: 'Brooklyn', 'IBM Plex Sans Arabic', sans-serif !important;
}

/* Brooklyn ships one weight and the theme sets `font-synthesis: none` in
   custom-font mode, so bold Latin text renders at 400 no matter what. Give
   headings presence through tracking rather than weight — which is also the
   house style of the logo. */
h1, h2, h3,
.ath-section-title,
.section-title {
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Mixed-language content on an RTL storefront
   --------------------------------------------------------------------------
   The Arabic storefront runs dir="rtl", so a paragraph of English text is
   laid out right-to-left and the browser moves the trailing full stop to the
   START of the line: "…after the moment ends." renders ".after the moment
   ends". It also right-aligns English prose, which reads wrong.

   `unicode-bidi: plaintext` tells the browser to work out each block's
   direction from that block's own first strong character instead of
   inheriting it from the page. English blocks go LTR and left-aligned,
   Arabic blocks stay RTL and right-aligned — automatically, per block.

   That is why the Arabic customer reviews below are in this same list and
   still render correctly: nothing here forces a direction, it only stops
   the page from forcing one.

   Every selector is a field the merchant types content into. Zid's own UI
   strings (cart, checkout, breadcrumbs) are deliberately left alone.
   ========================================================================== */
.hms-slide__title, .hms-slide__desc,
.zbs-kicker, .zbs-title, .zbs-body,
.cps-kicker, .cps-title, .cps-subtitle,
.tpt-kicker, .tpt-title, .tpt-subtitle,
.tm-kicker, .tm-title, .tm-subtitle, .tm-card__text, .tm-card__name,
.sfg-kicker, .sfg-title, .sfg-subtitle, .sfg-item-title, .sfg-item-desc,
.zfs-title, .zfs-item-title,
.zsg__kicker, .zsg__title, .zsg__desc,
.zcg__kicker, .zcg__title,
.cts-kicker, .cts-title, .cts-subtitle, .cts__tile-title,
.cvs-kicker, .cvs-title, .cvs-desc, .cvs-caption,
.ddd__kicker, .ddd__title, .ddd__desc,
.fqs-kicker, .fqs-title, .fqs-desc, .fqs-q__text,
.scg-card__title, .scg-card__cta-text,
.hzb-kicker, .hzv-kicker, .ibs-kicker,
.pd-why__kicker, .pd-why__title, .pd-why__item-title, .pd-why__item-text,
.pd-com__kicker, .pd-com__title,
.pd-accordion__title, .pd-accordion__body, .pd-acc-item__text,
.pd-description-section__title, .pd-description-section__body,
.footer-brand-title, .footer-about-text,
.lw-spotlight__kicker, .lw-spotlight__title, .lw-spotlight__description,
.announcement-text, .announcement-ticker-text,
.product-title, .pc-title {
  unicode-bidi: plaintext;
}