/*
RTL overrides for Secura.

Loaded on top of style.css whenever the front end renders in Arabic. Only the
rules that do not mirror by themselves are repeated here; flexbox and grid flow
follow `direction` automatically.
*/

body {
  direction: rtl;
  text-align: right;
  /* Tajawal covers Arabic; the Latin faces stay for numerals and brand names. */
  --font: "Tajawal", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Tajawal", "Playfair Display", Georgia, serif;
}

/* Arabic reads better a little larger and with more leading. */
body { font-size: 16.5px; line-height: 1.85; }
h1, h2, h3, h4 { line-height: 1.35; font-weight: 700; letter-spacing: 0; }
.hero__title { line-height: 1.25; }

/* Letter-spacing is meaningless in Arabic script and breaks the letter joins.
   Reset it everywhere rather than listing selectors, because several of the
   originals are more specific than a plain class here would be. */
body :where(*) { letter-spacing: normal; }
.eyebrow,
.hero__eyebrow,
.hero__trust,
.hero__trust strong,
.breadcrumbs,
.nav a,
.nav .btn,
.btn,
.btn--lg,
.btn--gold.btn--lg,
.btn--dark.btn--lg,
.stats span,
.contact-cards h3,
.vehicle-card__badge,
.quick-strip__item h3,
.lang-switch__item,
.footer-bottom,
.site-footer h4 { letter-spacing: normal; }
/* Latin runs inside an Arabic page keep their own tracking. */
.lang-switch__item { letter-spacing: .08em; }

/* The gold end of each rule should face the text, which swaps in RTL. */
.hero__eyebrow::before { background: linear-gradient(270deg, transparent, rgba(201,162,74,.85)); }
.hero__eyebrow::after  { background: linear-gradient(90deg, transparent, rgba(201,162,74,.85)); }

/* ---------- Header ---------- */
.nav .sub-menu { left: auto; right: 0; }

@media (max-width: 960px) {
  /* The drawer comes in from the left in RTL. */
  .nav { inset: 0 auto 0 0; transform: translateX(-100%); }
  .nav.is-open { transform: translateX(0); }
  .nav .sub-menu { padding-left: 0; padding-right: 1rem; }
}

/* ---------- Feature bands ---------- */
/* The band copy stays on the same physical side in both directions. Both
   photographs put their subject on the right, and mirroring them would flip
   the Riyadh skyline and the car badges, so the layout follows the picture
   rather than the reading direction. Only the text inside is right aligned. */
.band__content { margin-right: auto; margin-left: 0; }

/* ---------- Cards and lists ---------- */
.service-card__num { right: auto; left: 1.2rem; }
.vehicle-card__badge { left: auto; right: .9rem; }
.testimonial__quote { right: auto; left: 1.4rem; }
.why__media-card { left: auto; right: -1.5rem; }

.entry-content ul,
.entry-content ol { padding-left: 0; padding-right: 1.4rem; }
.entry-content blockquote {
  border-left: 0; border-right: 4px solid var(--gold);
  padding-left: 0; padding-right: 1.2rem;
}

.ticks li { padding-left: 0; padding-right: 1.9rem; }
.ticks li::before { left: auto; right: 0; }
.ticks li::after { left: auto; right: .33rem; transform: rotate(-45deg); }

.hero__trust li::before { margin-right: 0; margin-left: .35rem; }

.quick-strip__item { border-left: 0; border-right: 1px solid rgba(255,255,255,.07); }
.quick-strip__item:first-child { border-right: 0; }
@media (max-width: 860px) {
  .quick-strip__item:nth-child(odd) { border-right: 0; }
  .quick-strip__item:nth-child(even) { border-right: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 460px) {
  .quick-strip__item { border-right: 0; }
}

/* ---------- Comments ---------- */
.comment-list .children { padding-left: 0; padding-right: 1.5rem; }
.comment-form label { text-align: right; }

/* ---------- Blog ---------- */
.post-navigation__item--next { text-align: left; }
.post-tags a { direction: rtl; }
.post-single { margin-inline: auto; }
@media (max-width: 640px) {
  .post-navigation__item--next { text-align: right; }
}

/* ---------- Arrows point the other way ---------- */
.service-card__link svg,
.post-card__link svg,
.btn svg.secura-arrow { transform: scaleX(-1); }
.service-card__link:hover { gap: .7rem; }

/* ---------- Floating action ---------- */
.whatsapp-float { right: auto; left: 1.2rem; }

/* ---------- Skip link ---------- */
a.screen-reader-text:focus { left: auto; right: .75rem; }

/* ---------- Forms ---------- */
.field input, .field select, .field textarea { text-align: right; }
/* Keep phone, date and time fields reading left to right. */
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="time"] { direction: ltr; text-align: right; }

/* ---------- Numerals and phone numbers stay LTR ----------
   Only the numeral runs are isolated. Wrapping a whole span that also holds
   the "/" separator and a translated unit would drag the slash to the wrong
   end of the line. */
.stats strong,
.hero__trust strong,
.vehicle-card__price strong,
.price-box__row strong,
.contact-cards a[href^="tel"],
.topbar__list a[href^="tel"],
.contact-list a[href^="tel"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* The "/ day" and "/ month" lines keep RTL flow so the unit reads naturally. */
.vehicle-card__price span { unicode-bidi: isolate; }
.vehicle-card__price div { text-align: right; }

/* ---------- Tables ---------- */
.spec-table th, .spec-table td { text-align: right; }
.entry-content th, .entry-content td { text-align: right; }

/* ---------- Language switcher ---------- */
.lang-switch { direction: ltr; }