/**
 * RTL overrides — loaded when WordPress reports RTL (e.g. Polylang language set to Arabic/Hebrew).
 * Main layout stays in site.css; this file mirrors direction, grids, and spacing.
 */

/* --- Base & typography --- */
body.rtl {
  font-family: "Inter", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

body.rtl .mp-hero p,
body.rtl .mp-split p,
body.rtl .mp-card p {
  text-align: start;
}

/* --- Header --- */
/* Do not force flex-direction row-reverse here.
 * Polylang/WordPress already sets `dir="rtl"` and that should handle the logical start/end.
 * For the header we only need dropdown positioning (left/right), which is handled below.
 */
body.rtl .mp-header-inner {
  direction: rtl;
}

body.rtl .mp-nav {
  direction: rtl;
}

body.rtl .mp-nav-sub {
  left: auto;
  right: 0;
}

body.rtl .mp-nav-sub .mp-nav-sub {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 0.35rem;
}

/* --- Hero & grids --- */
body.rtl .mp-hero-grid {
  direction: rtl;
}

body.rtl .mp-hero-actions {
  flex-direction: row-reverse;
}

body.rtl .mp-mascot {
  flex-direction: row-reverse;
}

body.rtl .mp-split {
  direction: rtl;
}

body.rtl .mp-community {
  direction: rtl;
}

body.rtl .mp-community ul {
  padding-left: 0;
  padding-right: 1.2rem;
}

body.rtl .mp-store-row {
  flex-direction: row-reverse;
}

/* --- Cards & footer --- */
body.rtl .mp-cards {
  direction: rtl;
}

body.rtl .mp-footer-inner {
  direction: rtl;
  grid-template-columns: 0.8fr 0.8fr 1.1fr;
}

body.rtl .mp-foot-col {
  text-align: start;
}

body.rtl .mp-foot-brand {
  flex-direction: row-reverse;
}

/* Footer — Follow us: mirror columns, icon at inline-start, handles stay LTR */
body.rtl .mp-foot-follow {
  direction: rtl;
  text-align: start;
}

body.rtl .mp-foot-social-cols {
  direction: rtl;
}

body.rtl .mp-foot-social-link {
  direction: rtl;
  flex-direction: row;
}

body.rtl .mp-foot-social-label {
  direction: ltr;
  unicode-bidi: embed;
  text-align: start;
}

/* --- Forms: logical alignment --- */
body.rtl .mp-form input,
body.rtl .mp-form textarea,
body.rtl .mp-form .wpcf7-form-control:not(.wpcf7-submit) {
  text-align: right;
}

body.rtl .mp-form,
body.rtl .mp-form .wpcf7-form,
body.rtl .mp-form form {
  direction: rtl;
}

body.rtl .mp-form .wpcf7-form-control-wrap {
  text-align: right;
}

body.rtl .mp-form .wpcf7 p {
  margin: 0;
  padding: 0;
}

body.rtl .mp-form .wpcf7 form {
  margin: 0;
}

body.rtl .mp-form .wpcf7 input,
body.rtl .mp-form .wpcf7 textarea {
  margin-bottom: 0;
}

body.rtl .mp-form label {
  text-align: right;
}

body.rtl .mp-form .wpcf7-response-output,
body.rtl .mp-form .wpcf7-not-valid-tip {
  text-align: right;
  direction: rtl;
  margin: 0;
  padding: 0;
}

/* --- Carousel: keep slide order & JS math LTR inside a neutral container --- */
body.rtl .mp-carousel {
  direction: ltr;
}

body.rtl .mp-carousel-nav {
  direction: rtl;
}

/* --- Hero gradient: mirror focal point for RTL feel --- */
body.rtl .mp-hero {
  background: radial-gradient(circle at 80% 20%, #7854f9 0, var(--bg-deep-2) 35%, var(--bg-deep) 100%);
}

/* --- Reveal animation --- */
body.rtl .mp-reveal:not(.in-view) {
  transform: translateY(24px);
}

body.rtl .mp-reveal.in-view {
  transform: translateY(0);
}

/* --- Mobile nav --- */
@media (max-width: 740px) {
  /* Do not use order on .mp-toggle in RTL: with direction:rtl on .mp-header-inner,
   * DOM order (brand, nav, toggle) already places the logo on the right and the menu on the left.
   * order:-1 was forcing the hamburger to the right (LTR-like chrome). */

  body.rtl .mp-nav {
    align-items: flex-end;
    text-align: right;
  }

  body.rtl .mp-nav {
    left: 0;
    right: 0;
  }

  /* Mobile nav in LTR is centered with left:50% + translate(-50%).
   * When we switch to left/right:0 in RTL, we must also reset the translate. */
  body.rtl .mp-nav,
  html[dir="rtl"] .mp-nav,
  body[dir="rtl"] .mp-nav,
  .rtl .mp-nav,
  *[dir="rtl"] .mp-nav {
    left: 0;
    right: 0;
    /* Avoid 100vw in RTL; it can include scrollbar width and create a horizontal offset/blank side. */
    width: 100%;
    transform: translate(0, -8px);
  }

  body.rtl .mp-nav.open,
  html[dir="rtl"] .mp-nav.open,
  body[dir="rtl"] .mp-nav.open,
  .rtl .mp-nav.open,
  *[dir="rtl"] .mp-nav.open {
    transform: translate(0, 0);
  }
}

/* -------------------------------------------------------------------------- */
/* Polylang/WordPress RTL marker usually is `html[dir="rtl"]` (not body.rtl). */
/* Keep these overrides so header/footer work correctly.                      */
/* -------------------------------------------------------------------------- */
html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] .mp-hero p,
html[dir="rtl"] .mp-split p,
html[dir="rtl"] .mp-card p {
  text-align: start;
}

html[dir="rtl"] .mp-nav-sub {
  left: auto;
  right: 0;
}

html[dir="rtl"] .mp-header-inner {
  direction: rtl;
}

html[dir="rtl"] .mp-nav {
  direction: rtl;
}

html[dir="rtl"] .mp-nav-sub .mp-nav-sub {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 0.35rem;
}

html[dir="rtl"] .mp-hero-grid {
  direction: rtl;
}

html[dir="rtl"] .mp-hero-actions {
  flex-direction: row-reverse;
}

html[dir="rtl"] .mp-mascot {
  flex-direction: row-reverse;
}

html[dir="rtl"] .mp-split {
  direction: rtl;
}

html[dir="rtl"] .mp-community {
  direction: rtl;
}

html[dir="rtl"] .mp-community ul {
  padding-left: 0;
  padding-right: 1.2rem;
}

html[dir="rtl"] .mp-store-row {
  flex-direction: row-reverse;
}

html[dir="rtl"] .mp-cards {
  direction: rtl;
}

html[dir="rtl"] .mp-footer-inner {
  direction: rtl;
  grid-template-columns: 0.8fr 0.8fr 1.1fr;
}

html[dir="rtl"] .mp-foot-col {
  text-align: start;
}

html[dir="rtl"] .mp-foot-brand {
  flex-direction: row-reverse;
}

html[dir="rtl"] .mp-foot-follow {
  direction: rtl;
  text-align: start;
}

html[dir="rtl"] .mp-foot-social-cols {
  direction: rtl;
}

html[dir="rtl"] .mp-foot-social-link {
  direction: rtl;
  flex-direction: row;
}

html[dir="rtl"] .mp-foot-social-label {
  direction: ltr;
  unicode-bidi: embed;
  text-align: start;
}

html[dir="rtl"] .mp-form input,
html[dir="rtl"] .mp-form textarea,
html[dir="rtl"] .mp-form .wpcf7-form-control:not(.wpcf7-submit) {
  text-align: right;
}

html[dir="rtl"] .mp-form,
html[dir="rtl"] .mp-form .wpcf7-form,
html[dir="rtl"] .mp-form form {
  direction: rtl;
}

html[dir="rtl"] .mp-form .wpcf7-form-control-wrap {
  text-align: right;
}

html[dir="rtl"] .mp-form .wpcf7 p {
  margin: 0;
  padding: 0;
}

html[dir="rtl"] .mp-form .wpcf7 form {
  margin: 0;
}

html[dir="rtl"] .mp-form .wpcf7 input,
html[dir="rtl"] .mp-form .wpcf7 textarea {
  margin-bottom: 0;
}

html[dir="rtl"] .mp-form label {
  text-align: right;
}

html[dir="rtl"] .mp-form .wpcf7-response-output,
html[dir="rtl"] .mp-form .wpcf7-not-valid-tip {
  text-align: right;
  direction: rtl;
  margin: 0;
  padding: 0;
}

html[dir="rtl"] .mp-carousel {
  direction: ltr; /* keep slide ordering stable with existing JS */
}

html[dir="rtl"] .mp-carousel-nav {
  direction: rtl;
}

html[dir="rtl"] .mp-hero {
  background: radial-gradient(circle at 80% 20%, #7854f9 0, var(--bg-deep-2) 35%, var(--bg-deep) 100%);
}

html[dir="rtl"] .mp-hero-glow {
  transform: scaleX(-1);
}

html[dir="rtl"] .mp-page-hero-glow {
  transform: scaleX(-1);
}

html[dir="rtl"] .mp-404-glow {
  transform: scaleX(-1);
}

html[dir="rtl"] .mp-page-with-hero-content::before {
  left: auto;
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 95%);
  mask-image: linear-gradient(to left, #000 20%, transparent 95%);
}

@media (max-width: 740px) {
  html[dir="rtl"] .mp-nav {
    align-items: flex-end;
    text-align: right;
    left: 0;
    right: 0;
  }

  html[dir="rtl"] .mp-nav-sub {
    /* mobile dropdowns are static; ensure they stay in flow */
    left: auto;
    right: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Robust RTL marker support (Elementor canvas iframe can vary markers).      */
/* -------------------------------------------------------------------------- */
body[dir="rtl"] .mp-header-inner,
html[dir="rtl"] .mp-header-inner,
.rtl .mp-header-inner,
*[dir="rtl"] .mp-header-inner {
  direction: rtl;
}

body[dir="rtl"] .mp-brand,
html[dir="rtl"] .mp-brand,
.rtl .mp-brand,
*[dir="rtl"] .mp-brand {
  /* no-op */
}

body[dir="rtl"] .mp-nav-list,
html[dir="rtl"] .mp-nav-list,
.rtl .mp-nav-list,
*[dir="rtl"] .mp-nav-list {
  /* no-op */
}

body[dir="rtl"] .mp-nav-sub,
html[dir="rtl"] .mp-nav-sub,
.rtl .mp-nav-sub,
*[dir="rtl"] .mp-nav-sub {
  left: auto !important;
  right: 0 !important;
}

body[dir="rtl"] .mp-nav-sub .mp-nav-sub,
html[dir="rtl"] .mp-nav-sub .mp-nav-sub,
.rtl .mp-nav-sub .mp-nav-sub,
*[dir="rtl"] .mp-nav-sub .mp-nav-sub {
  left: auto !important;
  right: 100% !important;
  margin-left: 0 !important;
  margin-right: 0.35rem !important;
}

/* Footer: match responsive grid from site.css (base RTL uses 3 columns and wins over unprefixed @media). */
@media (max-width: 900px) {
  body.rtl .mp-footer-inner,
  html[dir="rtl"] .mp-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.25rem;
  }

  body.rtl .mp-foot-col-follow,
  html[dir="rtl"] .mp-foot-col-follow {
    grid-column: 1 / -1;
  }
}

@media (max-width: 740px) {
  body.rtl .mp-footer-inner,
  html[dir="rtl"] .mp-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.35rem;
  }

  body.rtl .mp-foot-col-follow,
  html[dir="rtl"] .mp-foot-col-follow {
    grid-column: auto;
  }
}