/*
 * Right-to-left overrides, loaded only when the site is shown in Arabic (see _Layout.cshtml).
 * The html[dir="rtl"] attribute already flips text direction and any CSS logical properties.
 * This file handles the Arabic webfont plus the few things that must stay left-to-right (code,
 * the terminal snippet, and Latin brand/tech terms). Per-page RTL polish is added as each page is
 * translated.
 */

/* Arabic typography. Cairo reads cleanly and matches the site's modern, geometric look. */
html[dir="rtl"] body {
    font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .btn,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-drawer {
    font-family: 'Cairo', 'Montserrat', sans-serif;
}

/* Code, monospace, and the footer terminal line must remain left-to-right. */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .mono,
html[dir="rtl"] .footer-terminal,
html[dir="rtl"] .terminal-cursor {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    font-family: 'JetBrains Mono', monospace;
}

/* The footer terminal line is decorative code; keep it visually left-aligned. */
html[dir="rtl"] .footer-terminal {
    text-align: center;
}

/* Language switcher spacing so the EN/العربية toggle sits comfortably in the nav. */
.nav-lang {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/*
 * The logo uses `margin-right: auto` to sit flush on the far left in LTR. That physical margin does
 * not flip for RTL, which leaves a gap on the right, so mirror it to `margin-left: auto` here to keep
 * the logo flush against the far (right) edge in Arabic.
 */
html[dir="rtl"] .nav-logo {
    margin-right: 0;
    margin-left: auto;
}