/* ============================================================================
   ULF, RTL OVERRIDES (Arabic)
   The base theme uses logical properties (margin-inline, etc.) so most things
   already work bidirectionally. This file handles the few directional cases.
   ============================================================================ */

[dir="rtl"] body {
  font-family: var(--arabic);
  letter-spacing: 0;
}

/* Headings keep Cinzel feel for Latin; Arabic uses Tajawal. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .serif,
[dir="rtl"] .brand-mark,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .primary-nav a,
[dir="rtl"] .lang-switch button,
[dir="rtl"] .btn,
[dir="rtl"] .news-item .date,
[dir="rtl"] .news-item .title,
[dir="rtl"] .marquee-track,
[dir="rtl"] .pillars .num,
[dir="rtl"] .card .num,
[dir="rtl"] .card .more,
[dir="rtl"] .footer-grid h4,
[dir="rtl"] .section-head .label,
[dir="rtl"] .page-hero .crumbs,
[dir="rtl"] label.field {
  font-family: var(--arabic);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
}

[dir="rtl"] .hero-title {
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Marquee should run in reverse direction for visual coherence */
[dir="rtl"] .marquee-track {
  animation-direction: reverse;
}

/* News item layout already uses logical props, only hover offset needs swapping */
[dir="rtl"] .news-item:hover { padding-inline-start: 0; padding-inline-end: 0.4rem; }

/* Hero meta separator */
[dir="rtl"] .hero-meta span:not(:last-child)::after {
  inset-inline-end: -1rem;
  inset-inline-start: auto;
}

/* Brand mark image alignment */
[dir="rtl"] .brand-mark img { transform: scaleX(-1); /* keep cedar facing inwards */ }
[dir="rtl"] .brand-mark img.no-mirror { transform: none; }

/* Form text alignment */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: right; }