/* ============================================
   TechVault — Persian / RTL overrides
   Loaded only by the pages under /fa/, after every other stylesheet.
   The base sheets are direction-agnostic for the most part (flex and grid
   follow `dir` on their own); what needs correcting is anything anchored with
   a physical left/right offset, plus typography that assumes Latin script.
   ============================================ */

[dir="rtl"] {
    /* Vazirmatn carries Latin glyphs too, so it can drive the whole page. */
    --font-primary: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;

    /* Tight/negative tracking breaks the cursive joins in Persian script. */
    --tracking-tight: 0;
    --tracking-normal: 0;
    --tracking-wide: 0;
    --tracking-wider: 0;
    --tracking-widest: 0.02em;

    /* Persian needs a little more line height to clear its ascenders. */
    --leading-tight: 1.45;
    --leading-snug: 1.6;
    --leading-normal: 1.75;
    --leading-relaxed: 1.9;
}

[dir="rtl"] body {
    font-family: var(--font-primary);
}

/* Headings lose their Latin letter-spacing entirely. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .hero__title,
[dir="rtl"] .page-hero__title,
[dir="rtl"] .section__title,
[dir="rtl"] .stats-bar__number {
    letter-spacing: normal;
}

/* ---- Fixed / absolutely positioned chrome ---- */
[dir="rtl"] .skip-link {
    left: auto;
    right: var(--space-4);
}

[dir="rtl"] .back-to-top {
    right: auto;
    left: var(--space-6);
}

[dir="rtl"] .floating-cta {
    left: auto;
    right: var(--space-6);
}

[dir="rtl"] .hero__gradient {
    right: auto;
    left: -20%;
}

/* Hero artwork: mirror it so the shield sits behind the text-free side. */
[dir="rtl"] .hero__bg {
    transform: scaleX(-1);
}

[dir="rtl"] .hero__bg::after {
    background:
        linear-gradient(270deg,
            rgba(10, 15, 30, 0.96) 0%,
            rgba(10, 15, 30, 0.90) 38%,
            rgba(10, 15, 30, 0.60) 68%,
            rgba(10, 15, 30, 0.38) 100%),
        linear-gradient(180deg,
            rgba(10, 15, 30, 0.55) 0%,
            transparent 35%,
            rgba(10, 15, 30, 0.65) 100%);
}

/* ---- Underline + accent sweeps ---- */
[dir="rtl"] .service-card::before {
    transform-origin: right;
}

[dir="rtl"] .code-block__filename {
    margin-left: 0;
    margin-right: var(--space-2);
}

/* ---- Form controls ---- */
[dir="rtl"] .form-select {
    padding-right: var(--space-4);
    padding-left: 2.5rem;
    background-position: left var(--space-4) center;
}

/* ---- FAQ ---- */
[dir="rtl"] .faq-item__trigger {
    text-align: right;
}

/* ---- Monospace fallbacks ----
   JetBrains Mono carries no Persian glyphs, so any element the Latin design
   set in monospace but which holds Persian copy has to fall back to the UI
   font — otherwise the browser substitutes and the text renders stretched.
   Elements that stay genuinely Latin (code, metric values) keep the mono. */
[dir="rtl"] .work-card__tags li,
[dir="rtl"] .process__number,
[dir="rtl"] .value-card__number,
[dir="rtl"] .error-label,
[dir="rtl"] .service-detail__tag,
[dir="rtl"] .cms-section__label {
    font-family: var(--font-primary);
    letter-spacing: normal;
}

/* ---- Code stays left-to-right ---- */
[dir="rtl"] .code-block,
[dir="rtl"] .code-block__content,
[dir="rtl"] .code-block__content code,
[dir="rtl"] pre,
[dir="rtl"] code {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .code-block__header {
    direction: ltr;
}

/* Phone numbers, emails and URLs read left-to-right even inside RTL text. */
[dir="rtl"] [dir="ltr"] {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---- Theme toggle sits on the opposite side of the bar ---- */
[dir="rtl"] .theme-toggle {
    margin-left: var(--space-4);
    margin-right: auto;
}

/* ---- Checklists and bulleted rows with a physical indent ---- */
[dir="rtl"] .value-list li,
[dir="rtl"] .check-list li {
    padding-left: 0;
    padding-right: calc(20px + var(--space-3));
}

/* ---- Mobile drawer opens from the left ---- */
@media (max-width: 768px) {
    [dir="rtl"] .nav__menu {
        right: auto;
        left: 0;
    }

    [dir="rtl"] .hero__bg {
        transform: none;
    }
}