/*
 * Right-to-left support (Arabic, Hebrew, Persian, Urdu).
 *
 * Loaded only when the active language is right-to-left. By this point the
 * layout is already fully mirrored: the site ships a mirrored build of every
 * stylesheet (bootstrap.min.rtl.css, app.rtl.css and each page sheet's
 * .rtl.css), swapped in automatically by css_asset(). Those builds flip every
 * physical margin, padding, position, float, text-align, border-radius,
 * box-shadow and transform for us.
 *
 * This file therefore carries ONLY what a stylesheet flip cannot express:
 *   1. the bundled Arabic webfont (no external requests),
 *   2. mirroring of directional icon glyphs (arrows/chevrons are drawn, not
 *      laid out, so they need an explicit horizontal flip),
 *   3. a small patch for the Choices.js dropdown, whose third-party sheet is
 *      not part of the mirrored build.
 */

@font-face {
  font-family: 'QM Arabic';
  src: url('../fonts/noto-sans-arabic-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'QM Arabic';
  src: url('../fonts/noto-sans-arabic-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'QM Arabic';
  src: url('../fonts/noto-sans-arabic-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

html[dir="rtl"] body { font-family: 'QM Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; }

/* ---- Directional icon glyphs ----
   Arrows and chevrons point along the reading direction, so mirror them.
   (These are painted glyphs, not box layout — no stylesheet flip touches them.) */
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-long-arrow-alt-right,
html[dir="rtl"] .fa-long-arrow-alt-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-caret-right,
html[dir="rtl"] .fa-caret-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-arrow-right-long,
html[dir="rtl"] .fa-arrow-left-long { transform: scaleX(-1); }

/* ---- Choices.js dropdown ----
   The Choices.js stylesheet ships LTR-only and is not part of the mirrored
   build, so realign its box and move the chevron to the leading (left) edge. */
html[dir="rtl"] .choices { text-align: right; }
html[dir="rtl"] .choices__inner { padding: 8px 13px 8px 40px; }
html[dir="rtl"] .choices[data-type*='select-one']::after { right: auto; left: 13px; }
html[dir="rtl"] .choices__list--dropdown .choices__item { text-align: right; }

/* Charts: pin the ApexCharts canvas to LTR.
   ApexCharts fixes each y-axis label at an x position and lets the text anchor
   from there. Under dir=rtl the browser flips that anchor, so the labels grow
   rightward INTO the plot area and are drawn over the bars — measured on Top
   Restaurants: bars sat at card-x 116-554 in BOTH languages while the labels
   moved 21-101 -> 101-181, a 65px overlap. The bars never move; only the labels do.
   This MUST live in rtl.css: rtlcss rewrites `direction: ltr` to `direction: rtl`,
   so the same rule in app.css silently inverts itself in the generated build.
   Arabic label text still shapes correctly inside its own text node. */
.qm-chart .apexcharts-canvas,
.qm-chart-figure .apexcharts-canvas { direction: ltr; }