/* ============================================================
   WATAN FIRST SOLUTIONS — Arabic / RTL layer
   Loaded AFTER blog.css or article.css on Arabic pages only.
   Mirrors physical-direction rules and swaps in elegant Arabic
   type: Tajawal (display) + IBM Plex Sans Arabic (body).
   ============================================================ */
:root{
  --display:"Cairo","Noto Kufi Arabic",system-ui,sans-serif;
  --body:"Noto Kufi Arabic","Cairo",system-ui,sans-serif;
}
html[dir="rtl"] body{font-family:var(--body)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .eyebrow,html[dir="rtl"] .kick,html[dir="rtl"] .bigcat,
html[dir="rtl"] .brandmark{font-family:var(--display)}
/* Arabic reads slightly larger & looser for comfort */
html[dir="rtl"] body{line-height:1.85;letter-spacing:0}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{letter-spacing:0;line-height:1.36}
html[dir="rtl"] .hero h1{line-height:1.26}

/* ---- generic mirroring ---- */
html[dir="rtl"] .skip{left:auto;right:-999px}
html[dir="rtl"] .skip:focus{right:0;border-radius:0 0 0 10px}

/* nav underline + cta arrow */
html[dir="rtl"] .nav .links a.nl::after{left:auto;right:0;left:100%}
html[dir="rtl"] .nav .links a.nl:hover::after,
html[dir="rtl"] .nav .links a.nl.current::after{left:0}
html[dir="rtl"] .nav .navcta{margin-left:0;margin-right:.4rem}
html[dir="rtl"] .btn .ar,html[dir="rtl"] .more .ar,html[dir="rtl"] .rl .ar,
html[dir="rtl"] .arw,html[dir="rtl"] .crumb .sep{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .ar{transform:scaleX(-1) translateX(4px)}

/* ===== ARTICLE (article.css) RTL ===== */
html[dir="rtl"] .hero-art{right:auto;left:8%;
  -webkit-mask-image:linear-gradient(260deg,transparent 0%,rgba(0,0,0,.12) 34%,#000 64%);
          mask-image:linear-gradient(260deg,transparent 0%,rgba(0,0,0,.12) 34%,#000 64%)}
@media (max-width:820px){html[dir="rtl"] .hero-art{left:-4%;right:auto}}
html[dir="rtl"] .answer{border-left:0;border-right:4px solid var(--gold)}
html[dir="rtl"] .keyline{border-left:0;border-right:4px solid var(--gold);padding:4px 20px 4px 0}
html[dir="rtl"] .pull{border-left:0;border-right:3px solid var(--gold);padding:0 24px 0 0}
html[dir="rtl"] .mrow .myth{border-left:0;border-right:3px solid var(--muted)}
html[dir="rtl"] .mrow .reality{border-left:0;border-right:3px solid var(--gold-deep)}
html[dir="rtl"] .checklist li{padding:18px 62px 18px 18px}
html[dir="rtl"] .checklist li::before{left:auto;right:16px}
html[dir="rtl"] .steps li{padding:0 48px 20px 0}
html[dir="rtl"] .steps li::before{left:auto;right:0}
html[dir="rtl"] .steps li:not(:last-child)::after{left:auto;right:16px}
html[dir="rtl"] .signals{padding:0}
html[dir="rtl"] .signals li{padding:12px 30px 12px 0}
html[dir="rtl"] .signals li::before{left:auto;right:6px}
html[dir="rtl"] .answer ul,html[dir="rtl"] .body ul,html[dir="rtl"] .body ol{padding-left:0;padding-right:1.25em}
html[dir="rtl"] .related a{flex-direction:row}
html[dir="rtl"] table,html[dir="rtl"] caption,html[dir="rtl"] thead th,html[dir="rtl"] tbody th{text-align:right}

/* ===== HUB (blog.css) RTL ===== */
html[dir="rtl"] .bhero h1,html[dir="rtl"] .bhero p.dek{margin-left:0}
html[dir="rtl"] .thumb .hi{right:auto;left:-90px}
html[dir="rtl"] .kick::before{margin-left:0}
html[dir="rtl"] .feat .more .ar,html[dir="rtl"] .post .rl .ar{transform:scaleX(-1)}
html[dir="rtl"] .foot .bot a,html[dir="rtl"] .breadcrumb,html[dir="rtl"] .crumb{direction:rtl}

/* numerals: keep Western digits for dates/figures (brand choice), text Arabic */
html[dir="rtl"] time,html[dir="rtl"] .stat .n{font-feature-settings:"tnum"}

/* ===== RTL mirroring of directional artwork (no text nodes) ===== */
html[dir="rtl"] .hero svg.wave,
html[dir="rtl"] .thumb svg.wave,
html[dir="rtl"] .bhero .nodes{transform:scaleX(-1)}
html[dir="rtl"] .bhero .wave-band{transform:scaleX(-1) rotate(6deg)}
html[dir="rtl"] .ahero .wave-band{transform:scaleX(-1) rotate(5deg)}
/* mirror the blog-hub banner gradient glow to the left in Arabic */
html[dir="rtl"] .bloghome .bhero::after{right:auto;left:-6%}
/* article breadcrumb: article.css hardcodes Latin-only "Outfit"; swap in the
   brand Arabic face (explicit names — --body is a color inside article scope) */
html[dir="rtl"] .breadcrumb{font-family:"Noto Kufi Arabic","Cairo",system-ui,sans-serif}

/* ===== Arabic display headings: trim size + drop negative tracking ===== */
html[dir="rtl"] .bhero h1{font-size:clamp(2.2rem,5.2vw,4rem);letter-spacing:normal}
html[dir="rtl"] .hero h1{font-size:clamp(1.85rem,4.05vw,3.05rem);letter-spacing:normal}
html[dir="rtl"] .feat h2{font-size:clamp(1.68rem,3.2vw,2.6rem);letter-spacing:normal}
html[dir="rtl"] .grid-head h2{font-size:clamp(1.35rem,2.7vw,1.95rem);letter-spacing:normal}
html[dir="rtl"] .body h2{font-size:clamp(1.35rem,3vw,1.72rem);letter-spacing:normal}
html[dir="rtl"] .prose h2{font-size:clamp(1.4rem,2.4vw,1.82rem);letter-spacing:normal}

html[dir="rtl"] .nav .navcta{padding-top:.58em;padding-bottom:.58em;line-height:1.1}

/* ===== article fixes (RTL) ===== */
html[dir="rtl"] .thumb .bigcat{font-size:clamp(1rem,10cqi,1.6rem)}
html[dir="rtl"] .cta-block .btn{font-family:var(--display)}
html[dir="rtl"] .body b,html[dir="rtl"] .body strong,
html[dir="rtl"] .checklist b,html[dir="rtl"] .signals strong,
html[dir="rtl"] .pillar b,html[dir="rtl"] .steps b{font-family:var(--body)}