/* demo-rtl.css - shared RTL layer for the generated Kurdish demo pages.
   Loaded ONLY by /demos/<slug>/ku/. English pages never see this file.

   The per-element mirroring (logical properties, gradient angles, shadow
   offsets, translateX) is done at build time by tools/i18n-build.py, because
   94% of the demos' directional CSS lives in inline style="" attributes.
   What lives HERE is everything that is identical across all 15 demos, so a
   fix lands everywhere at once. */

/* ---- 1. Arabic-script typography ---------------------------------------- */

/* Tracking breaks Arabic letter joining. Never allow it, whatever the
   design asked for. This is a hard rule from CLAUDE.md. */
html[lang="ckb"] *,
html[lang="ckb"] *::before,
html[lang="ckb"] *::after { letter-spacing: 0 !important; }

/* Uppercase is a no-op on Arabic script but still triggers odd fallback
   selection in some engines. Neutralise it. */
html[lang="ckb"] * { text-transform: none !important; }

/* Arabic script sits taller and lower than Latin: give it room.
   Headings get less of a bump than body copy so display type stays tight. */
html[lang="ckb"] body { line-height: 1.9; }
html[lang="ckb"] p,
html[lang="ckb"] li { line-height: 2; }
html[lang="ckb"] h1,
html[lang="ckb"] h2,
html[lang="ckb"] h3 { line-height: 1.45; }

/* ---- 2. LTR islands ------------------------------------------------------
   Phone numbers, prices, hours, emails, URLs and Latin wordmarks are wrapped
   by the build in <span dir="ltr"> / <bdi>. Keep them visually inline and
   stop them inheriting the Arabic face. */
[dir="rtl"] [dir="ltr"],
[dir="rtl"] bdi {
  unicode-bidi: isolate;
  font-family: var(--ltr-face, "Inter", system-ui, sans-serif);
  letter-spacing: normal;
}
/* A Latin wordmark keeps the demo's own display face, not the Arabic one. */
[dir="rtl"] .wordmark,
[dir="rtl"] [data-wordmark] {
  unicode-bidi: isolate;
  direction: ltr;
  font-family: var(--wordmark-face, inherit);
}

/* ---- 3. Directional glyphs ----------------------------------------------
   Applied by the build to arrows/chevrons only. Never blanket-mirror: logos,
   checkmarks, bolts and play triangles must stay as drawn. */
[dir="rtl"] .rtl-flip { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .rtl-flip-svg svg { transform: scaleX(-1); }

/* ---- 4. Patterns present in every imported demo -------------------------- */

/* The photo/video placeholder captions are position:absolute bottom-left in
   every one of the 15. */
[dir="rtl"] .plabel { left: auto; right: 12px; }

/* The floating "Demo by TRUQ" badge (its own rule already flips it, this is
   the safety net if that inline block is ever dropped). */
[dir="rtl"] .truqnote { left: auto; right: 16px; }

/* Centering transforms have to invert, not just move. */
[dir="rtl"] .center-x { transform: translateX(50%); }

/* ---- 5. Forms ------------------------------------------------------------
   Inputs do not inherit direction reliably across engines, and a right-
   aligned placeholder is the tell that a site was mirrored rather than
   designed. */
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
  direction: rtl;
  text-align: start;
  font-family: inherit;
}
/* Numeric and contact fields stay LTR even inside an RTL form. */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"] {
  direction: ltr;
  text-align: start;
}
[dir="rtl"] input[type="tel"]::placeholder,
[dir="rtl"] input[type="email"]::placeholder { text-align: start; }
/* Native select arrow sits on the wrong side once mirrored. */
[dir="rtl"] select { background-position: left 12px center; padding-inline: 12px 32px; }

/* ---- 6. Language switch --------------------------------------------------
   Injected into every demo by the build. Deliberately unstyled beyond layout
   so each demo's own colours carry it: it inherits currentColor and the
   surrounding font, and it must not shift layout when toggled. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.lang-switch a {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.2s, background 0.2s;
  /* fixed width per item so switching languages cannot reflow the header */
  min-width: 30px;
  text-align: center;
}
.lang-switch a:hover { opacity: 0.9; }
.lang-switch a.active {
  opacity: 1;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.lang-switch .sep { opacity: 0.3; }

/* ---- 7. Never let a mirrored page scroll sideways ------------------------ */
html[lang="ckb"] body { overflow-x: hidden; }