/* ============================================
   RTL overrides — Arabic direction
   Mirrors layout, swaps fonts where needed
   Updated to match main.css as of 2026-04
   ============================================ */

html[dir="rtl"] body {
  font-family: var(--font-arabic);
  line-height: 1.95;
}

/* Headings in Arabic — Amiri, no conventional italic */
html[dir="rtl"] .page-title,
html[dir="rtl"] .pub-info h3,
html[dir="rtl"] .talk-card h3,
html[dir="rtl"] .research-card h3,
html[dir="rtl"] .article-item h3,
html[dir="rtl"] .lesson-card h3,
html[dir="rtl"] .home-wordmark,
html[dir="rtl"] .home-section-header h2,
html[dir="rtl"] .cv-section h2,
html[dir="rtl"] .contact-info h3,
html[dir="rtl"] .turath-feature-text h2 {
  font-family: var(--font-arabic);
  font-style: normal;
  letter-spacing: 0;
}
html[dir="rtl"] .page-title { font-size: clamp(2.05rem, 1.4rem + 2.9vw, 2.95rem); }
html[dir="rtl"] .pub-info h3,
html[dir="rtl"] .talk-card h3,
html[dir="rtl"] .research-card h3,
html[dir="rtl"] .article-item h3,
html[dir="rtl"] .lesson-card h3,
html[dir="rtl"] .publication-section-card h3 {
  font-size: 1.38rem;
}
html[dir="rtl"] .home-section-header h2,
html[dir="rtl"] .cv-section h2,
html[dir="rtl"] .contact-info h3,
html[dir="rtl"] .turath-feature-text h2 {
  font-size: 1.72rem;
}

/* Logo: Arabic name is primary in AR version — flip size relationship */
html[dir="rtl"] .logo-ar {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-ink);
  align-self: auto;
}
html[dir="rtl"] .logo-en {
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 400;
  color: var(--color-ink-light);
}

