/*
 * T Graphics UK — Arabic (RTL) layer for the /ar/ pages. Loaded after the shared site CSS and assets/ar/rtl.css
 * (the generated mirror of the Tailwind direction utilities). English pages never load this file.
 *
 * Font: Cairo (SIL Open Font License 1.1, see assets/ar/fonts/OFL.txt), subset from the licensed copy in
 * TGraphics/assets/fonts/ by app/site-ar/tools/make-font.py.
 */
@font-face {
  font-family: "Cairo";
  src: url("/assets/ar/fonts/cairo-arabic-latin.woff") format("woff");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ── Typography ── */
html[lang="ar"] {
  --app-font-sans: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  --app-font-heading: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
}
html[lang="ar"] body { font-family: var(--app-font-sans); font-weight: 400; }
/* Arabic letters join; spacing them apart (tracking-*) breaks words, and there is no upper case. */
html[lang="ar"] body :is(h1, h2, h3, h4, h5, h6, p, span, a, button, label, li, div, dt, dd, th, td, strong, em, small, blockquote, figcaption, summary, legend, option, input, textarea, select) {
  letter-spacing: normal !important;
}
html[lang="ar"] .font-light { font-weight: 350; }
html[lang="ar"] p, html[lang="ar"] li, html[lang="ar"] dd { line-height: 1.85; }
/* Tight display leading clips Arabic ascenders and descenders. */
html[lang="ar"] :is(h1, h2, h3) { line-height: 1.35 !important; }
html[lang="ar"] :is(h1, h2) .block, html[lang="ar"] h1 br + span { line-height: inherit; }
/* Labels the English design sets in tiny wide caps read better slightly larger in Arabic. */
html[lang="ar"] .text-\[9px\] { font-size: 11px; }
html[lang="ar"] .text-\[10px\] { font-size: 12px; }
html[lang="ar"] .text-xs { font-size: 0.8125rem; }

/* ── Mixed direction: Latin names, numbers, addresses stay readable ── */
html[lang="ar"] [lang="en"], html[lang="ar"] [dir="ltr"] { unicode-bidi: isolate; }
html[lang="ar"] a[href^="mailto:"], html[lang="ar"] a[href^="tel:"] { unicode-bidi: isolate; }
html[lang="ar"] input:is([type="email"], [type="tel"], [type="url"], [type="password"]),
html[lang="ar"] input#username, html[lang="ar"] input[autocomplete="username"] { direction: ltr; text-align: right; }
html[lang="ar"] input:is([type="email"], [type="tel"], [type="url"], [type="password"]):placeholder-shown { direction: rtl; }
html[lang="ar"] select { background-position: left 0.75rem center; }

/* ── Direction-bearing icons point the reading way (arrows, chevrons, send) ── */
html[dir="rtl"] :is(.lucide-arrow-right, .lucide-arrow-left, .lucide-chevron-right, .lucide-chevron-left, .lucide-move-right,
  .lucide-arrow-up-right, .lucide-circle-arrow-right, .lucide-send, .lucide-chevrons-right, .lucide-chevrons-left) {
  transform: scaleX(-1);
}
/* Hover nudges on those icons keep working after the flip (rtl.css mirrors the translate values). */

/* ── Skip link: parked off-screen on the right. In RTL, content pushed off to the LEFT is scrollable,
   so the shared "left: -9999px" would add ~10,000px of horizontal scroll. ── */
html[dir="rtl"] .tg-skip-link { left: auto !important; right: -9999px; border-radius: 0 0 0 6px; }
html[dir="rtl"] .tg-skip-link:focus, html[dir="rtl"] .tg-skip-link:focus-visible { right: 0; }

/* ── Header language switch (English link on Arabic pages) ── */
.ar-lang-switch {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: "Roboto Condensed", "Segoe UI", Arial, sans-serif; font-size: .75rem; font-weight: 600;
  letter-spacing: .08em !important; text-transform: uppercase;
  color: hsl(var(--foreground) / .8); border: 1px solid rgba(255, 255, 255, .14); padding: .35rem .7rem; line-height: 1;
  transition: color .2s, border-color .2s; white-space: nowrap;
}
.ar-lang-switch:hover, .ar-lang-switch:focus-visible { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .6); }
.ar-lang-switch--compact { padding: .35rem .5rem; }
.ar-lang-switch--menu { margin-top: 1rem; font-size: .95rem; padding: .6rem 1.2rem; }

/* ── Header logo: below 640px mobile-fixes.css sets "img { height: auto; max-width: 100% }", which overrides the
   logo's Tailwind height and collapses it to 0×0 inside its shrink-to-fit link (the English pages have the same
   problem). Restore the intended sizes on the Arabic pages. ── */
