@charset "UTF-8";
/* =================================================================
   MAALEM — RTL STYLESHEET (Arabic)
   Compiled by CodeKit to assets/css/rtl.css
   Enqueued AFTER main.css when the current language is RTL (WPML).
   Contains only the overrides — main.css still loads first.
   ================================================================= */
/* -----------------------------------------------------------------
   MIXINS — breakpoints + layout helpers
   Breakpoints are SCSS (media queries can't read CSS custom props).
   Everything else references the CSS custom properties in _tokens.
   ----------------------------------------------------------------- */
/* -----------------------------------------------------------------
   RTL OVERRIDES — Arabic (WPML)
   Imported ONLY by rtl.scss (compiled to assets/css/rtl.css,
   enqueued when the current language is RTL).

   Strategy:
   - Switch UI/body type to Tajawal (Cormorant has no Arabic glyphs)
   - Mirror directional layout (panels, borders, text alignment)
   - Keep mono/metadata LTR (codes and coordinates read LTR)
   ----------------------------------------------------------------- */
body {
  direction: rtl;
  font-family: var(--arabic);
}

/* — Typography: Arabic takes over serif & sans roles — */
.serif,
.h-display,
.display-1,
.display-2,
.display-3,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.lead,
.body,
.body-sm,
.entry-content {
  font-family: var(--arabic);
  letter-spacing: 0;
  font-style: normal;
}

/* Accent words keep the sunset colour but lose the italic
   (italics are not a native Arabic type convention) */
.accent {
  font-style: normal;
}

/* Pure-Latin mono runs (coordinates, scale bars, rotation counters) stay LTR
   mono — they have no Arabic to break. */
.mono {
  direction: ltr;
  unicode-bidi: embed;
}

/* Metadata that carries Arabic WORDS (eyebrows, breadcrumb, meta strips,
   spec keys, captions) must render as Arabic — NOT Latin mono. Critical:
   letter-spacing severs Arabic letter-joining, so it must be 0; the tiny
   9–11px mono sizes are bumped to a legible size and aligned to the right. */
.eyebrow,
.breadcrumb,
.meta,
.card-meta,
.landmark-specs-key,
.landmark-specs-tags-label,
.landmark-gallery-count,
.landmark-gallery-link,
.atlas-legend,
.atlas-city {
  font-family: var(--arabic);
  direction: rtl;
  text-align: right;
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-ui);
  line-height: 1.7;
}

/* …but the leading index code (001, 05) and the separators stay mono + LTR,
   even inside the now-Arabic metadata above. */
.code,
.meta .code,
.eyebrow .code,
.breadcrumb .code,
.breadcrumb-sep,
[dir=ltr] {
  font-family: var(--mono);
  direction: ltr;
  unicode-bidi: embed;
  letter-spacing: var(--ls-meta);
  text-transform: none;
}

/* Stats band labels carry Arabic words but ship with the .mono class (Latin
   mono + LTR + tracking) AND a nested .stats-band .stats-band-label rule that
   adds letter-spacing + uppercase. Both sever Arabic letter-joining. Match the
   base rule's specificity (0,2,0) so this wins: Tajawal, RTL, no tracking. */
.stats-band .stats-band-label {
  font-family: var(--arabic);
  direction: rtl;
  text-align: right;
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-ui);
  line-height: 1.7;
}

/* The numeric value is universal — keep it LTR so a trailing "+" stays on the
   right (e.g. "1,400+", not "+1,400"), but hold it against the right edge to
   mirror the column. */
.stats-band .stats-band-value {
  direction: ltr;
  text-align: right;
}

/* Principle index codes (01–04) keep their LTR mono digits, but the block must
   hold to the right edge so it sits above the right-aligned Arabic title
   instead of stranding on the opposite side. */
.principles .principles-number {
  text-align: right;
}

/* PhotoSwipe lightbox caption: the .mono class would force Latin mono + LTR,
   so override to Tajawal. Stays centred under the image (not right-aligned). */