/* UI labels in Arabic */
html[dir="rtl"] .pub-meta,
html[dir="rtl"] .talk-meta,
html[dir="rtl"] .research-date,
html[dir="rtl"] .pub-tag,
html[dir="rtl"] .pub-link,
html[dir="rtl"] .lang-link,
html[dir="rtl"] .attachment-link,
html[dir="rtl"] .contact-form label,
html[dir="rtl"] .contact-form button,
html[dir="rtl"] .page-subtitle,
html[dir="rtl"] .see-all,
html[dir="rtl"] .section-count,
html[dir="rtl"] .footer-tagline,
html[dir="rtl"] .footer-links a,
html[dir="rtl"] .footer-copyright,
html[dir="rtl"] .nav-item > a {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}
html[dir="rtl"] .nav-item > a {
  font-size: 1rem;
}
html[dir="rtl"] .dropdown li a {
  font-family: var(--font-arabic);
  font-size: 0.92rem;
  letter-spacing: 0;
}
html[dir="rtl"] .pub-meta,
html[dir="rtl"] .talk-meta,
html[dir="rtl"] .research-date,
html[dir="rtl"] .section-count,
html[dir="rtl"] .publication-section-count,
html[dir="rtl"] .footer-copyright {
  font-size: 0.92rem;
}
html[dir="rtl"] .pub-tag,
html[dir="rtl"] .pub-link,
html[dir="rtl"] .attachment-link,
html[dir="rtl"] .contact-form label,
html[dir="rtl"] .contact-form button,
html[dir="rtl"] .see-all,
html[dir="rtl"] .publication-section-link,
html[dir="rtl"] .footer-links a {
  font-size: 0.9rem;
}
html[dir="rtl"] .pub-tag,
html[dir="rtl"] .pub-link,
html[dir="rtl"] .attachment-link {
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}
html[dir="rtl"] .page-subtitle,
html[dir="rtl"] .home-intro .tagline,
html[dir="rtl"] .footer-location,
html[dir="rtl"] .home-collage-credit {
  font-size: 1rem;
}
html[dir="rtl"] .home-action-link {
  font-family: var(--font-arabic);
  font-size: 0.94rem;
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .page-content {
  font-size: 1.16rem;
  line-height: 2.02;
}
html[dir="rtl"] .home-intro .bio-brief {
  font-size: 1.14rem;
  line-height: 1.95;
}
html[dir="rtl"] .home-intro .bio-brief p:first-child::first-letter {
  float: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
}

/* --- Nav underline: grow from right in RTL --- */
html[dir="rtl"] .nav-item > a::after {
  left: auto;
  right: 0;
}
html[dir="rtl"] .nav-caret {
  transform: rotate(135deg) translateY(-0.08rem);
}

/* --- Mirror horizontal spacing --- */
html[dir="rtl"] .lang-toggle {
  border-left: none;
  border-right: 1px solid var(--color-border);
  padding-left: 0;
  padding-right: 0.8rem;
  margin-left: 0;
  margin-right: 0.3rem;
}

/* Blockquote: flip border side */
html[dir="rtl"] .page-content blockquote {
  border-left: none;
  border-right: 2px solid var(--color-rust);
  padding-left: 1.5rem;
  padding-right: 2rem;
}
html[dir="rtl"] .page-content blockquote::before {
  content: '\201D';
  left: auto;
  right: 0.5rem;
}

/* Blurb shortcode */
html[dir="rtl"] .blurb {
  border-left: none;
  border-right: 3px solid var(--color-rust);
  padding-left: 1.5rem;
  padding-right: 2rem;
}

/* Research card border */
html[dir="rtl"] .research-card {
  border-left: 1px solid var(--color-border-light);
  border-right: 3px solid var(--color-verdigris);
  border-radius: 5px 0 0 5px;
}

html[dir="rtl"] .publication-section-card {
  border-left: 1px solid var(--color-border-light);
  border-right: 3px solid var(--color-rust);
}

html[dir="rtl"] .publication-section-card:hover {
  border-right-color: var(--color-verdigris);
}

/* Turath feature card */
html[dir="rtl"] .turath-feature {
  border-left: 1px solid var(--color-border);
  border-right: 3px solid var(--color-verdigris);
  border-radius: 6px 0 0 6px;
}

/* Lists */
html[dir="rtl"] .page-content ul,
html[dir="rtl"] .page-content ol {
  padding-left: 0;
  padding-right: 1.6rem;
}

/* Dropdown alignment */
html[dir="rtl"] .dropdown {
  left: auto;
  right: 0;
}

html[dir="rtl"] .dropdown-toggle[aria-expanded="true"] .nav-caret {
  transform: rotate(-45deg) translateY(0.08rem);
}

/* Article counter — flip to right */
html[dir="rtl"] .article-item {
  grid-template-columns: 1fr 2.5rem;
}
html[dir="rtl"] .article-number {
  text-align: left;
  order: 2;
}
html[dir="rtl"] .article-item > div { order: 1; }

/* Footer grid mirror */
html[dir="rtl"] .footer-inner {
  grid-template-columns: 1fr auto 1fr;
}
html[dir="rtl"] .footer-brand { text-align: right; }
html[dir="rtl"] .footer-copyright { text-align: left; }

/* See-all link flip */
html[dir="rtl"] .home-section-header { flex-direction: row-reverse; }

/* Hero: in RTL, photo sits on the LEFT (near reading origin), text on the RIGHT */
html[dir="rtl"] .home-intro { order: 2; }
html[dir="rtl"] .home-portrait { order: 1; }
html[dir="rtl"] .home-portrait-credit { text-align: left; }

/* Homepage collage — RTL credit alignment + Amiri for credit line */
html[dir="rtl"] .home-collage-credit {
  text-align: right;
  font-family: var(--font-arabic);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  html[dir="rtl"] .menu-toggle {
    flex-direction: row-reverse;
  }

  html[dir="rtl"] .nav-parent-row {
    flex-direction: row;
  }

  html[dir="rtl"] .dropdown {
    padding: 0.15rem 1rem 0.5rem 0;
  }

  html[dir="rtl"] .search-link,
  html[dir="rtl"] .lang-toggle {
    justify-content: flex-start;
  }

  html[dir="rtl"] .home-intro {
    order: 1;
  }

  html[dir="rtl"] .home-portrait {
    order: 2;
  }

  html[dir="rtl"] .home-portrait-credit {
    text-align: center;
  }
}

/* Colophon: UI labels in Arabic, italic intro reverts to roman Amiri */
html[dir="rtl"] .colophon-section h2,
html[dir="rtl"] .colophon-credits dt {
  font-family: var(--font-arabic);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
html[dir="rtl"] .colophon-intro {
  font-family: var(--font-arabic);
  font-style: normal;
}
html[dir="rtl"] .colophon-credits dd,
html[dir="rtl"] .colophon-build {
  font-family: var(--font-arabic);
}
/* Stack credits on mobile (dt over dd) — dt still reads right in RTL  */
html[dir="rtl"] .colophon-credits {
  /* grid-template-columns already flips naturally; no override needed at desktop */
}

/* Mobile RTL */
@media (max-width: 768px) {
  html[dir="rtl"] .lang-toggle {
    border-right: none;
    border-top: 1px solid var(--color-border);
    padding-right: 0;
    margin-right: 0;
    padding-top: 0.8rem;
  }
  html[dir="rtl"] .has-dropdown .dropdown {
    padding-left: 0;
    padding-right: 1rem;
  }
  html[dir="rtl"] .footer-brand,
  html[dir="rtl"] .footer-copyright {
    text-align: center;
  }
}

@media (max-width: 480px) {
  html[dir="rtl"] .lesson-number {
    text-align: right;
  }
}