/* ============================================================
   rtl.css — Arabic / RTL specific overrides
   Loaded for ALL pages but only activates under [dir="rtl"].
   Contains every direction-aware rule for the FULL MARKS ACADEMY
   landing page. No LTR rules belong here.
   ============================================================ */

/* ----- Base typography ----- */
[dir="rtl"] body,
[dir="rtl"] .sticky-header,
[dir="rtl"] .sticky-header nav a,
[dir="rtl"] .mobile-nav-menu,
[dir="rtl"] .mobile-nav-menu a,
[dir="rtl"] .btn,
[dir="rtl"] .btn-luxury,
[dir="rtl"] .btn-glass {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

/* ============================================================
   Navbar — Arabic-specific sizing & spacing
   Arabic words are typically wider than English equivalents, so we
   tighten gaps and shrink the link font a touch to prevent overflow.
   ============================================================ */
[dir="rtl"] #header-nav .primary-nav {
  gap: 1.1rem !important;
}

[dir="rtl"] #header-nav .header-actions {
  gap: .35rem !important;
}

[dir="rtl"] #header-nav .desktop-nav-link {
  font-size: .9rem !important;
  white-space: nowrap;
  padding: .35rem .15rem !important;
}

[dir="rtl"] #header-nav .nav-more-btn {
  padding: .45rem .75rem !important;
  font-size: .9rem !important;
  white-space: nowrap;
}

/* Action buttons stay on one line, no wrapping, and stay compact so the
   nav links get the bulk of the available width */
[dir="rtl"] #header-nav .btn-luxury,
[dir="rtl"] #header-nav .btn-glass {
  white-space: nowrap;
  min-width: max-content;
  padding-block: .4rem !important;
  padding-inline: .7rem !important;
  font-size: .8rem !important;
  line-height: 1.3;
}

[dir="rtl"] #header-nav .icon-btn {
  width: 2.05rem;
  height: 2.05rem;
  font-size: .8rem;
}

/* Brand block beside the logo — slightly tighter line in Arabic */
[dir="rtl"] #header-nav span.text-xl {
  font-size: 1rem !important;
  line-height: 1.2;
}

[dir="rtl"] #header-nav span.text-xl>span.font-normal {
  font-size: .7rem !important;
}



/* Wider container padding for navbar in Arabic to give breathing room */
[dir="rtl"] .sticky-header>.container {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  gap: .9rem;
}

/* Medium range (768–1199px, iPad) — inline navbar shows like desktop, so
   tighten Arabic spacing further; overflow goes into the "More" dropdown. */
@media (min-width: 768px) and (max-width: 1199px) {
  [dir="rtl"] #header-nav .primary-nav {
    gap: .7rem !important;
  }

  [dir="rtl"] #header-nav .desktop-nav-link {
    font-size: .85rem !important;
  }

  [dir="rtl"] #header-nav .nav-more-btn {
    padding: .35rem .6rem !important;
    font-size: .82rem !important;
  }

  [dir="rtl"] #header-nav .btn-luxury,
  [dir="rtl"] #header-nav .btn-glass {
    font-size: .72rem !important;
    padding-inline: .5rem !important;
  }

  [dir="rtl"] #header-nav .icon-btn {
    width: 1.85rem;
    height: 1.85rem;
    font-size: .72rem;
  }

  [dir="rtl"] .sticky-header>.container {
    padding-left: .75rem;
    padding-right: .75rem;
    gap: .5rem;
  }
}

/* Desktop & up (≥1200px) — spacing adjusted to be comfortable since the logo
   has a reasonable size of 70px tall. Kept slightly tighter than LTR as Arabic 
   words take up more horizontal space. */
@media (min-width: 1200px) {
  [dir="rtl"] #header-nav .primary-nav {
    gap: 1.25rem !important;
  }

  [dir="rtl"] #header-nav .desktop-nav-link {
    font-size: 0.95rem !important;
  }

  [dir="rtl"] #header-nav .btn-luxury,
  [dir="rtl"] #header-nav .btn-glass {
    font-size: 0.95rem !important;
    padding-inline: 1rem !important;
  }
}

/* ----- Layout: never allow horizontal scrolling ----- */
[dir="rtl"] html,
[dir="rtl"] body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Sections use `clip` (modern, doesn't change scroll container) so
   Bootstrap's negative row margins still align inside the container */
[dir="rtl"] section[id],
[dir="rtl"] footer,
[dir="rtl"] .hero-section {
  overflow-x: clip;
}

/* Container: generous padding to leave room for Arabic glyph shapes */
[dir="rtl"] section[id]>.container,
[dir="rtl"] footer>.container {
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  padding-right: clamp(1.25rem, 4vw, 2.5rem);
}

/* Bootstrap row keeps default gutter; remove our previous override
   that was creating subtle width mismatches on tablet/laptop */
[dir="rtl"] .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}

/* ----- Tailwind margin utilities flipped ----- */
[dir="rtl"] .mr-1 {
  margin-right: 0 !important;
  margin-left: .25rem !important;
}

[dir="rtl"] .mr-2 {
  margin-right: 0 !important;
  margin-left: .5rem !important;
}

[dir="rtl"] .mr-3 {
  margin-right: 0 !important;
  margin-left: .75rem !important;
}

[dir="rtl"] .mr-4 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

[dir="rtl"] .ml-1 {
  margin-left: 0 !important;
  margin-right: .25rem !important;
}

