/* Arabic (RTL) overrides. Loaded only by pages that set dir="rtl".
   Flex layouts mirror on their own; this file only fixes what does not. */

[dir="rtl"] body {
  /* Interface Sans (the brand font) draws the Arabic too; the system faces
     are only a fallback for anything it lacks. */
  font-family: 'Interface Sans', -apple-system, BlinkMacSystemFont, 'SF Arabic', 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif;
}

/* Negative tracking tears connected Arabic letters apart. */
[dir="rtl"] .hero-title,
[dir="rtl"] .roll-word-wrapper,
[dir="rtl"] .hero-subtitle,
[dir="rtl"] .footer,
[dir="rtl"] .mobile-nav-link {
  letter-spacing: 0;
}

[dir="rtl"] .hero-title {
  line-height: 1.35;
}

[dir="rtl"] .hero-subtitle {
  line-height: 1.8;
}

/* The Arabic word stays in one piece (split letters look broken) and is
   written in instead: see the ink stroke below. Give the taller Arabic
   shapes room inside the container's fade mask. */
[dir="rtl"] .roll-container {
  height: 1.7em;
  justify-content: flex-end;
}

[dir="rtl"] .roll-char {
  padding-block: 0.12em;
}

/* Ink stroke (data-roll-mode="ink"): the word is written in from right to
   left like a pen. A soft mask edge travels across it carrying the brand
   colours of the English sweep, and the ink settles into the headline navy.
   The colour image and the mask share one 300%-wide layout, so the colour
   band always sits on the mask's soft edge. On the way out the word lifts
   and fades. */
[dir="rtl"] .roll-container[data-roll-mode="ink"] .roll-char {
  opacity: 1;
  transform: none;
  filter: none;
  background-image: linear-gradient(to left,
      #0f172a 0%, #0f172a 40%,
      #5183EB 45%, #50CEE3 50%, #3CCFB4 55%, #27CF83 60%,
      #FECD7B 66%, #FECD7B 100%);
  background-size: 300% 100%;
  background-position: 0% 0;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 66%);
  mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 66%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
}

[dir="rtl"] .roll-container[data-roll-mode="ink"] .roll-char.animate-in {
  /* An even pen pace: a strong ease-out wrote two thirds of the word in the
     first fifth of the time. */
  animation: arabicInkWrite 0.95s cubic-bezier(0.45, 0.05, 0.35, 1) forwards;
}

