/*
 * Document direction for translated locales.
 * The source page is dir="ltr". The translation layer keeps dir="ltr" for
 * languages that read left to right, and sets dir="rtl" for Arabic, Hebrew,
 * and other right-to-left languages. Layout that means "start" or "end"
 * follows that attribute.
 */

html[dir="ltr"] {
  direction: ltr;
}

html[dir="ltr"] body {
  text-align: start;
}

html[dir="ltr"] :where(
  h1,
  h2,
  h3,
  .hero-title,
  .home-section-title,
  .feature-page-title,
  .pricing-title,
  .btn,
  .nav-link,
  .nav-link-mega,
  .footer-link,
  .footer-desc,
  .mega-product-title,
  .mega-product-desc,
  .mega-product-tagline
),
html[dir="rtl"] :where(
  h1,
  h2,
  h3,
  .hero-title,
  .home-section-title,
  .feature-page-title,
  .pricing-title,
  .btn,
  .nav-link,
  .nav-link-mega,
  .footer-link,
  .footer-desc,
  .mega-product-title,
  .mega-product-desc,
  .mega-product-tagline
) {
  overflow-wrap: break-word;
}

/* Push Sign in + the CTA to the end of the row (the right, when dir is ltr). */
html[dir="ltr"] .nav-links > a:nth-of-type(2) {
  margin-left: auto;
  margin-inline-start: auto;
}

/* Drawer stays on the inline end and slides in from that side. */
html[dir="ltr"] .mobile-nav-panel {
  right: auto;
  left: auto;
  inset-inline-end: 0;
  border-left: 0;
  border-inline-start: 1px solid #ffffff80;
  transform: translateX(100%);
}

html[dir="ltr"] .mobile-nav.is-open .mobile-nav-panel {
  transform: translateX(0);
}

html[dir="ltr"] #mobile-nav .mobile-nav-accordion-trigger,
html[dir="ltr"] #mobile-nav a.mobile-nav-item--top {
  text-align: start !important;
}

html[dir="ltr"] #mobile-nav .mobile-nav-chevron {
  margin-right: 0;
  margin-inline-end: 0.2rem;
}

/* Decorative panel sits on the start side of the how-it-works figure. */
html[dir="ltr"] .how-image:before {
  left: auto;
  right: auto;
  inset-inline-start: -1.5rem;
  inset-inline-end: 0;
}

html[dir="ltr"] .how-image-caption {
  padding-right: 0;
  padding-left: 0;
  padding-inline-start: 0.85rem;
  padding-inline-end: 1.5rem;
}

/* Translated LTR labels run long. Below the desktop nav, use the compact
   mark and short CTA so the language control, button, and menu stay on one row. */
@media (width <= 1024px) {
  html[dir="ltr"]:not(:lang(en)) .header a.logo .logo-img--full,
  html[dir="rtl"] .header a.logo .logo-img--full {
    display: none;
  }

  html[dir="ltr"]:not(:lang(en)) .header a.logo .logo-img--mark,
  html[dir="rtl"] .header a.logo .logo-img--mark {
    display: block;
    width: auto;
    height: 1.85rem;
    max-width: none;
  }

  html[dir="ltr"]:not(:lang(en)) .nav-links > a.nav-cta .nav-cta-label,
  html[dir="rtl"] .nav-links > a.nav-cta .nav-cta-label {
    display: none;
  }

  html[dir="ltr"]:not(:lang(en)) .nav-links > a.nav-cta .nav-cta-short,
  html[dir="rtl"] .nav-links > a.nav-cta .nav-cta-short {
    display: inline;
  }

  html[dir="ltr"]:not(:lang(en)) .how-image-caption a,
  html[dir="ltr"]:not(:lang(en)) .blog-card-cta,
  html[dir="rtl"] .how-image-caption a,
  html[dir="rtl"] .blog-card-cta {
    white-space: normal;
  }
}

/* Right-to-left locales. Flex rows already reverse; these rules move the
   pieces that were pinned to the physical left. */
html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] body {
  text-align: start;
}

html[dir="rtl"] .nav-links > a:nth-of-type(2) {
  margin-left: 0;
  margin-right: auto;
  margin-inline-start: auto;
}

html[dir="rtl"] #mobile-nav .mobile-nav-panel {
  right: auto !important;
  left: 0 !important;
  border-left: none !important;
  border-right: 1px solid #dbe5d4 !important;
  box-shadow: 18px 0 48px rgba(40, 55, 43, 0.22) !important;
  transform: translate3d(-100%, 0, 0) !important;
}

html[dir="rtl"] #mobile-nav.mobile-nav.is-open .mobile-nav-panel {
  transform: translate3d(0, 0, 0) !important;
}

html[dir="rtl"] #mobile-nav .mobile-nav-accordion-trigger,
html[dir="rtl"] #mobile-nav a.mobile-nav-item,
html[dir="rtl"] #mobile-nav a.mobile-nav-item--top {
  text-align: start !important;
}

html[dir="rtl"] #mobile-nav .mobile-nav-chevron {
  margin-right: 0;
  margin-left: 0.2rem;
  transform: scaleX(-1) rotate(-45deg);
}

