/* ============================================================================
   Direction handling.

   Layout is written with CSS logical properties, so one stylesheet serves both
   directions. This file covers only what logical properties cannot express:
   transforms, box-shadow offsets, background positions, and glyph direction.
   ============================================================================ */

/* ---- Arabic typography ---- */
html[lang="ar"] {
  --font-display: "Cairo", "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;

  /* Arabic runs a little larger and looser than Latin at the same level. */
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;
}
html[lang="ar"] body { line-height: 1.8; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.4; }

/* Letter-spacing breaks Arabic letter joining. Never apply it. */
html[lang="ar"] *,
html[lang="ar"] .eyebrow,
html[lang="ar"] .label,
html[lang="ar"] .h-hero,
html[lang="ar"] .h1,
html[lang="ar"] .h2 { letter-spacing: normal !important; }

/* Uppercase is meaningless in Arabic and harms legibility. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .label,
html[lang="ar"] .table th,
html[lang="ar"] .dash-footer strong { text-transform: none; }

/* Latin codes, prices and references inside Arabic text stay left-to-right. */
bdi, .num, .ltr { unicode-bidi: isolate; }
[dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }
input[type="email"], input[type="tel"], input[type="url"], .input--ltr { direction: ltr; text-align: start; }

/* ---- Mirroring that logical properties cannot reach ---- */

/* Drawers slide from the inline end */
[dir="rtl"] .mobile-drawer { transform: translateX(-100%); }
[dir="rtl"] .mobile-drawer.is-open { transform: none; }
/*
 * The dashboard sidebar is a drawer ONLY below 1024px. This rule used to apply at every
 * width, so an Arabic member on a desktop had the sidebar translated a full column to the
 * right — sitting on top of the dashboard content, which is one of the two overlaps
 * reported against R47 and the one that appeared in Arabic alone. Scoped to the breakpoint
 * where a drawer actually exists.
 */
@media (max-width: 1024px) {
  [dir="rtl"] .dash-sidebar { transform: translateX(100%); }
  [dir="rtl"] .dash-sidebar.is-open { transform: none; }
}

/* Toggle knob travels the other way */
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-18px); }

/* Selection markers sit on the inline start edge */
[dir="rtl"] .table tr.is-selected { box-shadow: inset -3px 0 0 var(--color-gold-primary); }
[dir="rtl"] .conv.is-active { box-shadow: inset -3px 0 0 var(--color-gold-primary); }

/* Select chevron moves to the inline end */
[dir="rtl"] .select { background-position: left var(--sp-4) center; }

/* Directional glyphs flip; brand marks and logos never do */
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .btn svg:not(.no-flip),
[dir="rtl"] .breadcrumb svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .brand img,
[dir="rtl"] .footer-brand img,
[dir="rtl"] .dash-sidebar__brand img,
[dir="rtl"] .no-flip { transform: none; }

/* Timeline connectors and process rails mirror */
[dir="rtl"] .timeline__item::before { transform: scaleX(-1); }

/* ---- Language switch ---- */
/*
 * The switch is rendered two ways and only one of them was styled.
 *
 * partials/language-switch.blade.php emits anchors — a GET through the locale route, so
 * the choice is stored server-side. I18N.switcher() in js/i18n.js emits buttons. Every
 * rule below named `button` only, so the server-rendered anchors received no width, no
 * height and no padding: they collapsed onto each other and rendered "EN" and "ع" on top
 * of one another, which is what the topbar showed. Both element types are matched now.
 */
.lang-switch { display: inline-flex; flex: none; border: 1px solid var(--color-border-strong); border-radius: var(--r-sm); overflow: hidden; }
.lang-switch button,
.lang-switch a {
  display: grid; place-items: center;
  min-width: 38px; min-height: 34px; padding: 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-secondary);
  transition: background var(--t-base), color var(--t-base);
}
.lang-switch button[aria-pressed="true"],
.lang-switch a[aria-current="true"],
.lang-switch a.is-active { background: var(--color-gold-primary); color: var(--color-text-inverse); }
.lang-switch button:hover:not([aria-pressed="true"]),
.lang-switch a:hover:not(.is-active) { color: var(--color-text-primary); }

/* Nothing should shift while the translation swaps in */
[data-i18n] { transition: none; }


/* ── Hero imagery in RTL ─────────────────────────────────────────────────
   The homepage hero is a globe lit from one side, with the light falling towards the
   text column. Under RTL the grid flips, so the image lands on the left and the light
   now falls away from the reader — the composition points off the edge of the page.

   Mirroring the image restores the relationship the photograph was chosen for. This
   applies to the hero only: mirroring a photograph that contains text, a vessel name or
   a recognisable place would be worse than leaving it alone, which is why this is not a
   blanket rule on images. */
[dir="rtl"] .hero__visual img,
[dir="rtl"] .hero__visual svg {
  transform: scaleX(-1);
}

/* Anything overlaid on the hero must flip back, or its text mirrors too. */
[dir="rtl"] .hero__visual .hero__badge,
[dir="rtl"] .hero__visual [data-no-mirror] {
  transform: scaleX(-1);
}