/* ar.css — Arabic (/ar/) type layer.
   Loaded ONLY by pages under /ar/. Nothing here affects the English site.

   Owner decision, 31 Aug 2026: Noto Naskh Arabic (display) + Noto Sans Arabic
   (text). Both self-hosted, so Arabic pages make no third-party font request.
   Both are variable fonts: one file covers every weight in use.
   Licence: SIL Open Font License 1.1. */

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("../fonts/noto-naskh-arabic-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../fonts/noto-sans-arabic-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}


@font-face {
  font-family: "Scheherazade New";
  src: url("../fonts/scheherazade-new-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Faces are named literally, NOT composed from the --font-*-ar tokens.
   Those tokens end in a generic family ("Noto Naskh Arabic", serif), and
   interpolating one mid-stack plants a generic terminator in the middle,
   which makes every later entry unreachable. The tokens stay in tokens.css
   as the record of the decision; this file builds the working cascade. */

/* Arabic pages use the Arabic faces for everything, Latin characters and
   spaces included (owner decision, 12 Oct 2026). Cormorant Garamond and Inter
   used to be listed first here but never loaded on /ar/, so this is the look
   the owner reviewed; since they are now self-hosted in fonts.css they would
   start to load and change spacing and line breaks. Do not put them back. */
:root {
  /* Noto Naskh, then Georgia : Scheherazade New as the fallback pair. */
  --font-display: "Noto Naskh Arabic", Georgia,
                  "Scheherazade New", "Times New Roman", serif;
  --font-text: "Noto Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* Overlines. English signals "label" with uppercase plus 0.12em tracking.
   Neither device works here: Arabic has no case, so text-transform is inert,
   and the script is cursive, so tracking pulls the letter joins apart.
   Restore the hierarchy with size instead, and switch tracking off. */
:root {
  --tracking-overline: normal;
  --size-overline: 0.9375rem;   /* 15px, up from 13px */
}

/* Arabic sets taller than Latin at the same px size. */
body { line-height: 1.85; }

/* Latin numerals read left-to-right inside RTL copy. The stat component builds
   each digit as its own element, so bidi reordered "3,000+" into "+000, 3". */
.ac-stat-animation__number,
.ac-stat-animation__digit-window,
.ac-stat-animation__digit-reel {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Phone numbers: each is one LTR run, but the bidi algorithm still treats the
   space-separated digit groups inside it as independently reorderable weak
   runs when the surrounding paragraph is RTL -- the classic "phone number
   reads backwards" bug (+961 3 921 869 rendering as 869 921 3 961+). Isolate
   the whole number as one atomic unit so its internal group order is fixed. */
a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Bilingual wordmark lockup: عطية وشبلي | Attieh & Chebli -- Arabic on the
   right, Latin on the left (owner correction, 7 Sep 2026). The DOM order is
   [wm-ar, wm-sep, wm-lat] (see build_ar.py step 7d); this flex row is
   deliberately left to inherit the page's dir="rtl" rather than forcing
   direction:ltr, so the first flex item (wm-ar) lands at the RTL start
   (right) and the last (wm-lat) at the RTL end (left). Flex item order is a
   layout property, not text bidi, so this is exact -- no reordering risk.
   Both halves inherit --font-display, so Latin takes Cormorant and Arabic
   falls through to Noto Naskh with no extra font-family. */
.brand-wordmark--bi {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
}
.wm-sep {
  color: var(--accent);
  font-weight: 700;   /* bold, to match both halves (owner, 12 Oct 2026); was 300 */
  opacity: 0.75;
}
/* Lockup (owner requests, 12 Oct 2026): both halves in bold. Arabic half:
   Noto Naskh Arabic 700. Latin half: Cormorant Garamond 700, the brand face.
   The bold Latin file is declared under its own family name so that it is
   used here only: the shared "Cormorant Garamond" (fonts.css) stops at 600
   and the English pages must not change. This is the one place on the Arabic
   pages where a Latin face is named. */
@font-face {
  font-family: "Cormorant Garamond Wordmark";
  src: url("../fonts/cormorant-garamond-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.brand-wordmark--bi .wm-ar {
  font-weight: 700;
}
.brand-wordmark--bi .wm-lat {
  font-family: "Cormorant Garamond Wordmark", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 700;
}

/* Header at mid widths (owner report, 12 Oct 2026). The bilingual lockup
   takes ~330px, so the full Arabic menu needs about 1115px on one line. From
   900px (where the base CSS shows the full menu) up to that point the menu
   items wrapped onto two lines and the contact button was pushed off the
   left edge. Fix: menu items never wrap, and Arabic keeps the menu button
   (drawer) until 1180px, where the full menu fits with room to spare. */
.nav-primary .nav-link,
.nav-cta {
  white-space: nowrap;
}
@media (min-width: 900px) and (max-width: 1179px) {
  .nav-primary { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* The bilingual lockup is ~2x the width of the Latin wordmark alone. At 26px
   it is 333px, which overflowed a 375px viewport by 93px and pushed the menu
   button off-screen. Measured budget is ~240px, so 18px fits with margin. */
@media (max-width: 768px) {
  .brand-wordmark--bi {
    font-size: 1.125rem;   /* 18px */
    gap: 0.35em;
  }
}

/* Offices section: city images must sit physically LEFT of their text in
   the Arabic layout at every width (HOMEPAGE_AR_REVIEW.md, 6 Sep 2026).
   The base rule floats the image with a PHYSICAL `float: right` (there is
   no logical float shorthand equivalent here), so it stays right regardless
   of page direction. The margin-inline-start/end pair around it is already
   logical and re-resolves correctly once the float side flips -- only the
   float itself needs overriding. Mobile's grid-area layout already tracks
   direction (grid column order follows the container's `direction`), so it
   needs no override. */
@media (min-width: 480px) {
  #offices .oc-img { float: left; }
}

/* Stat-label animation: the base build (main.js) makes one 3D-flip tile per
   CHARACTER, sized and absolutely-positioned for a single glyph -- fine for
   Latin, but a mid-word Arabic letter is a different glyph shape than the
   same letter alone, so splitting the word apart breaks its shaping. main.js
   skips that per-character split when <html lang="ar"> and instead splits by
   WORD, one flip tile each (".ac-stat-animation__tile--word") -- same
   bracket-box flip effect, just one word per bracket instead of one letter.
   A fixed-width tile (the base rule's `inline-size: clamp(...)`) can't hold a
   whole word, and an absolutely-positioned face can't size an auto-width
   flip parent on its own (position:absolute removes it from the size
   calculation) -- so here the FRONT face stays in normal flow (defining the
   tile's width from its own text) and only the BACK face is absolutely
   positioned over it for the flip. */
.ac-stat-animation__label--word {
  gap: 6px;
}
.ac-stat-animation__tile--word {
  inline-size: auto;
  overflow: visible;
}
.ac-stat-animation__tile--word .ac-stat-animation__face {
  padding-inline: 0.35em;
  white-space: nowrap;
}
.ac-stat-animation__tile--word .ac-stat-animation__face[data-face="front"] {
  position: relative;
}

/* Nav-link hover/active underline (owner request, 8 Sep 2026): the base
   rule's transform-origin: 0 50% is a PHYSICAL box coordinate (always the
   element's own left edge), not a logical one -- inset-inline: 0 correctly
   spans the underline full-width under RTL, but it still always grows out
   from the left, the English reading direction. Anchor it to the right
   edge instead so it grows right-to-left, matching Arabic reading order. */
.nav-link::after {
  transform-origin: 100% 50%;
}

/* Consent confirmation: the close button sits on the left in RTL, so its
   negative corner offset moves to the left edge (components.css uses physical
   top/right margins). */
.ac-dismiss { margin: calc(var(--space-3) * -1) 0 0 calc(var(--space-3) * -1); }