/* ─────────────────────────────────────────────────────────────────────────
   Barhel — right-to-left layout (Arabic, Kurdish Badini).

   Everything here is scoped to [dir="rtl"], so the English layout is
   untouched. Text direction and alignment the browser handles on its own;
   what needs mirroring by hand is the positioned furniture — the bento
   notches, the card rail, the nav, the swipe bar and the small ornaments.
   ───────────────────────────────────────────────────────────────────────── */

/* ── type ──────────────────────────────────────────────────────────────────
   Arabic uses IBM Plex Sans Arabic from Google Fonts.
   Kurdish Badini uses the local Ubuntu Kurdish face, which carries the
   Badini letters (ڤ ڕ ڵ ۆ ێ) that many Arabic fonts do not draw properly. */
@font-face {
    font-family: "Ubuntu Kurdish";
    src: url("../fonts/ku.woff2") format("woff2"),
         url("../fonts/ku.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.lang-ar body,
.lang-ar button,
.lang-ar input,
.lang-ar textarea,
.lang-ar .display {
    font-family: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
}

.lang-bad body,
.lang-bad button,
.lang-bad input,
.lang-bad textarea,
.lang-bad .display {
    font-family: "Ubuntu Kurdish", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
}

/* the display serif is Latin-only, so neither script should inherit it */
.is-arabic-script .display {
    font-weight: 600;
    letter-spacing: 0;
}

/* wide Latin letter-spacing looks broken in Arabic script */
.is-arabic-script [class*="tracking-["],
.is-arabic-script .tracking-widest,
.is-arabic-script .tracking-wider,
.is-arabic-script .tracking-wide {
    letter-spacing: 0 !important;
}

/* uppercase does nothing in Arabic script but does stretch layout */
.is-arabic-script .uppercase {
    text-transform: none;
}

/* a soft cross-fade while the strings swap */
.lang-swapping body {
    animation: langSwap 0.42s ease;
}

@keyframes langSwap {
    0% { opacity: 0.35; }
    100% { opacity: 1; }
}

/* ── hero: the two columns swap sides ──────────────────────────────────── */
/* Nothing to do here. In an RTL container flex-direction:row already runs
   right-to-left, so the text column (md:order-1) lands on the right and the
   video card (md:order-2) on the left. Adding row-reverse would cancel that
   out and put the layout back the way it looks in English. */

/* the video card sits on the left now, so its cuts mirror */
[dir="rtl"] .video-card {
    border-radius: 20px;
}

/* top cut: was top-right, now top-left */
[dir="rtl"] .notch {
    right: auto;
    left: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: var(--r);
}

[dir="rtl"] .notch::before {
    right: auto;
    left: 100%;
    background: radial-gradient(circle at 100% 100%,
            transparent 0 calc(var(--r) - 0.5px),
            #000 var(--r));
}

[dir="rtl"] .notch::after {
    right: auto;
    left: 0;
    background: radial-gradient(circle at 100% 100%,
            transparent 0 calc(var(--r) - 0.5px),
            #000 var(--r));
}

[dir="rtl"] .rail-notch {
    padding-left: var(--rail-gap);
    padding-right: 16px;
}

/* bottom cut for the swipe bar: was bottom-left, now bottom-right */
[dir="rtl"] .notch-bl {
    left: auto;
    right: 0;
    border-top-right-radius: 0;
    border-top-left-radius: var(--r);
}

[dir="rtl"] .notch-bl::before {
    left: auto;
    right: 0;
    background: radial-gradient(circle at 0 0,
            transparent 0 calc(var(--r) - 0.5px),
            #000 var(--r));
}

[dir="rtl"] .notch-bl::after {
    left: auto;
    right: 100%;
    background: radial-gradient(circle at 0 0,
            transparent 0 calc(var(--r) - 0.5px),
            #000 var(--r));
}

/* the swipe bar grows into the card from the other side */
@media (min-width: 768px) {
    [dir="rtl"] .swipe-bar {
        margin-left: calc(-1.5rem - var(--swipe-over));
    }
}

[dir="rtl"] #swipeKnob {
    left: auto;
    right: 0.25rem;
}

[dir="rtl"] #swipeFill {
    left: auto;
    right: 0;
}

[dir="rtl"] #swipeIcon,
[dir="rtl"] .swipe-bar .fa-angles-right {
    transform: scaleX(-1);
}

/* ── the glass card rail moves to the other edge ───────────────────────── */
@media (min-width: 768px) {
    [dir="rtl"] .rail {
        right: auto;
        left: var(--rail-gap);
    }
}

/* ── nav pills and hero copy ───────────────────────────────────────────── */
@media (min-width: 768px) {
    [dir="rtl"] #hero nav {
        left: auto;
        right: 1.5rem;
    }
}

@media (min-width: 768px) {
    [dir="rtl"] .hero-copy {
        right: 4rem;
        left: auto;
    }
}

@media (min-width: 1024px) {
    [dir="rtl"] .hero-copy {
        right: 6rem;
    }
}

/* the readability glow behind the hero copy points the other way */
[dir="rtl"] .hero-copy .bg-gradient-to-r {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
}

/* ── project cards ─────────────────────────────────────────────────────── */
[dir="rtl"] .demo-card .absolute.top-4.left-4 {
    left: auto;
    right: 1rem;
}

[dir="rtl"] .demo-card .absolute.top-4.right-4 {
    right: auto;
    left: 1rem;
}

[dir="rtl"] .demo-card .absolute.bottom-4.left-4 {
    left: auto;
    right: 1rem;
}

/* ── about ─────────────────────────────────────────────────────────────── */
[dir="rtl"] .stat {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .stat::before {
    left: auto;
    right: 0;
}

/* the overlapping avatars stack the other way */
[dir="rtl"] .avatars img+img {
    margin-left: 0;
    margin-right: -0.5rem;
}

/* ── contact ───────────────────────────────────────────────────────────── */
[dir="rtl"] .uline input,
[dir="rtl"] .uline textarea {
    padding: 0 0 0 18px;
}

[dir="rtl"] .uline textarea {
    padding: 12px 0 12px 18px;
}

[dir="rtl"] .uline .star {
    right: auto;
    left: 0;
}

/* ── footer ────────────────────────────────────────────────────────────── */
[dir="rtl"] .f-link::before {
    margin-right: 0;
}

[dir="rtl"] .f-link:hover::before {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .foot-sub input {
    padding: 0 18px 0 8px;
}

[dir="rtl"] .foot-sub button {
    margin-right: 0;
    margin-left: 5px;
}

[dir="rtl"] .foot-sub button .fa-arrow-right {
    transform: scaleX(-1);
}

/* ── arrows that mean "forward" should point the reader's forward ──────── */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-up-right-from-square {
    transform: scaleX(-1);
}

[dir="rtl"] .group:hover .fa-arrow-right {
    transform: scaleX(-1) translateX(0.25rem);
}

/* ── reveal directions mirror too ──────────────────────────────────────── */
[dir="rtl"] .sr-l {
    transform: translate3d(56px, 0, 0);
}

[dir="rtl"] .sr-r {
    transform: translate3d(-56px, 0, 0);
}

[dir="rtl"] .sr-l[data-dir="up"] {
    transform: translate3d(56px, -18px, 0);
}

[dir="rtl"] .sr-r[data-dir="up"] {
    transform: translate3d(-56px, -18px, 0);
}

/* ── the language menu itself ──────────────────────────────────────────── */
[dir="rtl"] .lang-menu {
    right: auto;
    left: 0;
}


/* "8yrs" is deliberately tight in English; Arabic script needs the space */
.is-arabic-script .unit {
    margin-inline-start: 0.25em;
}

/* a Latin word inside an RTL sentence keeps its own direction */
.is-arabic-script [data-i18n] {
    unicode-bidi: plaintext;
}