/**
 * MPL Theme – RTL Overrides
 * Loaded on Arabic pages (page-ar.php template).
 */

/* ===== BASE RTL ===== */
body {
  font-family: var(--font-arabic), 'Segoe UI', Arial, sans-serif;
  direction: rtl;
}

/* ===== OFFER BANNER — reversed marquee for RTL ===== */
.offer-banner {
  direction: rtl;
}
.offer-banner__inner {
  padding-right: 100%;
  padding-left: 0;
  animation: bannerMarqueeRTL 28s linear infinite;
}
@keyframes bannerMarqueeRTL {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
.offer-banner__item::before {
  margin-right: 40px;
  margin-left: 0;
}
.offer-banner__close {
  margin-left: 8px;
  margin-right: 0;
}

/* ===== HERO ===== */
.hero__bg {
  background-position: center left;
}
.hero::before {
  background: linear-gradient(270deg, rgba(10,10,10,0.95) 45%, rgba(10,10,10,0.4) 100%);
}
.hero__payments-label {
  margin-left: 0;
  margin-right: .35rem;
}

/* ===== STATS BAR — border flip ===== */
.stats-bar__item {
  border-left: 1px solid var(--border);
  border-right: none;
}
.stats-bar__item:last-child {
  border-left: none;
}

/* ===== PROGRAM CARD - badge position =====
 * Physical `right` here re-pins the badge to the same visual corner it uses in
 * LTR, cancelling the logical mirror main.css already performs. Removed: the
 * badge belongs on the mirrored side in RTL like every other corner element.
 * (If a future design genuinely wants it unmirrored, say so in a comment and
 * use inset-inline-end, not a physical property that silently fights the
 * cascade.) */

/* ===== PROGRAM CARD — price RTL ===== */
.program-card__price {
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px;
}
.program-card {
  text-align: right;
}
/* The price line is laid out row-reverse, so DOM order paints left-to-right
 * and the FIRST DOM child sits leftmost. The amount is baked first, so without
 * this the "incl. VAT" label landed to its right and was read BEFORE the
 * amount. Pre-W4 the amount was always the rightmost (first-read) item; order
 * -1 puts the label leftmost, read last, on baked and runtime cards alike. */
.programs__grid .program-card__price .price-vat {
  order: -1;
}

/* ===== COACHES — link arrow for RTL ===== */
.coaches__link a {
  direction: rtl;
}

/* ===== RESULT CARD — RTL layout (right-to-left card order & content) ===== */
.results__track {
  direction: rtl;
}
.result-card {
  direction: rtl;
  text-align: right;
}
/* `.result-card__visuals { flex-direction: row-reverse }` lived here. It is
   deleted rather than left to be overridden 147 lines below: the container is
   already RTL, so a plain row puts "before" on the right, which is the correct
   Arabic progression. Two rules disagreeing about the same property, resolved
   only by source order, is one reorder away from breaking the pair again. */
/* No mirror. The Arabic arrow is authored left-facing in Home.astro, and the
   pair now renders in true RTL order (before on the right), so the arrow
   already points from before to after. This rule used to flip it. */
.result-card__stat {
  display: flex;
  flex-direction: row;
  direction: rtl;
  gap: 2px;
  align-items: baseline;
}

/* ===== VIDEO LABELS — text-align for RTL ===== */
.video-item__label {
  text-align: right;
}

/* ===== VISIT LAB — row gap alignment ===== */
.visit-lab__row .icon {
  margin-top: .05rem;
}

/* ===== WHATSAPP FAB — position for RTL ===== */
.whatsapp-fab {
  right: auto;
  left: 1.75rem;
}

/* ===== FOOTER — contact icon alignment ===== */
.site-footer__contact-item {
  gap: .6rem;
}

/* ===== METHOD ICON BOXES — center in RTL ===== */
.method__icon {
  margin: 0 auto 1rem;
}

/* ===== ASSESSMENT FORM — text alignment ===== */
.assessment-form input,
.assessment-form select {
  text-align: right;
}
.assessment-form input::placeholder {
  text-align: right;
}

/* ===== RESPONSIVE RTL ===== */
/* The stats block that sat here is deleted. It removed a left border from an
   even tile at up to 768px — but the row only WRAPS into two columns at 480px
   (main.css). Between 481 and 768 the tiles are still one flex row, so every
   even tile lost an INTERNAL divider instead of an outer edge. The original
   `nth-child(2)` had the same fault on one tile; widening it to `even` widened
   the fault. The max-width:480px block below already carries the correct
   odd/even rules for the wrapped layout, and is where this belongs. */
@media (max-width: 480px) {
  /* 2×2 grid RTL: flip borders to left side */
  .stats-bar__item:nth-child(odd)  { border-left: 1px solid var(--border); border-right: none; }
  .stats-bar__item:nth-child(even) { border-left: none; }
}

/* ===== HEADINGS — Arabic glyphs, and room for them =====
 *
 * Twelve rules across main.css and summer.css set `font-family: 'Bebas Neue',
 * cursive` on the display headings. Bebas Neue carries no Arabic glyphs, and
 * `cursive` resolves to Comic Sans MS on Windows, which has none either — so
 * every Arabic heading on the site fell through to the browser's last-resort
 * face. Tajawal is already loaded by Base.astro:203 and was simply never
 * reached.
 *
 * Bebas Neue stays FIRST on purpose: its @font-face unicode-range covers only
 * Latin, so Latin tokens inside an Arabic heading — VALD, InBody, MPL, PT —
 * keep the brand face, and only the Arabic codepoints fall through to Tajawal.
 * Putting Tajawal first re-sets those Latin words in Tajawal and widens them. */
.hero__title,
.section-title,
.cta-banner__title,
.method__title,
.program-card__price,
.stats-bar__number,
.result-card__stat,
.mobile-nav a {
  font-family: var(--font-head), var(--font-arabic), sans-serif;
  /* And NO tracking. main.css gives these selectors 1-3px of letter-spacing,
   * which is right for all-caps Bebas and wrong for Arabic: the shaping engine
   * applies it BETWEEN joined glyphs, prising apart strokes that must connect.
   * It is the single most recognisable sign a page was styled by someone who
   * does not read the language, and it now lands on every Arabic heading
   * because they finally render in a real Arabic face. */
  letter-spacing: 0;
}

/* Bebas is all-caps Latin with no descenders, so .section-title ships
 * line-height:1 (main.css:81). Arabic has descenders and dots that need the
 * space: at 320-390px the results heading wraps to two lines on a 36px stride
 * against 36-46px of ink, so the lines touch. */
.section-title { line-height: 1.3; }

/* Tracking is removed from EVERY selector that carries Arabic, not just the
 * eight that changed font. The first pass zeroed letter-spacing only where it
 * had also swapped the family, which left ~20 selectors still tracked: section
 * labels at 3px, programme names at 2px, badges, tabs, buttons, coach
 * specialities, video and detail labels, form labels, footer column titles.
 * The engine applies tracking BETWEEN joined Arabic glyphs, so every one of
 * those was prising apart strokes that must connect.
 *
 * The payment badges and pills are deliberately NOT in this list: they render
 * Latin brand marks (mada, VISA, Apple Pay, tabby) where the tracking is
 * correct and no Arabic ever appears. */
.hero__tag,
.section-label,
.program-card__name,
.program-card__badge,
.programs__tab,
.stats-bar__label,
.result-card__duration,
.result-card__img-label,
.coach-card__specialty,
.coaches__footer a,
.video-item__label,
.visit-lab__detail-label,
.footer__col-title,
.footer__payments-label,
.hero__payments-label,
.form-field label,
.map-placeholder__tap,
.site-nav a,
.lang-switcher__btn,
.offer-banner__item,
.price-grid > span small,
.btn,
.summer-strip__link {
  letter-spacing: 0;
}

/* Same defect, most visible instance: main.css gives .hero__title
 * line-height:0.95 -- negative leading, safe for all-caps Latin with no
 * descenders. The Arabic H1 wraps to two lines inside a 390px viewport, and at
 * 0.95 the shadda and madda on line two collide with the dots below line one. */
.hero__title { line-height: 1.15; }

/* The before/after pair must progress in the page's reading direction. The
 * container is already RTL, so a plain flex row lays "before" on the RIGHT and
 * "after" on the LEFT, which is the correct Arabic progression; row-reverse
 * put it back into Latin order. And the Arabic arrow in Home.astro is ALREADY
 * drawn pointing left, so flipping it here pointed it back at "before".
 * Both corrections were invisible while the cards held identical grey
 * placeholders; real photographs make the direction legible. */
.result-card__visuals { flex-direction: row; }
.result-card__arrow svg { transform: none; }