/* ============================================================
   RTL.CSS — Al-Abbas Vocational Preparatory School
   Right-to-Left Layout Overrides for Arabic
   Premium $7000 Quality — Royal Navy & Gold Theme
   ============================================================ */

/* ─────────────────────────────────────────────
   BASE RTL OVERRIDES
   ───────────────────────────────────────────── */
html[dir='rtl'] {
  direction: rtl;
}

html[dir='rtl'] body {
  text-align: right;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] h1,
html[dir='rtl'] h2,
html[dir='rtl'] h3,
html[dir='rtl'] h4,
html[dir='rtl'] h5,
html[dir='rtl'] h6 {
  letter-spacing: 0;
}

html[dir='rtl'] .section-title {
  letter-spacing: 0;
}

html[dir='rtl'] .hero-badge {
  letter-spacing: 0;
}

html[dir='rtl'] .btn-primary,
html[dir='rtl'] .btn-secondary {
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────
   NAVIGATION RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .nav-container {
  flex-direction: row-reverse;
}

html[dir='rtl'] .nav-links {
  flex-direction: row-reverse;
}

html[dir='rtl'] .nav-logo {
  margin-right: 0;
  margin-left: auto;
}

html[dir='rtl'] .nav-actions {
  flex-direction: row-reverse;
}

html[dir='rtl'] #lang-toggle {
  margin-left: 0;
  margin-right: var(--space-sm);
}

html[dir='rtl'] #mobile-menu-btn {
  margin-left: 0;
  margin-right: auto;
}

/* ─────────────────────────────────────────────
   HERO SECTION RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .hero-content {
  text-align: center;
}

html[dir='rtl'] .hero-cta-group {
  flex-direction: row-reverse;
}

/* ─────────────────────────────────────────────
   ABOUT SECTION RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .about-grid {
  direction: rtl;
}

html[dir='rtl'] .about-text {
  text-align: right;
}

html[dir='rtl'] .about-text p {
  text-align: right;
}

html[dir='rtl'] .highlight-item {
  text-align: right;
}

html[dir='rtl'] .highlight-icon {
  margin-right: 0;
  margin-left: var(--space-md);
}

/* ─────────────────────────────────────────────
   STATS RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .stat-card {
  text-align: center;
}

/* ─────────────────────────────────────────────
   DEPARTMENTS SECTION RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .dept-card {
  text-align: right;
}

html[dir='rtl'] .dept-description {
  text-align: right;
}

html[dir='rtl'] .dept-link {
  flex-direction: row-reverse;
}

html[dir='rtl'] .dept-link .arrow-icon {
  transform: scaleX(-1);
  margin-left: 0;
  margin-right: var(--space-xs);
}

html[dir='rtl'] .dept-link:hover .arrow-icon {
  transform: scaleX(-1) translateX(-5px);
}

/* ─────────────────────────────────────────────
   GALLERY SECTION RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .gallery-overlay {
  text-align: right;
}

html[dir='rtl'] .gallery-title {
  text-align: right;
  left: auto;
  right: var(--space-lg);
}

html[dir='rtl'] .gallery-category {
  text-align: right;
  left: auto;
  right: var(--space-lg);
}

/* ─────────────────────────────────────────────
   CONTACT SECTION RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .contact-card {
  flex-direction: row-reverse;
}

html[dir='rtl'] .contact-icon-wrap {
  margin-right: 0;
  margin-left: var(--space-lg);
}

html[dir='rtl'] .contact-info {
  text-align: right;
}

html[dir='rtl'] .contact-grid {
  direction: rtl;
}

/* ─────────────────────────────────────────────
   FORMS RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .form-label {
  text-align: right;
}

html[dir='rtl'] .form-input,
html[dir='rtl'] .form-textarea {
  text-align: right;
  padding-left: var(--space-md);
  padding-right: var(--space-lg);
}

html[dir='rtl'] .form-group {
  text-align: right;
}

html[dir='rtl'] .form-submit-btn {
  margin-left: auto;
  margin-right: 0;
}

/* ─────────────────────────────────────────────
   LOCATION SECTION RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .location-grid {
  direction: rtl;
}

html[dir='rtl'] .location-card {
  flex-direction: row-reverse;
  text-align: right;
}

html[dir='rtl'] .location-icon {
  margin-right: 0;
  margin-left: var(--space-md);
}

html[dir='rtl'] .location-info {
  text-align: right;
}

/* ─────────────────────────────────────────────
   FOOTER RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] #main-footer {
  text-align: right;
}

html[dir='rtl'] .footer-grid {
  direction: rtl;
}

html[dir='rtl'] .footer-brand {
  text-align: right;
}

html[dir='rtl'] .footer-links {
  text-align: right;
}

html[dir='rtl'] .footer-link-item {
  text-align: right;
}

html[dir='rtl'] .footer-link-item::before {
  margin-right: 0;
  margin-left: var(--space-xs);
  transform: scaleX(-1);
}

html[dir='rtl'] .footer-social {
  flex-direction: row-reverse;
}

html[dir='rtl'] .footer-bottom {
  flex-direction: row-reverse;
}

html[dir='rtl'] .footer-description {
  text-align: right;
}

/* ─────────────────────────────────────────────
   SECTION HEADERS RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .section-header {
  text-align: center;
}

html[dir='rtl'] .section-subtitle {
  text-align: center;
}

/* ─────────────────────────────────────────────
   GLASS CARDS RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .glass-card {
  text-align: right;
}

/* ─────────────────────────────────────────────
   MOBILE OVERLAY RTL — Slide from Left
   ───────────────────────────────────────────── */
