/* ============================================================
   TANA VILLAS — Hebrew / RTL overrides
   Loaded ONLY on /he/ pages, AFTER styles.css.
   Swaps to Hebrew webfonts, flips direction-sensitive rules,
   and removes Latin letter-spacing / uppercase for Hebrew.
   ============================================================ */

/* -- Hebrew type system (overrides the design tokens) -------- */
[dir="rtl"] {
  --font-display: 'Frank Ruhl Libre', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Heebo', 'Assistant', system-ui, sans-serif;
}
[dir="rtl"] body { font-weight: 400; }
[dir="rtl"] h1 { font-weight: 600; letter-spacing: 0; }
[dir="rtl"] h2 { font-weight: 500; letter-spacing: 0; }
[dir="rtl"] h3, [dir="rtl"] h4 { font-weight: 500; }
[dir="rtl"] .btn { font-weight: 500; }

/* -- Hebrew reads right; undo the global p{text-align:left} --- */
[dir="rtl"] p { text-align: right; }
[dir="rtl"] .head.center p,
[dir="rtl"] .text-center p, [dir="rtl"] .text-center,
[dir="rtl"] .cta-band p, [dir="rtl"] .lead.text-center,
[dir="rtl"] .source-note.text-center { text-align: center; }
[dir="rtl"] .hero__sub, [dir="rtl"] .page-hero__inner p,
[dir="rtl"] .breadcrumb, [dir="rtl"] .form__note, [dir="rtl"] .source-note,
[dir="rtl"] .footer__disclaimer, [dir="rtl"] .footer__brand p { text-align: right; }
[dir="rtl"] .ytable th, [dir="rtl"] .ytable td { text-align: right; }
[dir="rtl"] .faq__q { text-align: right; }

/* -- Hebrew has no case and dislikes wide tracking ----------- */
[dir="rtl"] .eyebrow, [dir="rtl"] .btn, [dir="rtl"] .link-arrow,
[dir="rtl"] .nav__links a, [dir="rtl"] .badge, [dir="rtl"] .villa-card__meta,
[dir="rtl"] .villa-card__count, [dir="rtl"] .stat span, [dir="rtl"] .hero__stats .stat span,
[dir="rtl"] .stat-row .stat span, [dir="rtl"] .metric-hi .m span, [dir="rtl"] .tl-date,
[dir="rtl"] .tl-status, [dir="rtl"] .field label, [dir="rtl"] .footer h5,
[dir="rtl"] .breadcrumb, [dir="rtl"] .scarcity, [dir="rtl"] .locmap__cap,
[dir="rtl"] .dist-row .dist, [dir="rtl"] .loc__list .dist, [dir="rtl"] .gstrip-hint,
[dir="rtl"] .mp-legend, [dir="rtl"] .trust .label, [dir="rtl"] .masterplan-fig figcaption,
[dir="rtl"] .ytable thead th, [dir="rtl"] .spec-row, [dir="rtl"] .tile small,
[dir="rtl"] .tile span, [dir="rtl"] .ru b, [dir="rtl"] .ru span, [dir="rtl"] .checks label,
[dir="rtl"] .feature-list h4, [dir="rtl"] .villa-card__meta span, [dir="rtl"] .lang-switch {
  letter-spacing: normal;
  text-transform: none;
}
/* the diamond separators in the spec row still want a little air */
[dir="rtl"] .spec-row { font-weight: 400; }

/* -- nav underline + language switch ------------------------- */
[dir="rtl"] .nav__links a::after { left: auto; right: 0; }
.lang-switch {
  font-family: var(--font-sans); font-size: .8rem; font-weight: 400;
  padding: .35rem .6rem; border: 1px solid currentColor; border-radius: 100px;
  opacity: .85; transition: opacity .3s, background .3s, color .3s; line-height: 1;
}
.lang-switch:hover { opacity: 1; }
.nav.scrolled .lang-switch, .nav--solid .lang-switch { color: var(--charcoal); }

/* -- Hebrew nav: larger + higher contrast over the hero ------ *
   Base styles.css sets the links at ~13px / weight 300 / 86% white,
   which wash out on the hero's brighter frames. Bump size + weight
   for BOTH states; force crisp white + a real shadow ONLY in the
   transparent-over-hero state so the solid sub-page nav keeps its
   dark text. (rtl.css loads on /he/ only, so English is untouched.) */
[dir="rtl"] .nav__links a { font-size: 1rem; font-weight: 500; }
[dir="rtl"] .nav:not(.scrolled):not(.nav--solid) .nav__links a {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.5);
}
[dir="rtl"] .nav:not(.scrolled):not(.nav--solid) .lang-switch {
  color: #fff; border-color: rgba(255,255,255,.7); opacity: .95;
}
/* deepen the top scrim so bright hero frames never swallow the nav */
[dir="rtl"] .nav:not(.scrolled):not(.nav--solid)::before {
  background: linear-gradient(180deg, rgba(8,10,6,.72) 0%, rgba(8,10,6,.34) 52%, transparent 100%) !important;
}