.pswp__fj-caption {
  font-family: var(--arabic);
  direction: rtl;
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-ui);
}

/* Prev/next band: the RTL grid flips columns, so PREVIOUS lands in the right
   column and NEXT in the left. Align each to its outer edge (the base CSS
   hard-codes is-next to the right, which bunches it toward the centre). */
.landmark-prev-next-cell.is-prev {
  text-align: right;
}

.landmark-prev-next-cell.is-next {
  text-align: left;
}
@media (max-width: 767px) {
  .landmark-prev-next-cell.is-next {
    text-align: right;
  }
}

/* Kicker + meta line carry Arabic — Tajawal, no letter-spacing, legible;
   they inherit each cell's alignment (no text-align set here). */
.landmark-prev-next-kicker,
.landmark-prev-next-line {
  font-family: var(--arabic);
  direction: rtl;
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-ui);
}

/* Buttons + tags default to the Latin UI font (Inter Tight) / mono, with
   letter-spacing + uppercase — all wrong for Arabic. Switch to Tajawal and
   drop the tracking (which breaks Arabic letter-joining). */
.btn,
.btn-label,
.tag {
  font-family: var(--arabic);
  letter-spacing: 0;
}

.tag {
  text-transform: none;
  font-size: var(--fs-ui);
}

/* Encyclopedia toolbar controls carry Arabic — Tajawal, no tracking, no caps. */
.enc-filter-toggle,
.enc-filter-label,
.enc-option-name,
.enc-option-count,
.enc-clear,
.enc-count,
.enc-view-btn,
.enc-chip,
.enc-unmapped {
  font-family: var(--arabic);
  direction: rtl;
  letter-spacing: 0;
  text-transform: none;
}

/* Dropdown panels anchor to the right edge of their toggle. */
.enc-dropdown {
  left: auto;
  right: 0;
}

/* Remaining mono/serif bits that carry Arabic: image credits, map labels +
   marker labels, and the about pull-quote (Cormorant has no Arabic glyphs).
   Selectors match the nested base rules' specificity so they actually win. */
.img-slot .img-credit,
.landmark-gallery-cell .img-credit,
.landmark-map-card-label,
.fj-gmap-pin .fj-gmap-pin-label {
  font-family: var(--arabic);
  direction: rtl;
  letter-spacing: 0;
  text-transform: none;
}

.pullquote {
  font-family: var(--arabic);
}

/* Language switch shows the Latin "English" on the Arabic site — Tajawal
   renders it fine and matches the pill on the English side. */
.lang-switch {
  font-family: var(--arabic);
  letter-spacing: 0;
}

/* Latin-script elements (English names/taglines on the Arabic site)
   keep their LTR serif rendering — overrides the Tajawal switch above */
.is-latin {
  font-family: var(--serif) !important;
  direction: ltr;
  unicode-bidi: embed;
  letter-spacing: var(--ls-tight);
}

/* The .arabic tagline class is already RTL by default — unchanged */
/* — Mirrored components — */
/* Pullquote: border flips to the right */
.pullquote,
.entry-content blockquote {
  border-left: 0;
  border-right: 3px solid var(--sunset-deep);
  padding-left: 0;
  padding-right: var(--space-6);
}

/* Atlas header card: sunset border flips */
.atlas-card {
  border-left: 0;
  border-right: 3px solid var(--sunset-deep);
}

/* Hero slide panels mirror */
.hero-slide.overlay-left-cream .hero-slide-overlay {
  background: linear-gradient(270deg, rgba(251, 247, 238, 0.94) 0%, rgba(251, 247, 238, 0.65) 30%, rgba(251, 247, 238, 0) 58%);
}
.hero-slide.overlay-left-cream .hero-slide-panel {
  left: auto;
  right: var(--gutter);
  text-align: right;
}