@media (max-width: 1023px) {
  html[lang="ar"] header.fixed a[aria-label] > img { max-width: none; width: auto; height: 2rem; }
}
@media (min-width: 640px) and (max-width: 1023px) { html[lang="ar"] header.fixed a[aria-label] > img { height: 2.25rem; } }
@media (min-width: 768px) and (max-width: 1023px) { html[lang="ar"] header.fixed a[aria-label] > img { height: 2.5rem; } }

/* ── Mobile menu: hidden items must not be reachable while closed ── */
#ar-mobile-menu[inert] { visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
#ar-mobile-menu:not([inert]) { visibility: visible; }

/* ── Things the React app animates in: show them settled ── */
html[lang="ar"] [style*="opacity: 0"] { opacity: 1 !important; }

/* ── Floating buttons: in RTL the assistant sits bottom-left (rtl.css), WhatsApp bottom-right ── */
.tg-wa { position: fixed; right: 24px; bottom: 24px; z-index: 49; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .15s ease; }
.tg-wa:hover { transform: scale(1.07); }
.tg-wa svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 640px) { .tg-wa { right: 16px; bottom: 16px; width: 52px; height: 52px; } }
@media print { .tg-wa { display: none; } }
html[dir="rtl"] #ai-chat-panel { right: auto; left: 1.5rem; }
html[dir="rtl"] #ai-chat-panel .rounded-br-sm { border-bottom-right-radius: 1rem; border-bottom-left-radius: .125rem; }
html[dir="rtl"] #ai-chat-panel .rounded-bl-sm { border-bottom-left-radius: 1rem; border-bottom-right-radius: .125rem; }
html[dir="rtl"] #ai-chat-toggle .absolute.-right-1 { right: auto; left: -.25rem; }
#ai-chat-panel[hidden] { display: none !important; }

/* ── Homepage portal feature cards ──
   Their SVGs have a viewBox but no intrinsic width/height. Size them here so the browser's 300×150 SVG default
   cannot expand into the oversized four-square marks shown in the portal feature section. */
