@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/cairo-400.ttf") format("truetype"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/cairo-500.ttf") format("truetype"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/cairo-600.ttf") format("truetype"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/cairo-700.ttf") format("truetype"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/cairo-800.ttf") format("truetype"); }
html[lang="ar"] { direction: rtl; scroll-behavior: smooth; }
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select { font-family: "Cairo", "DM Sans", Arial, sans-serif; }
html[lang="ar"] body { line-height: 1.8; text-align: right; }
html[lang="ar"] body { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[lang="ar"] .site-header { direction: rtl; }
html[lang="ar"] .brand img { object-position: right center; }
html[lang="ar"] .desktop-nav,
html[lang="ar"] .mobile-menu,
html[lang="ar"] .mega-menu,
html[lang="ar"] main,
html[lang="ar"] footer { direction: rtl; text-align: right; }
html[lang="ar"] .language-switch { direction: ltr; }
html[lang="ar"] .hero,
html[lang="ar"] .sf-member-hero .wrap,
html[lang="ar"] .sf-member-content,
html[lang="ar"] .faq-layout,
html[lang="ar"] .contact-panel { direction: rtl; }
html[lang="ar"] .hero h1,
html[lang="ar"] main h1,
html[lang="ar"] main h2,
html[lang="ar"] main h3 { line-height: 1.55; letter-spacing: 0; }
html[lang="ar"] .hero-lede,
html[lang="ar"] .hero-positioning,
html[lang="ar"] .sf-member-lede,
html[lang="ar"] main p,
html[lang="ar"] main li { line-height: 1.9; }
html[lang="ar"] main p,
html[lang="ar"] main li { font-weight: 500; }
html[lang="ar"] .sf-member-grid,
html[lang="ar"] .pathways,
html[lang="ar"] .sf-global-footer,
html[lang="ar"] .footer-main { direction: rtl; }
html[lang="ar"] .language-switch { min-height: 42px; padding: 0 15px; border: 1px solid #d4dce8; border-radius: 7px; background: #fff; color: #102443; font-size: 13px; font-weight: 800; }
html[lang="ar"] .language-switch { min-width: 104px; font-size: 14px; }
html[lang="ar"] .language-switch:hover { background: #eaf4ff; color: #155dff; }
html[lang="ar"] .nav-trigger span { margin: 0 4px 0 0; }
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select { text-align: right; }
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="url"],
html[lang="ar"] input[type="tel"] { direction: ltr; text-align: left; }
html[lang="ar"] :focus-visible { outline: 3px solid #2e72ee; outline-offset: 3px; }
.language-switch { display:inline-flex; align-items:center; flex:none; gap:2px; padding:4px; margin-inline:10px 0; border:1px solid #d8e2ef; border-radius:9px; background:#f2f6fc; box-shadow:0 2px 8px rgba(8,28,58,.08); }
.language-switch button { min-height:34px; min-width:42px; padding:0 9px; border:0; border-radius:6px; background:transparent; color:#213954; font-family:inherit; font-size:12px; font-weight:700; line-height:1; white-space:nowrap; }
.language-switch .language-short { display:none; }
.language-switch button[lang="ar"] { font-size:13px; }
.language-switch button:hover { background:#e2edfc; color:#114ec5; }
.language-switch button.active { background:#155dff; color:#fff; box-shadow:0 2px 8px rgba(21,93,255,.2); }
.language-switch button:focus-visible { outline:3px solid #155dff; outline-offset:2px; }
html[lang="ar"] .language-switch { direction:ltr; }
html[lang="ar"] .language-switch button { direction:auto; }
html[lang="fr"] .language-switch { direction:ltr; }
html[lang="fr"] body { font-size:16px; }
@media (max-width: 900px) {
  html[lang="ar"] .hero { grid-template-columns: 1fr; }
  html[lang="ar"] .site-header .language-switch { margin-inline: auto 8px; }
}
@media (max-width: 760px) {
  .site-header .language-switch { gap:0; margin-inline:0 7px; padding:3px; }
  .site-header .language-switch .language-full { display:none; }
  .site-header .language-switch .language-short { display:inline; }
  .site-header .language-switch button { min-width:35px; min-height:32px; padding-inline:6px; font-size:11px; }
  .site-header .language-switch button[lang="ar"] { min-width:48px; font-size:12px; }
  html[lang="ar"] .site-header .language-switch { margin-inline:0 7px; }
}

/* Use the same Arabic family for body copy and headings with existing sizes. */
html[lang="ar"] { --font-head: "Cairo", sans-serif; --font-body: "Cairo", sans-serif; }

/* Arabic must override the global design system as well as legacy font rules. */
html[lang="ar"] {
  --sf-body-font: "Cairo", sans-serif;
  --sf-heading-font: "Cairo", sans-serif;
  --sf-display-font: "Cairo", sans-serif;
}
html[lang="ar"] body,
html[lang="ar"] body :is(h1,h2,h3,h4,h5,h6,p,a,span,div,section,article,aside,nav,header,footer,ul,ol,li,dl,dt,dd,blockquote,figcaption,label,legend,small,strong,b,em,summary,table,th,td,button,input,select,textarea) {
  font-family: "Cairo", sans-serif !important;
}
