/* storefront/rtl.css — Right-to-left (Arabic) adjustments.
   Part 9 of 9; linked last in views/storefront.html. Spacing, borders and badge positions use
   logical properties (margin-inline-start, inset-inline-end…) elsewhere, so they mirror on their
   own; this file only covers what logical properties cannot: slide/hover movements and text. */

/* ---- Arabic typography (html[lang='ar'], set by js/storefront/i18n.js) ----------------------
   Text: IBM Plex Sans Arabic; headings: Noto Naskh Arabic — a calm humanist sans and a classic
   Naskh that sit well beside Plus Jakarta Sans and Playfair Display. The Latin fonts stay first so
   English second lines, prices and the logo keep the brand faces; Arabic letters fall through to
   the Arabic fonts (then to the system's Arabic fonts while the web fonts load). */
html[lang='ar'] {
  --font-sans:
    'Plus Jakarta Sans', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', sans-serif;
  --font-serif: 'Playfair Display', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Times New Roman', 'Geeza Pro', serif;
  --fs-eyebrow: 0.84rem;
}

/* Arabic letters join: tracking breaks the joins, and capitals do not exist. Eyebrows and small
   labels are set in tracked capitals in English; in Arabic they become plain medium-weight text. */
html[lang='ar'] body,
html[lang='ar'] body * {
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Arabic has taller ascenders and descenders (and dots) than Latin: open up the tight heading
   line-heights so lines do not touch. */
html[lang='ar'] body {
  line-height: 1.8;
}
html[lang='ar']
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    .home-hero-title,
    .page-hero-title,
    .section-title,
    .stat-value,
    .builder-total,
    .builder-bar-total,
    .package-card-price
  ) {
  line-height: 1.45;
}
html[lang='ar'] .brand-logo-sub {
  line-height: 1.4;
  margin-top: 2px;
}

/* Synthetic italics look broken in Arabic script */
html[lang='ar'] :is(.review-quote, .menu-course-empty, .cart-item-note) {
  font-style: normal;
}

/* Every paragraph takes the direction of its own text, so an English second line (or a stray
   English word from the owner's content) keeps its punctuation in place, and text stays
   right-aligned to match the mirrored layout. Phone numbers and order references are wrapped
   in .ltr or Unicode isolates so their digits keep their order. */
[dir='rtl'] body {
  text-align: right;
}
[dir='rtl'] body * {
  unicode-bidi: plaintext;
}

/* Side navigation drawer slides in from the right */
[dir='rtl'] .nav-drawer {
  transform: translateX(100%);
}
[dir='rtl'] .nav-drawer.open {
  transform: translateX(0);
}

/* Cart drawer slides in from the left */
[dir='rtl'] .cart-drawer {
  transform: translateX(-100%);
}
[dir='rtl'] .cart-drawer.open {
  transform: translateX(0);
}

/* Arrows that nudge forward on hover keep their mirrored direction */
[dir='rtl'] .drawer-menu-item:hover .drawer-item-arrow,
[dir='rtl'] .drawer-menu-item.active .drawer-item-arrow,
[dir='rtl'] .text-link:hover .fa-arrow-right {
  transform: scaleX(-1) translateX(3px);
}

[dir='rtl'] .section-header-start .section-title::after {
  background:
    linear-gradient(var(--brand-primary), var(--brand-primary)) right / 48px 1px no-repeat,
    linear-gradient(270deg, var(--line-strong), transparent);
}

/* Directional arrow icons point the other way */
[dir='rtl'] .fa-arrow-right,
[dir='rtl'] .fa-arrow-left,
[dir='rtl'] .fa-chevron-right,
[dir='rtl'] .fa-chevron-left,
[dir='rtl'] .fa-angle-right,
[dir='rtl'] .fa-angle-left,
[dir='rtl'] .fa-arrow-right-long {
  transform: scaleX(-1);
}

/* The language buttons name Arabic in Arabic on the English site too */
:is(.header-pref-btn, .drawer-utility-item)[lang='ar'] {
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', var(--font-sans);
}

/* The English second line under an Arabic dish name is set left-to-right but lines up on the right */
html[dir='rtl'] .dish-name-other {
  text-align: right;
}