/*
 * Arabic (RTL) layer for dev.irq-gate.com.
 *
 * Loaded only on Arabic pages (layouts/app.blade.php, when the locale is 'ar').
 * The compiled Tailwind bundle is shared with English and left untouched; this
 * file adds the Arabic font and the few direction fixes the shared markup
 * needs. Rules that change typography target :lang(ar) only, so English text
 * shown on an Arabic page (lang="en" fallbacks, brand names) keeps its style.
 */

/* IBM Plex Sans Arabic — SIL Open Font License 1.1 (see fonts/ibm-plex-sans-arabic/LICENSE).
   Arabic-script subset only; Latin text keeps the site's Instrument Sans. */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root:lang(ar) {
    --font-sans: 'IBM Plex Sans Arabic', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Monospace labels holding Arabic words use the Arabic sans (monospace spaces and
   fallback glyphs look broken in Arabic). English fallbacks keep the mono style. */
:lang(ar).font-mono { font-family: var(--font-sans); }

/* Letter-spacing breaks Arabic letter joining, and uppercase has no meaning in Arabic. */
:lang(ar)[class*='tracking-'] {
    letter-spacing: 0;
}

/* Arabic needs a little more size and line height than Latin at small sizes. */
:lang(ar).text-\[10px\] { font-size: 12px; line-height: 1.6; }
:lang(ar).text-\[11px\] { font-size: 12.5px; line-height: 1.6; }
:lang(ar).text-xs { font-size: 0.8125rem; line-height: 1.7; }
:lang(ar).leading-relaxed { line-height: 1.85; }
:lang(ar):is(h1, h2, h3) { line-height: 1.45; }

/* Forward arrows point left in RTL, and their hover nudge moves left. */
[dir='rtl'] .rtl-flip { transform: scaleX(-1); }
@media (hover: hover) {
    [dir='rtl'] .group-hover\:translate-x-1:is(:where(.group):hover *) {
        --tw-translate-x: calc(var(--spacing) * -1);
    }
    /* "Back" arrows (case studies) nudge towards the reading start, i.e. right. */
    [dir='rtl'] .group-hover\:-translate-x-1:is(:where(.group):hover *) {
        --tw-translate-x: calc(var(--spacing) * 1);
    }
}

/* Recognition rows: the indent sits on the reading-start side. */
[dir='rtl'] .pl-8 { padding-left: 0; padding-right: calc(var(--spacing) * 8); }
@media (width >= 40rem) {
    [dir='rtl'] .sm\:pl-0 { padding-right: 0; }
}

/* English text shown on the Arabic page (missing CMS translations) keeps the
   page's start alignment so cards read as one column. */
[dir='rtl'] [lang='en'][dir='ltr'] { text-align: right; }

/* Balanced line breaks keep short Arabic headlines from leaving one word alone. */
:lang(ar):is(h1, h2) { text-wrap: balance; }

/* Header: Arabic labels and their EN markers never wrap; spacing tightens on
   small desktops (1024–1279px) so the bar stays on one line. */
[dir='rtl'] header nav a,
[dir='rtl'] header a.bg-sky-500 { white-space: nowrap; }
@media (width >= 64rem) and (width < 80rem) {
    [dir='rtl'] header nav.lg\:gap-8 { gap: 1.125rem; }
    [dir='rtl'] header a.bg-sky-500 { padding-inline: 1rem; }
    [dir='rtl'] header nav .en-only-badge { margin-inline-start: 0.25rem; }
    /* The brand name stays; its tagline returns at 1280px and on mobile. */
    [dir='rtl'] header > div > a:first-child .text-\[10px\] { display: none; }
}

/* "EN" marker on links whose destination is English-only. Inherits the link colour. */
.en-only-badge {
    display: inline-block;
    margin-inline-start: 0.375rem;
    padding: 0 0.3rem;
    border: 1px solid currentColor;
    border-radius: 0.2rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;
    vertical-align: 0.15em;
}

/* Technical diagrams and schematic artwork keep their left-to-right geometry and
   Latin labels (OLT, PBX, NVR…); without this, RTL flips SVG text anchoring. */
[dir='rtl'] svg { direction: ltr; }

/* Projects delivery grid: its cell dividers are physical right borders; mirror them. */
@media (width >= 64rem) {
    [dir='rtl'] .lg\:border-r { border-right-width: 0; border-left-width: 1px; }
    [dir='rtl'] .lg\:last\:border-r-0:last-child { border-left-width: 0; }
}