/* ==========================================================================
   Butran College — RTL (Right-to-Left) Stylesheet
   Applied only to /ar/*.html pages
   Overrides directional CSS for Arabic layout
   ========================================================================== */

/* Font override for Arabic */
:root[dir="rtl"] {
  --font-body: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', system-ui, -apple-system, sans-serif;
  --font-head: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', system-ui, -apple-system, sans-serif;
}

/* ========== Directional Text & Layout ========== */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] span {
  text-align: inherit;
}

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

/* ========== Topbar & Navigation ========== */
.header-topbar {
  direction: rtl;
}

.topbar-inner {
  flex-direction: row-reverse;
}

.topbar-links {
  flex-direction: row-reverse;
}

.header-main-inner {
  flex-direction: row-reverse;
}

.main-nav {
  margin-left: 0;
  margin-right: auto;
}

/* ========== Navigation & Dropdowns ========== */
.dropdown {
  left: auto;
  right: 0;
}

.dropdown li a::before {
  left: auto;
  right: 14px;
}

.dropdown li a:hover {
  padding-left: 0;
  padding-right: 34px;
}

.mega-menu {
  direction: rtl;
}

.mega-col {
  text-align: right;
}

.mega-col ul li a {
  padding-right: 0;
  padding-left: 0;
}

.mega-col ul li a:hover {
  padding-left: 0;
  padding-right: 6px;
}

/* ========== Section Head ========== */
.section-head {
  flex-direction: row-reverse;
}

/* ========== Mobile Off-Canvas Menu ========== */
.mobile-menu {
  right: auto;
  left: -400px;
  direction: rtl;
}

.mobile-menu.active {
  left: 0;
  right: auto;
}

.mobile-menu-head {
  flex-direction: row-reverse;
}

.mobile-nav ul {
  text-align: right;
}

.mobile-menu-foot {
  text-align: right;
}

/* ========== Hero Slider ========== */
.hero-nav {
  right: auto;
  left: 60px;
}
/* Flip nav arrow icons for RTL */
.hero-nav .hero-prev::after { content: "\f105"; }
.hero-nav .hero-next::after { content: "\f104"; }

/* Testimonials: sweep the accent bar from the right in RTL */
.testi-card::before { transform-origin: right; }

.nav-menu > li > a::after {
  left: auto;
  right: 16px;
}

/* ========== Card Hover Animations ========== */
.btn:hover i {
  transform: translateX(-4px);
}

.program-link:hover i {
  transform: translateX(-5px);
}

.faculty-link:hover i {
  transform: translateX(-5px);
}

.event-link:hover i {
  transform: translateX(-5px);
}

.plist-link:hover i {
  transform: translateX(-5px);
}

/* ========== Border Dividers ========== */
.hero-pill {
  border-right: none;
  border-left: 1px solid var(--color-border-light);
}

.hero-pill:last-child {
  border-left: none;
}

.stat-card {
  border-right: none;
  border-left: 1px solid var(--color-border-light);
}

.stat-card:last-child {
  border-left: none;
}

/* ========== Testimonials ========== */
.testi-quote {
  right: auto;
  left: 34px;
}

/* ========== Breadcrumbs & Separators ========== */
.breadcrumb li::after {
  content: "\f104";
}

.footer-links a:hover::before {
  content: "\f104";
  left: auto;
  right: -6px;
}

.sidebar-nav li a::after {
  content: "\f104";
}

/* ========== Timeline ========== */
.timeline::before {
  left: auto;
  right: 50%;
}

.tl-item:nth-child(odd) {
  left: auto;
  right: 0;
  text-align: left;
}

.tl-item:nth-child(even) {
  left: auto;
  right: 50%;
  text-align: right;
}

.tl-item:nth-child(odd)::before {
  right: auto;
  left: -9px;
}

.tl-item:nth-child(even)::before {
  left: auto;
  right: -9px;
}

/* ========== Timeline Mobile Collapse ========== */
@media (max-width: 768px) {
  .tl-item {
    left: auto !important;
    right: 0 !important;
    text-align: right !important;
  }

  .tl-item::before {
    left: auto !important;
    right: 0 !important;
  }
}

/* ========== Blockquote ========== */
.prose blockquote {
  border-left: none;
  border-right: 4px solid var(--color-secondary);
  border-radius: 14px 0 0 14px;
  padding-left: 0;
  padding-right: 20px;
}

/* ========== Tables ========== */
.price-table th,
.price-table td {
  text-align: right;
}

.price-table .price-emphasis {
  font-weight: 700;
}

/* ========== FAQ ========== */
.faq-q {
  text-align: right;
}

/* ========== Footer ========== */
.footer-top {
  direction: rtl;
}

.footer-widget {
  text-align: right;
}

.footer-bottom {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.footer-bottom-links {
  flex-direction: row-reverse;
}

/* ========== Sidebar Layout ========== */
.page-layout {
  direction: rtl;
}

.page-layout.right {
  grid-template-columns: 1fr 340px;
}

.sidebar {
  margin-right: 30px;
  margin-left: 0;
}

/* ========== Feature Cards ========== */
.feature-cards {
  direction: rtl;
}

.f-icon {
  margin-right: 0;
  margin-left: auto;
}

/* ========== Blog List Item ========== */
.news-body {
  padding: 10px 0 10px 34px;
}

/* ========== Animations ========== */
[data-reveal="left"] {
  transform: translateX(60px);
}

[data-reveal="right"] {
  transform: translateX(-60px);
}

/* ========== Responsive Breakpoints ========== */

@media (max-width: 1366px) {
  .hero-nav {
    left: 30px;
  }
}

@media (max-width: 1024px) {
  .stat-card {
    border-left: none;
    border-bottom: 1px solid var(--color-border-light);
  }

  .hero-pill {
    border-left: none;
    border-bottom: 1px solid var(--color-border-light);
  }
}

@media (max-width: 768px) {
  .hero-pill {
    border-left: none;
    border-bottom: 1px solid var(--color-border-light);
  }

  .stat-card {
    border-left: none;
    border-bottom: 1px solid var(--color-border-light);
  }
}

@media (max-width: 480px) {
  .about-thumb-2 {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
  }
}