/* ==========================================================================
   WK Growth Matrix — Direction overrides
   The layout is built on CSS logical properties, so it mirrors automatically.
   This file only carries what logical properties cannot express: mirrored
   transforms, Arabic typography tuning and Latin fragments inside Arabic text.
   ========================================================================== */

html[dir="rtl"] {
    /* Arabic reads better with a slightly larger x-height and looser leading. */
    --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
}

/* Latin brand names, codes and contact strings stay left-to-right inside Arabic
   copy. `.numeric` deliberately stays out of this list: it only selects tabular
   figures, and forcing a direction on it would flip the alignment of every
   block-level element that carries the class (card indexes, stat values…). */
html[dir="rtl"] .ltr,
html[dir="rtl"] .standard__name,
html[dir="rtl"] .info-item__value.numeric,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Elements that carry an explicit dir attribute keep their own run */
html[dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }

/* Icons that imply direction must flip with the text */
html[dir="rtl"] .icon-flip,
html[dir="rtl"] .link-arrow .icon,
html[dir="rtl"] .service-nav svg,
html[dir="rtl"] .breadcrumb .sep svg {
    transform: scaleX(-1);
}

/* The card top-rule grows from the leading edge in both directions */
html[dir="rtl"] .card::after { transform-origin: right; }
html[dir="ltr"] .card::after { transform-origin: left; }

/* Gradients that carry a direction */
html[dir="rtl"] .purpose-card::before {
    background: linear-gradient(270deg, var(--gold-500), transparent);
}
html[dir="rtl"] .card::after {
    background: linear-gradient(270deg, var(--gold-500), var(--gold-300));
}

/* Decorative glows sit on the trailing edge */
html[dir="rtl"] .page-header::after { inset-inline-end: auto; inset-inline-start: 0; background: radial-gradient(70% 90% at 0% 0%, rgba(201, 162, 39, .25), transparent 70%); }
html[dir="rtl"] .cta-band::after     { inset-inline-end: auto; inset-inline-start: -10%; }
html[dir="rtl"] .hero::before {
    background:
        radial-gradient(120% 90% at 15% 0%, rgba(201, 162, 39, .22), transparent 55%),
        radial-gradient(90% 80% at 100% 100%, rgba(35, 56, 106, .8), transparent 60%),
        linear-gradient(200deg, var(--navy-800), var(--navy-900));
}

/* Dates, ids and other Latin runs inside tables read left-to-right */
html[dir="rtl"] table.data [dir="ltr"],
html[dir="rtl"] .admin-table [dir="ltr"] { direction: ltr; unicode-bidi: isolate; }

/* Footer link hover nudge goes the other way */
html[dir="rtl"] .footer__list a:hover { padding-inline-start: 0; padding-inline-end: 4px; }

/* Admin sidebar shadow direction */
html[dir="rtl"] .admin-sidebar { box-shadow: -1px 0 0 var(--line); }
html[dir="ltr"] .admin-sidebar { box-shadow: 1px 0 0 var(--line); }

/* ==========================================================================
   IBM Plex Sans Arabic — full weight scale (100 – 700)
   Applied to every element that inherits the Arabic font stack.
   ========================================================================== */

/* Base — regular weight for body copy */
html[dir="rtl"],
html[lang="ar"] {
    font-family: var(--font-arabic);
    font-weight: 400;
}

/* Light body copy variant */
html[dir="rtl"] .font-light,
html[lang="ar"] .font-light { font-weight: 300; }

/* Thin / extra-thin — decorative or captions */
html[dir="rtl"] .font-thin,
html[lang="ar"] .font-thin       { font-weight: 100; }
html[dir="rtl"] .font-extralight,
html[lang="ar"] .font-extralight  { font-weight: 200; }

/* Medium — slightly bolder body copy */
html[dir="rtl"] .font-medium,
html[lang="ar"] .font-medium { font-weight: 500; }

/* Semibold — UI labels, nav items, card headings */
html[dir="rtl"] .font-semibold,
html[lang="ar"] .font-semibold { font-weight: 600; }

/* Bold — already the default for headings (h1–h6), but exposed as utility */
html[dir="rtl"] .font-bold,
html[lang="ar"] .font-bold { font-weight: 700; }

/* Headings use 700 (Bold) by default in Arabic */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
    font-weight: 700;
}

/* Buttons and interactive labels — SemiBold */
html[dir="rtl"] .btn,
html[dir="rtl"] .nav-link,
html[dir="rtl"] label { font-weight: 600; }

/* Lead / intro paragraphs — Medium */
html[dir="rtl"] .lead { font-weight: 500; }