/* English site (en/*.html): same design, Latin type and left-to-right fixes.
   Loaded after site.css; only rules that differ from the Arabic layout live here. */
:root {
  --font-ar:      "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-latin:   "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Sans", system-ui, sans-serif;
  --font-lockup:  "IBM Plex Sans", system-ui, sans-serif;
}
html[lang="en"] body { font-feature-settings: "kern" 1; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: break-word; }

/* forward arrows point right in LTR (the Arabic sheet mirrors them unconditionally) */
html[dir="ltr"] .frow .go svg,
html[dir="ltr"] .prow.is-link .go svg { transform: none; }
html[dir="ltr"] .prow.is-link:hover .go svg { transform: translateX(4px); }
html[dir="ltr"] .frow:hover .go,
html[dir="ltr"] .cat .it.is-link:hover .go { transform: translateX(4px); }

/* mega-menu panel is centred with a physical translate */
html[dir="ltr"] .dd-panel { transform: translateX(-50%) translateY(6px); }
html[dir="ltr"] .nav-dd.open .dd-panel,
html[dir="ltr"] .nav-dd:hover .dd-panel,
html[dir="ltr"] .nav-dd:focus-within .dd-panel { transform: translateX(-50%) translateY(0); }

/* values in key/value rows sit at the line end */
html[dir="ltr"] .cside .bx .row b,
html[dir="ltr"] .mini .row b { text-align: right; }

/* trainee sign-in menu on phones opens toward the screen, mirrored */
@media (max-width: 899px) { html[dir="ltr"] .hdr-acts .login-menu { left: auto; right: -216px; } }

/* header call to action: shorter label on phones */
.cta-s { display: none; }
@media (max-width: 420px) { .hdr-acts .btn-gold { padding-inline: 12px; } .hdr-acts .cta-l { display: none; } .hdr-acts .cta-s { display: inline; } }

/* evaluation form: the Arabic form carries small English subtitles; on the English form they only repeat the label */
.ev-grp h3 small, .ev-head span small, .ev-lbl small, .ev-mode legend small { display: none; }

/* logo lockup: identical to the Arabic site (Arabic name over the Latin name, same faces); only its side changes with the direction */
html[lang="en"] [data-lockup], html[lang="en"] [data-lockup] .ar-line, html[lang="en"] [data-lockup] .lat, html[lang="en"] .ftr-brand .lock .nm .lat { font-family: "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif; }

/* desktop header: English labels are longer than the Arabic ones — a slightly smaller lockup and menu, and on
   medium screens the sign-in button shows its icon only and the call to action its short label */
@media (min-width: 1080px) {
  html[lang="en"] .nav, html[lang="en"] .hdr.stuck .nav { gap: 20px; }
  html[lang="en"] .nav a { font-size: 0.875rem; }
}
@media (min-width: 1080px) and (max-width: 1279px) {
  html[lang="en"] .hdr-me span { display: none; }
  html[lang="en"] .hdr-me { padding-inline: 10px; }
  html[lang="en"] .hdr-acts .cta-l { display: none; }
  html[lang="en"] .hdr-acts .cta-s { display: inline; }
}

/* inner-page banner photo: the fade must run toward the text, which sits on the left in English */
@media (min-width: 900px) {
  html[dir="ltr"] .phero-pic::after { background: linear-gradient(to right, var(--color-paper-2) 0%, rgba(246,247,251,.6) 40%, rgba(246,247,251,.1) 100%); }
}
html[lang="en"] .tt-head em { text-transform: lowercase; }