/* ==========================================================================
   Arabic / right-to-left overrides.
   Loaded only on /ar/ pages, after style.css. Everything here either mirrors a
   direction-specific rule or swaps in the Arabic typeface pairing:
   Amiri (display serif, echoing Fraunces) + Tajawal (body sans, echoing Archivo).
   ========================================================================== */

:root {
  --serif: "Amiri", "Times New Roman", Georgia, serif;
  --sans: "Tajawal", "Segoe UI", Arial, sans-serif;
}

body { font-size: 17px; line-height: 1.85; }

/* Arabic script has no uppercase, so tracked-out capitals just look broken. */
.eyebrow,
.brand-name,
.site-footer h4,
.crumbs,
.svc-go,
.tag,
.job-fact__label,
.stat p,
.footer-bottom {
  text-transform: none;
  letter-spacing: 0;
}
.eyebrow { font-size: 15px; font-weight: 700; }
.brand-name { font-size: 19px; font-weight: 700; }
.site-footer h4 { font-size: 15px; }
.svc-go { font-size: 15px; }
.tag { font-size: 13px; }
.job-fact__label { font-size: 13px; }
.crumbs { font-size: 14px; }

/* Headings: Amiri sits small at a given size, so it needs a nudge up. */
h1, h2, h3, .display { line-height: 1.35; letter-spacing: 0; }
.hero h1 { font-size: clamp(40px, 5.6vw, 66px); }
.page-hero h1 { font-size: clamp(36px, 4.6vw, 54px); }
.section-head h2 { font-size: clamp(32px, 3.8vw, 44px); }
.hero h1 em, .cta-band h2 em { font-style: normal; color: #c4d585; }

/* --- directional mirroring ------------------------------------------------ */

/* The hero veil is heaviest under the copy, which now sits on the right. */
.hero-photo::after {
  background:
    linear-gradient(180deg, rgba(22, 24, 15, 0.95), rgba(22, 24, 15, 0) 40%),
    linear-gradient(264deg, rgba(22, 24, 15, 0.92) 25%, rgba(22, 24, 15, 0.5) 70%, rgba(22, 24, 15, 0.72));
}
.hero .wrap, .page-hero .wrap { text-align: right; }

.crumbs span { margin: 0 8px; }

/* Accent borders move to the right edge */
.job { border-left: 1px solid var(--line); border-right: 3px solid var(--olive); }
.job-facts { border-left: 1px solid var(--line); border-right: 3px solid var(--olive); }
.sub { left: auto; right: 0; }
.contact-info { border-left: none; padding-left: 0; border-right: 1px solid var(--line); padding-right: 50px; }
.nav-cta { margin-left: 0; margin-right: 14px; }
.has-sub > a::after { margin-left: 0; margin-right: 7px; }
.job-list { margin-left: 0; margin-right: 20px; }
.job ul { margin: 14px 20px 0 0; }
.detail-list li { grid-template-columns: 56px 1fr; }
.svc-row { grid-template-columns: 80px 1.1fr 1.6fr auto; }

/* Job postings and their questions are entered once, in whichever language the
   team wrote them. Resolving direction per block keeps an English question
   readable on the Arabic page — otherwise its "?" jumps to the wrong end. */
.page-hero h1,
.job h3,
.job-meta .tag,
.job-fact,
.job-block h3,
.job-list li,
.detail-list h3,
.detail-list p,
.field > label,
.field .field-label,
.field .radio,
.apply-card .form-note {
  unicode-bidi: plaintext;
}

/* Numerals and addresses stay left-to-right inside Arabic text */
.svc-num, .stat-n { direction: ltr; unicode-bidi: embed; }
[dir="ltr"] { direction: ltr; unicode-bidi: embed; display: inline-block; }

.check-list svg { margin-top: 6px; }

.cta-band .cta-actions { justify-content: flex-start; }

.form-note, .field .field-label, .field > label { text-align: right; }

/* The language toggle keeps its own script's direction */
.lang-toggle { direction: ltr; }
[lang="ar"].lang-toggle { direction: rtl; }

@media (max-width: 860px) {
  .has-sub > a::after { float: left; }
  .sub { padding: 0 18px 0 0; }
  .contact-info { border-right: none; padding-right: 0; border-top: 1px solid var(--line); padding-top: 40px; }
  .nav-cta { margin-right: 0; }
  .svc-row { grid-template-columns: 48px 1fr; }
  .cta-band .cta-actions { justify-content: flex-start; }
}