html[dir="rtl"] #mobile-nav .mobile-nav-accordion-trigger[aria-expanded="true"] .mobile-nav-chevron {
  transform: scaleX(-1) rotate(45deg);
}

html[dir="rtl"] :is(.btn, .nav-cta, .footer-cta, .mega-products-aside-link, .mobile-nav-all-features) > span[aria-hidden="true"] {
  display: inline-block;
  transform: scaleX(-1);
}

html[dir="rtl"] .how-image:before {
  left: auto;
  right: auto;
  inset-inline-start: -1.5rem;
  inset-inline-end: 0;
}

html[dir="rtl"] .how-container,
html[dir="rtl"] .how-image-caption,
html[dir="rtl"] .contact-form-container {
  text-align: start;
}

html[dir="rtl"] .mega-tile--logo {
  text-align: start !important;
}

html[dir="rtl"] .how-image-caption {
  padding-right: 0;
  padding-left: 0;
  padding-inline-start: 0.85rem;
  padding-inline-end: 1.5rem;
}

html[dir="rtl"] :is(
  .content-prose ul,
  .content-prose ol,
  .content-sources ul,
  .ed-comparison-points,
  .ed-decision-options,
  .ed-takeaways-list,
  .sotmw .references,
  .hreflang-bench .references,
  .hreflang-bench .next-actions ul
) {
  padding-left: 0;
  padding-inline-start: 1.25rem;
}

html[dir="rtl"] .content-prose li {
  padding-left: 0;
  padding-inline-start: 0.15rem;
}

html[dir="rtl"] :is(.content-prose blockquote, .ed-callout--quote, .sotmw .callout.info, .sotmw .callout.caution) {
  border-left: 0;
  border-right: 4px solid var(--color-primary);
  border-radius: var(--radius) 0 0 var(--radius);
}

html[dir="rtl"] .hreflang-bench .quote-stat,
html[dir="rtl"] .hreflang-bench .finding-action {
  border-left: 0;
  border-right: 4px solid var(--accent, var(--color-primary));
  padding-left: 0;
  padding-right: 20px;
  border-radius: 9px 0 0 9px;
}

html[dir="rtl"] :is(
  .ed-table th,
  .ed-table td,
  .content-prose th,
  .content-prose td,
  .article-table th,
  .article-table td,
  .article-table caption,
  .feature-detail .faq .home-faq-lead,
  .sotmw th,
  .sotmw td,
  .hreflang-bench th,
  .hreflang-bench td,
  .hreflang-bench .legend-button,
  .hreflang-bench .bench
) {
  text-align: start;
}

html[dir="rtl"] .step,
html[dir="rtl"] .ed-process-step,
html[dir="rtl"] .ed-timeline-item,
html[dir="rtl"] .article-decision-steps > li {
  text-align: start;
  padding-left: var(--spacing-lg);
  padding-inline-start: 4.65rem;
}

html[dir="rtl"] .ed-process-step {
  padding-inline-start: 3.25rem;
}

html[dir="rtl"] .ed-timeline-item {
  padding-inline-start: 2.5rem;
}

html[dir="rtl"] .article-decision-steps > li {
  padding-inline-start: 3.35rem;
}

html[dir="rtl"] .step::before,
html[dir="rtl"] .ed-process-step::before,
html[dir="rtl"] .ed-timeline-item::before,
html[dir="rtl"] .article-decision-steps > li::before {
  left: auto;
  right: var(--spacing-md);
}

html[dir="rtl"] .ed-timeline-item:before,
html[dir="rtl"] .ed-timeline-list:before {
  left: auto;
}

html[dir="rtl"] .ed-timeline-list:before {
  right: 0.85rem;
}

html[dir="rtl"] .ed-timeline-item:before {
  right: 0.55rem;
}

html[dir="rtl"] .article-decision-steps > li::before {
  right: 0.9rem;
}

html[dir="rtl"] .steps-list:before {
  left: auto;
  right: calc(var(--spacing-md) + 17px);
}

html[dir="rtl"] .ed-arch-node {
  margin-left: 0;
  margin-inline-start: calc(var(--ed-depth, 0) * 1.25rem);
}

html[dir="rtl"] .ed-url-label,
html[dir="rtl"] .mobile-nav-item .nav-soon-badge,
html[dir="rtl"] .hreflang-bench .finding-caveat {
  margin-right: 0;
  margin-left: 0;
  margin-inline-end: 0.35rem;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .sotmw .toc a {
  border-left: 0;
  border-right: 2px solid transparent;
  padding-left: 0;
  padding-inline-start: 12px;
}

html[dir="rtl"] .sotmw .toc a:hover,
html[dir="rtl"] .sotmw .toc a.active,
html[dir="rtl"] .sotmw .toc a[aria-current="location"] {
  border-right-color: var(--s-blue, var(--color-primary));
}

html[dir="rtl"] .sotmw .short-version li {
  padding-left: 0;
  padding-inline-start: 42px;
}

html[dir="rtl"] .sotmw .short-version li::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .hreflang-bench .toggle:after {
  left: auto;
  right: 3px;
}

html[dir="rtl"] .hreflang-bench .toggle[aria-pressed="true"]:after {
  transform: translateX(-18px);
}