/*
 * Right-to-left adjustments for Maryo Food.
 * Loaded only when the active language is written right to left (Arabic).
 */

body { direction: rtl; }

/* Navigation and header ------------------------------------------------ */
.nav { margin-left: 0; margin-right: auto; }
.nav a::after { left: auto; right: 0; left: 100%; transition: left .25s ease; }
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.active::after { left: 0; }
.menu-button { margin-left: 0; margin-right: auto; }

.lang-switch .lang-link + .lang-link {
  padding-left: 0;
  padding-right: 10px;
  border-left: 0;
  border-right: 1px solid rgba(255,255,255,.18);
}

/* Brand mark keeps its drawn shape, so it is mirrored as a whole -------- */
.brand-mark { transform: scaleX(-1); }

/* Cards and grids ------------------------------------------------------ */
.benefit { border-right: 0; border-left: 1px solid var(--line); }
.benefit:first-child { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

.product-index { left: auto; right: 21px; }
.product-arrow { right: auto; left: 19px; }
.product-copy { left: 22px; right: 24px; }

.statement-grid > div { border-right: 0; border-left: 1px solid rgba(255,255,255,.17); }
.statement-grid > div:last-child { border-left: 0; }

.use-grid { border-left: 0; border-right: 1px solid rgba(255,255,255,.18); }
.use-grid > div { border-right: 0; border-left: 1px solid rgba(255,255,255,.18); }

.process-grid li { border-right: 1px solid var(--line); border-left: 0; }
.process-grid li:last-child { border-left: 1px solid var(--line); }

/* Feature block -------------------------------------------------------- */
.feature-photo { inset: 0 0 0 40px; }
.feature-badge { right: auto; left: 0; }
.feature-caption { left: auto; right: 32px; }

.quality-card { left: 45px; right: -42px; }

/* Accent borders ------------------------------------------------------- */
.contact-note { border-left: 0; border-right: 2px solid var(--gold); }
.notice-box { border-left: 0; border-right: 3px solid var(--gold); }

@media (max-width: 980px) {
  .quality-card { left: 22px; right: 22px; }
}

@media (max-width: 720px) {
  .nav { left: 0; right: 0; }
  .feature-photo { left: 0; }
  .feature-badge { left: -8px; right: auto; }
  .quality-card { left: 14px; right: 14px; }
}

/* Heroes ---------------------------------------------------------------
 * The hero photographs have their open, dark area on the left. Mirroring
 * the photo is not an option, because it would reverse the lettering on
 * the tub. So in Arabic the text block stays on that dark left side,
 * while the text itself still reads right to left inside it.
 */
.hero-copy { margin-left: 0; margin-right: auto; }

.product-hero-inner > div { margin-left: 0; margin-right: auto; }

.page-hero-photo .page-hero-inner,
.page-hero-factory .page-hero-inner { max-width: 810px; margin-left: 0; margin-right: auto; }

/* The plain green hero carries no photograph, so its shading simply
 * flips along with the text. */
.page-hero-green .page-hero-shade {
  background: linear-gradient(270deg, rgba(5,27,19,.97), rgba(5,27,19,.74) 50%, rgba(5,27,19,.22));
}

@media (max-width: 720px) {
  .hero-copy,
  .product-hero-inner > div,
  .page-hero-photo .page-hero-inner,
  .page-hero-factory .page-hero-inner { max-width: none; margin-right: 0; }
}

/* Submit button: the arrow points the way the language reads. */
.contact-form input.form-button {
  padding-right: 25px;
  padding-left: 56px;
  background-position: left 25px center;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132319' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H5'/><path d='m11 6-6 6 6 6'/></svg>");
}

/* Phone numbers, addresses and times stay left-to-right. */
.contact-details strong[dir="ltr"] { direction: ltr; unicode-bidi: embed; }