/* ==========================================================================
   RTL Overrides for Arabic Layout
   ========================================================================== */

/* Direction and Alignment */
body.rtl {
  direction: rtl;
  text-align: right;
}

/* Typography Overrides */
body.rtl h1, 
body.rtl h2, 
body.rtl h3, 
body.rtl h4, 
body.rtl h5, 
body.rtl h6,
body.rtl .tab-btn,
body.rtl .ticket-price {
  font-family: var(--font-heading);
}

/* Navbar */
body.rtl .nav-links {
  /* Flexbox handles the order automatically, but we might need to adjust margins if any exist */
}

/* Phase 8: fullscreen overlay nav — position is handled by main.css (inset: 0)
   RTL only needs to ensure no left/right overrides break the overlay */
@media (max-width: 768px) {
  body.rtl .nav-links {
    left: 0 !important;
    right: 0 !important;
  }
}

/* Forms */
body.rtl .form-control {
  text-align: right;
}

/* Icons and specific alignments */
body.rtl .btn svg {
  margin-left: 0;
  margin-right: 8px;
  transform: scaleX(-1); /* Flip arrows if necessary */
}

/* Footer */
@media (max-width: 768px) {
  body.rtl .footer-grid {
    text-align: center;
  }
}

/* Swap directional scroll animations for RTL (Phase 3) */
body.rtl .animate-on-scroll[data-anim="fade-left"]  { transform: translateX(44px); }
body.rtl .animate-on-scroll[data-anim="fade-right"] { transform: translateX(-44px); }
body.rtl .animate-on-scroll[data-anim="fade-left"].visible,
body.rtl .animate-on-scroll[data-anim="fade-right"].visible { transform: translateX(0); }

/* Schedule */
body.rtl .schedule-time {
  text-align: right;
}

@media (min-width: 769px) {
  body.rtl .schedule-time {
    padding-left: 2rem;
    padding-right: 0;
  }
}

/* ---- Mobile / Tablet RTL ---- */
@media (max-width: 768px) {
  body.rtl .hero-cta {
    align-items: center;
  }
  body.rtl .footer-links-col {
    text-align: center;
  }
  body.rtl .footer-links-col ul {
    padding-right: 0;
  }
  body.rtl .announce-banner__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  body.rtl .artist-cta__actions {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  body.rtl .top-bar__contact {
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
  body.rtl .announce-banner__link {
    text-align: center;
    width: 100%;
    justify-content: center;
  }
}