/* ==========================================================================
   HF NEXUS ACADEMY — RTL STYLESHEET (rtl.css)
   Handles right-to-left layout for Arabic (ar) pages.
   Only loaded on RTL pages via <link rel="stylesheet">.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. GLOBAL RTL DIRECTION & TYPOGRAPHY
   ------------------------------------------------------------------------- */

html[dir="rtl"] {
  direction: rtl;
}

/* Arabic: Use Noto Naskh Arabic & Cairo with full Unicode coverage */
html[lang="ar"], [dir="rtl"][lang="ar"], [dir="rtl"][lang="ar"] body {
  font-family: 'Noto Naskh Arabic', 'Cairo', 'Amiri', 'Segoe UI', Tahoma, sans-serif !important;
  letter-spacing: 0;
  line-height: 1.8;
}

html[lang="ar"] .nav-link,
html[lang="ar"] .btn,
html[lang="ar"] .btn-primary,
html[lang="ar"] .btn-secondary,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 {
  font-family: 'Noto Naskh Arabic', 'Cairo', 'Amiri', 'Segoe UI', Tahoma, sans-serif !important;
}

/* -------------------------------------------------------------------------
   2. TEXT ALIGNMENT
   ------------------------------------------------------------------------- */

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

html[dir="rtl"] .section-header {
  text-align: center; /* Keep centered sections centered */
}

html[dir="rtl"] .section-header.text-left {
  text-align: right;
  margin-right: 0;
  margin-left: auto;
}

/* -------------------------------------------------------------------------
   3. HEADER & NAVIGATION
   ------------------------------------------------------------------------- */

/* direction: rtl already mirrors flex rows (logo right, actions left, menu
   reading right-to-left). Adding row-reverse here reversed it a second time,
   which put the logo on the left only on pages that loaded this file. */
html[dir="rtl"] .nav-wrapper,
html[dir="rtl"] .nav-menu,
html[dir="rtl"] .nav-actions {
  flex-direction: row;
}

/* Grouped navigation dropdowns — anchor to the right, right-aligned text */
html[dir="rtl"] .nav-dropdown-menu {
  right: 0;
  left: auto;
}

html[dir="rtl"] .nav-dropdown-link,
html[dir="rtl"] .mobile-nav-group-toggle,
html[dir="rtl"] .mobile-nav-sublink {
  text-align: right;
}



/* -------------------------------------------------------------------------
   4. MOBILE DRAWER — Slide from RIGHT
   ------------------------------------------------------------------------- */

html[dir="rtl"] .mobile-drawer {
  right: 0;
  left: auto;
  transform: translateX(105%);
}

html[dir="rtl"] .mobile-drawer.open {
  transform: translateX(0);
}

html[dir="rtl"] .mobile-drawer-header {
  flex-direction: row;
}

html[dir="rtl"] .mobile-drawer-brand {
  flex-direction: row;
  text-align: right;
  gap: 0.75rem;
}

html[dir="rtl"] .mobile-drawer-brand-text {
  align-items: flex-start;
  text-align: right;
}

html[dir="rtl"] .mobile-drawer-title {
  text-align: right;
}

html[dir="rtl"] .mobile-drawer-sub {
  text-align: right;
}

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

html[dir="rtl"] .mobile-nav-link:hover,
html[dir="rtl"] .mobile-nav-link.active {
  padding-left: 1.25rem;
  padding-right: 1.5rem;
}

html[dir="rtl"] .mobile-nav-group-toggle {
  text-align: right;
}

html[dir="rtl"] .mobile-nav-sublink {
  padding: 0.55rem 1rem 0.55rem 0;
  margin-inline-start: 0;
  margin-inline-end: 0.25rem;
  border-left: none;
  border-right: 2px solid rgba(201, 162, 39, 0.25);
}

html[dir="rtl"] .mobile-toggle {
  order: -1;
}

/* -------------------------------------------------------------------------
   5. HERO SECTION
   ------------------------------------------------------------------------- */

html[dir="rtl"] .hero-content {
  text-align: right;
}

