/* ==========================================================================
   VOYZ — Arabic typography layer  (applies only under .lang-ar)

   Arabic is not Latin at a different width. Three things break when a Latin
   scale is reused verbatim, and all three were happening here:

   1. SIZE. Arabic letterforms carry meaning in dots and short strokes that
      vanish below ~15px. A 12px caption that reads fine in French is
      genuinely illegible in Arabic. The small end of the scale therefore
      compresses: 10/11/12px all resolve to roughly one readable size.
   2. LEADING. Ascenders and descenders travel much further, and diacritics
      sit above the line. Body copy wants ~1.9, headings ~1.4 — where the
      Latin side happily runs 1.6 and 1.08.
   3. WEIGHT. At Light (300) Arabic goes spindly and the joins disappear.
      Display text moves to 500, UI labels to 600.

   Letter-spacing and uppercase are meaningless-to-harmful here: Arabic is a
   connected script, so tracking breaks the joins and text-transform does
   nothing but throw off the metrics.
   ========================================================================== */

/* ---------- Global corrections ---------- */
.lang-ar{
  --fw-display: 500;
  --fw-heading: 500;
  --fw-medium:  500;
  --fw-label:   600;
  --track-hero: 0; --track-h2: 0; --track-h3: 0; --track-label: 0;
}
.lang-ar body{line-height:1.9}

/* Tracking and casing never apply to Arabic. */
.lang-ar *{letter-spacing:0 !important}
.lang-ar :is(.section-tag,.eyebrow,.auth-label,.hero-kicker,.beat-verb,
             .pass-kind,.pass-fields dt,.pass-seat dt,.agency-facts dt,
             .side-nav small,.data-table thead th,.tile-copy>span,
             .editorial-grid small,.stat-grid span){text-transform:none}

/* ---------- Headings ---------- */
.lang-ar :is(h1,h2){font-weight:var(--fw-display);line-height:1.4}
.lang-ar h3{font-weight:600;line-height:1.55}
/* The Latin display scale tops out too large once Arabic leading is applied.
   line-height is repeated on each rule: the component sheets set it at higher
   specificity (e.g. .home-section-head h2 {line-height:1.02}) and would
   otherwise keep their Latin-tight leading, which clips Arabic ascenders. */
.lang-ar .home-section-head h2{font-size:clamp(30px,3.6vw,46px);line-height:1.4}
.lang-ar .departure-copy h2,
.lang-ar .why-copy h2,
.lang-ar .clarity-sticky h2,
.lang-ar .agency-cta h2,
.lang-ar .confidence-heading h2,
.lang-ar .home-section-head.compact h2{font-size:clamp(28px,3.4vw,44px);line-height:1.4}
.lang-ar .takeoff-content h1{font-size:clamp(34px,5vw,64px);line-height:1.35}
.lang-ar .dash-heading h1{font-size:clamp(22px,1.9vw,27px);line-height:1.45}
.lang-ar :is(.tile-copy h3,.offer-card h3,.editorial-grid strong,.wilaya-card strong){line-height:1.5}

/* ---------- Reading text: nothing below 15px ---------- */
.lang-ar :is(p,li,dd,figcaption,blockquote){line-height:1.9}
.lang-ar :is(
  .why-steps p,.intent-item p,.clarity-list p,.journey-map p,
  .home-section-head>p,.why-copy p,.clarity-sticky p,.agency-cta p,
  .departure-copy>p,.departure-beats p,.tile-copy p,.mood-editorial p,
  .offer-meta,.offer-inclusions,.signal-strip span,.footer-layout p,
  .auth-intro,.after-signup,.empty-state,.dash-empty p,.doc-chip small,
  .dash-heading p,.panel-head p,.activity-list small,.tips li,.field small
){font-size:15px;line-height:1.85}

/* Labels and metadata: one readable step below body. */
.lang-ar :is(
  .section-tag,.eyebrow,.auth-label,.beat-verb,.hero-kicker,
  .pass-kind,.pass-fields dt,.pass-seat dt,.agency-facts dt,
  .side-nav small,.stat-grid span,.summary-stack span,
  .editorial-grid small,.tile-copy>span,.offer-price small,.offer-price span,
  .wilaya-card em,.status,.verified,.field-hint,.errorlist
){font-size:14px;line-height:1.7}

/* Controls and navigation. */
.lang-ar :is(.button,.desktop-nav a,.header-login,.side-nav a,.side-bottom a,
             .dash-top-link,.dash-top-title,.panel-head>a,.summary-stack a,
             .offer-link,.destination,.table-actions .button,.cell-note>summary
){font-size:15px}
.lang-ar .button{min-height:48px}

/* Data tables read denser, but still never below 14px. */
.lang-ar :is(.data-table th,.data-table td){font-size:14px;line-height:1.7}
.lang-ar .data-table thead th{font-size:13px}

/* Forms. */
.lang-ar :is(.field label,.auth-field label,.pro-form .field label){font-size:14px}
.lang-ar :is(input,select,textarea){font-size:15px;line-height:1.7}
.lang-ar .dash-content textarea{line-height:1.85}

/* ---------- Layout corrections ---------- */
/* Arabic runs longer than French for the same content; give copy more room. */
.lang-ar .departure-copy h2{max-width:20ch}
.lang-ar .departure-copy>p{max-width:52ch}
.lang-ar .home-section-head>p{max-width:46ch}

/* Icons that encode direction must mirror; brand marks and media must not. */
.lang-ar :is(.why-copy,.section-action,.wilaya-action,.summary-stack a,
             .panel-head>a,.offer-link,.dash-top-link) svg{transform:scaleX(-1)}

/* The takeoff hero art is a photograph — never flip it. */
.lang-ar :is(.takeoff-scene,.voyz-logo img,.wilaya-card img,.editorial-grid img,
             .departure-tile img,.flight-plane){transform:none}

@media (max-width:720px){
  .lang-ar .takeoff-content h1{font-size:clamp(28px,7vw,40px)}
  .lang-ar .home-section-head h2{font-size:clamp(26px,6vw,34px)}
}