.hero-slide.overlay-right-cream .hero-slide-overlay {
  background: linear-gradient(90deg, rgba(251, 247, 238, 0.92) 0%, rgba(251, 247, 238, 0.55) 30%, rgba(251, 247, 238, 0) 58%);
}
.hero-slide.overlay-right-cream .hero-slide-panel {
  right: auto;
  left: var(--gutter);
  text-align: left;
}

/* Cards: meta strips align right via direction, titles align naturally */
/* Footer columns mirror automatically via grid + RTL direction */
/* Tours hover indent flips */
.tours-item:hover {
  padding-left: 0;
  padding-right: var(--space-3);
}

/* Button arrows: the bidi algorithm repositions the glyph but never mirrors
   it, so a literal "→" still points right. Mirror every decorative arrow
   inside a button (contact CTA, form submit, atlas/hero/about-band, VC button)
   so it points left, matching the RTL reading direction. */
.btn [aria-hidden=true] {
  display: inline-block;
  transform: scaleX(-1);
}

/* — Forms — */
.search-form .search-field,
.field input,
.field textarea {
  font-family: var(--arabic);
}

/* Newsletter pill input mirrors */
.newsletter-input input {
  font-family: var(--arabic);
  text-align: right;
}

/* Contact Form 7 (the contact-page form) carries Arabic in its field labels,
   inputs, placeholders, the topic <select>, the submit button and the
   validation/response output. The base _contact-form rules pin these to
   --serif / --sans / --mono (no Arabic glyphs) and add letter-spacing, which
   severs Arabic letter-joining. Switch them all to Tajawal with no tracking.
   Selectors mirror the base ".contact-form .wpcf7 …" specificity — rtl.css
   loads after main.css, so an equal-specificity rule wins. */
.contact-form .wpcf7 label,
.contact-form .wpcf7 input[type=text],
.contact-form .wpcf7 input[type=email],
.contact-form .wpcf7 input[type=tel],
.contact-form .wpcf7 input[type=url],
.contact-form .wpcf7 input[type=date],
.contact-form .wpcf7 input[type=number],
.contact-form .wpcf7 select,
.contact-form .wpcf7 textarea,
.contact-form .wpcf7 input[type=submit],
.contact-form .wpcf7 button[type=submit],
.contact-form .wpcf7 .wpcf7-response-output,
.contact-form .wpcf7 .wpcf7-not-valid-tip {
  font-family: var(--arabic);
  letter-spacing: 0;
}

/* Field labels ship as 10px Latin kickers (uppercase + tracking) — bump to a
   legible Arabic size, right-aligned, no caps (Arabic has no letter case). */
.contact-form .wpcf7 label {
  direction: rtl;
  text-align: right;
  text-transform: none;
  font-size: var(--fs-ui);
}

/* Arabic free-text fields read right-to-left; the topic select and textarea
   too. The email field holds a Latin address — keep it LTR but start-aligned
   (the right edge in RTL). */
.contact-form .wpcf7 input[type=text],
.contact-form .wpcf7 select,
.contact-form .wpcf7 textarea {
  direction: rtl;
  text-align: right;
}

.contact-form .wpcf7 input[type=text]::placeholder,
.contact-form .wpcf7 select::placeholder,
.contact-form .wpcf7 textarea::placeholder {
  font-family: var(--arabic);
}

.contact-form .wpcf7 input[type=email] {
  direction: ltr;
  text-align: right;
}

/* Contact info rail — the email-group labels (عام, التحرير…) and the office
   hours line ship with the .mono class, which the global rule pins to Latin
   JetBrains Mono + LTR + tracking. They now carry Arabic words, so the mono
   treatment breaks the glyphs, joins and right-alignment. Switch to Tajawal,
   RTL, right-aligned, no tracking. (The Latin social handles in
   .contact-info-social-value keep their mono/LTR rendering.) */
.contact-info .contact-info-email-label,
.contact-info .contact-info-hours {
  font-family: var(--arabic);
  direction: rtl;
  text-align: right;
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-ui);
}