/* Arabic page (/ar/): right-to-left layout on top of site.css.
   Arabic letters use Noto Sans Arabic; numbers and English words keep
   Bricolage Grotesque, so they match the English page and the leaflet. */

@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/noto-sans-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFC; }

:root {
  --display: "Noto Sans Arabic", "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --sans: "Noto Sans Arabic", "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

/* Arabic needs more line height and no letter spacing (spacing breaks joined letters). */
body { line-height: 1.8; }
h1, h2, h3, .eyebrow, .gap-kicker, .gap-title, .tag, .badge span, .footer-grid h2, .hero-cred, .step-number { letter-spacing: 0; text-transform: none; }
h1, h2 { line-height: 1.35; }
h3 { line-height: 1.5; }
.hero h1 { line-height: 1.2; letter-spacing: 0; }
.hero-cred { line-height: 1.6; }
.eyebrow { font-size: .9rem; }
.accordion summary { line-height: 1.6; }

/* Keep the logo lockup exactly as designed. */
.brand, .footer-brand { direction: ltr; }

/* Language switch ("English") */
.lang-switch { font-family: "Bricolage Grotesque", sans-serif; }

/* Mirror things that were positioned for left-to-right reading. */
.skip-link { left: auto; right: 12px; }
.main-nav { margin-left: 0; margin-right: auto; }
.arrow { transform: scaleX(-1); }
.tag { margin-left: 0; margin-right: 4px; }
.session-card { border-left: 0; border-right: 5px solid var(--pen); }
.steps li:not(:last-child)::after { right: auto; left: -28px; transform: scaleX(-1); }
.step-number { left: auto; right: -2px; }
.about-prose { padding: 4px 30px 4px 0; border-left: 0; border-right: 2px solid var(--pen); }
.accordion summary { padding: 20px 0 20px 44px; }
.accordion summary::after { right: auto; left: 0; }
.accordion details p { padding: 0 0 22px 34px; }
input[dir="ltr"] { text-align: right; }
input[dir="ltr"]:focus, input[dir="ltr"]:not(:placeholder-shown) { text-align: left; }

@media (max-width: 760px) {
  .about-prose { padding-left: 0; padding-right: 20px; }
  .menu-toggle { margin-left: 0; margin-right: 8px; }
  .lang-switch { margin-left: 0; margin-right: auto; }
  .tag { margin: 4px 0 0; }
}

/* Background details mirrored for right-to-left reading */
.faq::after { -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent 100%); mask-image: linear-gradient(270deg, #000 40%, transparent 100%); }
.about::after { transform: scaleX(-1) rotate(-8deg); }