/* -- absolute-positioned labels: flip left -> right ---------- */
[dir="rtl"] .split__media .tag { left: auto; right: 1.4rem; }
[dir="rtl"] .villa-card__count { left: auto; right: 1rem; }
[dir="rtl"] .tile span { left: auto; right: 1.4rem; }
[dir="rtl"] .tile small { left: auto; right: 1.4rem; }

/* -- FAQ toggle to the left --------------------------------- */
[dir="rtl"] .faq__q { padding: 1.6rem 0 1.6rem 3rem; }
[dir="rtl"] .faq__q::after { right: auto; left: 0; }
[dir="rtl"] .faq__a-inner { padding: 0 0 1.8rem 3rem; }

/* -- prose ticks -------------------------------------------- */
[dir="rtl"] .prose ul.ticks li { padding-left: 0; padding-right: 1.8rem; }
[dir="rtl"] .prose ul.ticks li::before { left: auto; right: 0; }

/* -- development timeline (rail + markers on the right) ------ */
[dir="rtl"] .timeline::before { left: auto; right: 9px; }
[dir="rtl"] .tl-step { padding: 0 44px clamp(1.6rem,3vw,2.4rem) 0; }
[dir="rtl"] .tl-marker { left: auto; right: 2px; }
[dir="rtl"] .tl-date b { margin-right: 0; margin-left: .15em; }
[dir="rtl"] .tl-step.is-current { background: linear-gradient(270deg, rgba(176,142,84,.08), transparent 68%); }

/* -- lightbox + gallery strip controls ---------------------- */
[dir="rtl"] .lightbox__close { right: auto; left: 2.2rem; }
[dir="rtl"] .lightbox__nav.prev { left: auto; right: 1rem; }
[dir="rtl"] .lightbox__nav.next { right: auto; left: 1rem; }
[dir="rtl"] .gstrip-nav.prev { left: auto; right: clamp(.8rem,2vw,1.6rem); }
[dir="rtl"] .gstrip-nav.next { right: auto; left: clamp(.8rem,2vw,1.6rem); }

/* -- mobile menu chevron points the reading direction ------- */
[dir="rtl"] .mobile-menu a:not(.btn)::after { content: '‹'; }
[dir="rtl"] .mobile-menu a:not(.btn):active::after { transform: translateX(-4px); }

/* -- arrows: mirror the glyph + move along the reading axis -- */
[dir="rtl"] .btn svg, [dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }
/* the WhatsApp glyph and the 360 globe should NOT be mirrored */
[dir="rtl"] .wa-float svg, [dir="rtl"] .btn svg.no-flip { transform: none; }

/* -- framed-art offset mirrored (desktop) ------------------- */
@media (min-width: 900px) {
  [dir="rtl"] .split__media::before { left: -20px; right: 20px; }
  [dir="rtl"] .split.reverse .split__media::before { left: 20px; right: -20px; }
  [dir="rtl"] .split__media:hover::before { transform: translate(5px, -5px); }
  [dir="rtl"] .split.reverse .split__media:hover::before { transform: translate(-5px, -5px); }
}

/* -- keep Latin brand runs tidy inside Hebrew text ----------- */
[dir="rtl"] .no-flip { unicode-bidi: isolate; }

/* -- numeric ranges must stay in LTR order inside RTL text ---
   (without this, "11–18%" reorders to "18–11%", "50 + 25" flips, etc.) */
[dir="rtl"] .num { unicode-bidi: isolate; direction: ltr; }
/* stat numbers wrapped in .num were shrinking to the label size (.stat span
   sets .72rem, which also caught .num). Keep the number at the big <b> size so
   all stat values match; the unit word/symbol stays the small .unit accent. */
[dir="rtl"] .stat b .num,
[dir="rtl"] .hero__stats .stat b .num,
[dir="rtl"] .metric-hi .m b .num { font-size: 1em; }
/* reviewer feedback: larger hero (primary) stat numbers */
[dir="rtl"] .hero__stats .stat b { font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem); }
/* reviewer feedback: .spec-row li is display:flex with no desktop gap, so the
   whitespace after the bold count (16 / 4) collapsed — number hugged the word.
   A small inline-end margin restores the space (adds to the mobile gap too). */
[dir="rtl"] .spec-row li b { margin-inline-end: .35em; }
/* .ltr: isolate emails, phones, URLs and Latin brand runs inside Hebrew text */
[dir="rtl"] .ltr { unicode-bidi: isolate; direction: ltr; }