/* ============================================
   LKS - RTL Specific Overrides
   Applied when body has .rtl class
   ============================================ */

/* === General RTL Adjustments === */
body.rtl {
    direction: rtl;
    text-align: right;
}

/* === Navigation RTL === */
body.rtl .nav {
    flex-direction: row-reverse;
}

body.rtl .nav-links {
    flex-direction: row-reverse;
}

body.rtl .nav-link::after {
    left: auto;
    right: 0;
}

/* === Buttons with Icons === */
body.rtl .btn {
    flex-direction: row-reverse;
}

/* === About Section === */
body.rtl .about-image::before {
    right: auto;
    left: -20px;
}

/* Reverse grid order for RTL */
body.rtl .about-grid {
    direction: rtl;
}

/* === Footer RTL === */
body.rtl .footer-contact li {
    flex-direction: row-reverse;
}

body.rtl .footer-contact svg {
    margin-top: 2px;
}

/* === Flip Decorative Elements === */
body.rtl .admissions-cta::before {
    right: auto;
    left: -20%;
}

/* === Section Title Underline (centered, no change needed) === */

/* === Mobile Menu RTL Slide Direction === */
@media (max-width: 992px) {
    body.rtl .mobile-nav {
        transform: translateX(-100%);
    }

    body.rtl .mobile-nav.active {
        transform: translateX(0);
    }
}

/* === Icons that should flip in RTL === */
body.rtl .icon-arrow-right {
    transform: scaleX(-1);
}

body.rtl .icon-chevron-right {
    transform: scaleX(-1);
}

/* === List Items === */
body.rtl .footer-links li,
body.rtl .footer-contact li {
    text-align: right;
}

/* === Form Elements (if added later) === */
body.rtl input,
body.rtl textarea,
body.rtl select {
    text-align: right;
}

body.rtl input::placeholder,
body.rtl textarea::placeholder {
    text-align: right;
}

/* === Cards maintain center alignment === */
body.rtl .program-card,
body.rtl .feature-card {
    text-align: center;
}

/* === Hero stays centered === */
body.rtl .hero-content {
    text-align: center;
}

/* === Social Links (no change, flex handles it) === */

/* === Footer Bottom RTL === */
body.rtl .footer-bottom {
    flex-direction: row-reverse;
}

@media (max-width: 640px) {
    body.rtl .footer-bottom {
        flex-direction: column;
    }
}