html[lang="ar"] .tg-pf-redesign { width: 100%; margin: 3rem auto; }
html[lang="ar"] .tg-pf-header { max-width: 52rem; margin: 0 auto 2rem; text-align: right; }
html[lang="ar"] .tg-pf-label { color: hsl(var(--primary)); font-size: .8rem; font-weight: 700; margin-bottom: .75rem; }
html[lang="ar"] .tg-pf-title { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.35; margin: 0 0 .75rem; }
html[lang="ar"] .tg-pf-title span { color: hsl(var(--primary)); }
html[lang="ar"] .tg-pf-subtitle { color: hsl(var(--muted-foreground)); margin: 0; }
html[lang="ar"] .tg-pf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
html[lang="ar"] .tg-pf-card { position: relative; min-width: 0; padding: 1.5rem; background: hsl(var(--card)); border: 1px solid rgba(255,255,255,.08); }
html[lang="ar"] .tg-pf-num { position: absolute; top: .75rem; left: .9rem; color: hsl(var(--primary) / .7); font: 700 .8rem/1 "Roboto Condensed", sans-serif; }
html[lang="ar"] .tg-pf-icon { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; color: hsl(var(--primary)); background: hsl(var(--background)); border: 1px solid rgba(255,255,255,.1); }
html[lang="ar"] .tg-pf-redesign svg { display: block; width: 1.25rem; height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; flex: none; }
html[lang="ar"] .tg-pf-icon svg { display: block; width: 2rem; height: 2rem; max-width: 2rem; max-height: 2rem; flex: none; }
html[lang="ar"] .tg-pf-redesign > a svg { transform: scaleX(-1); }
html[lang="ar"] .tg-pf-card-title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
html[lang="ar"] .tg-pf-card-desc { color: hsl(var(--muted-foreground)); font-size: .9rem; }
@media (max-width: 900px) { html[lang="ar"] .tg-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { html[lang="ar"] .tg-pf-redesign { margin: 2rem auto; } html[lang="ar"] .tg-pf-grid { grid-template-columns: 1fr; gap: .75rem; } html[lang="ar"] .tg-pf-card { padding: 1.25rem; } }

/* ── Hero copy legibility: the hero overlay is mirrored for RTL by the build (dark side behind the Arabic text);
   Cairo's strokes are lighter than the English face, so the muted hero paragraphs get a little more contrast. ── */
html[lang="ar"] section:has(> .absolute.inset-0.z-0 > img) p.text-muted-foreground { color: hsl(var(--foreground) / .86); text-shadow: 0 1px 12px rgba(10, 14, 26, .85); }

/* ── Content focused or jumped to by script/anchors stays clear of the fixed 58px header ── */
html[lang="ar"] :is([id], [tabindex="-1"]) { scroll-margin-top: 90px; }

/* ── Forms ── */
.ar-recaptcha { margin: .5rem 0; }
.ar-form-status { margin: .75rem 0; }
html[lang="ar"] .text-left { text-align: right; }

/* ── Client reviews (reviews.css is written left-to-right) ── */
html[dir="rtl"] .tg-rw-chip-count { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .tg-rw-tile { text-align: right; }
html[dir="rtl"] .tg-rw-tile .qm { right: auto; left: 20px; }
html[dir="rtl"] .tg-rw-tile .service-tag { right: auto; left: 24px; }
html[dir="rtl"] .tg-rw-tile .quote { text-align: left; }
html[dir="rtl"] .tg-rw-track { animation-name: ar-rw-scroll; }
@keyframes ar-rw-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }
.ar-reviews-note { font-size: .85rem; opacity: .75; margin-top: .5rem; }

/* ── The newsletter and reviews widgets set their own fonts; use Cairo on the Arabic pages ── */
html[lang="ar"] :is(.tgn-invite, .tgn-overlay, #tg-home-reviews, #ai-chat-panel) * { font-family: var(--app-font-sans) !important; }

/* ── Newsletter invitation and dialog (newsletter-invite.css is written left-to-right) ── */
html[dir="rtl"] .tgn-success, html[dir="rtl"] .tgn-done { text-align: right; }
html[dir="rtl"] .tgn-hp { left: auto; right: -9999px; }
.ar-consent-intro { display: block; font-size: .8rem; opacity: .8; }
.ar-consent-ar { font-size: .85rem; line-height: 1.7; color: #cbd5e1; margin: .25rem 0 .5rem 1.7rem; }
html[dir="rtl"] .ar-consent-ar { margin: .25rem 1.7rem .5rem 0; }
.tgn-overlay[hidden] { display: none !important; }

/* ── Blog (blog.css is written left-to-right and sets its own font variables) ── */
html[lang="ar"] body.ar-blog { --font-heading: "Cairo", "Segoe UI", Tahoma, sans-serif; --font-body: "Cairo", "Segoe UI", Tahoma, sans-serif; }
@media (min-width: 1024px) {
  html[dir="rtl"] body.ar-blog .site-header-inner { padding-left: 45px; padding-right: 35px; }
  html[dir="rtl"] body.ar-blog .site-logo { margin-right: 0; margin-left: 2rem; }
}
html[dir="rtl"] body.ar-blog .site-cta-btn { margin-left: 0; margin-right: auto; }
html[dir="rtl"] body.ar-blog .site-header-inner .ar-lang-switch { margin-right: 1rem; }
html[dir="rtl"] body.ar-blog .mobile-menu-btn { margin-left: 0; margin-right: .5rem; }
@media (max-width: 1023px) { html[dir="rtl"] body.ar-blog .site-header-inner .ar-lang-switch { margin-right: auto; } }
html[dir="rtl"] body.ar-blog .post-card .thumb .cat-badge { left: auto; right: 1rem; }
html[dir="rtl"] body.ar-blog .post-content :is(ul, ol) { margin: 1rem 1.5rem 1.5rem 0; }
html[dir="rtl"] body.ar-blog .post-content blockquote { border-left: 0; border-right: 3px solid var(--primary); }
html[dir="rtl"] body.ar-blog :is(.read-more, .btn) svg { transform: scaleX(-1); }
html[dir="rtl"] body.ar-blog .post-card:hover .read-more svg { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] body.ar-blog .footer-legal-links { margin-left: 0; margin-right: auto; }
.ar-en-original { font-size: .9rem; opacity: .8; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); }

/* ── Accessibility statement (standalone page with its own inline styles) ── */
html[dir="rtl"] body.ar-static main :is(ul, ol) { margin-left: 0; margin-right: 22px; }
html[dir="rtl"] body.ar-static .tg-skip-link:focus { left: auto; right: 0; }
html[lang="ar"] body.ar-static, html[lang="ar"] body.ar-static :is(h1, h2, h3) { font-family: "Cairo", "Segoe UI", Tahoma, sans-serif; }
body.ar-static header .crumb { text-transform: none; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
body.ar-static .ar-lang-switch { color: #fff; border-color: rgba(255, 255, 255, .5); }

/* untranslated preview marker (only appears in --allow-missing builds) */
.ar-untranslated { outline: 1px dashed rgba(251, 191, 36, .6); }