/**
 * Loaded only when dir="rtl". Grid/flexbox mirror automatically;
 * this file only fixes what doesn't: fonts (no Arabic glyphs in the
 * Latin typefaces) and absolute-positioned elements using left/right.
 */

:root {
  --font-display-ar: 'Noto Naskh Arabic', serif;
  --font-ui-ar: 'Tajawal', sans-serif;
}

body,
.wordmark,
.nav-links a,
.eyebrow,
.mega-cat,
.hero-caption-slide h1,
.intro p,
.about-copy p,
.collection-tile-location,
.collection-tile-year,
.collection-tile-status,
.collection-intro p,
.collection-intro-sizes-label,
.collection-intro-sizes-value,
.collection-intro-contact,
.collection-intro-cta,
.category-tile-bar,
.mobile-nav-link,
.mobile-nav-sublinks a,
.mobile-nav-lang,
.collection-category-nav,
.tour-hero-inner h1,
.footer-name,
.footer-tagline,
.footer-heading,
.footer-nav-col a,
.footer-email,
.footer-location,
.footer-meta,
.footer-lang,
.tours-teaser-copy p,
.tour-heading,
.tour-fact-label,
.tour-itinerary li,
.tour-note,
.tour-list li,
.tour-guarantee,
.tour-section p,
.tour-tag,
.tour-cta p,
.tour-gallery-caption h3,
.tour-gallery-tile--panel p,
.tour-gallery-panel-cta,
.exhibit-item-title,
.exhibit-item-venue,
.exhibit-item-detail,
.exhibit-stat-label,
.book-type-badge,
.book-featured-subtitle,
.book-edition-badge,
.book-description,
.book-specs li,
.book-availability-badge,
.book-publisher,
.book-publisher-link,
.book-order-cta {
  font-family: var(--font-ui-ar);
}

.wordmark,
.hero-caption-slide h1,
.intro p,
.about-copy p,
.mega-cat,
.footer-name,
.tours-teaser-copy h2,
.tour-lead p,
.tour-fact-value,
.tour-cta h2,
.tour-gallery-tile--panel h3,
.hero-side-caption h1,
.exhibit-year-heading,
.exhibit-stat-value,
.about-split-copy p,
.collection-category-header h1,
.book-featured-copy h2,
.book-catalogues-heading h2,
.book-card-copy h3 {
  font-family: var(--font-display-ar);
}

.title-signature,
.title-exclusive,
.tours-teaser-copy h2,
.tour-cta h2,
.hero-side-caption h1,
.book-featured-copy h2,
.book-catalogues-heading h2,
.book-card-copy h3 {
  font-family: var(--font-display-ar);
  font-style: normal; /* Arabic serif italics render poorly — use weight instead */
  font-weight: 500;
}

/* Hero caption: "last quarter" flips to the left in RTL reading direction */
.hero-caption { right: auto; left: 0; }
.hero-side-caption { right: auto; left: 0; }
.hero-caption-slide { padding: 60px 28px 60px 40px; }
.tile-label { left: auto; right: 20px; }

/* Lightbox prev/next: swapped so "next" still advances in reading direction */
.lightbox-prev { left: auto; right: 12px; }
.lightbox-next { right: auto; left: 12px; }
@media (max-width: 560px) {
  .lightbox-prev { right: 4px; }
  .lightbox-next { left: 4px; }
}

/* About section is a centered stack now (portrait window + centered copy) —
   no left/right mirroring needed for RTL. */

/* Mega menu categories read right-to-left */
.mega-menu-inner { flex-direction: row-reverse; }

/* Contact page */
.contact-hero-caption { right: auto; left: 0; }
.contact-name, .contact-hero-caption h1 {
  font-family: var(--font-display-ar);
  font-style: normal;
  font-weight: 500;
}
.contact-title-line,
.contact-block-label,
.contact-email-sublabel,
.contact-address p,
.contact-email-link,
.contact-whatsapp-link,
.contact-response-note { font-family: var(--font-ui-ar); }

/* Photo Tours teaser gradient: .tours-teaser's grid columns auto-mirror
   under RTL (text column moves from left to right, image column left),
   but the tint's linear-gradient(90deg, ...) is a fixed physical
   direction that does NOT auto-mirror the same way — it kept darkening
   the physical left (now the image) while the text, now on the right,
   sat over the untinted end of the gradient with nothing behind it for
   contrast. Mirrored to 270deg here so the dark end follows the text
   column to the right instead. */
.tours-teaser::before {
  background: linear-gradient(270deg,
    var(--ink) 0%,
    rgba(48, 45, 40, 0.88) 30%,
    rgba(48, 45, 40, 0.35) 50%,
    rgba(48, 45, 40, 0.05) 68%,
    transparent 80%);
}