/* en.css — layout corrections for the English pages only (2026-10-29).
 *
 * Loaded by en/<slug>.html alone (scripts/en-page.js adds it last in the head),
 * so nothing here can reach an Arabic page. The site's styles were written for
 * right to left and for Arabic word lengths; most already use logical
 * properties and follow dir="ltr". What is here is what did not:
 *   - text set never to wrap, which suited a short Arabic line and pushes an
 *     English one out of its column;
 *   - arrows and icons that point the Arabic way.
 * Each rule says what it corrects. */

/* The hero heading was white-space: nowrap; the English line is longer and
   widened its grid column until the quick-donation card left the screen. */
/* The nowrap rule is "#home #hero-title, #home h1", so this matches its ids. */
html[lang="en"] #home #hero-title, html[lang="en"] #home h1 { white-space: normal; text-wrap: balance; }
html[lang="en"] .hero-col--intro { min-width: 0; }

/* The drawer sits at the start edge, left here, but was moved by +100% to
   hide: it slid in from the middle of the screen. It comes from the left. */
html[lang="en"] .mbh-drawer { transform: translateX(-100%); box-shadow: 20px 0 50px -30px rgba(10, 42, 61, .5); }
html[lang="en"] .mbh-drawer.is-open { transform: none; }

/* Six quick buttons in one row left 54px each; «WhatsApp» and «Accessibility»
   ran into their neighbours. Two rows of three. */
html[lang="en"] .mbh-drawer__quick { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* «Give now» on the menu's campaign card pointed back, the Arabic way. */
html[lang="en"] .mbh-go .mbh-i { transform: scaleX(-1); }
html[lang="en"] .mbh-camp:hover .mbh-go .mbh-i { transform: scaleX(-1) translateX(-3px); }