html[dir='rtl'] .mobile-overlay {
  transform: translateX(-100%);
  right: auto;
  left: 0;
}

html[dir='rtl'] .menu-open .mobile-overlay {
  transform: translateX(0);
}

html[dir='rtl'] .mobile-nav-links {
  text-align: right;
}

html[dir='rtl'] .mobile-nav-link {
  text-align: right;
}

html[dir='rtl'] .mobile-close-btn {
  left: var(--space-lg);
  right: auto;
}

/* ─────────────────────────────────────────────
   BACK TO TOP RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .back-to-top {
  right: auto;
  left: var(--space-xl);
}

/* ─────────────────────────────────────────────
   SCROLL INDICATOR RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .scroll-indicator {
  /* Centered — no change needed */
}

/* ─────────────────────────────────────────────
   ARROW / ICON FLIPS RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .arrow-right {
  transform: scaleX(-1);
}

html[dir='rtl'] .chevron-right {
  transform: scaleX(-1);
}

html[dir='rtl'] .icon-arrow {
  transform: scaleX(-1);
}

html[dir='rtl'] .nav-arrow {
  transform: scaleX(-1);
}

/* ─────────────────────────────────────────────
   REVEAL ANIMATIONS RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .reveal-left {
  opacity: 0;
  transform: translateX(50px);
}

html[dir='rtl'] .reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

html[dir='rtl'] .reveal-right {
  opacity: 0;
  transform: translateX(-50px);
}

html[dir='rtl'] .reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ─────────────────────────────────────────────
   GOLDEN DIVIDER RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .golden-divider {
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────
   DECORATIVE PSEUDO-ELEMENTS RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .section-header::before {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

html[dir='rtl'] .section-header::after {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

/* ─────────────────────────────────────────────
   FLEX UTILITY REVERSALS RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .flex-row {
  flex-direction: row-reverse;
}

html[dir='rtl'] .inline-flex {
  flex-direction: row-reverse;
}

/* ─────────────────────────────────────────────
   MARGIN / PADDING SWAPS RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] .ml-auto {
  margin-left: 0;
  margin-right: auto;
}

html[dir='rtl'] .mr-auto {
  margin-right: 0;
  margin-left: auto;
}

html[dir='rtl'] .pl-md {
  padding-left: 0;
  padding-right: var(--space-md);
}

html[dir='rtl'] .pr-md {
  padding-right: 0;
  padding-left: var(--space-md);
}

/* ─────────────────────────────────────────────
   RESPONSIVE RTL — Mobile
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  html[dir='rtl'] .nav-container {
    flex-direction: row-reverse;
  }

  html[dir='rtl'] .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  html[dir='rtl'] .about-grid {
    direction: rtl;
  }

  html[dir='rtl'] .contact-grid {
    direction: rtl;
  }

  html[dir='rtl'] .footer-grid {
    text-align: center;
  }

  html[dir='rtl'] .footer-brand {
    text-align: center;
  }

  html[dir='rtl'] .footer-links {
    text-align: center;
  }

  html[dir='rtl'] .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  html[dir='rtl'] .mobile-overlay {
    width: 100%;
    transform: translateX(-100%);
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE RTL — Tablet
   ───────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  html[dir='rtl'] .about-grid {
    direction: rtl;
  }

  html[dir='rtl'] .contact-grid {
    direction: rtl;
  }

  html[dir='rtl'] .location-grid {
    direction: rtl;
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE RTL — Desktop
   ───────────────────────────────────────────── */
@media (min-width: 1200px) {
  html[dir='rtl'] .nav-links {
    flex-direction: row-reverse;
  }
}

/* ─────────────────────────────────────────────
   CUSTOM SCROLLBAR RTL
   ───────────────────────────────────────────── */
html[dir='rtl'] ::-webkit-scrollbar-track {
  border-left: none;
  border-right: 1px solid rgba(200, 168, 78, 0.1);
}