/* ============================================================
 * Natya — right-to-left overrides (Arabic)
 *
 * Enqueued by functions.php ONLY when natya_is_rtl(), last in the chain, so it
 * beats natya-components.css. An LTR visitor never downloads it.
 *
 * Scope, deliberately small: the templates were converted to CSS *logical*
 * properties (text-align: start, inset-inline-start, border-inline-start,
 * padding-inline-*), which mirror themselves under dir="rtl" and render exactly
 * as before under dir="ltr". So nothing in here re-states a template's inline
 * style, and no rule needs !important. What is left is the three things a
 * logical property cannot express:
 *
 *   1. chrome parked in a *named* corner (music toggle, WhatsApp float, promo)
 *      — those live in natya-components.css with physical left/right;
 *   2. anything with a baked-in direction: gradient masks, an X-axis keyframe,
 *      the horizontal chevron glyphs;
 *   3. Arabic typography — the brand faces carry no Arabic glyphs, and Latin
 *      tracking must not be applied to a joined script.
 *
 * Everything is keyed on [dir="rtl"], which header.php prints via
 * language_attributes() once natya_is_rtl() has set $wp_locale->text_direction.
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. Typography
 * Philosopher and Barlow have no Arabic coverage. Keeping them FIRST in the
 * stack matters: font fallback is per character, so Latin (the wordmark,
 * "Natya", property names, numerals) still renders in the brand faces and only
 * the Arabic characters fall through to the Arabic face behind them. The stack
 * is system-first — nothing here downloads a webfont; see POLYLANG.md if a
 * self-hosted Arabic face is ever bundled.
 * ------------------------------------------------------------ */
[dir="rtl"] {
  --font-display: "Philosopher", "Noto Kufi Arabic", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Arabic Typesetting", serif;
  --font-body: "Barlow", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;

  /* Arabic is a joined script: Latin-style tracking pulls the letters of a word
     apart. The tokens are zeroed rather than each eyebrow being re-styled. */
  --tracking-tightest: 0;
  --tracking-tight: 0;
  --tracking-wide: 0;
  --tracking-wider: 0;
  --tracking-widest: 0;
}

/* The transcribed markup also sets letter-spacing inline, which no token can
   reach. Matching on the style attribute keeps this to the elements that
   actually carry one instead of a blanket `* { }`. */
[dir="rtl"] [style*="letter-spacing"] { letter-spacing: normal !important; }

/* Arabic sits taller in the em box than Latin; the transcribed line-heights are
   tuned for Barlow and crowd the diacritics. A small floor, applied only to the
   running copy classes, leaves the tight display headings alone. */
[dir="rtl"] p,
[dir="rtl"] li { line-height: 1.8; }

/* ------------------------------------------------------------
 * 2. Floating chrome — mirrored corners
 * Music toggle and WhatsApp float sit in opposite corners by design; both swap
 * so they stay opposite. syncMusicClearance() in natya-ui.js is pure rect
 * geometry, so it keeps working on whichever side the toggle lands.
 * ------------------------------------------------------------ */
[dir="rtl"] .natya-music { left: auto; right: 24px; }
[dir="rtl"] .natya-music.is-in-hero { left: auto; right: 32px; }
[dir="rtl"] .natya-wa-float { right: auto; left: 24px; }
[dir="rtl"] .natya-promo { left: auto; right: 24px; }
[dir="rtl"] .natya-promo__close { right: auto; left: 10px; }

@media (max-width: 768px) {
  [dir="rtl"] .natya-music { left: auto; right: 16px; }
  [dir="rtl"] .natya-music.is-in-hero { left: auto; right: 16px; }
  [dir="rtl"] .natya-wa-float { right: auto; left: 16px; }
  [dir="rtl"] .natya-promo { left: auto; right: 12px; }
}

/* ------------------------------------------------------------
 * 3. Language dropdown (topbar)
 * The divider rule and the menu's anchoring edge are both physical.
 * ------------------------------------------------------------ */