[dir="rtl"] .roll-container[data-roll-mode="ink"] .roll-char.animate-out {
  animation: arabicInkLift 0.42s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes arabicInkWrite {
  0% {
    background-position: 0% 0;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    transform: translateY(0.06em);
    filter: blur(1.5px);
  }

  45% {
    transform: translateY(0);
    filter: blur(0);
  }

  100% {
    background-position: 100% 0;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes arabicInkLift {
  0% {
    background-position: 100% 0;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  100% {
    background-position: 100% 0;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    opacity: 0;
    transform: translateY(-0.22em);
    filter: blur(3px);
  }
}

[dir="rtl"] .hero-content {
  text-align: right;
}

@media (max-width: 900px) {
  [dir="rtl"] .hero-content {
    text-align: center;
  }
}

[dir="rtl"] .btn-text {
  letter-spacing: 0;
}

/* In RTL the left edge is scrollable, so anything parked off-screen at
   left:-9999px adds ~10,000px of sideways scroll. Park the skip link off
   the right edge instead and reveal it at the right when focused. */
[dir="rtl"] .skip-link {
  left: auto;
  right: -9999px;
  border-radius: 0 0 0 8px;
}

[dir="rtl"] .skip-link:focus,
[dir="rtl"] .skip-link:focus-visible {
  left: auto;
  right: 0;
}

/* Same for the support form's hidden spam-trap field. */
[dir="rtl"] .honeypot-field {
  left: auto;
  right: -9999px;
}

/* Arabic glyphs sit smaller and lighter than Interface Sans at the same
   size and weight, so the Arabic hero is scaled up and set at the heaviest
   weight. Relative units keep every existing breakpoint size in play. */
[dir="rtl"] .hero-title,
[dir="rtl"] .roll-word-wrapper {
  font-weight: 900;
}

[dir="rtl"] .hero-title-line,
[dir="rtl"] .hero-title-rest {
  font-size: 1.2em;
}

/* "© 2026 Spomotion GmbH." is Latin text; isolate it as LTR so the period
   and © stay in place. main.js rewrites its contents for the year, so this
   lives in CSS rather than markup. */
[dir="rtl"] .copyright {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Arabic tracking: the site's slight negative tracking pinches joined letters. */
[dir="rtl"] body {
  letter-spacing: 0;
}

/* Support form in Arabic. Flex rows (labels, the field and its error icon,
   the counter row) mirror on their own; these pieces are positioned by hand. */
[dir="rtl"] .select-field select {
  background-position: left 0 center;
  padding-right: 0;
  padding-left: 20px;
}

/* The error icon sits at the field's left end, so its tooltip opens rightward,
   over the field, instead of off the edge of the form. */
[dir="rtl"] .field-error-icon.visible::after {
  right: auto;
  left: 100%;
  margin-right: 0;
  margin-left: 8px;
}

/* Email addresses and the 0/500 counter read left to right. */
[dir="rtl"] .input-field input[type="email"] {
  direction: ltr;
  text-align: right;
}

[dir="rtl"] .char-counter {
  direction: ltr;
}

/* Press page in Arabic. The grids and flex rows mirror on their own. */
[dir="rtl"] .press-header {
  text-align: right;
}

[dir="rtl"] .minsize-list {
  padding-left: 0;
  padding-right: 20px;
}

/* The floating top/bottom buttons sit on the reading-end side. */
[dir="rtl"] .scroll-nav {
  right: auto;
  left: 16px;
}

/* Legal pages in Arabic (privacy_policy_ar.html, terms_ar.html). The legal
   styles in styles.css are written left to right; these mirror them. */
[dir="rtl"] .legal-doc {
  text-align: right;
}

[dir="rtl"] .legal-doc ul,
[dir="rtl"] .legal-doc ol {
  padding-left: 0;
  padding-right: 22px;
}

[dir="rtl"] .legal-doc .legal-toc {
  padding-left: 18px;
}

[dir="rtl"] .legal-doc blockquote {
  border-left: 0;
  border-right: 3px solid #5183EB;
  border-radius: 8px 0 0 8px;
}

/* Arabic has no true italics; the slanted fallback is hard to read. */
[dir="rtl"] .legal-doc em {
  font-style: normal;
}

/* Phone and VAT numbers stay in one piece. */
[dir="rtl"] .legal-doc .nowrap {
  white-space: nowrap;
}

[dir="rtl"] .legal-table th {
  text-align: right;
}

[dir="rtl"] .legal-table th,
[dir="rtl"] .legal-table td {
  border-right: 0;
  border-left: 1px solid #F0F0F0;
}

[dir="rtl"] .legal-table th:last-child,
[dir="rtl"] .legal-table td:last-child {
  border-left: 0;
}

[dir="rtl"] .legal-table thead th:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 13px;
}

[dir="rtl"] .legal-table thead th:last-child {
  border-top-right-radius: 0;
  border-top-left-radius: 13px;
}

[dir="rtl"] .legal-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 13px;
}

[dir="rtl"] .legal-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 13px;
}

@media (min-width: 1280px) {
  [dir="rtl"] .legal-sidebar {
    left: auto;
    right: 40px;
  }
}

/* The note under the title: the English version prevails. */
[dir="rtl"] .legal-note {
  align-self: stretch;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #F5F8FE;
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  text-align: right;
}

[dir="rtl"] .legal-note a {
  color: #5183EB;
  text-decoration: none;
}

[dir="rtl"] .legal-note a:hover {
  color: #3A6FD8;
  text-decoration: underline;
}

/* No negative tracking on Arabic anywhere: it squeezes the joined letters.
   These are the places styles.css tightens on top of the body. */
[dir="rtl"] :is(.support-title, .press-section-title, .btn-text, .label-text,
  .required-asterisk, .input-field input, .input-field select,
  .textarea-field textarea, .char-counter, .success-message,
  .success-description) {
  letter-spacing: 0;
}