/* ==========================================================================
   Sadara — right-to-left overrides
   Loaded only by the Arabic mirror, after main.css.

   main.css is largely written with logical properties already, so this file
   handles the three things that cannot be: the Arabic typeface, the handful
   of physical directions still in the codebase, and the assets whose artwork
   itself has a direction (arrows, the gold flow divider, slider controls).
   ========================================================================== */

@font-face {
  font-family: "Plex Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-arabic-arabic-400.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-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Plex Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-arabic-arabic-500.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-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Plex Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plex-arabic-arabic-600.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-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Plex Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/plex-arabic-arabic-700.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-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEBB, U+1EEF0-1EEF1;
}

/* Arabic first, Manrope second: Latin runs inside Arabic copy — programme
   titles, IWCF, NEBOSH — keep the brand face by falling through. */
:root {
  --font-body: "Plex Arabic", "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-display: "Plex Arabic", "Manrope", "Segoe UI", system-ui, sans-serif;
}

/* Arabic has no capitals and a taller x-height; the Latin tracking and
   uppercase treatments read as damage rather than emphasis. */
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.45; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-search__gh,
[dir="rtl"] .site-footer h4 {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- flipped physical directions ---------- */
[dir="rtl"] .skip-link { left: auto; right: 1rem; }
[dir="rtl"] .course-search svg { left: auto; right: 0.95rem; }
[dir="rtl"] .course-search input { padding-left: 1rem; padding-right: 2.7rem; }
[dir="rtl"] .cat-row__n { text-align: left; }
[dir="rtl"] .cat-toolbar [data-cat-count] { margin-inline-start: auto; }
[dir="rtl"] .wa { right: auto; left: 1.25rem; }
/* .nav-menu centres itself with left:50% + translate:-50% 0. Overriding
   `left` alone leaves the translate in place, so the panel opened half its
   own width to the left of the item. Reset both, like .langs__menu does. */
[dir="rtl"] .nav-menu { left: auto; right: 0; translate: 0 0; }
[dir="rtl"] .hero-search__opt { text-align: right; }

/* ---------- artwork that itself points somewhere ---------- */
[dir="rtl"] .arrow,
[dir="rtl"] .card__link .arrow,
[dir="rtl"] .btn .arrow,
[dir="rtl"] .hero__nav svg {
  transform: scaleX(-1);
}
[dir="rtl"] .hero-search__more { direction: rtl; }

/* The gold flow divider is a directional dune profile — mirror it so the
   crest still rises towards the reading edge. */
[dir="rtl"] .cta-band,
[dir="rtl"] .band--petrol { background-position-x: right, 0, 0; }

/* Numerals stay Western (the client's documents use them) and counts must not
   be re-ordered by the bidi algorithm when they sit next to Arabic. */
[dir="rtl"] .badge,
[dir="rtl"] .cat-row__n,
[dir="rtl"] .disc-card__stats,
[dir="rtl"] .stat__n,
[dir="rtl"] .course-count {
  unicode-bidi: isolate;
}

/* Programme titles and awarding-body names remain English inside Arabic
   copy — isolate them so punctuation does not jump to the wrong end. */
[dir="rtl"] .cat-row__name,
[dir="rtl"] .pill,
[dir="rtl"] .acc-card__mark,
[dir="rtl"] .course-cat li > span:first-child {
  unicode-bidi: isolate;
  text-align: start;
}

/* ---------- language switcher ---------- */
[dir="rtl"] .langs__menu { left: auto; right: 0; translate: 0 0; }