/* =========================================================
   Petit Lune — RTL (Right-to-Left) Styles
   Applies when html[dir="rtl"] or [dir="rtl"] is set.
   Loaded on all pages alongside style.css.
   ========================================================= */

/* --- Announcement bar marquee (RTL reverses scroll direction) --- */
html[dir="rtl"] .announce__track--marquee {
  animation-name: announceMarqueeScrollRtl;
}

@keyframes announceMarqueeScrollRtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

/* --- Hero marquee ticker --- */
[dir="rtl"] .marquee__row {
  animation-direction: reverse;
}

/* --- FAQ question text alignment --- */
[dir="rtl"] .faq__q {
  text-align: right;
}

/* --- Nav drawer (off-canvas from left side in RTL) --- */
@media (max-width: 1024px) {
  [dir="rtl"] .nav {
    right: auto;
    left: 0;
    inset-inline-end: auto;
    inset-inline-start: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.22);
    border-left: none;
    border-right: 1px solid var(--border);
    border-inline-end: 1px solid var(--border);
    border-inline-start: none;
  }

  [dir="rtl"] .nav__dropdown {
    padding: 0;
  }

  [dir="rtl"] .nav__item.is-open .nav__dropdown {
    padding: .3rem 0 .6rem 0;
  }

  [dir="rtl"] .nav__dropdown-link {
    padding: .65rem 2.2rem .65rem 1.35rem;
  }
}

/* --- General RTL fine-tuning --- */
[dir="rtl"] {
  letter-spacing: 0;
}

[dir="rtl"] .nav__link::after {
  transform-origin: right;
}

[dir="rtl"] .to-top {
  transform: none;
}

/* --- Atelier image tilt flipped for RTL --- */
[dir="rtl"] .h2-atelier__small {
  transform: rotate(2deg);
}