[dir="rtl"] .ml-2 {
  margin-left: 0 !important;
  margin-right: .5rem !important;
}

[dir="rtl"] .ml-3 {
  margin-left: 0 !important;
  margin-right: .75rem !important;
}

[dir="rtl"] .ml-4 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

/* Tailwind space-x reverse */
[dir="rtl"] .space-x-1> :not([hidden])~ :not([hidden]),
[dir="rtl"] .space-x-2> :not([hidden])~ :not([hidden]),
[dir="rtl"] .space-x-3> :not([hidden])~ :not([hidden]),
[dir="rtl"] .space-x-4> :not([hidden])~ :not([hidden]),
[dir="rtl"] .space-x-6> :not([hidden])~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

/* ----- Tailwind absolute positions used on this page ----- */
[dir="rtl"] .left-10 {
  left: auto !important;
  right: 2.5rem !important;
}

[dir="rtl"] .right-20 {
  right: auto !important;
  left: 5rem !important;
}

[dir="rtl"] .right-1\/4 {
  right: auto !important;
  left: 25% !important;
}

[dir="rtl"] .left-1\/4 {
  left: auto !important;
  right: 25% !important;
}

/* Any class with negative offset prefix */
[dir="rtl"] [class*="-left-"] {
  left: auto !important;
  right: 1rem !important;
}

[dir="rtl"] [class*="-right-"] {
  right: auto !important;
  left: 1rem !important;
}

/* Center-translate stays centered */
[dir="rtl"] .-translate-x-1\/2 {
  --tw-translate-x: 50% !important;
}

/* ----- News date badge ----- */
[dir="rtl"] .news-date-badge {
  left: auto !important;
  right: 15px !important;
}

/* ----- About section: floating widget on the inside ----- */
[dir="rtl"] #about .glass-panel .absolute {
  left: auto !important;
  right: 1rem !important;
}

/* ----- Testimonial avatar margin ----- */
[dir="rtl"] .testimonial-avatar {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

/* ----- Logo/brand spacing in navbar + footer ----- */
[dir="rtl"] #header-nav .h-12,
[dir="rtl"] footer .h-12 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

/* ----- Reveal animations: flip horizontal direction ----- */
[dir="rtl"] .reveal-left {
  transform: translateX(50px);
}

[dir="rtl"] .reveal-right {
  transform: translateX(-50px);
}

[dir="rtl"] .reveal-left.reveal-active,
[dir="rtl"] .reveal-right.reveal-active {
  transform: translateX(0);
}

/* IntersectionObserver-driven slide reveals */
[dir="rtl"] .io-slide-l {
  transform: translateX(60px);
}

[dir="rtl"] .io-slide-r {
  transform: translateX(-60px);
}

[dir="rtl"] .io-slide-l.is-in-view,
[dir="rtl"] .io-slide-r.is-in-view {
  transform: none;
}

/* ----- Hero floating decorative shapes ----- */
[dir="rtl"] #hero .absolute.top-1\/4.left-10 {
  left: auto !important;
  right: 2.5rem !important;
}

[dir="rtl"] #hero .absolute.bottom-1\/4.right-20 {
  right: auto !important;
  left: 5rem !important;
}

/* ----- Splash mark spacing tweak ----- */
[dir="rtl"] .hero-splash__mark {
  letter-spacing: .15em;
}

/* ----- Form fields: align right ----- */
[dir="rtl"] .floating-input-group input,
[dir="rtl"] .floating-input-group textarea,
[dir="rtl"] .floating-input-group select {
  text-align: right;
}

/* ----- Cards inside rows keep equal height in RTL without changing
   the column display (column flex would break Bootstrap's grid math).
   We only force the inner panel to fill the column height. ----- */
[dir="rtl"] section .row>[class*="col-"]>.glass-panel,
[dir="rtl"] section .row>[class*="col-"]>.h-100 {
  height: 100%;
}

/* RTL section overflow — only the hero crops (background video layers);
   every other section must stay fully visible so nothing gets clipped. */
[dir="rtl"] section[id]:not(#hero),
[dir="rtl"] footer {
  overflow: visible;
}

[dir="rtl"] .hero-section {
  overflow: hidden;
}

/* Defensive: never let .row exceed container width visually in RTL */
[dir="rtl"] .container {
  max-width: 100%;
}

[dir="rtl"] .container>.row {
  width: auto;
  max-width: 100%;
}

/* Make sure the slide-reveal columns can never reach beyond viewport
   while in their initial transformed state on small/tablet screens */
@media (max-width: 1024px) {
  [dir="rtl"] .io-slide-l {
    transform: translateX(20px);
  }

  [dir="rtl"] .io-slide-r {
    transform: translateX(-20px);
  }
}

/* ----- Dropdown menu opens to the correct side ----- */
[dir="rtl"] .primary-nav .dropdown-menu {
  text-align: right;
}

/* ----- Buttons with icons: gap reversed via flex direction ----- */
[dir="rtl"] .btn .bi-arrow-right {
  transform: scaleX(-1);
}

/* ----- Footer column widths stay correct ----- */
[dir="rtl"] footer .row>[class*="col-"] {
  text-align: right;
}

[dir="rtl"] footer .text-md-start {
  text-align: right !important;
}

/* ----- Modal close (X) button sits at the far left in Arabic ----- */
[dir="rtl"] .modal-header .btn-close {
  margin: -0.5rem auto -0.5rem -0.5rem;
}