/* ===================================
   RTL (Right-to-Left) Stylesheet
   Arabic Language Support
   All rules scoped under html[dir="rtl"]
   =================================== */

/* === Language Switcher Button (always visible, not RTL-scoped) === */
.lang-switch-btn {
    background: linear-gradient(135deg, var(--primary-color, #2E7D8C), var(--primary-dark, #1a4f5a));
    color: white;
    border: none;
    padding: 0.5rem 1.2rem;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.lang-switch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(46, 125, 140, 0.3);
}

.nav-lang-switcher {
    display: flex;
    align-items: center;
}


/* =========================================================
   RTL-SCOPED RULES - Only apply when dir="rtl"
   ========================================================= */

/* === 1. Arabic Font Family === */
html[dir="rtl"] body {
    font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Cairo', 'Playfair Display', Georgia, serif;
}


/* === 2. Navigation === */

/* Nav brand margin */
html[dir="rtl"] .nav-brand h2 {
    margin-right: 0;
    margin-left: 1.5rem;
}

html[dir="rtl"] .nav-brand-inline {
    padding: 0.5rem 0 0.5rem 1rem;
}

/* User section: swap margin-left: auto to margin-right: auto */
html[dir="rtl"] .nav-user-section {
    margin-left: 0;
    margin-right: auto;
}

/* User dropdown: text-align right and position */
html[dir="rtl"] .nav-user-section .user-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .nav-user-section .user-dropdown a,
html[dir="rtl"] .nav-user-section .user-dropdown button {
    text-align: right;
}

/* Dropdown menu positioning */
html[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
}


/* === 3. Hero Section === */

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

html[dir="rtl"] .hero-content {
    direction: rtl;
}

html[dir="rtl"] .hero-image {
    order: 2;
}

html[dir="rtl"] .hero-text {
    order: 1;
}

html[dir="rtl"] .hero-buttons {
    justify-content: flex-start;
}

html[dir="rtl"] .credentials-strip {
    justify-content: flex-start;
}


/* === 4. About Section === */

/* Mission statement border swap */
html[dir="rtl"] .mission-statement {
    border-left: none;
    border-right: 5px solid var(--secondary-color);
}

html[dir="rtl"] .mission-statement i {
    left: auto;
    right: 1.5rem;
}

html[dir="rtl"] .mission-statement p {
    padding-left: 0;
    padding-right: 3rem;
}


/* === 5. Timeline (Experience, Gallery, Certificates) === */

/* Center line */
/*
 * RTL Timeline: Mirror the alternating left/right layout
 * LTR: odd=left, even=right (via margin-left:auto)
 * RTL: odd=right, even=left (via margin-right:auto on odd, reset on even)
 *
 * In RTL, block children naturally start from the right.
 * So odd items (width:50%) sit on the right side automatically.
 * Even items need margin-right:auto to push them to the left.
 */

html[dir="rtl"] .timeline::before {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Timeline marker stays centered */
html[dir="rtl"] .timeline-marker {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Odd items: sit on the right side naturally, content pushed toward center */
html[dir="rtl"] .timeline-item {
    justify-content: flex-start; /* content toward center line (left in RTL) */
    margin-left: 0;
    margin-right: 0; /* no auto margin, sits on the right naturally */
}

/* Even items: push to the left side */
html[dir="rtl"] .timeline-item:nth-child(even) {
    justify-content: flex-end; /* content toward center line (right in RTL) */
    margin-left: 0;
    margin-right: auto; /* push to the left in RTL */
}

/* Odd items content: space between content and center line */
html[dir="rtl"] .timeline-content {
    margin-right: 0;
    margin-left: 3rem; /* gap toward center */
}

/* Even items content: space between content and center line */
html[dir="rtl"] .timeline-item:nth-child(even) .timeline-content {
    margin-left: 0;
    margin-right: 3rem; /* gap toward center */
}

/* Timeline list items */
html[dir="rtl"] .timeline-content ul li {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .timeline-content ul li::before {
    left: auto;
    right: 0;
    content: '\25C2'; /* Left-pointing triangle for RTL */
}


/* === 6. Project Cards === */

html[dir="rtl"] .project-card ul li {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .project-card ul li::before {
    left: auto;
    right: 0;
}


/* === 7. Publications === */

/* Publication item border swap */
html[dir="rtl"] .publication-item {
    border-left: none;
    border-right: 4px solid var(--primary-color);
}

html[dir="rtl"] .publication-item:hover {
    transform: translateX(-5px);
}

/* Conference item */
html[dir="rtl"] .conference-item {
    flex-direction: row-reverse;
}


/* === 8. Education & Certifications === */

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

html[dir="rtl"] .education-item:hover {
    transform: translateX(-5px);
}

/*
 * RTL Cert Timeline: Same alternating pattern as experience timeline
 * Odd items on right, even items on left (mirrored from LTR)
 */
html[dir="rtl"] .cert-timeline::before {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

html[dir="rtl"] .cert-marker {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Odd items: sit on the right naturally in RTL */
html[dir="rtl"] .cert-item {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
}

/* Even items: push to left side */
html[dir="rtl"] .cert-item:nth-child(even) {
    justify-content: flex-end;
    margin-left: 0;
    margin-right: auto;
}

/* Odd items content: border on right, margin toward center (left) */
html[dir="rtl"] .cert-content {
    margin-right: 0;
    margin-left: 4rem;
    border-left: none;
    border-right: 5px solid var(--primary-color);
}

/* Even items content: border on left, margin toward center (right) */
html[dir="rtl"] .cert-item:nth-child(even) .cert-content {
    margin-left: 0;
    margin-right: 4rem;
    border-right: none;
    border-left: 5px solid var(--primary-color);
}

/* Featured certs: swap border colors */
html[dir="rtl"] .cert-item.featured .cert-content {
    border-right-color: var(--secondary-color);
    border-left: none;
}

html[dir="rtl"] .cert-item.featured:nth-child(even) .cert-content {
    border-left-color: var(--secondary-color);
    border-right: none;
}

/* Category badge position swap */
html[dir="rtl"] .cert-category {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .cert-item:nth-child(even) .cert-category {
    left: auto;
    right: 20px;
}

html[dir="rtl"] .cert-item:hover {
    transform: translateX(-5px);
}


/*
 * RTL Gallery Timeline: Same alternating pattern
 * Odd items on right, even items on left (mirrored from LTR)
 */
html[dir="rtl"] .gallery-timeline::before {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

html[dir="rtl"] .gallery-marker {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Odd items: sit on the right naturally in RTL */
html[dir="rtl"] .gallery-item {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
}

/* Even items: push to left side */
html[dir="rtl"] .gallery-item:nth-child(even) {
    justify-content: flex-end;
    margin-left: 0;
    margin-right: auto;
}

/* Odd items content: margin toward center (left) */
html[dir="rtl"] .gallery-content {
    margin-right: 0;
    margin-left: 4rem;
}

/* Even items content: margin toward center (right) */
html[dir="rtl"] .gallery-item:nth-child(even) .gallery-content {
    margin-left: 0;
    margin-right: 4rem;
}


/* === 9. Service Cards === */

html[dir="rtl"] .service-card ul li {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .service-card ul li::before {
    left: auto;
    right: 0;
}


/* === 10. Contact Section === */

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

html[dir="rtl"] .contact-item:hover {
    transform: translateX(-5px);
}

/* Form inputs and labels */
html[dir="rtl"] .form-group label {
    text-align: right;
}

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

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


/* === 11. Footer === */

html[dir="rtl"] .footer-section ul li a:hover {
    padding-left: 0;
    padding-right: 5px;
}


/* === 12. Fixed Positioned Elements === */

/* Scroll to top button */
html[dir="rtl"] .scroll-top {
    right: auto;
    left: 2rem;
}

/* Chatbot container */
html[dir="rtl"] .chatbot-container {
    right: auto;
    left: 20px;
}

/* Chatbot window */
html[dir="rtl"] .chatbot-window {
    right: auto;
    left: 20px;
}

/* Chatbot message bubbles */
html[dir="rtl"] .chatbot-message.user .message-bubble {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .chatbot-message.bot .message-bubble {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 4px;
}

html[dir="rtl"] .chatbot-message.user .message-bubble {
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 4px;
}

html[dir="rtl"] .chatbot-message.user .message-time {
    text-align: left;
}

/* Typing indicator */
html[dir="rtl"] .typing-indicator {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 4px;
}


/* === 13. Directional Icons - Mirror for RTL === */

html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left {
    transform: scaleX(-1);
}

/* Don't mirror dropdown arrows (they rotate, not flip) */
html[dir="rtl"] .dropdown-arrow.fa-chevron-down {
    transform: none;
}

html[dir="rtl"] .nav-dropdown:hover > .nav-link .dropdown-arrow {
    transform: rotate(180deg);
}


/* === 14. Section Header === */

html[dir="rtl"] .section-header {
    text-align: center;
}


/* === 15. UNFCCC Badge === */

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


/* === 16. Cookie Consent === */

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

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


/* === 17. Admin Panel (admin.html inline styles) === */

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

html[dir="rtl"] .admin-header > div {
    text-align: right;
}

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

/* Status badge margin swap */
html[dir="rtl"] .status-badge {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Pending badge margin swap */
html[dir="rtl"] .pending-badge {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Admin comment card border swap */
html[dir="rtl"] .admin-comment-card {
    border-left: none;
    border-right: 4px solid #ddd;
}

html[dir="rtl"] .admin-comment-card.status-pending {
    border-left: none;
    border-right-color: #f39c12;
}

html[dir="rtl"] .admin-comment-card.status-approved {
    border-left: none;
    border-right-color: #27AE60;
}

html[dir="rtl"] .admin-comment-card.status-rejected {
    border-left: none;
    border-right-color: #E74C3C;
}

/* Admin comment meta icon margin */
html[dir="rtl"] .admin-comment-meta i {
    margin-right: 0;
    margin-left: 0.25rem;
}

/* Article item layout */
html[dir="rtl"] .article-item {
    flex-direction: row-reverse;
}

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


/* === 18. Editor (editor.css) === */

/* Remove button position swap */
html[dir="rtl"] .btn-remove-image {
    left: auto;
    right: 10px;
}

/* Back to articles hover */
html[dir="rtl"] .back-to-articles:hover {
    transform: translateX(-5px);
}


/* === 19. Lightbox zoom icon overlay === */

html[dir="rtl"] .timeline-item::after,
html[dir="rtl"] .cert-item::after {
    right: auto;
    left: 20px;
}


/* === 20. Conference item layout === */

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


/* =========================================================
   RESPONSIVE - RTL ADJUSTMENTS
   ========================================================= */

/* === Tablet (max-width: 992px) === */
@media (max-width: 992px) {
    /* Timeline responsive: single column from the right side */
    html[dir="rtl"] .timeline::before {
        left: auto;
        right: 30px;
        transform: none;
    }

    html[dir="rtl"] .timeline-item {
        width: 100%;
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 70px;
    }

    html[dir="rtl"] .timeline-item:nth-child(even) {
        margin-right: 0;
    }

    html[dir="rtl"] .timeline-marker {
        left: auto;
        right: 30px;
        transform: translateX(50%);
    }

    html[dir="rtl"] .timeline-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Cert-timeline responsive: single column from right side */
    html[dir="rtl"] .cert-timeline::before {
        left: auto;
        right: 30px;
        transform: none;
    }

    html[dir="rtl"] .cert-item {
        width: 100%;
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 70px;
    }

    html[dir="rtl"] .cert-item:nth-child(even) {
        margin-right: 0;
    }

    html[dir="rtl"] .cert-marker {
        left: auto;
        right: 30px;
        transform: translateX(50%);
    }

    html[dir="rtl"] .cert-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-right: 5px solid var(--primary-color) !important;
        border-left: none !important;
    }

    html[dir="rtl"] .cert-item:nth-child(even) .cert-content {
        border-right: 5px solid var(--primary-color) !important;
        border-left: none !important;
    }

    /* Gallery-timeline responsive: single column from right side */
    html[dir="rtl"] .gallery-timeline::before {
        left: auto;
        right: 30px;
        transform: none;
    }

    html[dir="rtl"] .gallery-item {
        width: 100%;
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 70px;
    }

    html[dir="rtl"] .gallery-item:nth-child(even) {
        margin-right: 0;
    }

    html[dir="rtl"] .gallery-marker {
        left: auto;
        right: 30px;
        transform: translateX(50%);
    }

    html[dir="rtl"] .gallery-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* === Mobile (max-width: 768px) === */
@media (max-width: 768px) {
    /* Mobile menu: slide from right instead of left */
    html[dir="rtl"] .nav-menu {
        left: auto;
        right: -100%;
    }

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

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

    /* Dropdown border swap in mobile */
    html[dir="rtl"] .dropdown-menu {
        border-left: none;
        border-right: 3px solid var(--primary-color);
        margin-left: 0;
        margin-right: 1rem;
    }

    /* Nav user section */
    html[dir="rtl"] .nav-user-section {
        margin-right: 0;
    }

    /* Hero section mobile */
    html[dir="rtl"] .hero-text {
        text-align: center;
    }

    /* Cookie content mobile */
    html[dir="rtl"] .cookie-content {
        flex-direction: column;
        text-align: center;
    }

    html[dir="rtl"] .cookie-content p {
        text-align: center;
    }

    /* Chatbot window mobile */
    html[dir="rtl"] .chatbot-window {
        right: 20px;
        left: 20px;
    }

    /* Admin header mobile */
    html[dir="rtl"] .admin-header {
        flex-direction: column;
        text-align: center;
    }

    html[dir="rtl"] .admin-header > div {
        text-align: center;
    }

    /* Admin article item mobile */
    html[dir="rtl"] .article-item {
        flex-direction: column;
        align-items: flex-end;
    }
}

@media (max-width: 480px) {
    /* Chatbot full-width mobile */
    html[dir="rtl"] .chatbot-window {
        right: 0;
        left: 0;
    }

    html[dir="rtl"] .chatbot-button {
        bottom: 15px;
        right: auto;
        left: 15px;
    }
}