/* Yalla Vending | Arabic and right-to-left.
   Loaded only by the Arabic pages, on top of site.css and home.css.
   Two jobs: swap the type for Arabic faces that match the Latin ones in weight
   and geometry, and mirror the handful of rules that were written physically.
   Nothing here changes a size or a margin, so both languages lay out identically. */

/* ============================================================
   TYPE
   Cairo carries the same wide geometric weight as Lexend.
   IBM Plex Sans Arabic is the Arabic sibling of the Plex Mono already in use
   and sits at the same colour on the page as Outfit.
   ============================================================ */
[dir="rtl"]{
  --display:'Cairo','Lexend',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic','Outfit',system-ui,sans-serif;
  --mono:'IBM Plex Sans Arabic',ui-monospace,monospace;
}

/* Arabic is cursive: letter-spacing pulls the joins apart and breaks the word.
   Every tracked label on the site gets its spacing removed here. */
[dir="rtl"] body *{letter-spacing:normal}

/* Cairo sits taller on the em than Lexend, so the tight display leading needs a
   little air or the ascenders clip. Kept small so section heights do not grow. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{line-height:1.14}
[dir="rtl"] .band .band-h{line-height:1.16}

/* A ch unit measures the font's own zero, and Cairo's is narrower than Lexend's,
   so the same cap breaks Arabic headlines a line earlier and grows the section.
   These caps are tuned so each headline wraps onto the same number of lines as
   its English counterpart, which keeps both pages the same height. */
[dir="rtl"] h2.big{max-width:25ch}
[dir="rtl"] .band .band-h{max-width:22ch}
[dir="rtl"] .band[data-pos="top"] .band-h{max-width:18ch}
[dir="rtl"] .lede{max-width:58ch}
[dir="rtl"] .band .sub{max-width:52ch}
[dir="rtl"] .pts p{max-width:52ch}
[dir="rtl"] .faq dd{max-width:52ch}

/* numerals stay Latin so prices, grams and phone numbers read the same both ways */
[dir="rtl"] .dm-t,[dir="rtl"] .pts .n,[dir="rtl"] .drink .tag,
[dir="rtl"] a[href^="tel:"]{font-variant-numeric:tabular-nums}

/* ============================================================
   MIRRORS, site.css
   ============================================================ */
[dir="rtl"] .skip{left:auto;right:-9999px;border-radius:0 0 0 .6rem}
[dir="rtl"] .skip:focus{left:auto;right:0}

[dir="rtl"] .pourline{left:auto;right:calc(var(--gut) * .42)}

[dir="rtl"] .ovl-x{right:auto;left:.8rem}

[dir="rtl"] .dm-t th{text-align:left}
[dir="rtl"] .dm-t th:first-child{text-align:right}
[dir="rtl"] .dm-t td{text-align:left}
[dir="rtl"] .dm-t td:first-child{text-align:right;padding-right:0;padding-left:1.2rem}

[dir="rtl"] .dm h3{padding-right:0;padding-left:2.5rem}

/* ============================================================
   MIRRORS, home.css
   ============================================================ */

/* the rail moves to the left edge and its open side flips with it */
[dir="rtl"] .rail{right:auto;left:0;border-left:0;
  border-right:1px solid rgba(255,152,49,.18);border-radius:0 .9rem .9rem 0}

[dir="rtl"] .cue{left:auto;right:var(--gut)}

/* the caption grids mirror on their own in RTL, but gradients are physical,
   so each band's scrim has to be pointed the other way to follow its text */
[dir="rtl"] .band[data-pos="left"]::before{
  background:linear-gradient(270deg,rgba(5,5,10,.90) 0%,rgba(5,5,10,.87) 38%,
    rgba(5,5,10,.72) 52%,rgba(5,5,10,.34) 66%,rgba(5,5,10,0) 80%)}
[dir="rtl"] .band[data-pos="right"]::before{
  background:linear-gradient(90deg,rgba(5,5,10,.90) 0%,rgba(5,5,10,.87) 38%,
    rgba(5,5,10,.72) 52%,rgba(5,5,10,.34) 66%,rgba(5,5,10,0) 80%)}
[dir="rtl"] .band[data-pos="right"]{text-align:left}
[dir="rtl"] .band[data-pos="right"] .band-h{margin-left:0;margin-right:auto}

/* the rail's reserved lane swaps sides with the rail */
@media (min-width:1181px) and (min-height:621px){
  [dir="rtl"] .band[data-pos="right"]{
    padding-right:var(--gut);padding-left:calc(var(--gut) + 5.5rem)}
}

/* the four-step rail: dividers, padding and nodes all flip */
[dir="rtl"] .step{padding:2.1rem 0 0 1.4rem}
[dir="rtl"] .step + .step{padding-left:0;padding-right:1.6rem;
  border-left:0;border-right:1px solid rgba(255,243,212,.12)}
[dir="rtl"] .step .node{left:auto;right:0}
[dir="rtl"] .step + .step .node{left:auto;right:1.6rem}
@media (max-width:900px){
  [dir="rtl"] .step:nth-child(3){border-right:0;padding-right:0}
  [dir="rtl"] .step:nth-child(3) .node{right:0}
}
@media (max-width:560px){
  [dir="rtl"] .step{border-right:0!important;padding-right:0!important}
  [dir="rtl"] .step .node{left:auto!important;right:0!important}
}

[dir="rtl"] .drink .more{left:auto;right:.8rem}

/* the events band's readability wash follows the text to the other side */
[dir="rtl"] .events .ov{
  background:linear-gradient(270deg,rgba(14,13,11,.94) 0%,rgba(14,13,11,.72) 42%,
    rgba(14,13,11,.28) 100%)}

/* the switch itself is styled in site.css, since both languages carry it */