html[dir="rtl"] .hero-actions {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

html[dir="rtl"] .hero-trust-bullets {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

html[dir="rtl"] .hero-trust-bullet .check {
  margin-right: 0;
  margin-left: 0.5rem;
}

html[dir="rtl"] .hero-badge {
  flex-direction: row-reverse;
}

/* -------------------------------------------------------------------------
   6. CARDS & GRIDS
   ------------------------------------------------------------------------- */

html[dir="rtl"] .grid-2,
html[dir="rtl"] .grid-3,
html[dir="rtl"] .grid-4 {
  direction: rtl;
}

html[dir="rtl"] .card,
html[dir="rtl"] .course-card,
html[dir="rtl"] .feature-card,
html[dir="rtl"] .testimonial-card,
html[dir="rtl"] .teacher-card {
  text-align: right;
}

/* Card meta with icons — flip icon position */
html[dir="rtl"] .card-meta,
html[dir="rtl"] .course-meta {
  flex-direction: row-reverse;
}

html[dir="rtl"] .card-meta span,
html[dir="rtl"] .course-meta span {
  flex-direction: row-reverse;
}

/* -------------------------------------------------------------------------
   7. BUTTONS & CTAs
   ------------------------------------------------------------------------- */

html[dir="rtl"] .btn {
  /* Flip inline padding for RTL */
}

html[dir="rtl"] .btn svg,
html[dir="rtl"] .btn .icon {
  margin-left: 0;
  margin-right: 0.5rem;
  transform: scaleX(-1); /* Mirror directional icons */
}

/* -------------------------------------------------------------------------
   8. FORMS
   ------------------------------------------------------------------------- */

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
}

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

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

/* -------------------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------------------- */

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

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

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

html[dir="rtl"] .footer-legal-links {
  flex-direction: row-reverse;
}

/* -------------------------------------------------------------------------
   10. FAQ / ACCORDION
   ------------------------------------------------------------------------- */

html[dir="rtl"] .faq-question {
  flex-direction: row-reverse;
  text-align: right;
}

html[dir="rtl"] .faq-toggle {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .faq-answer {
  text-align: right;
}

/* -------------------------------------------------------------------------
   11. SKIP LINK (ACCESSIBILITY)
   ------------------------------------------------------------------------- */

html[dir="rtl"] .skip-link {
  left: auto;
  right: 1rem;
}

html[dir="rtl"] .skip-link:focus {
  left: auto;
  right: 1rem;
}

/* -------------------------------------------------------------------------
   12. ISLAMIC ACCENT LINE
   ------------------------------------------------------------------------- */

html[dir="rtl"] .islamic-accent-line.left {
  margin: 1.25rem 0;
  margin-right: 0;
  margin-left: auto;
}

/* -------------------------------------------------------------------------
   13. WHATSAPP FLOAT — move to left side in RTL
   ------------------------------------------------------------------------- */

html[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 1.5rem;
}

/* -------------------------------------------------------------------------
   14. SECTION BADGES
   ------------------------------------------------------------------------- */

html[dir="rtl"] .section-badge {
  flex-direction: row-reverse;
}

/* -------------------------------------------------------------------------
   15. BREADCRUMBS (if present)
   ------------------------------------------------------------------------- */

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

html[dir="rtl"] .breadcrumb-separator {
  transform: scaleX(-1);
}

/* -------------------------------------------------------------------------
   16. LANGUAGE SWITCHER (RTL overrides - base styles in components.css)
   ------------------------------------------------------------------------- */
html[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0;
}

html[dir="rtl"] .lang-option {
  text-align: right;
  flex-direction: row-reverse;
}

/* -------------------------------------------------------------------------
   17. RESPONSIVE RTL ADJUSTMENTS
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  html[dir="rtl"] .hero-content {
    text-align: center;
  }

  html[dir="rtl"] .hero-actions {
    justify-content: center;
    flex-direction: column;
  }

  html[dir="rtl"] .hero-trust-bullets {
    justify-content: center;
    flex-wrap: wrap;
  }

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

  html[dir="rtl"] .footer-legal-links {
    flex-direction: row;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   18. RTL PHONE & WHATSAPP NUMBERS — Force LTR rendering to prevent flipping
   ------------------------------------------------------------------------- */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href*="wa.me"],
html[dir="rtl"] a[href*="whatsapp.com"],
html[dir="rtl"] .phone-number,
html[dir="rtl"] .tel-link,
html[dir="rtl"] [dir="ltr"],
html[dir="rtl"] span[dir="ltr"] {
  direction: ltr !important;
  unicode-bidi: embed !important;
  display: inline-block;
}

/* hf-overhaul:arabic-typography:start */
/* ---------------------------------------------------------------------------
   ARABIC — modern Naskh
   --------------------------------------------------------------------------- */
html[lang="ar"] {
  --font-arabic-ui: 'Noto Naskh Arabic', 'Amiri', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

html[lang="ar"] body,
html[lang="ar"] body :where(h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, td, th,
  label, span, a, strong, b, em, small, div, button, input, select, textarea, summary, option) {
  font-family: var(--font-arabic-ui) !important;
  letter-spacing: 0 !important;
}

html[lang="ar"] body {
  line-height: 1.85 !important;
}

html[lang="ar"] body :is(p, li, dd, blockquote, figcaption, td, th, address,
  [class*="desc"], [class*="text"], [class*="bio"], [class*="answer"]) {
  line-height: 1.85 !important;
}

html[lang="ar"] body :is(h1, h2, h3, h4, h5, h6, [class*="title"], [class*="headline"]) {
  line-height: 1.5 !important;
  overflow: visible;
}

/* English runs inside Arabic pages */
html[lang="ar"] body [lang="en"],
html[lang="ar"] body [lang="en"] * {
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif !important;
  line-height: 1.65 !important;
}
/* hf-overhaul:arabic-typography:end */

/* hf-overhaul:rtl-brand:start */
/* ---------------------------------------------------------------------------
   RTL: navbar brand subtitle stays centred beneath the logo
   --------------------------------------------------------------------------- */
html[dir="rtl"] .site-header .brand-logo {
  flex-direction: column;
  align-items: center;
}

html[dir="rtl"] .site-header .brand-logo .brand-logo-sub[lang="ar"] {
  text-align: center;
  direction: rtl;
}
/* hf-overhaul:rtl-brand:end */

/* hf-overhaul:whatsapp-rtl:start */
/* ---------------------------------------------------------------------------
   WHATSAPP FLOAT — RTL mirror (the generic wa.me LTR-number rule above must
   not turn the round button into an inline-block)
   --------------------------------------------------------------------------- */
html[dir="rtl"] a.whatsapp-float {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  direction: ltr !important;
  unicode-bidi: normal !important;
  right: auto !important;
  left: 24px !important;
  bottom: 24px;
}

html[dir="rtl"] a.whatsapp-float::before {
  content: '' !important;
  right: auto !important;
  left: -2px !important;
}

html[dir="rtl"] .site-footer .footer-col h4::after {
  left: auto;
  right: 0;
}

@media (max-width: 768px) {
  html[dir="rtl"] a.whatsapp-float {
    left: 18px !important;
    bottom: 18px;
  }
}
/* hf-overhaul:whatsapp-rtl:end */

/* hf-blog-i18n:start */
/* --------------------------------------------------------------------------
   LOCALIZED BLOG LISTING — Arabic (Naskh) cards
   -------------------------------------------------------------------------- */
html[dir="rtl"] .blog-card-body,
html[dir="rtl"] .blog-card-title,
html[dir="rtl"] .blog-card-excerpt,
html[dir="rtl"] .blog-author-strip {
  text-align: right;
}

/* Dates and read-times keep Latin digits in logical order inside RTL rows */
html[dir="rtl"] .blog-date-text time,
html[dir="rtl"] .blog-time-badge {
  unicode-bidi: plaintext;
}

html[lang="ar"] .blog-card-title {
  font-size: 1.28rem;
  line-height: 1.65 !important;
}

html[lang="ar"] .blog-card-excerpt {
  font-size: 0.98rem;
  line-height: 1.9 !important;
}

html[lang="ar"] .blog-author-sub {
  line-height: 1.7 !important;
}

/* hf-blog-i18n:end */

/* hf-quran-verse:start */
/* Quranic verses quoted inside Arabic articles */
html[lang="ar"] body .quran-verse {
  font-family: 'Amiri Quran', 'Amiri', 'Noto Naskh Arabic', serif !important;
  font-size: 1.15em;
  line-height: 2.1 !important;
  font-style: normal;
  color: var(--color-navy);
  unicode-bidi: isolate;
}
/* hf-quran-verse:end */

/* hf-rtl-emphasis:start */
/* Arabic script has no true italic: synthetic slant harms legibility, so emphasis is weight + colour */
html[lang="ar"] .article-body em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-navy);
}
/* hf-rtl-emphasis:end */


/* hf-audit: mirror search icon & input padding for RTL (search icon was pinned left) */
[dir="rtl"] .search-icon { left: auto; right: 1.1rem; }
[dir="rtl"] .search-input-wrap input { padding-left: 1rem; padding-right: 2.75rem; }

/* Mirror forward chevrons and arrow icons in RTL */
[dir="rtl"] .breadcrumb-separator svg,
[dir="rtl"] .icon-chevron-right,
[dir="rtl"] .btn svg.arrow-icon,
[dir="rtl"] .feature-link svg,
[dir="rtl"] .card-link svg {
  transform: scaleX(-1);
}

/* Phone and email inputs maintain LTR typing order with right alignment in RTL */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"] {
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}