/* ============================================================
   UAE tax deadline calendar — Arabic (RTL) point-overrides.

   Loaded AFTER ../uae-tax-deadline-calculator/styles.css (see index.html).
   The shared sheet is written LTR-first with several PHYSICAL properties
   (border-left, padding-left, left:, margin-left, text-align:left) that do
   not auto-flip under dir="rtl" — only this file's declarations fix those.
   Flexbox/CSS Grid layouts using the default (row) axis DO auto-mirror under
   dir="rtl" (the inline axis follows `direction`), so most of the page needs
   no override at all — topbar, header, hero, calc-grid, form-grid,
   footer-cols, etc. are untouched here on purpose.

   Never edit the shared styles.css from this file — only add scoped
   [dir="rtl"]/html[dir="rtl"] overrides here.
   ============================================================ */

/* ---- Typography: Arabic-first font stack + no Latin tracking ----
   --font-body/--font-display/--font-mono (Inter Tight / BGA Gothic / IBM
   Plex Mono) carry no Arabic glyphs; --font-arabic (IBM Plex Sans Arabic,
   already declared in the shared styles.css :root) does, and also covers the
   Latin glyphs used for brand names/dates/acronyms in this page, so one
   stack suffices for mixed Arabic+Latin runs. !important is deliberate here:
   the shared sheet sets font-family on many selectors deeper than a single
   class (e.g. `.tl-step .tl-when .when-tag`), so a same-specificity override
   would lose the cascade on several of them. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  font-family: var(--font-arabic) !important;
}

/* Letter-spacing/tracking (.eyebrow, .kicker, .tag, badges, table heads, …)
   is tuned for Latin all-caps tracking. Arabic script is cursive/joined
   within a word — added tracking breaks letter connections and looks
   broken, not "spaced". Zero it out page-wide (same specificity reasoning
   as the font-family rule above); the few short Latin badges that lose their
   tracking (e.g. the RU/EN/AR switcher, "ASP") stay perfectly legible. */
html[dir="rtl"] * {
  letter-spacing: normal !important;
}

/* ---- Vertical timeline (.timeline/.tl-step) ----
   Desktop: `.tl-step` is a 2-column CSS Grid (200px date chip + 1fr body).
   Grid tracks lay out from the inline-start edge, which IS the right edge
   under dir="rtl" — so the whole 2-column arrangement already mirrors
   automatically (date chip ends up on the right, body flows to its left).
   What does NOT auto-flip: the connecting "spine" border and dot, which are
   physical left/absolute-left in the shared sheet and need to move to the
   body's RIGHT edge (now adjacent to the mirrored date column). */
html[dir="rtl"] .tl-step .tl-body {
  padding: 22px 34px 22px 0;
  border-left: none;
  border-right: 2px solid var(--line);
}
html[dir="rtl"] .tl-step:last-child .tl-body {
  border-left-color: transparent; /* harmless no-op now border-left is none */
  border-right-color: transparent;
}
html[dir="rtl"] .tl-step .tl-body::before {
  left: auto;
  right: -8px;
}
html[dir="rtl"] .tl-asof {
  margin-left: 0;
  margin-right: 8px;
}
@media (max-width: 620px) {
  /* Mobile collapses to 1 column; the shared sheet indents .tl-when with a
     left-padding to align with the (now single-column) spine — mirror it. */
  html[dir="rtl"] .tl-step .tl-when {
    padding: 16px 34px 0 0;
  }
}

/* ---- FAQ accordion (.faq-q/.faq-a) ----
   Explicit text-align:left + margin-left:auto (chevron) in the shared sheet. */
html[dir="rtl"] .faq-q {
  text-align: right;
}
html[dir="rtl"] .faq-q .fq-chev {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .faq-a .inner {
  padding: 0 4px 24px 40px;
}

/* ---- Static rules table (.rules-table) ----
   th/td are explicitly text-align:left in the shared sheet. */
html[dir="rtl"] .rules-table th,
html[dir="rtl"] .rules-table td {
  text-align: right;
}
html[dir="rtl"] .rules-table a {
  /* still a URL-adjacent domain label ("tax.gov.ae") — keep it from
     reversing digit/dot order under the RTL bidi algorithm. */
  direction: ltr;
  unicode-bidi: embed;
}

/* ---- CTA arrow (↗) ----
   The diagonal "up-right" arrow reads naturally before LTR text; mirrored to
   "up-left" (↖) it points the same way relative to reading direction in
   Arabic. Applied to the svg only — the hover translate() below targets the
   parent .arrow span, so the two transforms don't compose/conflict. */
html[dir="rtl"] .arrow svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .btn-primary:hover .arrow {
  transform: translate(-2px, -2px);
}

/* ---- Form inputs holding Latin/numeric content ----
   Force LTR entry direction for date/email (digits, @, dots) so typing and
   the native date-picker UI aren't mangled by the inherited RTL direction;
   name/contact stay RTL (Arabic names, mixed contact handles are fine
   bidi-wise without an override). */
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="email"] {
  direction: ltr;
  text-align: right;
}