[dir="rtl"] .nh-lang > summary {
  padding-left: 0;
  padding-right: 16px;
  margin-left: 0;
  margin-right: -12px;
  border-left: 0;
  border-right: 1px solid rgba(250,247,242,0.22);
}
[dir="rtl"] .nh-lang-menu { right: auto; left: 0; }
[dir="rtl"] .nh-lang-opt { text-align: right; }

/* ------------------------------------------------------------
 * 4. Room-gallery lightbox, narrow screens
 * The arrows overlay the image edges below 560px; previous belongs on the side
 * the reader starts from, which in RTL is the right.
 * ------------------------------------------------------------ */
@media (max-width: 560px) {
  [dir="rtl"] [data-rg-modal] [data-rg-prev] { left: auto; right: 4px; }
  [dir="rtl"] [data-rg-modal] [data-rg-next] { right: auto; left: 4px; }
}

/* ------------------------------------------------------------
 * 5. Horizontal chevrons
 * "Previous" and "Next" swap sides with the layout, so the glyph inside them
 * has to point the other way. Only the horizontal pairs — the scroll cue and
 * the language/FAQ chevrons are vertical and stay as they are.
 * ------------------------------------------------------------ */
[dir="rtl"] [data-carousel-prev] svg,
[dir="rtl"] [data-carousel-next] svg,
[dir="rtl"] [data-rg-prev] svg,
[dir="rtl"] [data-rg-next] svg,
[dir="rtl"] [data-ng-prev] svg,
[dir="rtl"] [data-ng-next] svg,
[dir="rtl"] [data-promo-prev] svg,
[dir="rtl"] [data-promo-next] svg,
[dir="rtl"] [data-ct-cal-prev] svg,
[dir="rtl"] [data-ct-cal-next] svg { transform: scaleX(-1); }

/* ------------------------------------------------------------
 * 6. Directional decoration
 * Gradient masks and the collection card's X-axis entrance carry a direction no
 * logical property covers; each is mirrored rather than removed.
 * ------------------------------------------------------------ */

/* Newsletter batik: solid on the reader's starting edge, dissolving away. */
[dir="rtl"] .nh-newsletter::before {
  -webkit-mask-image: url('patterns/natya-pattern.png'), linear-gradient(to right, #000 0%, #000 20%, transparent 60%);
  mask-image: url('patterns/natya-pattern.png'), linear-gradient(to right, #000 0%, #000 20%, transparent 60%);
}

/* Property intro bleed (single-property.php): the panel's own inset pair is
   logical and mirrors itself, but its radial mask is written inline and only
   !important can reach an inline declaration. The .ubud-bleed class exists for
   this rule alone. */
[dir="rtl"] .ubud-bleed {
  -webkit-mask-image: radial-gradient(95% 130% at 0% 100%, #000 0%, transparent 68%) !important;
  mask-image: radial-gradient(95% 130% at 0% 100%, #000 0%, transparent 68%) !important;
}

/* Mobile drawer batik: the radial bloom moves to the opposite bottom corner. */
[dir="rtl"] .nh-drawer-pattern {
  -webkit-mask-image: radial-gradient(125% 90% at 0% 100%, #000 0%, transparent 65%);
  mask-image: radial-gradient(125% 90% at 0% 100%, #000 0%, transparent 65%);
}

/* Collection cards slide in from the edge the rail scrolls from. */
[dir="rtl"] .collection-card.is-in {
  animation-name: collection-card-in-rtl;
}
@keyframes collection-card-in-rtl {
  from { opacity: 0; transform: translateX(-40px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Map attribution panel stacks above the badge on phones, aligned to the far
   edge — which is now the left. */
@media (max-width: 560px) {
  [dir="rtl"] .natya-attr-panel { text-align: left; }
}

/* ------------------------------------------------------------
 * 7. Leaflet
 * Vendored stylesheet, only loaded on the property Overview map. Its control
 * corners are physical; the zoom buttons and attribution move to the mirrored
 * side so they do not sit under the panel above.
 * ------------------------------------------------------------ */
[dir="rtl"] .leaflet-container { direction: ltr; }
[dir="rtl"] .leaflet-control-attribution { direction: rtl; }