/* ==========================================================================
   Arabic / RTL layer — loaded only on the pages inside /ar/
   The base stylesheet uses CSS logical properties, so this file only
   swaps typography and fixes the few direction-specific details.
   ========================================================================== */

html[dir="rtl"]{
  --font-display:'Almarai', 'Tajawal', sans-serif;
  --font-body:'Tajawal', 'Segoe UI', sans-serif;
  --font-ui:'Tajawal', sans-serif;
}

html[dir="rtl"] body{line-height:1.95;font-size:17px}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4{letter-spacing:0;line-height:1.4;font-weight:700}

html[dir="rtl"] h1{font-size:clamp(2rem,4.6vw,3.3rem)}
html[dir="rtl"] h2{font-size:clamp(1.6rem,3vw,2.3rem)}

/* Arabic reads better without wide letter-spacing / uppercase tricks */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .btn,
html[dir="rtl"] .nav a,
html[dir="rtl"] .lang,
html[dir="rtl"] .crumbs,
html[dir="rtl"] .filters button,
html[dir="rtl"] .tag,
html[dir="rtl"] .field label,
html[dir="rtl"] .foot-grid h4,
html[dir="rtl"] .card-body .go,
html[dir="rtl"] .hero-facts span,
html[dir="rtl"] .quote span,
html[dir="rtl"] .brand-name small,
html[dir="rtl"] .foot-brand span{
  letter-spacing:0;
  text-transform:none;
  font-weight:500;
}

html[dir="rtl"] .eyebrow{font-size:.82rem}
html[dir="rtl"] .btn{font-size:.9rem;font-weight:500}
html[dir="rtl"] .nav a{font-size:.95rem}
html[dir="rtl"] .brand-name b{font-size:1.05rem;letter-spacing:0;text-transform:none;font-weight:700}
html[dir="rtl"] .brand-name small{font-size:.72rem}
html[dir="rtl"] .foot-brand b{font-size:1.25rem;letter-spacing:0;text-transform:none}
html[dir="rtl"] .foot-brand span{font-size:.85rem}
html[dir="rtl"] .hero-sub{letter-spacing:0;text-transform:none;font-size:clamp(1rem,1.8vw,1.2rem)}
html[dir="rtl"] .hero-facts span{font-size:.86rem}
html[dir="rtl"] .filters button{font-size:.88rem}
html[dir="rtl"] .field label{font-size:.85rem}
html[dir="rtl"] .card-body .go{font-size:.85rem}
html[dir="rtl"] .tag{font-size:.75rem}
html[dir="rtl"] .crumbs{font-size:.85rem}
html[dir="rtl"] .topbar{font-size:.85rem}

/* the English lock-up used inside the Arabic pages keeps its Latin face */
html[dir="rtl"] .en{
  font-family:'Marcellus', serif;
  direction:ltr;
  letter-spacing:.05em;
}

/* arrows point the other way in RTL */
html[dir="rtl"] .card-body .go svg{transform:scaleX(-1)}
html[dir="rtl"] .card:hover .card-body .go svg{transform:scaleX(-1) translateX(5px)}

/* the offset gold frame mirrors */
html[dir="rtl"] .framed::after{inset-inline-end:-18px}

/* phone numbers and addresses stay left-to-right inside RTL text */
html[dir="rtl"] .ltr{direction:ltr;display:inline-block;unicode-bidi:embed}

html[dir="rtl"] .tile-code{letter-spacing:.12em}

/* mobile: Arabic labels are wider, so give the swipe strip a little more room */
@media (max-width:680px){
  html[dir="rtl"] .filters button{font-size:.82rem;padding:10px 18px}
  html[dir="rtl"] .tile-body h3{font-size:.98rem;line-height:1.5}
  html[dir="rtl"] .tile-body p{font-size:.85rem;line-height:1.75}
  html[dir="rtl"] .cards--5 .card-body h3{font-size:.95rem}
}


/* mobile menu: in RTL the panel comes from the left, so the shadow flips */
@media (max-width:900px){
  html[dir="rtl"] .nav{box-shadow:16px 0 46px rgba(14,24,38,.18)}
  html[dir="rtl"] .nav.is-open{transform:none}
}