/* ==========================================================================
   ZULTIV - right to left
   --------------------------------------------------------------------------
   Loaded only by the Arabic pages, after style.css. dir="rtl" on <html> does
   the heavy lifting on its own: text direction, flex and grid flow, table
   column order, list markers and scrollbar side all mirror for free. What is
   left is the handful of places where the main stylesheet names a physical
   side, and those are enumerated here rather than fixed with a blanket
   transform, so nothing gets mirrored that should not be.

   Deliberately NOT mirrored:
     - the logo and the wordmark, which are a fixed lockup
     - social and brand icons, which are recognised shapes
     - the check and tick masks, which are symmetric enough to read either way
     - numbers, dates, phone numbers and standard names (ISO/IEC 27001),
       which the browser's bidi algorithm already keeps left to right inside
       an Arabic sentence
   ========================================================================== */

/* -- type -------------------------------------------------------------------
   Plus Jakarta Sans and Inter have no Arabic coverage, so an Arabic page
   would fall through to whatever the device happens to have. IBM Plex Sans
   Arabic is picked to match: same humanist skeleton, same open apertures,
   and it ships a real bold, which the headings depend on. Latin text inside
   an Arabic sentence still lands on the Latin faces because they are listed
   after it and the Arabic face has no Latin glyphs to claim. */
[dir="rtl"] {
  --font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Arabic sits lower and taller in the line than Latin, and the display face
   is set tight for English. Give it room back or the diacritics clip. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { line-height: 1.35; }
[dir="rtl"] body { line-height: 1.85; }

/* Arabic has no case, so the uppercase eyebrow treatment does nothing except
   add letter spacing that breaks the joins between letters. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .kicker,
[dir="rtl"] .section-label { text-transform: none; letter-spacing: 0; }

/* -- lists ---------------------------------------------------------------- */
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.15em; }
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.3em; }

/* -- header ---------------------------------------------------------------- */
/* .nav centres itself with margin-inline:auto (style.css section 35), which is
   already direction-neutral. The old physical override re-pinned it to one
   side and would have put Arabic back to a lopsided row. */
[dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mega-col a { transition: background .18s var(--ease), color .18s var(--ease), padding-right .18s var(--ease); }
[dir="rtl"] .mega-col a:hover { padding-left: 0; padding-right: .85rem; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .skip-link:focus { left: auto; right: 0; }

/* -- the arrow that follows a link ----------------------------------------
   The glyph is an arrow, so it has to point the way the reader is going. */
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .card:hover .link-arrow svg,
[dir="rtl"] .tile:hover .link-arrow svg,
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .chan-head .link-arrow { margin-left: 0; margin-right: auto; }

/* -- tiles and cards ------------------------------------------------------- */
[dir="rtl"] .tile::before { right: auto; left: -30px; }
[dir="rtl"] .news-card::before { right: auto; left: -60px; }
[dir="rtl"] .ic-box::after { right: auto; left: 0; }
[dir="rtl"] .tile ul li { padding: .4rem 1.4rem .4rem 0; }
[dir="rtl"] .tile ul li::before { left: auto; right: 0; }

/* -- tick lists ------------------------------------------------------------ */
[dir="rtl"] .tick-list li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .tick-list li::before { left: auto; right: 0; }
[dir="rtl"] .tick-list li::after { left: auto; right: 5px; }

/* -- numbered steps -------------------------------------------------------- */
[dir="rtl"] .step-list > li { padding-left: 0; padding-right: 4rem; }
[dir="rtl"] .step-list > li::before { left: auto; right: 0; }
[dir="rtl"] .step .dot { left: auto; right: 0; }
[dir="rtl"] .step:last-child::before { right: 0; left: 50%; }
[dir="rtl"] .step:first-child::before { left: 0; right: 50%; }

/* -- accordions and tables ------------------------------------------------- */
[dir="rtl"] .acc-btn { text-align: right; }
[dir="rtl"] .spec-list .v { text-align: left; }
[dir="rtl"] table.batches th,
[dir="rtl"] table.batches td { text-align: right; }

/* -- footer ---------------------------------------------------------------- */
[dir="rtl"] .footer-col a { transition: color .25s var(--ease), padding-right .25s var(--ease); }
[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: 9px; }
[dir="rtl"] .footer-col a::before { left: auto; right: 0; transform: translate(9px, -50%) scale(0); }
[dir="rtl"] .footer-col a:hover::before { transform: translate(0, -50%) scale(1); }
[dir="rtl"] .legal-links a:not(:last-child)::after { margin-left: 0; margin-right: .55rem; }
[dir="rtl"] .webinar-card { border-left: 0; border-right: 3px solid var(--blue-600); }

/* -- channel list chevron -------------------------------------------------- */
[dir="rtl"] .chan-item > a { transition: background .2s var(--ease), padding-right .2s var(--ease); }
[dir="rtl"] .chan-item > a:hover { padding-left: 0; padding-right: 1.35rem; }
[dir="rtl"] .chan-item > a::after {
  margin-left: 0; margin-right: auto;
  border-right: 0; border-left: 2px solid var(--ink-300);
  transform: rotate(-45deg);
}
[dir="rtl"] .chan-item > a:hover::after { transform: rotate(-45deg) translate(-2px, -2px); }

/* -- floating WhatsApp ------------------------------------------------------
   Mirrored to the leading corner, which in Arabic is the bottom left, so it
   sits under the thumb the same way it does in English. */
[dir="rtl"] .wa-float { right: auto; left: 20px; }
[dir="rtl"] .wa-dock { right: auto; left: 20px; align-items: flex-start; }
[dir="rtl"] .wa-dock .wa-float { left: auto; right: auto; }
[dir="rtl"] .wa-close { margin-left: 0; margin-right: auto; }
@media (max-width: 520px) {
  [dir="rtl"] .wa-float { left: 14px; right: auto; }
}
@media (max-width: 560px) {
  [dir="rtl"] .wa-dock { left: 14px; right: auto; }
}

/* -- forms ------------------------------------------------------------------
   An email address, a phone number and a certificate number are all read
   left to right even by an Arabic speaker, so those fields stay LTR while
   their labels and placeholders read right to left. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[name="certificate"],
[dir="rtl"] #cert-number { direction: ltr; text-align: right; }