/* ==========================================================================
   AL-FANAR ENGINEERING - RTL Overrides for Arabic
   ========================================================================== */

/* Base Direction */
html[dir="rtl"] body {
    font-family: var(--font-ar);
    direction: rtl;
    text-align: right;
}

/* Navbar */
html[dir="rtl"] .navbar__link.active::after {
    left: auto;
    right: 18px;
}

/* Buttons */
html[dir="rtl"] .btn:hover .btn-icon {
    transform: translateX(-4px);
}

/* Footer */
html[dir="rtl"] .footer__heading::after {
    left: auto;
    right: 0;
}

html[dir="rtl"] .footer__links a:hover {
    padding-left: 0;
    padding-right: 6px;
}

/* Service Card */
html[dir="rtl"] .service-card::before {
    transform-origin: right;
}

/* Project Card */
html[dir="rtl"] .project-card::before {
    left: auto;
    right: 0;
}

/* Contact Info Card */
html[dir="rtl"] .contact-info-card:hover {
    transform: translateX(-6px);
}

/* Reveal Animations Direction */
html[dir="rtl"] .reveal-left {
    transform: translateX(50px);
}

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

/* Flip all chevron/arrow SVGs in buttons and links to point Left */
html[dir="rtl"] .btn-icon svg,
html[dir="rtl"] .service-card__link svg,
html[dir="rtl"] .navbar__lang svg {
    transform: scaleX(-1);
}

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

/* Hero Circles - Mirror */
html[dir="rtl"] .hero__circle--1 {
    right: auto;
    left: -100px;
}

html[dir="rtl"] .hero__circle--2 {
    right: auto;
    left: -50px;
}

html[dir="rtl"] .hero__circle--3 {
    left: auto;
    right: 10%;
}

/* Page Hero Circles */
html[dir="rtl"] .page-hero__circle--1 {
    right: auto;
    left: -80px;
}

html[dir="rtl"] .page-hero__circle--2 {
    left: auto;
    right: 10%;
}

/* Breadcrumb */

/* Timeline */
html[dir="rtl"] .timeline {
    padding-left: 0;
    padding-right: 40px;
}

html[dir="rtl"] .timeline::before {
    left: auto;
    right: 15px;
}

html[dir="rtl"] .timeline-item {
    padding-left: 0;
    padding-right: var(--space-2xl);
}

html[dir="rtl"] .timeline-item::before {
    left: auto;
    right: -32px;
}

/* Project Card Meta */
html[dir="rtl"] .project-card__meta-item {
    flex-direction: row-reverse;
}

/* Project Card Category */
html[dir="rtl"] .project-card__category {
    flex-direction: row-reverse;
}

/* Service Card Link */
html[dir="rtl"] .service-card__link {
    flex-direction: row-reverse;
}

html[dir="rtl"] .service-card__link:hover {
    gap: 14px;
}

/* Image positions */
html[dir="rtl"] .about-preview__image-float {
    right: auto;
    left: -20px;
}

html[dir="rtl"] .about-preview__circle-deco {
    left: auto;
    right: -30px;
}

/* Mobile Menu */
@media (max-width: 768px) {
    html[dir="rtl"] .navbar__menu {
        right: auto;
        left: -100%;
    }

    html[dir="rtl"] .navbar__menu.active {
        left: 0;
        right: auto;
    }

    /* About Preview Mobile RTL */
    html[dir="rtl"] .about-preview__image-wrap::before {
        left: auto;
        right: -15px;
        border-radius: 20px 60px 60px 20px;
    }
    
    html[dir="rtl"] .about-preview__image-float {
        right: auto;
        left: -10px;
    }
}

/* ==========================================================================
   PROFILE REDESIGN RTL OVERRIDES (Massive Curves & Asymmetric Masks)
   ========================================================================== */

/* Hero Redesign RTL */
html[dir="rtl"] .hero__bg-split {
    left: auto;
    right: 0;
}

html[dir="rtl"] .hero__bg-split::after {
    right: auto;
    left: -100px;
    border-radius: 50% 0 0 50% / 30% 0 0 30%;
}

html[dir="rtl"] .hero__image-wrap {
    right: auto;
    left: 0;
}

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

html[dir="rtl"] .hero__swoosh-mask img,
html[dir="rtl"] .hero__swoosh-mask::after {
    transform: scaleX(-1);
}

html[dir="rtl"] .hero__circle-accent {
    left: auto;
    right: -150px;
}

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

/* About Preview RTL */
html[dir="rtl"] .about-preview__text {
    order: -1;
}

html[dir="rtl"] .about-preview__image-wrap::before {
    left: auto;
    right: -50px;
    border-radius: 0 50% 50% 0;
}

html[dir="rtl"] .about-preview__image-main {
    border-radius: 400px 400px 40px 40px; 
}

/* Card Asymmetry Reversals */
html[dir="rtl"] .service-card,
html[dir="rtl"] .project-card,
html[dir="rtl"] .contact-info-card {
    border-radius: 0 40px 0 40px;
}

html[dir="rtl"] .service-card::before {
    left: auto;
    right: 0;
    transform-origin: right;
    background: linear-gradient(-90deg, var(--color-red), var(--color-navy));
}

html[dir="rtl"] .value-card {
    border-radius: 40px 0 40px 0;
}

/* Inner Page Hero RTL */
html[dir="rtl"] .page-hero::before {
    right: auto;
    left: -10%;
    border-radius: 0 0 100% 0;
}

html[dir="rtl"] .page-hero__bg {
    left: auto;
    right: 0;
    clip-path: ellipse(100% 100% at 100% 0%);
}

/* ==========================================================================
   PROFILE SERVICES MASKS RTL FLIPS
   ========================================================================== */

/* Sweep + Angle RTL */
html[dir="rtl"] .brochure-sweep--red-bottom {
    left: auto;
    right: -10px;
    clip-path: ellipse(100% 100% at 100% 100%);
}
html[dir="rtl"] .service-detail__grid--reverse .brochure-sweep--red-bottom {
    right: auto;
    left: -10px;
    clip-path: ellipse(100% 100% at 0% 100%);
}

html[dir="rtl"] .brochure-cut--navy-angle {
    right: auto;
    left: -10px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
html[dir="rtl"] .service-detail__grid--reverse .brochure-cut--navy-angle {
    left: auto;
    right: -10px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Offset Arch Backdrop RTL */
html[dir="rtl"] .brochure-backdrop--arch-navy {
    left: auto;
    right: -20px;
}
html[dir="rtl"] .service-detail__grid--reverse .brochure-backdrop--arch-navy {
    right: auto;
    left: -20px;
}

/* Drop Mask & Outline RTL */
html[dir="rtl"] .service-image--drop {
    border-radius: 0 50% 50% 50% / 0 50% 50% 50%;
}
html[dir="rtl"] .service-detail__grid--reverse .service-image--drop {
    border-radius: 50% 0 50% 50% / 50% 0 50% 50%;
}

html[dir="rtl"] .brochure-outline--red {
    left: auto;
    right: -15px;
    border-radius: 0 50% 50% 0 / 0 50% 50% 0;
}
html[dir="rtl"] .service-detail__grid--reverse .brochure-outline--red {
    right: auto;
    left: -15px;
    border-radius: 50% 0 0 50% / 50% 0 0 50%;
}