/* =============================================================
   RTL (Right-to-Left) STYLESHEET
   =============================================================
   Activated by <html dir="rtl"> on the <html> element.
   Provides proper RTL behavior for the Arabic UI and for
   Arabic-language article content.
   ============================================================= */

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

html[dir="rtl"] .header-inner {
  flex-direction: row-reverse;
}
html[dir="rtl"] .brand {
  flex-direction: row-reverse;
}
html[dir="rtl"] .brand-text {
  text-align: right;
}
html[dir="rtl"] .nav-list {
  padding: 0;
}
html[dir="rtl"] .nav-list a {
  text-align: right;
}
html[dir="rtl"] .nav-toggle {
  order: 3;
}

/* Hero text alignment in RTL */
html[dir="rtl"] .hero-inner {
  text-align: right;
}
html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero-lede {
  text-align: right;
}
html[dir="rtl"] .hero-actions {
  justify-content: flex-end;
}

/* Card content: keep title and meta in the document flow naturally */
html[dir="rtl"] .card-meta {
  direction: rtl;
}
html[dir="rtl"] .card-meta,
html[dir="rtl"] .badge,
html[dir="rtl"] .card-link {
  font-family: "Noto Sans Arabic", "Tahoma", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
html[dir="rtl"] .card-badges {
  flex-direction: row-reverse;
}

/* Article body in Arabic: ensure paragraphs are right-aligned */
html[dir="rtl"] .article-body {
  text-align: right;
}
html[dir="rtl"] .article-body p {
  text-align: right;
}
html[dir="rtl"] .article-meta {
  flex-direction: row-reverse;
}
html[dir="rtl"] .article-badges {
  flex-direction: row-reverse;
}

/* Forms: keep label/input alignment right */
html[dir="rtl"] .form-field,
html[dir="rtl"] .filter-field {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] .form input,
html[dir="rtl"] .form select,
html[dir="rtl"] .form textarea,
html[dir="rtl"] .filter-input,
html[dir="rtl"] .filter-select {
  text-align: right;
  direction: rtl;
}
html[dir="rtl"] .form input[type="email"],
html[dir="rtl"] .form input[autocomplete="email"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

/* Footer */
html[dir="rtl"] .footer-grid {
  direction: rtl;
}
html[dir="rtl"] .footer-list {
  padding: 0;
}
html[dir="rtl"] .footer-list a {
  text-align: right;
}

/* Contributors and achievements */
html[dir="rtl"] .contributor {
  flex-direction: row-reverse;
  text-align: right;
}
html[dir="rtl"] .contributor-info {
  text-align: right;
}

/* Page header in RTL */
html[dir="rtl"] .page-header {
  text-align: right;
}
html[dir="rtl"] .page-header h1,
html[dir="rtl"] .page-header p {
  text-align: right;
}

/* Section headings */
html[dir="rtl"] .section-heading {
  text-align: right;
}

/* Keep the card action aligned with the reading direction. */
html[dir="rtl"] .card-link {
  align-self: flex-start;
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] .card-link-arrow {
  transform: scaleX(-1);
}

/* Buttons: icons and arrows */
html[dir="rtl"] .btn {
  direction: rtl;
}
html[dir="rtl"] .article-back svg {
  transform: scaleX(-1);
}

/* Form actions */
html[dir="rtl"] .form-actions {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* Mobile menu: in RTL the toggle sits on the left visually (opposite of LTR) */
@media (max-width: 1200px) {
  html[dir="rtl"] .primary-nav {
    left: 0;
    right: 0;
  }
}

/* Arabic-specific font preference */
html[lang="ar"] body {
  font-family: "Noto Sans Arabic", "Segoe UI", "Tahoma", "Arial", sans-serif;
}
html[lang="ar"] .article-body,
html[lang="ar"] .article-title,
html[lang="ar"] h1,
html[lang="ar"] h2 {
  font-family:
    "Noto Naskh Arabic", "Noto Sans Arabic", "Amiri", "Georgia", serif;
  line-height: 1.9;
}

/* Mirrored Neo-Brutalist Shadows for RTL */
html[dir="rtl"] .card {
  box-shadow: -4px 4px 0 var(--color-border);
}
html[dir="rtl"] .card:hover {
  box-shadow: -6px 6px 0 var(--color-border);
  transform: translate(2px, -2px);
}
html[dir="rtl"] .btn {
  box-shadow: -3px 3px 0 var(--color-border);
}
html[dir="rtl"] .btn:hover {
  transform: translate(2px, -2px);
  box-shadow: -5px 5px 0 var(--color-border);
}
html[dir="rtl"] .btn:active {
  transform: translate(-2px, 2px);
  box-shadow: -1px 1px 0 var(--color-border);
}
html[dir="rtl"] .lang-select {
  box-shadow: -2px 2px 0 var(--color-border);
}
html[dir="rtl"] .nav-toggle {
  box-shadow: -2px 2px 0 var(--color-border);
}
html[dir="rtl"] .badge-official {
  box-shadow: -2px 2px 0 var(--color-border);
}
html[dir="rtl"] .filters {
  box-shadow: -4px 4px 0 var(--color-border);
}
html[dir="rtl"] .filter-input,
html[dir="rtl"] .filter-select {
  box-shadow: -2px 2px 0 var(--color-border);
}
html[dir="rtl"] .form {
  box-shadow: -8px 8px 0 var(--color-border);
}
html[dir="rtl"] .form input[type="text"],
html[dir="rtl"] .form input[type="email"],
html[dir="rtl"] .form input[type="date"],
html[dir="rtl"] .form select,
html[dir="rtl"] .form textarea {
  box-shadow: -2px 2px 0 var(--color-border);
}
html[dir="rtl"] .form-alert {
  box-shadow: -3px 3px 0 var(--color-border);
}
html[dir="rtl"] .contributors-list {
  box-shadow: -4px 4px 0 var(--color-border);
}
html[dir="rtl"] .contributor-rank {
  box-shadow: -2px 2px 0 var(--color-border);
}
html[dir="rtl"] .achievement {
  box-shadow: -5px 5px 0 var(--color-border);
}
html[dir="rtl"] .achievement:hover {
  box-shadow: -7px 8px 0 var(--color-border);
}
html[dir="rtl"] .achievement-title {
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Tahoma", sans-serif;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
html[dir="rtl"] .achievement-meta {
  letter-spacing: 0;
  text-align: right;
}
html[dir="rtl"] .achievement-student-details {
  flex-direction: row;
}
html[dir="rtl"] .achievement-student,
html[dir="rtl"] .achievement-class,
html[dir="rtl"] .achievement-date {
  font-family: "Noto Sans Arabic", "Tahoma", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

/* Official articles */
html[dir="rtl"] .article-card--official {
  box-shadow: -6px 6px 0 var(--official-lime), -6px 6px 0 2px #101010;
}
html[dir="rtl"] .article-card--official::before,
html[dir="rtl"] .article-card--official::after {
  display: none;
}
html[dir="rtl"] .article-card--official .card-title {
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Tahoma", sans-serif;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
html[dir="rtl"] .article-card--official .card-meta,
html[dir="rtl"] .article-card--official .badge,
html[dir="rtl"] .article-card--official .card-link {
  font-family: "Noto Sans Arabic", "Tahoma", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
html[dir="rtl"] .article-card--official .card-link {
  direction: rtl;
}
html[dir="rtl"] .article-card--official:hover {
  transform: translate(3px, -3px);
  box-shadow: -9px 9px 0 var(--official-lime), -9px 9px 0 2px #101010;
}
html[dir="rtl"] .article-card--official::before {
  right: auto;
  left: -46px;
  transform: rotate(-45deg);
}
html[dir="rtl"] .article-page--official .article-header::after {
  right: auto;
  left: 24px;
  box-shadow: -4px 4px 0 #101010;
}